Responsive design and modern CSS techniques have rapidly transformed the web from the 960 pixel wide place it was only a few years ago, bringing beautiful, usable web experiences to our smartphones, tablets, phablets, i-things and other devices of all shapes and sizes. With more and more of our customers carrying their email around in their pocket we need to provide an equally beautiful experience for email on mobile devices. This talk covered responsive techniques you can apply to your HTML emails that overcome some of the challenges of email client rendering engines, as well as some tips for designing your emails to work well with these techniques.
15. Reliable responsive layouts
● This method does not rely on media
queries for collapsing layout.
● Columns must be wider than mobile width
to be fluid.
16. Creating a collapsible, fluid layout
● Start with a full-width, max-width table.
● Single-cell rows for full width content.
● Nested tables for collapsible columns.
17.
18.
19. Collapsible columns
●
●
●
●
Max-width to set the ‘desktop’ column width.
Align attribute to mimic float: left / right.
Width: 100% to stretch columns on mobile.
Remember only columns wider than the
device width will stretch.
● Leave 25px between columns for Outlook.
20.
21. Images
● Set pixel width and height attributes for fixed
size images (same size on all devices).
● For fluid images set width attribute to 100%
to fit containing cell and use CSS height:
auto to maintain aspect ratio.
24. Max-width for Outlook and Lotus
Notes
● Use conditional comments.
● Add an additional table wrapper with maxwidth hardcoded in the width attribute.
25.
26. Max-width for Apple Mail
● Use a media query to set max-width on
responsive tables.
27.
28. Hiding media queries from Yahoo!
Mail
● Yahoo! Mail applies all media query CSS
regardless of screen size. Oh noes!
● Use attribute selectors for your media query
CSS as Yahoo! Mail ignores them.
29.
30. Limitations
●
●
●
●
●
Only wide columns can be fluid.
Fixed width columns.
No column scaling.
Single breakpoint created by max-width.
Only provides ‘desktop’ and ‘mobile’
versions.
31. Add some finesse with media
queries
● Stretch narrow columns to full width.
● Additional padding around full width
elements.
● Bigger buttons, larger text sizes.
● Background images for nicer retina
rendering.