by 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 recognizable. Since the preview pane for most desktop and mobile browsers is 400-500 pixels high, keep your header below 150 pixels to maximize 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 recognizable. 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 analyzed 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.
Use short sentences or phrases with left-aligned text so it wraps legibly. Choose a readable font with a large enough text size that can be easily read without zooming. Headlines should be at least 22 pixels and body copy at least 16 pixels in size. With responsive media queries, it’s possible to cheat and enlarge your text size on smartphones. Make all headlines, product details and newsletter content clickable with HTML links; you can add this inline CSS styling to avoid unattractive blue underlines on your headlines: <a href=”url” style=”text-decoration: none; color: #ff3d7e; font-size: 22px;”>Headline</a>
Images
Images should be retina pixel density. This makes beautiful lifestyle photography really pop on a smartphone and avoids blurry pixelation. To reduce HTML file size (and download time when customers are browsing without Wi-Fi), save images for web at 80% high quality.
Call to Action
The main call to action should be intuitive, enticing, fairly large (minimum 44 x 44 pixels), and proximal to content with large tap targets. Embrace negative space around the call to action so it stands out even more.
Graphics by Shutterstock