Your Emails Need Responsive Design

By Meghann Porter

There’s a big shift in how people are consuming digital content. Everywhere you look, people are scanning their mobile devices – while they wait in line, at the coffee shop or on public transportation. Software company Litmus reports that 51% of emails are currently opened or previewed on a mobile device, and the trend is only increasing. Responsive emails – designed to provide the optimal experience on different platforms – are now a marketing must-do!

Why it’s time to incorporate responsive design

How to make your emails responsive

Remember MailChimp’s mantra “one eyeball, one thumb, arm’s length” when designing mobile emails. This means that your email should be easily readable with one eye; links and calls-to action usable with one thumb; and any text and visuals large enough to be taken in at arm’s length.

These additional tips from our team can help make your emails are attractive – and effective.

  • From names – Limit “from” names to 25 characters.
  • Subject lines – Limit to fewer than 50 characters and make sure they are useful and specific. Incorporate timely topics and a sense of urgency for more oomph.
  • Preview text – Keep in mind that the first few lines of your email are critical! The preview, around 100 characters, will show along with the subject line in the mobile inbox. Make sure it grabs readers’ attention and interest.
  • Font size – Avoid minuscule text. Make sure that your font size is legible for mobile reading.
  • Images – Only use essential images and make sure they are crisp, small and don’t take too much time to load.
  • Colors – Strong-contrast colors will be easier to read in bright light. Avoid white text because some email clients don’t support it – and you could be left with white text on a white background.
  • Sections – Think beyond the column. Use good header text, dividing lines and numbered paragraphs to help with scanning and navigation.

Some examples we love

  • Ten for Today features super-clean design, great use of dividing lines – and it even tells you how long it will take to read each article.
  • Pinterest’s welcome email is much like Pinterest itself: bright, colorful and friendly. This example features actionable chunks and great call-to-action placement.
  • When you’re letting people know about an event, take a page from the Kikk Festival, whose email has great use of color and image.
  • This Behance newsletter features a masterful combination of copy and design. And it does a killer job of transforming the magazine-style webpage into mobile.

Don’t forget great content!

Now, pair your awesome design with awesome content for maximum impact. When creating content for mobile, remember to lead with what’s most important, in case someone is just scanning. You want a clear and concise message that someone can grasp in a glance. Remember to put your call-to-action near the top of the email, so it cannot be missed.  

Meghann Porter

Digital Marketing Director

Meghann manages a wide range of digital initiatives at Signal – including SEM, social, display, retargeting, SEO, mobile, user testing, email and marketing automation. She’s an integral part of our team, working across industries and clients to contribute to the design and build of all web projects.

Scroll to Top