Going mobile? Go responsive!
Consuming email on the go is quite the norm 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. Designing emails that are optimized for mobiles is no longer just an option – it is now essential. A necessity.
On the other hand, consumers have complaints! They say that they get
- Too many emails
- Irrelevant emails
- Emails that use fonts that are too small to read and interact with
- Website and landing pages not mobile optimized
- Email that is not formatted for mobile phones
Most mobile email clients just scale the emails down to fit the screens of smaller devices. These messages are hard to read and in all likelihood, ignored. When it is an email newsletter, the results are disastrous. According to a study, if an email did not display properly, about 70 percent of readers will just delete it.
Bottom line – users expect a great experience regardless of the device they use – be it desktop, laptop, tablet or smart phone. And the best way to do this is through responsive design. A time will come when even the term “responsive email design” won’t be used as more and more pages are designed for mobile first and every other platform next.
Responsive design in websites and email seems to be one of the hottest trends in web design right now. What this does is that it allows the same set of codes to render an email or a webpage optimally, regardless of the device it is opened on – be it desktop, tablet, or phone. For example, an email designed for a desktop may have about 7 navigation buttons on the top banner – this is great for a desktop but disastrous for a tablet or a phone. But when the same thing is designed the responsive design way, the page loads based on the screen size of the reader’s viewing device. It might not even display all the 7 navigation buttons, but just those that the owner of the content decides is essential for mobile viewing.
Changing from traditional design to a responsive one is a lot more than just a simple redesign. It is a whole new way of tackling the content – a re-examination of the strategy itself.
- What information and tools are essential to a mobile user?
- What is needed for conversion and what obstacles can we face?
When the page is responsive, it could mean that the content of the email extends lengthwise, or vertically. Calls to action buttons need to be bigger on a mobile phone (small buttons and large thumbs don’t mix) and they need to be placed in relevant positions – so users can see and act on what it is you ask of them. All this means that we work with less space, use fewer words and simpler graphics.
There is a huge advantage to this – with customers getting used to an easy omni-channel navigation, relating to brands on and offline – responsive designs can easily take this to the mobile as well, and give them the same intuitive and gratifying experience regardless of device or location.
How does this work?
Basically responsive design has these main components –
- flexible layouts
- customized copy
- media queries
- flexible media.
Flexible layouts is the use of flexible grids that can dynamically resize based on requirement. They are built using relative length units which are usually percentages – and with these relative length units, can structure other common grid property values like margins, or width etc. There are no fixed measurement units (pixels or inches) and everything changes from device to device. Most often, blocks of text are skipped totally, so users can read and respond to calls of action quickly.
Copy is customized – responsive design gives the creator, the power to hide, stack, expand/collapse or modify content so it appears optimally on small screens as well. A short message and call to action can replace four long paragraphs of descriptive text. This is not just clever HTML/CSS coding. It is a clever use of content! Based on the device, content is hidden or be displayed – to produce clearer messaging and simpler layouts that work on anything from a desktop to a smartphone.
A responsive design can have multiple breakpoints. Breakpoints, simply put, are the page widths that will cause design elements to re-order. For this, it is important to have a Cascading Style Sheet that ensures optimal load times and images on all devices.
The big question is – how do you get all the stuff in the desktop version to fit on smaller screens? What do you keep and what do you cut? 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. It is always easier to add to a design than to take away from it. Be ruthlessly concise and simple. Keep those elements that are important and do away with those that are “nice to have”. This will help direct the user to the call to action easier – and also make for simpler and cleaner desktop and tablet versions – which again would lead to more conversions. This is almost like having different content for different configurations. And then it is the business of 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 again plays a huge role here.
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 regardless of the device they consume the content on.
If you have sent a responsive email, your job is not over. The user needs to have the same experience beyond it as well – 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 as well. If there is a coupon code that you have listed in your email, make sure it appears in a web form on the destination page as well.
Clean code is what is needed – designers and coders need to have a nuanced understanding of how HTML and CSS work, on what platforms these responsive web designs work and where they don’t. Extensive testing needs to be done 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 responsive pages.
The future is indeed responsive – so code for optimal performance and test for device compatibility!: