What’s the Difference Between Scalable, Fluid, and Responsive?

While mobile has taken email over by force, some small factions of other devices still hold their own. The percentage of emails read on mobile devices remains steady at 54% of opens as of the end of 2019. Desktop dropped to 16% of opens and webmail grew to 30%.

This means that it is as important as ever to make sure that your email’s design will work on all devices and clients, especially on mobile devices where the majority of emails are read.

There are a few different approaches to create email designs that work across devices and platforms. They have a range of unique features that gives each its pros and cons.


Also known as: Mobile aware, mobile-friendly, agnostic, or mobile-first

When you are designing an email for mobile, this is where you start. Every other approach builds off the basis of scalable design. This style of email design works well across both desktop and mobile without using any code to adjust tables or image size. It uses a grid system for alignment and proportion, single-column design, and big buttons to ensure that it works on both desktop and mobile.


  • Easy to implement.
  • No coding needed to change how the email shows up.
  • It is reliable across clients and devices.


  • Some Android apps do not scale at all, which means users will have to scroll up and down AND left and right.

Tips for implementation

  • Make your buttons large and touch-friendly.
  • Use a grid system for alignment.
  • Make sure that crucial information and the CTA are at the upper left of the email to make sure it can be seen on devices that don’t scale.


<table width=”100%” cellspacing=”0″ cellpadding=”0″>




<table width=”600″ align=”center” cellpadding=”0″ cellspacing=”0″ bgcolor=”#ffffff”;>

This style is in between scalable and responsive design. It uses percent-based sizing for tables and images so they will fit on whatever screen they are viewed on.


  • Content “flows” to fill the screen.
  • Simple for teams with limited resources.
  • Layouts are simple.


  • It’s hard to control how text and images interact and how they appear on each client.

Tips for implementation

  • Good for emails with text-heavy layouts
  • On larger screens, you need to constrain the width.


/* Media Queries */

@media screen and (max-width: 600px) {

.email-container {

width: 100% !important;

This form of email design is the industry standard in 2020.

It can add to the fluid design style by adding more control of elements using CSS media queries. It uses the media queries to control elements of the email.

This form is best known for its ability to control the layout of emails, change text, button, and image size while also allowing individual elements to be swapped or hidden depending on client/device.


  • Designed specifically to fit targeted devices
  • Will be easier for audiences to engage
  • Best fit for most mobile devices
  • Gives designers the most layout control


  • Can be complicated for teams with fewer resources

Tips for implementation

  • Start small by changing the size of texts, get more complex from there

It is up to you which of these mobile-friendly email styles you choose to implement. Scalable and fluid styles don’t require as much know-how or resources to implement, while both responsive and hybrid designs are the best fit for creating emails that look good on the most screens possible. Choose the one that is the best fit for your team now. It’s better than ignoring mobile and making half your audience look at an email that doesn’t fit on their screen.




HIPB2B is a demand gen solution provider, utilizing content, email, and marketing automation to drive outcomes for marketing and technology clients

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Get Free Sample MOKOQI Magnetic Levitating Globe with LED Light, Cool Tech Gift for Men Father…

Mailchimp Love: Who Needs Photoshop?

Gray Pier HDRI

How Design Inspiration Created the New Great Wave of Designers


Fluid Magazine

Perception On Designs Around Us

By Snigdha

From Sketch to Screen — how Blake Stevenson created our Ambassador art print

A woman holds up an art print commissioned by Sketch inside a printing studio

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


HIPB2B is a demand gen solution provider, utilizing content, email, and marketing automation to drive outcomes for marketing and technology clients

More from Medium

E-Learning Development Instructional Design Fundamentals

Essential Usability Metrics for SaaS

What is MVP in software development [+5 benefits of MVP] | SumatoSoft

What is a Minimum Viable Product. (MVP)