|
Responsive design techniques for tables
|
|
|
Email developers have been coding responsive emails for a few years now, there are however still many arguments, topics and discussions on the many ways of going about it and still room for improvements.
One of the difficulties we encounter with coding responsive email is table data.
Why is it tricky you may ask? A table consists of information in cells that can't be broken up because then it wouldn't make sense anymore, so that leaves us with the option of simply shrinking the table. This will however look like a mess if there is lots of text in each cell.
I have provided some working examples below. To really experience what I am illustrating, please switch to a desktop, so that you can play with the size of the browser window to see the effect of the responsive design.
Desktop view
|
|
|
Product
|
|
QTY
|
|
UNIT PRICE
|
|
TOTAL COST
|
|
|
|
|
Product name
Article number :12345saewr
|
|
2
|
|
0.00
|
|
0.00
|
|
|
|
|
Product name
Article number :12345saewr
|
|
2
|
|
0.00
|
|
0.00
|
|
|
|
|
While the table looks great in Desktop view, it looks very cramped in responsive design. (Resize the browser window to see Responsive version)
Responsive version
While doing research I found an interesting CSS tag, and a few very interesting uses for it.
The tag I am talking about is ::before or ::after tags.
With these tags, one can easily insert content using CSS into my template.
And we can manipulate headings and apply them to a responsive table design.
The below example shows the same table with a few headings inserted as well as broken up tables.
Desktop view
|
|
|
QTY
|
|
UNIT PRICE
|
|
TOTAL COST
|
|
|
|
Product name
Article number :12345saewr
|
|
|
|
Product name
Article number :12345saewr
|
|
|
|
In the above example, we hid the desktop table headings and broke the table into two parts, one main one with content description and another table with the rest of the columns.
Use these four before tags to easily insert new headings using CSS
.heading1::before {content: "Product"; }
.heading2::before {content: "QTY"; }
.heading3::before {content: "UNIT PRICE"; }
.heading4::before {content: "TOTAL COST"; }
And then I call the CSS in font tags
<font class="heading1"></font>
<font class="heading2"></font>
<font class="heading3"></font>
<font class="heading4"></font>
And add some styling to the headings
.heading1 { font-size: 16px; line-height: 24px; color: #666666; display:block; }
.heading2 { font-size: 16px; line-height: 24px; color: #666666; display:block; }
.heading3 { font-size: 16px; line-height: 24px; color: #666666; display:block; }
.heading4 { font-size: 16px; line-height: 24px; color: #666666; display:block; }
That is all the code I needed to creatively break down my table data into great looking and easy reading content on my Responsive version.
The above can be applied to many column tables and different designs.
BUT WAIT!!
Other uses:
1. Very easy way to insert images and or swap content around for responsive versions.
Consider the example below
Desktop view
|
|
|
Is this email not displaying correctly? View it online.
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis risus ac condimentum commodo. Quisque in nulla ut augue dictum finibus ac vel nibh. Donec efficitur arcu dolor, a aliquam velit luctus et. Proin malesuada quam nec faucibus dignissim. Quisque est nibh, euismod vel tellus elementum, accumsan auctor orci. Maecenas eleifend libero vel massa placerat cursus. In eget risus sit amet nisl imperdiet pellentesque. Suspendisse ut dui nec nunc venenatis elementum.
Maecenas commodo varius justo, in rutrum ante aliquet a. Integer quis bibendum lorem. Sed vitae magna et massa condimentum gravida. Nullam sed laoreet eros. In varius ipsum et urna consectetur venenatis. Maecenas ut quam erat. Vestibulum rutrum consequat mauris quis sollicitudin. Nam mollis gravida quam non interdum. Quisque porttitor venenatis tristique. In cursus ornare malesuada. Phasellus eu purus a elit malesuada pharetra. Maecenas condimentum, ligula ac dapibus viverra, nunc tortor sollicitudin turpis, et consectetur lacus dui in dui. Maecenas non consectetur diam, ac rhoncus augue. Praesent lacinia vitae dui vitae auctor. In non ullamcorper tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
|
|
|
What we have is a header of an email, as well as some copy content inside of the email.
By using the same principle of the ::before tag, we can easily insert an image and replace a desktop image with one that is suitable for our Responsive version (resize the browser window to look at the phone number image changing)
All we have to do is hide the desktop version and insert another font tag like this
<font class="callimg"></font>
Then add the CSS code like the below
.callimg::before {content: url(http:// img.striata.com/S triata/blog/2015/may/2015_05_21/c allMobi le_apr15.jpg) }
2. Another use for this is to reduce or replace content for the responsive version. For example, we can have a very long newsletter with lots of content like the above example, and replace it with a shorter version, or with content that is more relevant on a mobile phone. (resize the browser window to look at the copy content changing in the above example)
In order to achieve content swapping, we can use CSS below
.copyMobile::before {content: "HERE IS MY SMALLER MOBILE COPY HERE IS MY SMALLER MOBILE COPY HERE IS MY SMALLER MOBILE COPY HERE IS MY SMALLER MOBILE COPY"; }
We then hide the desktop copy and insert an empty font tag and call it "copyMobile" class.
It's that simple!
Conclusion
The above has been tested thoroughly in different environments.
I'm certain there are many more uses we can find and develop, but for now I'm quite happy not to have to hide or resize tables for mobile devices.
Hopefully this will lessen the frustration when dealing with tables in responsive design and a bit less of this:
Need help with responsive design? We can optimize your emails for all devices...
|
|
|