Can you just make it responsive?

The mobile web explosion is great news for us email folk — but super fast unregulated growth brings with it a problem or two — in this case, keeping everyone on the same page.

The whole email production process has become a little more complex. There are more ways to do things, but also lots of different words and phrases being used one way, but perhaps meant another. Hands up who has heard the phrase, “Can you just make it responsive?” In the same way, “Proposal RE: Standardised Nomenclature in E-mail” might be technically accurate, but no-one would read it so it would be useless. Words mean things. You can see how confusing this could get already…

Email is all about communication, and yet we are finding that there are some barriers either within departments or between agency-side and client-side. Put simply: lots of terms are being thrown around, so let’s have a go at a _v1 of names, and crucially their relationship to one another, in a visual way.

You may agree, or you may not, either way that’s fine; please comment and let us know your reasoning. We will be reading with interest and will consider all the points fairly. We need the email community to help with this, and appreciate this is not a new topic.

So here it is:

email_flowchart

Let’s break it down using the same format as the talk given recently at Completely Email with an example for each. We will add to this list!

HTML — Graphical emails

Plain text — Text without formatting emails

[HTML] Fixed-width — This means the email is hard-coded at a certain width using an absolute unit such as pixels. The email’s width does not vary: if you resize the browser screen nothing happens. In order to fit into a phone it “zooms out”.

[HTML] Variable-width — This means the email will break its layout and reform into another fixed-width or into a proportional, relative width. The email’s appearance will be influenced directly by window width.
(Other names considered: relative, proportional)

[HTML] [Fixed-width] MOBILE FOE-Y — Sobering thought: only a few years ago the flowchart would stop here. Unoptimised email.
(Other names considered: Normal, Regular, Desktop, Like its 1999, Bullshit, Old World, Static, Brick, Mobile Fierce.)

example from Opodonot picking on anyone, there are still a lot of unoptimised emails out there going out on a daily basis. Whilst we are not fans of unoptimised mailings in general here, this is a fairly classic newsletter format that doesn’t look too good on a small screen.

[HTML] [Fixed-width] MOBILE FRIENDLY— email with oversize visual elements, bigger buttons, bigger bolder fonts, bigger icons etc. This means that in desktop view you get a very large “in your face” type email and in mobile it “zooms out” to be legible. Perhaps the articles may also be built in such a way as the user can double tap, but normally short copy is used to push to website. The email may also be wider on desktop, so that is scales down better on a small screen.
(Other names considered: Mobile Considered, Oversize, Scaleable, Mobile Aware*)

example from Pizza Express note the size of the social icons
example from Barburrito note the size of that CTA

[HTML] [Fixed-width] NARROW — Narrow width email hardcoded to be typically between 300-550px in width. This means we get a thin email in desktop view and a “mobile ready” email in smaller screens. This isn’t “optimised” as such because you are trading off the desktop for mobile. True optimisation occurs under the “variable width” umbrella. This is mistakenly sometimes referred to as “Mobile First” which is actually a design concept about envisioning the email from a mobile POV first - designing the “core content” and then adding/expanding for desktop rather than removing for mobile.
(Other names considered: Skinny, Mobile Biased, Mobile Ready)

example from Spotify  - note that this method isn’t as popular any more. Here Spotify have used a narrow approach but also made the images fluid to help with scaling when <480px.

Variable-width — There are 2 types: with and without media queries. “With” means depends upon media query trigger, “without” means variable-width without media query trigger.

[HTML] [Variable-width] [YES-MEDIA QUERY] ADAPTIVE — A series of fixed width layouts triggered by one or more breakpoints.
(Other names considered: stepped, staggered, pivoted  )

example from Clinique - note the multiple stepped or staggered nature of the multiple breakpoints as you resize the window
example from River Island – note the very clear breakpoint showing essentially 2 fixed widths

[HTML] [Variable-width] [YES-MEDIA QUERY] RESPONSIVE - A seamless transition whereby layout change is triggered by Media Queries and is relative to the screen size. This is a very popular and positive method of optimising for mobile.
(Other names considered: none. We define and agree what responsive is and work other names around it. )

example from Capital FMnote the full width imagery fully and seamlessly resizing and content shifting upon resizing the browser window.

