Fluid Layout is Key
- Create a ‘content table’ that is set to be 100% wide so that it will be fluid and take up the full width of smartphone and tablet screens but set a maximum width of 600px to avoid the email taking up the the entire screen on bigger devices.
- Consider simple 1-column or 2-column layouts
- If you want a background color on your HTML email, you have to place your ‘content table’ inside a full width table with the background color you desired. Gmail strips out the background color placed on the body tag.
Overcome Lack of Media Query Support
- Support for Media queries is really low!
Tricks to Master Media Queries
- Use media queries to target mobile sizes – This is true mainly for layout issues. Don’t over complicate layout but if two columns exist in the layout, they will have to be one for mobile or tablet sizes.
- Use conditional tags, old media query syntax and new media query syntax for bulletproof media queries
- Outlook and Lotus Notes (WIN – IE) – Use conditional statement for Outlook and Lotus Notes around the table that goes to a set maximum pixel width on desktop. (see example)
- Outlook (Mac – uses webkit) – Supports media queries. OK to Use media queries – (ex. min-width)
- Apple Mail – Uses old media query syntax (ex. min-device-width
- Write styles using Attribute Selector Method (ASM):
- Instead of “.class-name” use ‘table[class=”class-name”]’
- Mainly for Yahoo Mail. If the classes aren’t in ASM, Yahoo Mail on a mobile will try to present desktop view and vice versa.