Querying your responsive terminology

Responsive-web-design-devices3

Querying your responsive terminology

There’s a fair few phrases banging about regarding responsive emails and the term “responsive” itself is one of the most argued terms.

Having HTML render differently on a smaller screen was of course led by web-pages and emails caught up as much as they could, battling through the endless quirks of the many inboxes which an email can be smashed to bits by.

What seems to be the core of the terminology of site design structure is four terms:
Fixed, Fluid, Adaptive, and Responsive.

Fixed – all elements’ widths are set and stay that way on any device

Fluid – all elements’ widths are percentages and the elements will grow and shrink to fit the browser window/device screen.

Adaptive – all elements widths are set to fit the average screen size – media queries are then written to force elements to change at set max and or min screen width sizes. This can be any attribute which CSS can alter, from widths to display, to positioning and more.

Responsive – this where websites are built in a fluid fashion but also use media queries to alter the structure to suit different screens.

But when it gets to email, the jargon seems to get very muddy because you don’t have the luxury off all CSS in all inboxes and you have to use tables to hold them together.

A fully fluid approach is a bit restrictive because you are tied down to a single column that grows with the screen. Nice enough of course, looks great on a mobile but does not make the best use of the space available on desktop and browser inboxes. You don’t have any media queries and it can be a bit of mess with so many screen sizes on desktops too and is subsequently rarely attempted.

An adaptive approach is very popular because most smart phones have a similar screen size so you just set the breakpoint for the largest phone eg: 320px and bring your desktop optimised fixed width multi-column email down into one column and have new fixed widths.
The downside of this is that the reliance on media queries means that it only really works on an iPhone; Android email clients’ support of the media query is poor – although Google have dropped hints that they want to get them working on their Gmail apps now they have dropped Android’s native email from future Android versions.

The other slight downside is having the set width for one phone screen could mean the email does not make best of use of larger phone screens in order to work on the smaller.
So the most popular method is to build for the desktop with mainly fixed widths but with some fluid to help for larger mobile screens and the then use a media query to change the structure down to one column and then use percentage widths so they make the most use of each screen size.

This method tends to be called “responsive”. This makes sense to me as it is a mixture of adaptive and fluid.
But there has been some disagreement over that being truly “responsive”.

The phrase “responsive email” is also used as an umbrella term for any email or web-page which alters in any way to optimise itself for more than one screen size.

It has also been argued (badly) that the use of percentages on the phone’s media query making each block’s width 100% on a phone does not count as fluid because it comes after an adaptive screens size cut off …. this holds very little weight in my mind.

This discussion got a little heated on Twitter recently when someone was not happy that the social icons on a certain newsletter were apparently too big when it adapted for the iPhone and they went further to state it wasn’t responsive it was adaptive.

From my point of view any email which alters its structure for different screen sizes can call itself “responsive”, whether it is purely adaptive or uses fluidity as well or alone where possible.
The method(s) you use for this responsiveness would then become the more granular description of how you made it responsive.

For an email not be responsive it would have to 100% fixed width and not make any allowances to be altered from its original desktop version on the phone or vice versa if is a fixed width slim email built for a slim screen over a wider desktop.
On that note, if you ever feel you have the decide between fixed width slim and fixed width desktop, choose desktop. Everyone knows how to pinch zoom on a mobile but not as many people as you’d think know how to zoom in on a desktop. But pay attention to the clicks by device. it is likely that mobiles will get more opens than a desktop but rarely as many clicks due to the inbox triage. If you are getting good traffic from smartphones, then pay more attention to them.

To add to all of this, it was all changed again during completely email in London last week when Mike Ragan of industry leading email development firm Action Rocket wrote off Fluid as a viable label for email and introduced their new term “Hybrid”, I’m sure I’ll discuss this in another post.