Responsive email design

Keep mobile in mind

Imagine 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

Since 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.