July 4, 2014

Responsive email design: the minimalistic style approach

Written By Martin Sandhu

From the huge growth of the number of media devices developed in 2012, the number of users have also phenomenally seen to have grown. As the Office of National Statistics say 53 per cent of the UK’s internet users are now browsing via their mobile device, the demand of users on the move, wanting to browse blogs and view emails has increased. Which in turn has led to an ever creative age of web design and in particular responsive web design.

Responsive web design, is the approach of using a multitude of web page patterns to fit a site or page into a number of select devices, it is also termed as RWD. Many organizations now use this approach to directly market their services and product, which resulted in RWD becoming Adaptive Web Delivery.

The topic of AWD and responsive email design has been growing in popularity as Litmus Software inc quote “45% of emails are opened on a mobile device” and “some brands see 70% of their emailed opened on a mobile device”. As more organizations turn to responsive email marketing a struggle between beautiful design and device compatibility can be seen. So what are the challenges that designers face?……

  • The Mobile native os browser not supporting css3
  • Desktop email applications not supporting css3
  • Fonts  not being supported on Desktop email applications
  • Web based email clients are not rendering style in the same way as others.
  • W3C having not defined web email standards.

As responsive web design is based on heavily using CSS3, modern browsers can handle CSS style efficiently, however when it comes to AWD email design, desktop and mobile email clients haven’t yet caught up with supporting CSS3. Several email marketing companies such as Campaign Monitor and Litmus, have conducted several tests to identify which elements of basic CSS and CSS3 are supported in a variety of email clients. Their findings have revealed a great deal to help email designers.

So how can the responsive email design be constructed?…..

Well firstly, knowing that desktop email clients, like Microsoft’s Outlook still use their MS Word and their old version of Internet Explorer 6 as the main email rendering engine. It is no surprise, that elements of latest CSS will not be supported. The simplest solution found so far, is to write HTML code like it was the 90’s all over again! If you can remember during the 90’s…..

  • Tables where used as a primary form of structuring elements in a website
  • Mainly use of inline elements
  • Basic In-line CSS styles where used with primitive attributes such as width, height and colour
  • Image size and style was all done in PhotoShop even before place on the website

With a reflection back in time to deal with Outlook, an email may not be as responsive without it being seen on a mobile device. Well certain media queries can be used to enforce inline styling e.g

@media screen and (max-device-width: 500px) {}

Combing the media query with classes set to the table, you can overcome the deep fear of tables not resizing on a mobile device or how elements should reduce in size, just like on a responsive site. In the attempt of truly constructing a responsive email design, you might find yourself having to redesign elements or using images. The key to a successful responsive email design, is to have more simplicity on the page and in HTML code, with the thought in mind of W3C having no standards…….see it as an opportunity to unleash your creativity.

For more information about tests which Campaign Monitor have conducted, can be found here.

For more resourceful information on constructing a responsive email design, can be found here.