Mobile Email Design and the @Media Query

Posted on

  • email
  • twitter
  • facebook
  • share this

share this


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.

:: Create a local presence wherever you want to do business. Get a local phone number. ::


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

Be the first to comment on this article

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920
Email: info@websitemagazine.com

Facebook


Twitter