Fluid design uses percentage for widths unlike static design, thus making the columns in the layout relative to each other and scale according to the device size. Adaptive design uses media queries to adapt to every device. Style specific to every device is defined. The server will match the device and render content accordingly. Responsive design is thus the combination of fluid and adaptive design. It has a fluid width and adaptive content for any possible screen resolution.
Why responsive design?
With the increase in the usage of mobile phones, web designers started designing websites one for desktop users and one for mobile users. But with responsive design, one design could fit in any number of devices. Your email campaigns will have an appealing look in all devices and email clients at the sizes are relative and not fixed. You can also change content from device to device; decide on what content should be displayed to a desktop user or a mobile user. You can resize content and image, hide content, stack columns, rendering completely different view for various devices.
How are responsive emails designed?
Responsive design uses CSS and media queries to resize, show, hide or stack content based on size. Responsive email uses a media query; a set of styles that behave in a conditional rule. Styles are defined for various viewports - visible region in any device that varies with devices. Viewports are smaller on a mobile phone than on a computer. The basic rule for responsive design:
- If screen size is ‘x’; defined style is ‘a’.
- If screen size is ‘y’; defined style is ‘b’.
How does Zoho Campaigns help?
To design a responsive email with Zoho Campaigns you do not need to have any special coding skills. Zoho Campaigns’ pre-designed email templates are responsive to all devices and email clients. All you have to do is produce a great content and tweak these templates a bit to fit your brand in.
Zoho Campaigns’ inbox preview lets you test your emails for perfection. Look at your emails from your recipients’ perspective, learn if any formatting issue is overlooked, and ensure that your email looks beautiful and perfect to all your recipients using different email clients and devices.
A guide to build responsive design
In the recent past, we’ve witnessed a huge increase of internet enabled devices. The range of device screen size and resolution has widened. So, the email we design will definitely not look the same in all kinds of devices and email clients. Now that being so, it is as important to render our email equally good in all devices and email clients as is designing a creative one. We could easily accomplish this with responsive designing. Unlike static design, responsive design uses fluid widths for columns, definite style for various viewports and multiple breakpoints.
How is responsive design done?
Responsive design uses CSS and media queries to define style across devices. You can resize content and image, hide content, stack columns, rendering completely different view for various devices.
- CSS - Style language that defines how HTML elements are to be displayed.
- Media Query - Module that enables content rendering in various screens sizes and resolutions.
Fluid widths are defined at multiple viewports so the layout resizes to fit the window. Acts more like a simple if-else statements:
- If screen size is ‘x’; defined style is ‘a’;
- If screen size ranges from ‘y’ to ‘z’; defined style is ‘b’;
- else defined style is ‘c’;
General code (CSS and media query)
<style type=”text/css”>
@media only screen and (max-device-width: 480px) { /* mobile
specific css */
}
/* normal css*/
</style>
Media-Que:
<style type=”text/css”>
@media only screen and (max-device-width: 480px) {
table[class=container]
{
width: 100% !important;
}
table[class=container] table{ width: 100% !important;
}
table[class=container] table p{ text-align: center;
}
td[class=logo]{ text-align: center;
}
td[class=logo] img { width:195px;
}
}
table.container { width: 640px;
}
</style>
@media - acts like an if condition.
* !important - overides inline styles.
* meta name = viewport
meta tag - provides page info to the browser
viewport - users’ visible area of a webpage.
* content width = device - width
Sets the device width as the page width.
* initial-scale =1.0
Sets the initial zoom level of the page. Tells the browser how to render content.
HTML code:
<table width=”640” border=”0” cellpadding=”0” cellspacing=”0”
class=”container”>
<tr>
<td>
<table width=”320” border=”0” cellspacing=”0”
cellpadding=”10” align=”left”>
<tr>
<td class=”logo”>
<img src=”https://img.zohostatic.com/
campaigns/Oct_04_2016_campaignsplus/images/zohocampaigns.png”
width=”150”/>
</td>
</tr></table>
<table width=”320” border=”0” cellspacing=”0”
cellpadding=”10” align=”left”>
<tr>
<td>
<p><font size=”4”>Heading Goes Here</font></p>
</td>
</tr></table>
</td>
</tr>
<tr>
<td>
<table width=”320” border=”0” cellspacing=”0”
cellpadding=”20” align=”left”>
<tr>
<td bgcolor=”red”><p style=”text-align: center;”>
Left Column </p></td>
</tr>
</table>
<table width=”320” border=”0” cellspacing=”0”
cellpadding=”20” align=”left”>
<tr>
<td bgcolor=”blue”><p style=”text-align: center;”>
Right Column </p></td>
</tr>
</table>
</td>
</tr>
</table>
Full Code:
<html>
<head>
<meta content=”width=device-width” name=”viewport”>
<meta content=”text/html;charset=UTF-8” http-equiv=”ContentType”>
<title> SUGUMAR </title>
<style type=”text/css”>
@media only screen and (max-device-width: 480px) {
/* mobile-specific CSS styles go here */
table[class=container] {
width: 100% !important;
}
table[class=container] table{width: 100% !important;
}
table[class=container] table p{text-align: center;
}
td[class=logo]{text-align: center;
}
td[class=logo] img{width:195px;
}
}
/* regular CSS styles go here */
table.container {width: 640px;
}
</style>
</head>
<body bgcolor=”#ffffff” style=”margin:0; padding:0;fontfamily:Arial, Helvetica, sans-serif; font-size:12px;
color:#000000;”><center>
<table width=”640” border=”0” cellpadding=”0” cellspacing=”0”
class=”container”>
<tr>
<td>
<table width=”320” border=”0” cellspacing=”0”
cellpadding=”10” align=”left”>
<tr>
<td class=”logo”>
<img src=”https://img.zohostatic.com/
campaigns/Oct_04_2016_campaignsplus/images/zohocampaigns.png”
width=”150”/>
</td>
</tr></table>
<table width=”320” border=”0” cellspacing=”0”
cellpadding=”10” align=”left”>
<tr>
<td>
<p><font size=”4”>Heading Goes Here</font></p>
</td>
</tr></table>
</td>
</tr>
<tr>
<td>
<table width=”320” border=”0” cellspacing=”0”
cellpadding=”20” align=”left”>
<tr>
<td bgcolor=”red”><p style=”text-align:
center;”> Left Column </p></td>
</tr>
</table>
<table width=”320” border=”0” cellspacing=”0”
cellpadding=”20” align=”left”>
<tr>
<td bgcolor=”blue”><p style=”text-align:
center;”> Right Column </p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Design techniques
Various design techniques that could be adopted are,
1. Stacking content, images and videos
You can change the column orientation for the different viewports. For smaller/ screens, you can wrap text over images.
<html><head>
<style type=”text/css”>
@media only screen and (max-width: 480px){
table[class=contentInner]{
width:100% !important;
}
table[class=zpcolumns]{display:block !important;
width:100% !important;
}
td[class=zpcolumns]{
display:block !important;
width:100% !important;
}
img[class=zpImage]{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
td[class=txtsize]{
width:100% !important;
font-size:16px !important;
line-height:125% !important;
}
}
</style>
</head>
<body>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner” align=”center”><tbody><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” width=”50%” class=”zpcolumns”>
width=”600” style=”max-width: 600px;” class=”zpImage”>
</td>
</tr></tbody>
</table>
</td></tr><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” width=”50%”
class=”zpcolumns”>
<table border=”0” cellpadding=”10” cellspacing=”0”
width=”300” align=”left” class=”zpcolumns”>
<tbody><tr>
<td valign=”top” class=”txtsize”>
<p style=”
font-size: 12pt;
line-height: 22pt;
“>The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you.</p>
</td>
</tr>
</tbody></table>
<table border=”0” cellpadding=”10” cellspacing=”0” width=”300”
align=”left” class=”zpcolumns”>
<tbody><tr>
<td valign=”top” class=”txtsize”><p style=”
font-size: 12pt;
line-height: 22pt;
“>The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you.
</p></td>
</tr>
</tbody>
</table>
</td>
</tr></tbody>
</table>
</td></tr></tbody></table>
</body></html>
2. Progressive disclosure
To give a more appealing and minimal look in smaller screens, display the primary information and wrap the secondary information into clickable links, clicking which will show the extra details. This will save the reader from a cluttered email.
<html><head>
<style type=”text/css”>
@media only screen and (max-width: 480px){
table[class=contentInner]{
width:100% !important;
}
table[class=zpcolumns]{
display:block !important;
width:100% !important;
}
td[class=zpcolumns]{
display:block !important;
width:100% !important;
}
img[class=zpImage]{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
td[class=zpdesktop_txt]
{
display:none !important;
width:100% !important;
}
td[class=zcmobile_txt]
{
display:block !important;
width:100% !important;
}
td[class=zpmb_read]
{
display:block !important;
width:120px !important;
}
a[class=”zpmb_read”], a[class=”zpmb_less”]
{
display: block !important;
color: #fff !important;
background-color: #aaa;
border-radius: 20px;
padding: 0 8px;
text-decoration: none;
font-weight: bold;
font-size: 11px;
position: absolute;
top: 500px;
text-align: center;
width: 120px;
}
div[class=”zpdesktop_txt”]
{
display:none;
}
.zpmb_read:hover
{
visibility:hidden;
}
.zpmb_read:hover + .zpdesktop_txt,
.zpdesktop_txt:hover
{
display: block !important;
}
}
</style>
</head>
<body>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner” align=”center”><tbody><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” width=”50%” class=”zpcolumns”>
<img src=”http://zohopublic.com/zohocampaigns/zcnoimage.png” width=”600” style=”max-width: 600px;” class=”zpImage”>
</td>
</tr></tbody>
</table>
</td></tr><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” width=”100%”
class=”zpcolumns”>
<table border=”0” cellpadding=”10” cellspacing=”0”
width=”600” align=”left” class=”zpcolumns”>
<tbody><tr>
<td valign=”top” class=”zpdesktop_txt”>
<p style=”
font-size: 12pt;
line-height: 22pt;
“>The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you.The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you.The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane
tasks. The future is calling, and your desk can answer it for you. The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you.The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you.</p>
</td>
</tr>
<tr>
<td valign=”top” class=”zcmobile_txt” style=”
display: none;
“>
<p style=”
font-size: 12pt;
line-height: 22pt;
“>The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you.The world around us is busy and complex.</p>
</td>
</tr>
<tr>
<td valign=”top” class=”zpcolumns” style=”
display: none;
“>
<a href=”#” class=”zpmb_less” style=”
font-size: 12pt;
line-height: 22pt;
“>less...</a><a href=”#” class=”zpmb_read” style=”
font-size: 12pt;
line-height: 22pt;
“>Read More</a><div class=”zpdesktop_txt” style=”lineheight:22pt;padding:7px 15px;”>The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you. The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you.The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you.The world around us is busy and complex. We’ve made it that way, so why not make it easy
again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you. The world around us is busy and complex. We’ve made it that way, so why not make it easy again?Automate your office or workspace to free yourself from mundane tasks. The future is calling, and your desk can answer it for you.</div>
</td>
</tr>
</tbody></table>
</td>
</tr></tbody>
</table>
</td></tr></tbody></table>
</body>
</html>
3. Changing content from device to device
Prioritize the content and the call-to-actions that should be shown in various devices. Place the most important CTAs at the visible region of the screen, especially for mobile phones. You can also provide different content for mobile users and desktop users.
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:o=”urn:schemasmicrosoft-com:office:office” xmlns:v=”urn:schemas-microsoftcom:vml”><head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type=”text/css”>
@media only screen and (max-width: 480px){
table[class=contentInner]{
width:100% !important;
}
table[class=zpcolumns]{
display:block !important;
width:100% !important;
}
td[class=zpcolumns]{
display:block !important;
width:100% !important;
}
img[class=zpImage]{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
td[class=txtsize]{
width:100% !important;
font-size:16px !important;
line-height:125% !important;
}
}
</style>
</head>
<body>
<table border=”0” cellpadding=”0” cellspacing=”0”
class=”contentInner” style=”width:600px;” width=”600”>
<tbody><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” class=”zpcolumns”>
<p style=”
margin: 0px;
font-size: 19pt;
line-height: 31pt;
font-family: Arial;
padding: 0px;
“>Heading Here.......!!!!!!</p>
</td>
</tr></tbody>
</table></td></tr><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” class=”zpcolumns txtsize”
style=”
padding: 10px;
“>
<p style=”
margin: 0px;
font-size: 11pt;
line-height: 21pt;
font-family: Arial;
padding: 0px;
text-align: left;
“>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</td>
</tr></tbody>
</table></td></tr>
<tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” class=”zpcolumns”>
<table align=”center” cellpadding=”0”
cellspacing=”0” style=”font-size:12px;border:0px;”>
<tbody><tr>
<td align=”center” bgcolor=”#dddddd”
class=”txtsize” style=”border-collapse:collapse;paddingtop:12px;padding-bottom:12px;padding-right:25px;paddingleft:25px;color:#000000;font-family:Arial;background-color:#dddddd;font-size:11pt;border-radius:
0px;border:0px;text-align:center;cursor:pointer;”>
<a align=”center” href=”http://www.
zoho.com” style=”display:block;background-color:#dddddd;borderradius:0px;color:#000000;font-family:Arial;font-size:11pt;textalign:center;text-decoration:none;” target=”_blank”>
<span style=”color:#000000;”>
Click Here
</span>
</a>
</td>
</tr>
</tbody></table>
</td>
</tr></tbody>
</table></td></tr><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” class=”zpcolumns” style=”
height: 20px;
“>
</td></tr></tbody>
</table></td></tr></tbody></table>
</body>
</html>
4. Scalable images, GIF and video
Resize images, background images, GIFs and videos for viewports so they smoothly scale up and down across devices.
<html><head>
<style type=”text/css”>
@media only screen and (max-width: 480px){
table[class=contentInner]{
width:100% !important;
}
table[class=zpcolumns]{
display:block !important;
width:100% !important;
}
td[class=zpcolumns]{
display:block !important;
width:100% !important;
}
img[class=zpImage]{
width:100% !important;
height:auto !important;
max-width:480px !important;
}
}
</style>
</head>
<body>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner” align=”center”><tbody><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” width=”50%” class=”zpcolumns”>
<img src=”http://zohopublic.com/zohocampaigns/zcnoimage.png” width=”600” style=”max-width: 600px;” class=”zpImage”>
</td>
</tr></tbody>
</table>
</td></tr><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” width=”50%”
class=”zpcolumns”>
<table border=”0” cellpadding=”10” cellspacing=”0”
width=”300” align=”left” class=”zpcolumns”>
<tbody><tr>
<td valign=”top” class=”txtsize”><img
class=”zpImage” style=”
width: 270px;
“></td>
</tr>
</tbody></table>
<table border=”0” cellpadding=”10” cellspacing=”0”
width=”300” align=”left” class=”zpcolumns”>
<tbody><tr>
<td valign=”top” class=”txtsize”
align=”center”><img src=”http://zohopublic.com/zohocampaigns/zcnoimage.png” class=”zpImage” style=”
width: 270px;
“ align=”center”></td>
</tr>
</tbody>
</table>
</td>
</tr></tbody>
</table>
</td></tr></tbody></table>
</body>
</html>
Best practices for creating a perfect responsive email
- For mobile phone users, provide thumb accessible call-to-action buttons and links. Make sure that every element is finger friendly.
- Have readable font size, style and color.
- Prioritize and change hierarchy of column or content from device to device.
- Place important call-to-actions buttons at regions that would gain the readers’ attention. Have them clear and usable.
- Hide non-essential elements for smaller screen thus providing a minimal page.
- Do not use large fixed width elements.
- Use optimized viewports.
- Always avoid horizontal scrolling.