[HTML] [Variable-width] [NO-MEDIA QUERY] FLUID - Purely relative layout like HTML in its raw state. So no trigger. This doesn’t really exist in email as the rendering landscape is too harsh: i.e.the screen size difference is too great and the mailclients vary.  There is no need to send out an email built soley in percentages – it will look unruly in a very large screen and not that great in mobile.
(Other names considered: scaleable, liquid)

These are hard to find in the wild for the reasons above. LinkedIn used this a while back.
example from YPlan this is a simple one-column design which employs fluid and static elements meaning a form of optimisation without media queries.

[HTML] [Variable-width] [NO-MEDIA QUERY//YES-MEDIA QUERY] HYBRID — A mixture. The good news is that by using conditional statements, Media Queries, CSS and all the hacks we have, we can apply fluid principles to attain optimisation no matter where the email ends up. We are moving towards progressive enhancement to raise the bar, as opposed to building an ideal and allowing it to gracefully degrade. A more modern way of looking at email. One way to think of it is: optimisation everywhere as a standard.

(Other names considered: none, but this concept is also propagated and added to/improved upon by other email brains out there such as Litmus, MailChimp and Campaign Monitor and more). Read more here and here.

example from Email Weekly this is our very own newsletter. Note how it looks in Gmail App vs other emails.

* Thanks Jason Rodriguez – I like that one

 

  • Pingback: Tweetable Takeaways from the Completely Email Conference | Email Design Review

  • Todd Fraser

    Brilliant! I don’t think there is any excuse for ‘mobile friendly’ emails any more. Analyse your data, see how many people are opening your emails on mobile and develop to cater for that audience. If you are investing time in being ‘mobile friendly’ and ‘mobile aware’, spend slightly more time on actually becoming mobile!

    I know it is considered an approach, but I think there should be space for the term ‘mobile first’. If you create a mobile first email then you use a mixture of different methods when developing.

    Great post, I am not a fan of Disqus though, when trying to sign in through twitter the small print tried to get me to agree to allow it to post on my timeline and update my account!! :)

  • Mike Ragan

    Cheers Todd! Totally agree, if you can design for mobile the next step is roll up those sleeves and code for mobile!

    Yeah Mobile First is an important concept – I think it ties in with the “modern email approach” whereby we create the email with mobile in mind – not just rehashing an old shape – and we don’t settle for poor UX on mobile devices. This is the future of email.

    OK will look in to comment options whenever its time for a labs 2.0

  • Jaina

    Great write-up, Mike. It’s astounding to see just how far email has come in such a short amount of time. I remember when the only considerations were HTML and plain text, and seeing your chart up above – woah!

  • Mike Ragan

    Cheers Jaina! I thought it would be nice to try and represent it graphically – crazy, right?! Busy times ahead for us all :)

  • Pingback: Querying your responsive terminology | Get In The Inbox

  • http://www.newzapp.com Annette West

    This is a great article Mike, I don’t think I’ve seen anyone previously cover all the styles and types in this way (loving the Yes-MediaQuery and Mobile Foe-y terms btw!) and its a reminder of just how much the coding of email has evolved in the last 24 months (or so). It’s been a steep learning curve in places and has involved as always, a mix of us taking our clients along for the ride and them nudging us to keep pushing the boundaries. Like Jaina commented, in the old days the flow chart was kind of….

    Is it an email?
    Yes
    Then make it multipart and 600px wide.
    The End.

    I’m not over-keen myself on the mobile first design approach as such, because if only one recipient opens it on their desktop then I want them to have just as good an experience (and I still prefer to read my personal emails on my desktop, sorry, shocker!) but if your open rates show a higher mobile readership then as a designer you can’t help but be drawn to making the mobile format as your starting point.

    Off to share with everyone I know! :)

  • Mike Ragan

    Thanks Annette! I’m glad you like it, all this positive feedback means a lot to us here. This is a great time to be making emails, I can’t help but wonder where it’s going to go in another 24 months! How will that flow chart change? We’re all looking forward to finding out :)

  • Pingback: Reverse stack using table-align based methods | #ActionRocketLabs

  • Pingback: Email Marketing 2015 - Email Marketing Mobile

  • Pingback: Hybrid is the answer. Is it the right question? | #ActionRocketLabs

  • Pingback: Email Marketing Mobile

  • Pingback: Email is Better—Thanks to These Email Developers – Email Marketing Vision