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

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 2016. 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.

 

Scalable

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

When you are designing email from 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 basically uses a grid system for alignment and proportion, a single column design and big buttons to ensure that it works on both desktop and mobile.

Pros

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

Cons

  • 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 the key information and CTA is at the upper left of the email to make sure it can be seen on devices that don’t scale.

 

Fluid

    
<table width="100%"  cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>
      <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.

Pros

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

Cons

  • 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.

 

Responsive

     /* Media Queries */ 
   @media screen and (max-width: 600px) {

       .email-container {
           width: 100% !important;

This form of email design 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 certain elements to be swapped or hidden depending on client/device.

Pros

  • 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

Cons

  • Media queries don’t work everywhere (e.g. Gmail)
  • Can be complex for teams with fewer resources

Tips for implementation

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

 

Hybrid

    
<!--[if (gte mso 9)|(IE)]>
                               <table width="100%">
                               <tr>
                               <td width="25%" valign="top" align="left">
                               <![endif]-->

Hybrid design is a direct response to Gmail ignoring media queries. It also uses fluid tables and elements by default instead of using media queries.

It uses Microsoft’s conditional comments to restrain fluid tables on larger screens.

Pros

  • Works on just about every client/device

Cons

  • Gets difficult to implement when designs get more complex.

Tips for implementation

  • Keep the design simple

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.

 


 

Which style of email design does your team favor? Why? Let us know in the comments section.

 


 

Leave a Reply

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.
%d bloggers like this: