“Responsive” Email

i guess it really shouldn’t be called “responsive” — it’s more “adaptive”. i mean, you can’t resize your browser or outlook window and expect it to update on the fly.

YkbaV

i’d like to say i’m pretty good at coding up html pages with css… and getting better and better at making sites responsive. well, only some of those skills are needed to code html emails

it’s a pain. a big one.

table-bench-pyramid-stackget ready for a wonderful world of inline styling and tables upon tables upon tables. it’ll be tough to troubleshoot your code because what you need to investigate is probably 5 tables, rows, and cells deep.

so you write up your code and it looks pretty decent in Gmail (browser), Yahoo!, iPhones, iPads, Android phones. but what about Outlook ’07, ’13, et al? why does it look like that? why does it not respect your carefully crafted html that you spent hours on?

well, it turns out that Outlook renders HTML using Word. why? i think microsoft wanted more things for designers/developers to hate them for

example

i had been tasked to make a two column newsletter that zippered into one when viewed on a smaller screen. zippered as in each module of the column kind of stacks on top of each other… first left, then right, then left, then right…

i code it up and it looks great in all those devices and services i listed above… except Outlook. One of my columns was not lined up properly. The columns would not line up at all until i found out this important bug: the outlook page break bug

people offer different ideas, but the one that worked for me was to basically make outlook break the content where i wanted it to. so instead of having a table that contained two tables side by side, i changed it to 3 tables stacked on top of each other

i even made a wireframe!

mockup

 

folded

code

prevent microsoft from adding random spaces between your tables and tds by adding this:

table, td {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}

@media only screen and (max-width: 480px) {
table[class=content_wrap] {
width: 94%!important;
}
}

  • whatever you need to stretch to the full width of the screen, class it and add this:
@media only screen and (max-width: 480px) {
table[class=full_width] {
width: 100%!important;
}
}
  • didn’t forget about you, images
@media only screen and (max-width: 480px) {
img[class=max-size] {
width: 100%!important;
height:auto;
}
}

  • make sure you have a width set for all tables, tds, and images

resources

 

Leave a Reply