Skip to content Skip to sidebar Skip to footer

Html Responsive Email: 3 Column Layout For Desktop/tablet To 2 Column Layout For Phone

Trying to create a responsive HTML email that has a 3 column (multiple rows) layout for desktop/tablet and changes to 2 columns (multiple rows) for phone display using tables(

Solution 1:

The approach you'd likely need to take is what's becoming known as the "hybrid" email build.

The basic idea is to build for mobile first, as Android's increasingly popular Gmail client does not support the style tag (and thus media queries) at all. Then, use widely-supported modern CSS to build the columns for webmail clients, Thunderbird and Apple clients. Finally, use Outlook-specific comments to create "ghost columns" (for example) to whip Outlook clients into shape. Note: this step only works if your email provider doesn't strip out comments on send.

It's a time-consuming process requiring some strategy, but ultimately this layered approach will yield results, which is the name of the email game.

There's a fantastic article about this here: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

Post a Comment for "Html Responsive Email: 3 Column Layout For Desktop/tablet To 2 Column Layout For Phone"