Communicating and Rendering

Wednesday 10th, February 2016

Consuming email on the go is quite the norm rather than the exception these days. According to a study by Litmus, the email analytics providers, of 250 million emails, as much as 53% of email opens happen on mobile devices – cell phones and tablets. At the same time, the biggest complaint of customers is that mail does not render well on all devices.

Designing emails and websites in general that are optimized for all kinds of devices is no longer just an option – it is now essential. A necessity.

The customer has changed – he wants the same satisfying experience regardless of the device he uses – desktop, laptop, tablet or smart phone. Most mobile email clients just scale the emails down to fit the screens of smaller devices, making the mail hard to read. Studies show that when mail does not display properly, most people delete them.

There are three main ways to do this –

Responsive design is one way to deal with this – what this does is that it allows the same set of codes to render an email optimally on all devices – regardless of what type it is. It uses the same URL across devices and lets the same content load, and then resizes it based on the device used to read it. There are some advantages to this kind of design – the user uses only one URL and the design makes the page render well on any device. Any changes that need to be made, need be done only in one place – which is a huge advantage for the webmaster. On the downside, this way is more expensive. And the time taken to load pages is longer.

Adaptive design is another popular way. Here, there are several options of the webpage or the email available in the server. It uses the same URL across devices too – but the server loads that particular version that has been optimized for that particular device.  These pages also use the some URL across devices but these pages load much quicker than their responsive counterparts. This is because only the needed information is sent from the server to the device. Only the version that is needed, loads. Also this kind of design, true to its name, adapts. For example if there is a form that needs filling on a page, it is possible to use a version with larger fonts to load on a cell phone – to make it easier for thumbs and fumbling fingers. The downside is that you have to build several versions of the site – maintaining it takes a lot of work. And the smallest change has to be implemented across all versions.

And there are the mobile-only versions of the site. Those even have different URLS. The upside is that you need to only have 2 versions of the site. And if constructed well, they load very quickly on mobile devices. The downside is that it uses a different URL from the regular site – and it needs re-directing (usually) which slows things down.

It is possible to have a mixture of all three versions – but ultimately a great strategy is what counts.

What do you keep and what do you cut in what version?

A great way to do this is – think Mobile first. You ask yourself the question – “what is the barest minimum, when it comes to content and navigation that is needed to make the design work on a mobile?” And then you work backwards.

This works on the principle that it is easier to add to a design than to take away from it. You need to decide what elements are important as opposed to those that are “nice to have”. This calls for being rather ruthlessly concise and keeping the aesthetics simple. When you do this, it will

You need to be able to have interactivity where the information once lay flat and navigation had mega-menus. You need to know what to do with images! Do you scale it down? Crop it? Or scale and crop? Do you add a touch-to-zoom function? Or just leave the image out altogether! Strategy! Strategy!

Make sure that your mobile-optimized pages stick to prescribed guidelines to aid reading and interaction on touchscreens – especially with regard to fonts and the size of buttons. Users need to be comfortable taking the action as you have suggested in your communication – regardless of the device they consume the content on.

If you are sending an email that works through any of these methods, it needs to continue on to the webpage as well. The user needs to have the same experience beyond it – whether he reads detailed information that you have listed on your website or if he comes to the landing page that you have directed him to. This destination needs to be designed optimally for viewing on various devices.

Ultimately, clean code is the order of the day –do some extensive testing across multiple devices to see how the layouts adapt and appear and also to ensure that they do not break in clients that don’t support your format.



Subscribe to our Newsletter



Subscribed successfully Thanks for Subscribing