Scalable Email Design vs. Responsive Email Design

21 Aug 13, Kelly N. Wilson

Whether we like it or not, more and more users are using their mobile phones for basic internet tasks such as reading the newspaper or checking their emails. A study found that 36% of all emails are being opened on mobile phones. The number is steadily rising.

At such a juncture in the world of smart phones and the internet, sticking to an old-fashioned web layout and not having a mobile strategy is like setting your own home on fire.

Scalable Email Design vs. Responsive Email Design

So it goes without saying that having a mobile optimization strategy for something as essential as emails – a key means of direct communication with users – is a must. There are two strategies for doing this: a) you can go for scalable email design; or b) go for good, not-so-old responsive design.

Scalable Email Design

No matter what the size of the screen where an email is being opened, a scalable email will always appear readable and clickable. There’s a single HTML file of the email, but it can be accessed on both mobile and desktop screens.

It’s a scaled up or scaled down version of an email, helped by a grid system for alignment and proportion. With a single column design, it is easy to code and works well on any screen size.

Responsive Email Design

In the case of responsive email designs, CSS3 media queries are at play to create entirely different layouts for different screen sizes.

So it’s not just a single column being scaled; rather, many aspects get altered, such as the text size, content, resized images and buttons, changed colors, and much much more.

Twitter’s email is a great example of a responsive email design, with layout of any email altering beautifully to fill into any screen size at all.

So you can start off with a 2 or 3 column layout for a desktop screen, and code your media queries to alter it to a single-column layout for a specific device width or less.

You can see how the text stacks up in the mobile version of the site, and the email template has become narrower and some pre-header elements have been hidden.

So should you go scalable or responsive?

We suggest you go hybrid to get the best of both worlds. So you start off with a single-column design and other techniques, and then layer it all up with responsive design elements. Now if responsive design is not supported on any website, the scalable version will run, allowing an equally user-friendly and enriching web browsing experience!


Leave a Reply