The benefits of using responsive web design

Life was simpler when web designers only had to worry about formatting sites for desktop computers. Most monitors and displays were easy to design for, and one size fit most. Then came the rise of the mobile web.

Since the dawn of the mobile web, one of the big debates was whether to design an adaptive, responsive site that would change to fit different portals or to design a standalone mobile site [known colloquially as m(dot) design for the familiar http://m.site.com URL structure].

Related: 11 powerful examples of responsive web design

For the sake of our discussion today, we’ll consider m(dot) design a thing of the past since it’s no longer considered a best practice because it involves creating an entirely new site with less content, fewer images, and a simplified navigation.

So with that in mind, let’s take a look at different approaches to designing for the multi-portal lifestyle.

What are responsive web design and adaptive web design?

Back in the early part of the century, the debate in web design was between fixed layout vs. fluid layout. Fluid design layouts were set with percentages, and they stretched to fit the frame of the browser, whereas fixed layouts were locked in a single layout determined by a pixel width that was set by the designer.

Neither of these approaches were faultless. While fluid models worked on multiple screen sizes, they looked skinny and unappealing on widescreen monitors. Fixed designs worked well on the screens for which they were designed but were next-to-impossible to use on smaller-screened mobile devices.

Related: A quick guide to designing responsive email

The two topics du jour in recent years are responsive web design and adaptive web design. While both methods help meet the Google recommendations that a site be accessible on mobile along with a good UX and strong performance, each approach has its pros and cons.

To begin with, adaptive web design (AWD) is like the old fixed design in that it uses static layouts based on breakpoints. AWD works to detect the screen size and load the appropriate layout for it. This involves designing for (at least) six screen widths. It can be extra work designing and developing a site with AWD for multiple different screen sizes.

This approach does give you a certain amount of control over style and content strategy that you won’t necessarily have using responsive design. But in the long run, designing at least six “new sites” form scratch is a ton of work that you don’t necessarily have to do with responsive web design.

Carrie Cousins over at The Next Web says you should “consider using adaptive design if:

• Device-specific experiences are a necessity;
• You can actually create different experiences for each of these devices;
• You can handle and maintain adaptive templates and resources; or
• Your user base is accessing your information on a lot of different devices (if analytics show 70 percent of users are on a single device, an adaptive UI might not be worth your time).”

On the other hand, responsive web design (RWD) doesn’t give you as much control over content and style as AWD, but it does take much less work to both build and maintain. RWD is like a descendant of fluid design. It adapts to the size of the screen no matter what the target device. Responsive uses CSS media queries to change styles based on the target device and then loads the page layout per your device’s screen size.

“Responsive design takes much less work to both build and maintain.”

Because RWD shuffles and moves the content around the screen in order to fluidly fit the device window, you’ll need to pay particular attention to the visual hierarchy of the design as it shifts around. This is where testing on multiple devices and in multiple browsers comes in handy.

Many designers feel that responsive design is the more challenging method of design because they have to plan for a nearly infinite number of screen sizes. Even with this wrinkle, RWD almost always results in cleaner code and better adaptability, so it’s built with the future in mind.

Why responsive design is the future of the web

Still not sold on why designing responsively is designing responsibly? How about this:

• It’s more pleasant for your readers. There are no inherent limits on screen dimensions like you have with AWD. While responsive site designs are guaranteed to work well on any screen size, adaptive designs only work on as many screens as its layouts are able to.
• Responsive designs load faster. An adaptive website needs to load ALL possible layouts while responsive websites only need to load the one that works across all platforms.
• It’s futureproof. Because it’s not limited to the screen sizes you designate, your page will load and look great on the next Samsung or iPhone (not to mention tablets and smartwatches), regardless of the screen dimensions.

On top of that, responsive design is automatically incorporated into your InVision Studio projects (so you have no excuse)! Responsive tooling is a core tenet of Studio itself. This allows a user to easily and rapidly create various versions of the same screen leveraging components and responsive constraints.

Welcome to a world where your iPad, iPhone, Android, and wearables versions can all live inside a centralized design file with very little effort. Studio’s dartboards allow you to see the changes in real-time as you adjust dimensions rather than having to look by trial and error for potential break points.