Friday, December 13, 2013

Responsive redesign of an HTML newsletter

As a precursor, read about my previous experience/success with a basic HTML email newsletter and how to track your email campaign results with Google analytics.

I recently came across an article by Zurb that said "Over 40% of emails are opened on a mobile device". Correction: Actually it is way more than that (79%) based on this data on Luke Wroblewski's blog.

This made me think it is time to extend our love of mobile optimization to HTML newsletters as well.

Another question that has surfaced often in conversations was, "What do most people do when they come across HTML emails that they can't read well on a mobile device?"
Based on what I heard from many, and my own experience was that they will not save it to read later on a more compatible device (desktop/tablet) but would mostly delete and move on.

I am sure many of us can relate to that, especially at a time when we are bombarded with tons of emails every day and ruthlessly send as many as we can, to trash.

So, responsive email is more of a need at this time, with the proliferation of mobile devices, our own experiences and the above factoid from Zurb.

General notes about responsive emails:

    Although I find creating responsive websites easy, on the contrary, I find there is a lot more pain-factor involved in this relatively tiny piece of responsive email (vs a website), which I think is mostly because:
    • Email clients are way behind even the worst browsers in terms of web-standards/technology and way more diverse in their presentation and support, many that don’t make any sense at all!
    • Unlike websites, it is not easy to check your fixes just by the refresh of a browser window (every time you fix something, you need to send the email out, yes, even on litmus) and check emails.
      Word of caution, just as with browser simulators it is always best to check on as many real email clients and devices as possible and not just rely on litmus tests. I found that actual outlook.com result was way worse than what litmus test showed me.
    • You need to code like it is the nineties, but still use progressive enhancement for newer mobile email clients with media-queries, balancing a mixture of old and new. 
    • Outlook is to responsive email as Internet Explorer is to responsive websites.
      I found outlook.com to be even worse than outlook desktop app and about 80% of my testing and fixing was for outlook.com some of which had to be left at a not so pretty state as there was no way to fix them in spite of numerous trials (eg. Weird blue underlines irrespective of the style, justified text in some cases etc.).
    • Many of the proposed solutions online didn't work for outlook.com. So, there are some things you just have to end up accepting due to the limitations of email clients. 

    But, don't lose heart. It is lovely to see the mobile-friendly end product (think of how enticing, easy-reading it would look to your users, esp. compared to all other un-optimized emails in their mobile inbox), not to mention the joy of squishy-fun factor for you (still hasn't gotten old for me)!

    Just don't assume to square it off in a day when you are doing this for the first time. It only gets easier for the next time!

    Technical Notes:

    • Even if you have designed and coded regular HTML emails before, start out by reading some articles on basics (many references at the end) and why things are done the way they are, so you don't blindly follow a boilerplate or get into trouble because you overlooked something that shouldn't have been done.
    • Do not start without a boilerplate template eg. Litmus, Zurb, Antwort etc.
      Why? They take care of common issues that have been already found and addressed so you don't have to spend additional time reinventing the wheel. You will still have enough to deal with when you create your templates.  
    • Even if you do start out with a boilerplate or sample template, make sure you send it in an email to test it before you customize and work on your’s. I found some that I started out with, didn't work responsively (perhaps they were just quick run-through examples and weren’t tested) and I had to create my own, based on the knowledge from several articles and examples.
    • Keep it as simple and concise as possible. Mobile-first approach is ever so important in this.  
    • I really liked the strategy explained in this article. I used a mostly single column layout and two columns only in one section. 
    • The table spaghetti code will be much cleaner when you keep it simple and minimal which you will appreciate!
    • I didn't use a responsive email framework (it was a bit too much for my purpose). Zurb has created responsive framework called ink if you want to try it out. 
    • Although I generally use code based HTML editors like Sublime Text, I found it helps to code in a visual HTML editor like Dreamweaver for this. As it is old-fashioned code, with all styles inline (kinda icky!) it is easier to copy and paste similar sections in design view as it copies the inline-styles associated with each paragraph, list item, link etc. (which is a must).

    A general overview of the layout, code:

    • Pay attention to the doctype declaration in the boilerplates. 
    • Create a body tag and a 100% width wrapper table.
    • Start out with a 600-640px width, content table. If you have multiple sections (keep it limited), you will have several of these. 
    • If you want to delineate each section with your brand-colors in a 100% width wrapper for better clarity of sections, each of those fixed-width content tables need to be wrapped in their own wrapper tables.
    • Although you set your content tables to fixed width, don't forget to assign flex 100% width classes to them so you can stretch them to 100% device-width in one column on smaller screen-sizes via media-queries (media-queries added inline at the top style section of your email).
    • In your media-query/ies (I only had one for below 640px in my example) you will also style your basic underlined-links on wider screens to work as non-overlapping buttons on mobile (don't forget classes for your link styles even with inline styles specified). Make sure to have enough margin-separation/whitespace so mobile users don't accidentally touch other links due to close proximity. Have your touch-targets large enough for mobile (44px recommended).
    • In case of two columns, they will be just two left-aligned nested tables that fit next to each other within the parent table on non-responsive larger screens but with class 100% flex-width for mobile, they fall one below other on smaller screens. 
    • You can have responsive background-images of multiple sizes for mobile as background images, but I used 100% width images that resized on mobile with the same strategy for optimization that I have used in my previous WVU Research website responsive redesign post
    • Don't forget to run your code through a validator.  
    • Test often on litmus (not 100% accurate) and also send it out to your own multiple email accounts on several webmail and desktop email clients, multiple devices and blast off with the back-up of online version.
    Well, that's about it and I guarantee that if you have to support outlook and outlook.com, you will be spending most of your time there. Good luck!

    End Result (after responsive redesign)

    This is just a view on browser, which is pretty much what I see in most email clients although browser view not recommended approach to testing as it is not a true representation of how it looks in some email clients.


    Web URL:
    http://newsletter.research.wvu.edu/


    Responsive Views:
    http://responsive.pixeltuner.de/?s=http%3A%2F%2Fnewsletter.research.wvu.edu


    Litmus test results:

    Click to view a bigger image. The unchecked screenshots are just the email clients that don't support responsive emails. It works fine on all the desktop webmail and mobile specific native mail apps and a some other mobile mail apps (eg. gmail app on android and such).



    Here is a quick Polar Poll. Please click to answer (yes/no) and see votes.




    References, Further Reading:

    http://www.campaignmonitor.com/blog/post/3564/applying-fluid-layouts-to-html-email-design/
    http://www.startupcto.com/marketing-tech/html-email/tips-and-tricks
    http://mobile.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/
    http://zurb.com/ink/docs.php
    http://internations.github.io/antwort/
    http://www.campaignmonitor.com/blog/post/3143/outlook-2007-and-the-inline-important-declaration/
    http://premailer.dialect.ca/
    http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
    http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/
    https://developer.mozilla.org/enUS/docs/Mozilla/Mobile/Viewport_meta_tag?redirectlocale=en-US&redirectslug=Mobile%2FViewport_meta_tag

    No comments:

    Post a Comment