If you’re a front-end developer or programmer for whom code is a second (if not first) language, then responsive design is a breeze, a walk in the park, or a piece of cake, so to speak. But if your email design skills are limited to HTML and maybe some basic CSS, then coding responsive emails is as foreign as a camel-ride to an Eskimo (there’s probably a better idiom but you get the picture).
Responsive Email Design is based on CSS3 media queries that adapt the display of the email to the size of the screen that it’s viewed on. It can manipulate the layout of the email, the size of images and fonts, the navigation, and even hide certain elements altogether. Although as of the beginning of 2014 not all devices and email clients support responsive email design, it is nevertheless rapidly gaining momentum.
Until now, email marketers with basic HTML skills could build their own emails fairly easily, but now that about half of all emails are read on mobile devices (a proportion that’s probably growing even as you read this sentence) and about 70% of people delete an email if it doesn’t look good on their mobile device, email marketers are stumped: They know how important it is for their emails to be mobile-friendly but if they want to “go responsive” they must now rely on developers to build all of their emails for them, or alternatively have one or two responsive templates built that can be reused over and over again until further notice or until the next new mobile-friendly design solution is invented (whichever comes first).
That might not be so bad if you never feel the need to vary your design, but if you’re a marketer whose coding ability isn’t your forte and designing creative, mobile-friendly, non template-based emails is a top priority right now, then relying on others to code every email you want to send is tantamount to a major thorn in the backside, especially if you don’t have the luxury of coding resources at your disposal.
There are a few free downloadable responsive email templates and “build it yourself” responsive email design tools starting to pop up around the web (like these examples from Ink, Email on Acid and Campaign Monitor), and quite a few of the popular Email Service Providers now also provide their own built-in responsive email templates, but if you don’t know your way around responsive code then these existing templates may be somewhat restrictive, forcing you to forego the creative freedom and flexibility to design your emails exactly how you want them to look.
So what’s a mobile-minded but coding-challenged email marketer to do?
Simple: Don’t rely on complex responsive code to adapt the display of the email to the size of the screen, but rather, create your design with a small screen in mind to begin with! (Thank you, thank you – it was an “Aha!” moment for me too).
Here are some hassle-free, mobile-friendly design tips that you can implement in your very next email without any responsive coding skills:
1) Take just a moment to familiarize yourself with media queries, mobile-tables and responsive-images. There are a few important snippets of responsive code and inline CSS that can make an immediate difference to your mobile optimization efforts and they’re actually quite easy to implement. By “easy to implement” I mean “copy and paste in the appropriate places” (that’s kindergarten level complexity) so even email marketers with basic HTML skills should be able to manage it. I won’t bother listing the code snippets here because they have already been outlined very clearly in these posts by Graeme Watt, Geoff Phillips, Dave Hendricks & Graham Gnall and Campaign Monitor (to name but a few).
2) Say “goodbye” to wide, text-heavy newsletters and “hello” to the single-column layout. The most mobile-friendly layout that you can choose for your emails is based either on a one or two-column design that doesn’t exceed a width of 600-650 pixels (I personally like to go even narrower, which you could see if you’re subscribed to The Best of Email’s newsletter). It forces you to break up your content into easily distinguishable blocks of content, making each piece of content the ‘hero’ of its block because it isn’t cluttered by other elements competing for attention when viewed on a small screen.
Gone are the days of wide, convoluted newsletters with many sections and lots of copy, they simply don’t render well on smartphones. If your newsletters have been based until now on three or four-columned templates or long-winded articles, you should seriously consider letting go of this old-school design in favor of a more streamlined one or two-columned layout and short article ‘teasers’ that link back to the full articles on your website or blog.
3) Embrace big font sizes. Do you like 10, 11 or 12px Arial, Helvetica or Verdana for your email body copy? Yes, I used to too. But after my mobile-first “Aha!” moment I realized that I just had to get over it and go big, like 18px minimum (now I actually like to go even bigger). You may think it looks ridiculous when viewed on a computer screen, but it needn’t if you keep things in proportion.
Remember, emails that force their readers to squint or zoom in and move things around just in order to read them are tiresome and totally mobile unfriendly. Think “BIG FONTS” from now on.
4) Make the clickable call-to-action easy to click on. I don’t know about you but even with my fairly small hands and dainty fingers, I find it difficult to click on minuscule links and ‘barely there’ buttons on my smartphone. If you must use text-links, then space them out well so that even the most undexterous of readers can click on them easily. Better yet, opt instead for good-sized, clear buttons that stand out from the other email elements around them to make them super-easy to click on.
5) Use contrasting colors for different email elements to help them stand out on a small screen. This tip is pretty self-explanatory.
6) Always provide a “View in browser” option. You never know what kind of difficulties your subscribers may encounter when viewing your emails on their smartphones or tablets, so it’s always a good idea to provide an “online version”. Just be sure to test the link to the online version before you send the email to confirm that it works. Too many of them don’t, and that’s such a turn off.
7) Don’t forget to optimize your subject line and preheader copy.
This is a tip that doesn’t really affect the design of the email itself but given that in most cases the email won’t even be opened unless the subject line makes it sound worthwhile, you should also consider the length of your subject line and aim to get the gist of what the email is about in the part of the subject line that’s visible.
You may be able to get away with long subject lines on wide computer screens, tablets, and sometimes also if a smartphone is tilted horizontally, but in the narrowest screen size scenario only the first 40 or so characters of your subject line are visible. If you can keep your subject lines under the 40-character mark or at least mention the most important part of the subject line in the first 40 characters (like some of the examples in the graphic below), you’ll reduce the chance that time-poor and inbox-weary subscribers reading your emails on their smartphones will skip your emails altogether just because the subject line wasn’t punchy enough to inspire an “open”.
The same tip goes for preheader copy (the copy that’s visible immediately following the subject line in some email clients). Preheaders are a great way to add to an email’s appeal when subscribers are considering whether or not to open it, so if you’re going to use a preheader, make sure you use it in conjunction with your subject line to further promote the content of your email effectively. Don’t waste it on boring ‘housekeeping’ links or by repeating what you already said in your subject line.
The most important tip of all – in case you’ve been too daunted by your limited coding skills to take any action at all towards optimizing your emails for mobile devices – is to design each email you send from now on with a smartphone screen in mind. If you can train yourself to let go of your old design habits and imagine how every new email you send would look on a smartphone, then by using the simple tips above you will find yourself slowly but surely creating mobile-friendly emails that don’t require any complex responsive coding and that more than half of your subscribers (and eventually far more) will appreciate.