When starting from scratch it's important to keep the responsive part in mind at all times, especially when you're still in the design stages. There is nothing more important than a design that is optimized for desktop and mobile, this will make the upcoming process a lot easier.
A good way of working is to first think about a mobile design and create the desktop version based upon this design. Working the other way around will limit your options for the mobile users. Try to keep your mobile version as sleek and minimalistic as possible. The more images and special designs you use the harder it will be to have a decent email for mobile and desktop.
Stick to a single column
To make the process of optimizing your newsletter as painless as possible, you should opt for a single column design. Because you need to rely on nested tables these days, it makes it very difficult to re-order columns or stack blocks of content on top of each other. This is relatively easy with CSS, but nearly impossible given the rigidity of HTML tables.
However, this doesn't mean that the multi-column designs won't work on mobile devices; it will just be harder to make them work on desktop and mobile. If you do go for a two- or three-column design, you still have the option of simply hiding certain columns altogether. If you're using a column for secondary content that isn't important, this might be a great option for your mobile version anyway. We will discuss this option in more details in a future post.
Examples of how it should be done
- Joy the store
We will be back soon with more tips on responsive email design, so stay tuned!
Missed the first part of this article? You can find it here.
Can't wait to read more? Download our Guidelines on "Responsive email design".
- The ultimate mobile email statistics overview
- Mobile Opens Hit Record High of 47%
- What is Responsive email?
- How to design a responsive HTML email
- Responsive email design: 10 great examples
- Viewport Metatag Rendered Unusable
- Connections 2012 Key Takeaway: Design for ALL Inboxes
- Media Queries for Standard Devices
- Responsive Email Design
- CSS Media Queries for iPads & iPhones
- The How-To Guide to Responsive Email Design
- Email in Motion