Responsive Email Design – Make Your Template Mobile Friendly

Email design may not be the first thing that springs to mind when it comes to formatting multimedia experiences for multiple devices. With many businesses focusing on the mobile website experience, the finer points of designing a fluid template for emails that display properly across whatever handheld devices are popular at any given point in time can be lost in the shuffle. After all, email may seem to be a borderline outdated method of communication outside of a business setting.

Yet with between 34 and 54 percent of advertising emails being opened exclusively on mobile devices, putting a lesser focus on email templates is a surefire way to alienate a sizable portion of any subscriber base from the outset. In that regard, it is just as important to keep email design solidly in mind when crafting the desired look and feel for your communications campaign.

Responsive Email Design Article Image


The Art Of Mobile Email Design

It may seem humorous but there is something to be said in treating an email like an art piece. [pullquote]If you receive an email that is nothing but a chunk of text with poorly-aligned images and a mess of information with no consistent style or flow, chances are you won’t pay much attention to that email.[/pullquote] Any email that is non-responsive is an outright waste of money that could be better spent.

Instead of trying to picture an email as a letter into which every available word is to be crammed at all costs, mobile formatting almost demands an abstract look at how best a small screen can present limited enough information to catch the eye and draw the consumer in.

For starters, having a multitude of devices to check email formatting on before sending out mass mail is a must. A tablet and a phone will display the same email in potentially diametrically opposed ways despite showcasing the same template and information. If something that fits perfectly on a tablet shows a horizontal scroll bar on a phone, you’ve potentially lost customers as your userbase is forced to awkwardly navigate an imperfect layout for their device of choice.

Keeping a design template that does not steadfastly declare image and text placement is a key feature to ensure makes it into your final mail. An email in a web browser should show with a left justification while a center format fits mobile phones much more elegantly. Large grids of images may work fine on a desktop PC, but trying to swipe through what feels like a mile of images will shut down almost every customer before they’ve reached the end of your spiel.

Simplifying Your Message

Shakespeare said it best: Brevity is the soul of wit. Straining one’s eyes to read a massive wall of text in a font that doesn’t display well on a phone doesn’t fit responsive email design in any way, shape or form. Short messages with punch beat out over-detailed paragraphs when it comes to catching the eye quickly and effectively.

[pullquote]While a catchy Shakespeare quote works well for illustrating a creative point you’re going to want to cut the bulk of your cliches and long-winded anecdotes out of your fluid templates.[/pullquote] Sentence length is at a premium and your products or services are infinitely more important than referencing outside ideas that do not push your business to the forefront of the email.

Try to maintain a ratio of roughly 60 percent images to 40 percent text. With image-only emails, you run the risk of spam filters throwing out your message before it reaches its target recipient. At the opposite end of the spectrum is an image that is nothing but text with a sparse smattering of images, leaving your content feeling barren and likely destroying the flow of what makes a proper advertisement move seamlessly between product examples, descriptions and other flavorful text.

Content Is Still King

At the end of the day, your emails should be concise, filled with enough images to grab the eye, supplemented with text that doesn’t detract from the concise impact of a well-written email template and still manage to draw in customers across desktop and mobile platforms. When all else fails, taking inspiration from a gallery of examples in the vein of The Best of Email just might help you whip up a template that is inspired by something that has been proven to work. No matter what you create, ensure the content is strong and everything else will fall into place with a little creative work.

If you are interested in even more email-related stories and information from us here at Bit Rebels then we have a lot to choose from.

Responsive Email Design Header Image Image