Responsive email design

With so many users viewing sites on smartphones and tablets, ensuring engaging mobile experiences has become essential. Now, the responsive design strategy is being applied to emails, since more and more users worldwide view emails on mobile devices.

Responsive Email Design

From websites …

Over the past couple years, responsive web design — where layout and content of a website seamlessly change depending on the size of the user’s viewing screen — has become standard. With so many users viewing sites on smartphones and tablets, ensuring engaging mobile experiences has become essential. And recently, Google recommended responsive web design and explained how responsive web design supports search engine optimization (SEO).

… to emails

Now, the responsive design strategy is being applied to emails, since more and more users worldwide view emails on mobile devices. Today, designers and developers must master the challenges of optimizing each viewing screen experience from a design/layout perspective in order to ensure that the same content is presented in the best light possible, no matter what device recipients are using — which is the goal of responsive design.


6 Steps to creating responsive emails

Keep mobile in mind

responsive-design-400x400Imagine somebody checking email while standing in line for coffee; you may not have their undivided attention, so you should get to the point as quickly as possible. Determining how your content will display at the size of the smartphone should direct what you include and how it will display on desktop.

Just like the responsive web design process, you can mock up how the desktop version of an email will look first, but definitely keep the mobile email design in mind. The mobile email design will likely include one column, full-width images, slightly larger type size, and easy-to-click call-to-action (CTA) buttons. Some content will get moved down and will not be visible when the email is first opened.

Stay focused on streamlined content

Making mobile a main area of focus encourages the writing of concise, to-the-point content along with a truthful, on-target subject line. Streamlined, high-quality content with a clear, easy-to-find CTA makes sense in an email at any viewing size but is especially important for mobile. Think about mobile users quickly checking the subject line and determining whether the email is worth opening. If users do open the email, they want to see the desired content quickly and easily. They most likely will not mull over every word.

True responsive design means the content doesn’t change

If you create a truly responsive email, all users — on all the different devices — will see the same content. Keeping that in mind, sections of content should be thoughtfully grouped and positioned to allow for adjustment of layout. That’s a key reason why we suggest thinking mobile first, since the typical content structure for non-responsive emails may not adjust to mobile easily.

Optimize and modify image files

Responsive Email SampleSince the same HTML file will be referenced in a responsive email and users will be viewing images on different sized devices, extra consideration should be given to the file size, dimensions, use, and implementation of images. Since mobile connections can be much slower and their data usage charged at a high rate, it’s important to make sure that image file size is as small as possible. Also, it’s a good idea to make your images twice as large — in terms of pixel dimensions — as they need to be and then compress them in Photoshop to optimize viewing on retina displays.

Because mobile phones download all images in a file whether or not they actually display them, it’s best to avoid using separate images for desktop and mobile. This requires extra attention, as a nice, square thumbnail image on the desktop may seem enormous when spanning the full width of a smartphone’s display. However, in the case of banner ads, it may make sense to have alternate images for desktop and mobile.

Test, test, test, of course

Testing in the key email apps and web browsers — on desktop, laptop, tablet, and mobile devices — takes time, but it’s necessary, of course. An email may look fine for iPhone and Android users, but it still has to look fine for Outlook users. And don’t forget to check in Gmail, Outlook.com (formerly Hotmail), and Yahoo! Mail, which have significant email client market shares — about five percent each.

Don’t fear the limitations of Outlook

Experienced email designers and developers have always had to adapt to the limitations of Outlook. Email recipients may still be using Outlook, so you should include the usual adaptation techniques and not try to force design features that won’t render properly in Outlook.

Successful emails

Remember, the goal of successful responsive design is to ensure that the same content is displayed in its best light, regardless of the viewing screen size, though the design/layout can and will differ. Responsive emails can improve the success of your email campaigns with mobile users while maintaining the engagement level with desktop users.