3 Different Kinds of Responsive Layouts; Which One is Best for You?

Welcome back to Code Like a Boss, Revisited!

So far, we’ve talked about getting started with HTML emails, and successfully using CSS with emails. Next up, we’ll get into responsive layouts, which is A Big Topic™. So given that, we’re going to take things slow. Before I start getting super in-the-weeds with responsive emails, let’s look at “responsive” means, and then explore 3 different kinds of responsive layouts that can be used when designing your marketing messages.

Defining “responsive”

The term “responsive design”, in the context we know today, was first coined by Ethan Marcotte in an article on A List Apart way back in May of 2010. He originally defined it like this: “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.” Sounds familiar, right?

However, since that initial, groundbreaking article, the concept of “responsive” has expanded to include things like “mobile-first”, where designers consider how an asset will display on a mobile device first. And there are different ways to achieve “responsiveness”, using CSS media queries, JavaScript, server-side code, or a combination thereof. However, since we’re focusing primarily on email in this series, we’ll look at what we can do with CSS alone.

So, we know what it means; how is it used?

3 different kinds of “responsive” layouts

When we implement a responsive design, there are 3 different kinds of responsive layouts we can use to get the functionality we’re looking for. Which one you choose is largely up to you, and whether you’re using a tool to do the heavy lifting or coding it yourself. Note that while some of these aren’t technically “responsive”, they’re often used interchangeably since they perform somewhat similar functions, although each one takes a different approach.

“Adaptive” layout

The first layout method we’ll look at is known as “adaptive”. This methodology uses elements that are of a fixed width, defined using an absolute unit of measurement (most often pixels). So, whatever you decide the size should be for a specific element, whether it’s an image, sidebar, or whatever, it will stay that size. What changes between screen sizes is the way those elements are laid out.

How does that work? Well, a list of specific screen widths (aka breakpoints) are used in conjunction with CSS media queries (remember those?) to determine the layout to be displayed based on the device’s screen width. Depending on which breakpoint is being used, the layout of the asset can change; the order and way elements are displayed may change, along with their positioning in the layout. Because of this, designers will essentially need to design multiple versions for the same asset, one for each breakpoint. Thankfully when working with email, we shouldn’t have nearly as many breakpoints to deal with as we would with a full web page, which means fewer versions of the layout to design and code.

As you might expect, there are some pros and cons to this approach.

Pros

1. Easier to design. Since you know exactly where an element will appear in the asset and how large it will be, designers can have a much better idea of what the user experience will be when they interact with it. There’s also significantly less math involved, since you’re dealing with absolutes instead of percentages.
2. Load time. Since everything is at a fixed size, the browser/client doesn’t need to do any complicated calculations to determine what size something should be or where something should be positioned; it’s already been defined.

Cons

1. Rigid design. What’s a pro from an ease-of-design standpoint also can become a negative. The design is locked down and doesn’t flow with changes in the width of the viewport, keeping elements at a fixed size and just rearranging their position instead of fluidly responding to the screen width.
2. Workload. Since multiple versions of the asset need to be designed and coded, it can take a lot longer to create from end-to-end.

“Fluid” layout

The second kind of “responsive” layout is known as “fluid” design. As the name suggests, this layout flows to completely fill up its container (whether the screen or a containing element). It changes based on any screen size, instead of relying on the set list of widths used for “adaptive” layouts. This is because elements have their sizing determined by setting relative units (e.g., percentages or ems) instead of absolute units (e.g., pixels). So, everything stays proportional as the width changes.

Let’s example the pros and cons of Fluid layout:

Pros

1. Flexibility. This layout is inherently more flexible than the “adaptive” since it’s using percentages instead of absolute measurements.

Cons

1. Layout doesn’t change; it just gets larger or smaller. On smaller screens, columns can get extremely narrow, which negatively impacts legibility.
2. Difficult to design. It can be extremely difficult to design a layout that looks good across a range with screen sizes using this method.
3. Load time. Because the browser or email client must do the math to figure out how large each element should be, loading and rendering time can be slightly impacted, especially as layout complexity increases.

“Responsive” layout

The third layout methodology is what we commonly think of today when we think of “responsive design”. This method combines the morphing layouts of Adaptive with the flexible widths of Fluid design, enabling a designer to truly have their layout respond to the browser or email client and provide the best layout possible for a given device.

This method relies on CSS media queries, in combinations with breakpoints, to adjust to the user’s browser. Elements can expand or contract, be reordered, or even conditionally display or hide, all depending on the user’s device and the marketer’s requirements.

Pros

1. Best layout for every user, on every device. This methodology provides the best layout for an individual, since it tailors itself to work with their specific device.

Cons

1. Timing. Because of the inherent flexibility in the layout, it can be time consuming to design a layout that works well across different screen sizes and browsers.
2. Testing. Especially with email, testing a responsive design can be tricky and time-consuming.
3. Doesn’t always work in an email. Due to differences in how various email clients handle (or ignore) media queries, as discussed in my previous post on successfully using CSS in email, media queries don’t always work as expected, if at all. We’ll talk about how to get around that next time.
4. Load time. Like with fluid, there’s a lot of math involved, so loading and rendering time can be slightly impacted, especially as layout complexity increases.

Note: When you’re working with WYSIWYG-like tools, like the Design Editor in Oracle Eloqua for example, this is usually the method that’s going to be used.

Which one should I use?

So, you probably noticed that Responsive has more “cons” than the other two, and you’re probably thinking, “why would I want to use it?” Well, the “pro” in this case, providing the best layout for your user’s device, more than outweighs all the cons combined. You’re going to want to use the Responsive method for your layouts, since it offers the best options in terms of flexibility between various platforms and screen sizes. It avoids the rigidity of Adaptive layouts, and weirdness that can occur in too large/too small screen sizes with Fluid layouts. And it’s what most people are expecting these days; with emails being read more on mobile devices than desktops, your messages need to look their best, no matter where they’re being read.

The others still have their uses. Adaptive layouts can be employed if you have existing assets that need to be updated for responsiveness; it’s likely going to be quicker to adapt an asset instead of rebuilding it from scratch, and that also means it should impact your budget less too.

You could also consider using Fluid to retrofit an existing layout, but more work would likely be involved because you might need to resize images to prevent them from degrading as they expand or contract between screen sizes.

Wrapping it up

Today, we covered 3 different kinds of responsive layouts, along with their pros and cons. We also talked about which one you should use and noted that Responsive layouts are generally the best idea for today’s emails.

Next time, we’ll dive into building one of these Responsive layouts from scratch, so get ready! In the meantime however, if you need any help converting existing emails to use Responsive layouts, or assistance building them from scratch, let us know!