Interesting article from Paul Skeldon in eSeller
We’ve seen how important email is to your marketing mix and email is not going away anytime soon, but to keep shoppers opening your messages in the midst of an increasingly crowded inbox, they must have a good experience with your emails and find value in opening them.
If your emails aren’t attractive they may eventually stop opening them, or worse, unsubscribe from your list altogether.
So what can you do to make your email marketing look good? Here are the key things to focus on getting right from the get go.
Layout
Start simply with a one-column layout and work your way up to a more complex two or four-column version for the desktop. It’s much easier to add content than remove it. Embrace the white space to distinguish content sections; you can use padding or borders to achieve this differentiation.
Responsive CSS media queries take advantage of fixed browser window widths; they differentiate desktop and mobile layout behaviour. Until the latest generation of iPhone 6 smartphones, the most popular iPhone and Android models used the gold standard 640 pixel desktop, 320 pixel mobile responsive layout.
To retain compatibility with newer devices, such as the iPhone 6 and 6 Plus, it’s still possible to keep your 640/320 responsive layout, but you need to increase the max device width in the media queries.
Header
The most effective header designs are simple, minimalist and brand-focused. The primary goal: Be instantly recognisable. Since the preview pane for most desktop and mobile browsers is 400-500 pixels high, keep your header below 150 pixels to maximise the available area for your hero section, and keep the promotion and call to action above the fold.
With media queries, responsive coding can modify or hide unnecessary header information, such as category menus, social icons, pre-header text, allowing more room for click-worthy content.
Content
Since less time is usually spent reading emails opened on mobile, content must be impactful and quickly recognisable. Striking content (lifestyle photography, bold calls to action, special offers) showcased front and center in the browser’s window receives the most attention. Because most smartphone content is glanced top-to-bottom and then analysed left-to-right, consider using media queries to stack rows of two products instead of merchandising one row of four products.
This simplifies the user experience by giving the user fewer options when glancing from top to bottom.