Responsive Email Design – Media Queries

 
 

Media queries are the biggest feature of responsive design. They allow you to transform your email into a slim version especially for mobile devices. Media queries are a method used by web designers to make websites responsive. They can be used for email layouts also.

Different types of mobile devices can have different media queries. The positive result of this is that you can target different devices depending on the screen resolution.

Here are a few examples:

  • Smartphones - Portrait
    @media screen and (max-width: 320px) 
  • IPads - Portrait & landscape
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px)
  • IPads - Landscape
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
  • Smartphones - Portrait
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)

A utopian design that works on 100% of devices is not possible. The best way to avoid setting up a whole list of media queries is to look at the most popular devices on the market.

Default device email clients:

CLIENT

MEDIA QUERY SUPPORT

Amazone Kindle Fire HD
Android 2.2+
Apple iPhone
Apple iPad
BlackBerry OS 6+
Microsoft Windows Mobile 7.5
Microsoft Windows Mobile 8
Microsoft Surface
Palm Web OS 4.5
Samsung Galaxy S3+

Yes
Yes
Yes
Yes
Yes
Yes
No
No
Yes
No

 

Want to know more? Download here our guidelines on how to build a responsive email for your campaign. Need further advice? Ask us! Selligent is ready to help you.