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