Responsive Design: What to Expect by Device Type

As email is becoming more mobile, the landscape is also becoming more complex. The myriad of device types available present unique challenges when it comes to email design. Enter responsive design as a solution to address the diversity of device types.

Responsive design is an HTML email (or Web page) built on a flexible framework. The design adjusts to the recipient’s viewport, using CSS3 media queries to serve up images and content based on the resolution or screen size of the device used for view.

While it’s a good solution when device type is unknown, there are a few moments when responsive design is less than perfect. Here’s what to expect from responsive design across devices.

droid

  • Some Android devices do not support responsive design;
  • Several email apps (including Yahoo and Gmail) will not read CSS media queries;
  • Native email clients (such as Outlook) on an exchange server will not read CSS queries;
  • Not all Android devices download images;
  • If a device is not supported and a query is not read, the desktop version will automatically be displayed

iphone

  • iOS fully supports responsive design in native email app;
  • Gmail and Yahoo apps are NOT supported.

bberry

  • BlackBerry, Windows phones and other devices simply do not support responsive email design.

forward

  • Keep in mind that forwarded emails will display both responsive and desktop content, resulting in duplicated content.

Want More Tips?

You can find advice like this and much more in our Good to Know Guide: Responsive Design for Email. Grab your free copy and learn:

  • The three key features at the heart of responsive design;
  • The difference between mobile-optimized and responsive email;
  • Best practices for responsive design;
  • How media queries work, examples, and samples of code language;
  • The difference between responsive and predictive design approaches, and when to use each;
  • Side-by-side comparisons of mobile-friendly, responsive and predictive design approaches, and more.

Learn more at www.knotice.com/resources.

%d bloggers like this: