Responsive Email Design Part 2

Responsive Email Design part-2

1

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’;

Responsive Email Design part-2

2

General code (CSS and media query)

@media only screen and (max-device-width: 480px) { /* mobile

specic css */

}

/* normal css*/

</style>

Media-Que:

@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.

Responsive Email Design part-2

3

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>

<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>

Left Column </p></td>

</tr>

</table>

<table width=”320” border=”0” cellspacing=”0”

cellpadding=”20” align=”left”>

<tr>

Right Column </p></td>

</tr>

</table>

</td>

</tr>

</table>

Responsive Email Design part-2

4

Full Code :

<html>

<head>

Type”>

<title> SUGUMAR </title>

@media only screen and (max-device-width: 480px) {

/* mobile-specic 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;font-

family: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>

<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>

Responsive Email Design part-2

5

</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>

1) Various design techniques that could be adopted

Stacking content, images and videos

You can change the column orientation for the different viewports. For

smaller/ screens, you can wrap text over images.

Responsive Email Design part-2

6

@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”>

<img src=”http://zohopublic.com/zohocampaigns/zc-noimage.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”>

<td align=”center” valign=”top” width=”50%”

class=”zpcolumns”>

<table border=”0” cellpadding=”10” cellspacing=”0”

width=”300” align=”left” class=”zpcolumns”>

<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 ofce or workspace to

free yourself from mundane tasks. The future is calling, and your

desk can answer it for you.</p>

Responsive Email Design part-2

7

</td>

</tr>

</tbody></table>

<table border=”0” cellpadding=”10” cellspacing=”0” width=”300”

align=”left” class=”zpcolumns”>

<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 ofce 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

Responsive Email Design part-2

8

@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

{

Responsive Email Design part-2

9

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”>

<img src=”http://zohopublic.com/zohocampaigns/zc-

noimage.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”>

<td align=”center” valign=”top” width=”100%”

class=”zpcolumns”>

<table border=”0” cellpadding=”10” cellspacing=”0”

width=”600” align=”left” class=”zpcolumns”>

<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 ofce 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

ofce 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 ofce 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 ofce 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 ofce

or workspace to free yourself from mundane tasks. The future is

calling, and your desk can answer it for you.</p>

</td>

</tr>

Responsive Email Design part-2

10

<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 ofce 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=”line-

height: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 ofce 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,