Blog

Great Responsive Email Design Examples

 Responsive design entails coding the email HTML so it changes based on what device it is read on. Responsive design uses Media Query Support to know what screen size email is read on and then the email layout adapts to that screen size.

 

The following email from Net-A-Porter, looks great in all inboxes (that it can look good in) and doesn't lose any branding or the strong imagery. It's a great example of responsive email design. 

 

When viewing the email on my desktop email client (gmail), the email rendered like this:

 

Nap-inbox-screenshot.png

 

The main body of the email has four product sections per row and two rows:

 Responsive-email-desktop-NAP-crop.png

 

When viewing the email on my iPhone (native email client), the email layout is adapted, as shown below. The responsive email has adapted to fit the size of the screen I'm using. You can see that the product image row of four is now stacked with two products per row, and the navigation has been removed for it to fit nicely on a smaller screen size. This doesn't lose any impact of the email or the main 'most wanted' message.

 

iPhone header and main image:

 

NAP-mobile-responsive.png

 

iPhone product rows:

 

Responsive-email-mobile-NAP.png

 

However, when viewing on the Gmail iPhone app, the responsive email design does not work. Why does responsive email not work in gmail? It is because Gmail does not support Media queries for responsive email design. Here is a guide to which email clients support responsive email design:

http://www.campaignmonitor.com/guides/mobile/

 

iPhone Gmail:

 

NAP-Mobile-gmail.png

 

Do you have a good responsive email example?

 

Kickdynamic Resources Page - Email Marketing Inspiration