Skip to Main Content

Mobile Email Design and the @Media Query

Posted on 7.05.2011

Users carry their mobile devices with them everywhere and are performing tasks on those devices – including reading their email. Designing email templates has never been an easy task – each email client (desktop or Web-based) presents its own challenges - but with even a few modest tweaks messages and content included within emails can be made more accessible with just a few simple modifications.

Providing an @media query in CSS, designers can provide custom instructions that only mobile devices will see. Using the approach will enable designers to adjust widths, make padding tweaks and even hide content entirely for smaller screens. The Media Queries in CSS3 extend upon the functionality presented in CSS2 by media types, which let designers specify a type of media to target, so you could target print, handheld device, etc. Media types never really gained use momentum, but media queries carry the potential to do exactly that. Rather than looking for a device type, they looks at the capability of the device (width and height of the device and browser window, the orientation, and the resolution for example). When this information is known, a design can write CSS code for certain situations. Small devices might present a different layout than larger ones.

There are of course a while host of other ways to improve email design, from tightening cell widths and adjusting large images, to turning off webkit font resizing and hiding low priority content.

Today's Top Picks for Our Readers:
Recommended by Recommended by NetLine

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up


Leave a comment
    Load more comments
    New code