Responsive Email/Webpage Design – Basis

Sources:

http://www.campaignmonitor.com/guides/mobile/coding/

http://twitter.github.com/bootstrap/scaffolding.html#responsive

http://masstransmit.com/broadcast_blog/responsive-email-design/

What?

We want to develop a page (for a site’s page or for an email, after all both are HTML with styles, right?) that is responsive. It means, doesn’t matter you see it on a wide monitor, on a tiny one, on a tablet or on a smartphone… you always see it cool and understandable.

I put an example here in case you want put your hands to work right now. In other case continue reading the article. ;) (try this example resizing your browser or using differents devices)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <title>Campaign Monitor Newsletter</title> 
 <style> 
div.milonga { 
 background-color: none ; 
 color: #000000; 
} 
@media only screen and (max-width: 480px) { 
 div.milonga { 
 background-color: #000000 !important ; 
 color: #FFFFFF !important; 
 } 
} 
 </style> 
</head> 
<body> 
 <div class='milonga'> 
 This is my test, dude. <br />My name is Juan Mat&iacute;as de la C&aacute;mara Beovide and my mail juanmatias@gmail.com. 
 </div> 
</body> 
</html>

About the viewport metatag.

Keep in mind:

The following advices are both for page and mail responsive design.

  • Single-column layouts that are no wider than 500 to 600 pixels work best on mobile devices. They’re easier to read, and if they fall apart, they’ll do so more gracefully.
  • Links and buttons should have a minimum target area of 44 × 44 pixels, as per Apple guidelines. Nothing is more unusable than clouds of tiny links on touchscreen devices.
  • The minimum font size displayed on iPhones is 13 pixels. Keep this in mind when styling text, because anything smaller will be upscaled and could break your layout. Alternately, you can override this behavior in your style sheet (do so with care).
  • More than ever, keep your message concise, and place all important design elements in the upper portion of the email, if possible. Scrolling for miles is much harder on a touchscreen than with a mouse.
  • When possible, use display: none; to hide extraneous details in your mobile layout. Elements like social sharing buttons may be great in the desktop inbox, but aren’t always easy to use by the recipient on mobile devices.
  • Keep in mind where your call to action (CTA), such as ‘View deal’ appears on both – is it immediately visible when the email is opened? Or does the recipient have to scroll in order to see it?

This is for email design:

  • You still have to make it the old way too – If you didn’t already know, Gmail strips out any stylesheet information you put in the head tag and that includes media queries. To work around this we’ve always used inline styles (individual styles written directly into the elements they are affecting) but that doesn’t help us here since media queries need to be called from the head. So, to accommodate for Gmail (and other email browsers that don’t support this) we need to cover all our bases and still build the email using inline styles in combination with classes and ids that we can call with the media query. This means that even when you are using media queries you still have to go through the trouble of making sure your email works on mobile screens without them.

How?

Ok, the responsive design is basicaly a style set (or a CSS file) with conditions.

In a strange pseudocode you can understand it as follows (this example for a table):

/* my CSS file */
am I in a desktop computer?
 Then table is 900px wide
am I in a tablet?
 Then table is 600px wide
am I in a smartphone?
 Then table is 300px wide.

But, how do I do this?

Let’s put hands to work!

In first place we need to know how to ask the questions about computer/tablet/smartphone… this is done this way:

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Ok, let’s take a look… we are using @media. Between parenthesis we have the condition and then, between curly brackets we will put the style aplied to each condition.

Don’t forget to add this line in the HEAD:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Simple example 1 – change background and text color

Let’s see an example. This will put a black text on a none background when the client width is greater than 480px, in other case the text will be withe on a black background.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <title>Campaign Monitor Newsletter</title> 
 <style> 
div.milonga { 
 background-color: none ; 
 color: #000000; 
} 
@media only screen and (max-width: 480px) { 
 div.milonga { 
 background-color: #000000 !important ; 
 color: #FFFFFF !important; 
 } 
} 
 </style> 
</head> 
<body> 
 <div class='milonga'> 
 This is my test, dude. <br />My name is Juan Mat&iacute;as de la C&aacute;mara Beovide and my mail juanmatias@gmail.com. 
 </div> 
</body> 
</html>

Try it! Resize you browser window, try it on your phone or tablet and see what happen.

Simple example 2 – change table width

The very basic of device specific CSS

<style type="text/css">
@media only screen and (max-device-width: 480px) {
/* mobile-specific CSS styles go here */
}

