And if so, which one should you pick? Settling the responsive vs. fluid design debate
Design is a delivery mechanism for content – nothing more and nothing less. The more elegant, the better, of course, but form over function is never a good idea no matter what you’re doing. When we talk about good design at Mequoda, aesthetics (as much as we love them) take a back seat to user experience. And when discussing the responsive vs. fluid design problem, we always caution publishers to not overcomplicate things by getting bogged down in industry buzzwords.
After all, the solution might be sitting right in front of you. In fact, there might not even be a problem to begin with!
Responsive vs. Fluid: The Definitions
Responsive design can describe the presentation of any product, but for our purposes, we’ll limit things to your website and your email.
Let’s start with the basics: Are your website and email newsletter optimized for any device?
If a consumer visits your site after a Google search or social encounter, will they find a layout that fits into both a desktop and mobile experience?
If they open an email while watching a ballgame or shopping with their partner, can they read it comfortably?
Remember, the term “mobile” includes tablets, smartphones, phablets, and, now, even the Apple Watch.
Responsive web design is defined as exactly what it sounds like: Your pages and products maintain their properties at any size, and user experience is preserved across all screens. More to the point, you’re able to accommodate all readers. Make no mistake: If you’re launching a website, you must, at the very least, employ responsive design. It is de rigueur nowadays, and rightfully so.
This demand doesn’t stop at your site. Your emails also need responsive design. According to Litmus, more than half of them are read on mobile, which means engagement depends on clean, intuitive consumption.
[text_ad]
At Mequoda, our emails are built on a “mobile-first” design – which means they’re also responsive. If you’re responsive, you’re also simultaneously future-proofing your content as mobile-first – the two concepts go hand in hand.
When we design email newsletters, we focus on simplicity and thin width so that the content resizes easily on any size device. Apple’s gadgets are more forgiving in their automatic resizing, but a good rule of thumb is to stick at under 600 pixels to optimize for any phone or tablet. We do 580px, which will scale down well to even 300px wide on Androids and other phones.
Our emails use simple media queries, which have two breakpoints. Breakpoints are basically the point that your site’s content will “respond” – it’s when the content decides how you’re reading it, based on the screen width, and then adjusts the dimensions and readbility accordingly so that the reader can digest it best.
Our emails are also designed as a stack, where we use one column and stack content on top of one another. This way the user can scroll down though their email from one story to the next and avoid any kind of horizontal scrolling.
In this stack we have three editorial snippets for the three articles we published that day. In between each editorial snippet, we also place an ad, either from a sponsor, or for a featured product. One Mequoda publisher who made the switch from a two-column email template to a one-column mobile-first design has seen a RPM increase of 3.6x.
And click rates increase too. At Mequoda we’ve seen click rates increase by 27% since switching to a mobile-first design. Clicks to our most important ad went up 250%. Mobile -first design is easier to read and digest, and more of the content, including your ads, get seen.
Our website goes a step further and incorporates fluid (or liquid, or flexible) design.
This model, known by several different names depending on which designer you speak with, is based on proportions, or percentages, if you prefer, rather than pixels. Each element is relative to the other, and to the available screen space. It reduces the need for horizontal scroll because it isn’t thrown off by window widths and other factors. Both liquid and responsive should eliminate horizontal scroll.
This difference occurs at a foundational level for sites. You either equip your infrastructure with fluid design principles, or you stick with simple responsive features. However, to be clear, once you’ve established a fluid/liquid/flexible site, by definition you’ve established a responsive one, as form follows function.
Since we use a Zurb design foundation for our site, our multimedia can adapt to any setting, no matter the size or situation. This is called fully responsive design, and combines responsive principles with fluid ones.
So, why not just do both no matter what project you’re working on?
That’s a fair question. And the answer comes down to time, money, content, and user experience. Do you have the resources to upgrade every weapon in your arsenal? If so, go for it, and godspeed! If not, you’ll have to be selective in terms of which products you enhance.
Here’s the thing: For us, our portal is more dynamic than our email. Our homepage branches out to our blog, our event registrations, our white papers, our videos, and, yes, our email newsletter sign-up forms. Our email, on the other hand, has one job: Funnel consumers to our site.
There aren’t a lot of bells and whistles, because we don’t need them. Our audience includes media execs, potential publishing clients, start-up founders, and industry observers, all of whom crave substantive content. Our email newsletters satisfy that craving, while our website offers up the full-course meal.
Your situation might be different. More and more, brands are abandoning websites altogether and operating solely from email, apps, and social. Again, while we don’t recommend that approach, more power to you: You can focus your design efforts accordingly.
Keep in mind, if you’re building a fully responsive website, an evolving term, you’ve accomplished both responsiveness and fluidity. There is no responsive vs. fluid debate in this context – you’ve settled it by combining their powers.
What are your thoughts on the responsive vs. fluid discussion? Let us know in the comments!
