Build responsive emails

  • Knowledge needed: HTML, CSS
  • Requires: Text editor, web browser, media query capable mobile device
  • Project Time: 1 hour
  • Support file

In this tutorial we’ll look at bringing some of the web’s mobile techniques to HTML email. User take-up of mobile email is massive: some email campaigns get more mobile opens than desktop, yet many marketing emails render poorly on mobile devices. Mobile support on the web has never been better – so if you’re sending emails that drive customers to the web, it makes sense to design mobile friendly emails too.

The design challenges for mobile email are similar to those on the web: we have a small screen, a touch interface and (sometimes) users are out and about – so the design approach is similar. We have one extra challenge, in that many older mobile email clients lack proper support for media queries.

With this in mind, our best approach is to design a campaign that works well on both desktops and mobiles, and then use media queries where they’re supported to add an extra layer of optimisation for smartphones. So first, let’s look at how we can make a regular email campaign more mobile friendly.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.