/* regular CSS styles go here */
</style>

The @media only screen bit specifies that the email has to be displaying on a screen (unlike being displayed on an accessibility device, or printed via a printer). After that, the device’s viewport can have a maximum width of 480px.

Example:

<style type="text/css">
@media only screen and (max-device-width: 480px) {
/* mobile-specific CSS styles go here */
table[class=contenttable] {
width: 320px !important;
}
}

/* regular CSS styles go here */
table.contenttable {
width: 640px;
}
</style>

One of the golden rules of email design is ‘where possible, use HTML attributes instead of CSS’. Whereas CSS support can be fairly flaky across the gamut of email clients, attributes tend to be rock solid. For example, attributes like align=”left” andcellpadding=”10″ are far more reliable than their approximate CSS equivalents,float: left; and padding: 10px;.

Simple example 3 – Two-to-one column design

Example:

HTML

<table width="640" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td><p>Column Left Content</p></td>
</tr>
</table>
<table width="320" border="0" cellspacing="0" cellpadding="20">
<tr>
<td><p>Column Right Content</p></td>
</tr>
</table>
</td>
</tr>
</table>

CSS

<style type="text/css">
 @media only screen and (max-width: 480px) {
 table[class=contenttable] { 
 width:320px !important;
 }
 }
</style>

Simple example 4 – Progressive disclosure

Show chunks of text… and if the screen is tiny show only titles and a show button…

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd"> 

<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Campaign Monitor Newsletter</title> 
 <style> 
a[class="mobileshow"], a[class="mobilehide"] { 
 display: none !important; 
} 
@media only screen and (max-width: 480px) { 
 a[class="mobileshow"], a[class="mobilehide"] { 
 display: block !important; 
 color: #fff !important; 
 background-color: #aaa; 
 border-radius: 20px; 
 padding: 0 8px; 
 text-decoration: none; 
 font-weight: bold; 
 font-family: "Helvetica Neue", Helvetica, sans-serif; 
 font-size: 11px; 
 position: absolute; 
 top: 25px; 
 right: 10px; 
 text-align: center; 
 width: 40px; 
 } 
 div[class="article"] { 
 display: none; 
 } 
 a.mobileshow:hover { 
 visibility: hidden; 
 } 
 .mobileshow:hover + .article { 
 display: inline !important; 
 } 
} 
 </style> 
</head> 
<body> 
<table> 
<tr> 
<td> 
 <h4><a href="http://yourdomain.com">First heading</a></strong></h4> 
 <a href="#">Hide</a> <a href="#">Show</a> 
 <div class="article"> 
 <p class="bodytext"> 
 <img width='100px' src="http://imagenes.chiquipedia.com/images/imagenes-divertidas-gato-rockero.jpg" style="float: left;" >El gato o gato doméstico (Felis silvestris catus) es un pequeño mamífero carnívoro de la familia Felidae. El gato está en convivencia cercana al ser humano desde hace unos 9500 años,1 periodo superior al estimado anteriormente, que oscilaba entre 3500 y 8000 años. 
Los nombres actuales más generalizados derivan del latín vulgar catus, palabra que aludía especialmente a los gatos salvajes en contraposición a los gatos domésticos que, en latín, eran llamados felis. 
 </p> 
 <a href="http://yourdomain.com">Read more...</a> 
 </div> 
</td> 
</tr> 
</table> 

</body> 
</html>

Posted on September 10, 2012, in CSS, HTML, languages and tagged , , , , , . Bookmark the permalink. 4 Comments.

  1. Normally I don’t read post on blogs, but I would like to say that this write-up very forced me to check out and do it! Your writing style has been amazed me. Thank you, quite great article.

  2. I do agree with all the ideas you have offered on your post. They’re really convincing and will certainly work. Still, the posts are very short for beginners. May just you please lengthen them a little from next time? Thank you for the post.

    • Hello, dude.
      My main idea is not to write long articles, but give a little idea and some examples to you to play.
      I mean, I like to learn doing, not just reading theory, I think it’s the best way. So I give to the readers the sources I use to write this, so you all can play a little with the examples and then, with the basic knowledge in your mind, you can go for more info.

      My idea is to be simple, because of that the my articles have two titles “what” and “how”. And I hope to keep it simple.

      I invite you to read the sources and to be curious diving the web.

      Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 974 other followers

%d bloggers like this: