Responsive vs adaptive webdesign, which is best for you?

Responsive webdesign has become a catch-all term for making your website work well at low resolutions.

Smartphones revolutionized the mobile web, and tablets are throwing another wrench into the gears with their growing popularity. With all things considered, a website today could be experienced on a low resolution smartphone, a medium resolution tablet, or a high resolution desktop or laptop. When you throw retina displays into the mix, the number of potential screen sizes is dizzying. Ideally, your website will look and function gracefully on all of the above, at any resolution.

Responsive webdesign in itself is the process of making a website work on very small screens, very large screens, and at any resolution in between.

Over the last few years, the industry has collectively developed a shortlist of common best practices. Many of these practices focus on retrofitting websites intended for high resolution down to lower sizes. Others start at mobile and work up to the larger viewports, optimizing as needed. All of these practices can generally be categorized as either responsive or adaptive layouts.

 

Responsive vs adaptive layouts

Responsive layouts generally perform better than adaptive layouts, but in some cases (complex webapps for example) an adaptive approach could serve users better. Either way, the goal is to make your website always look its best at the desired resolution.

Most people choose to use media queries to do this, as they are rock solid unless you need support for IE8 or below. For those of us who still have an audience in IE6 – 8 though, Scott Jehl has created a JavaScript polyfill called Respond.js that will make things work.

Before, many webdesigners had minimal communication with developers until the handoff. Now though, designers and developers have to work together through both the design and development process in order for everything to go smoothly. From user analytics to what can or can’t be rearranged when changing viewports—designers and developers are closer than ever, if not the same person. If you’re looking for inspiration as to what responsive or adaptive layouts look like, MediaQueri.es is a popular webdesign gallery that displays four viewports of a website.

 

Adaptive layout design & development

When the idea of responsive webdesign first started gaining ground, adaptive techniques dominated for a while. It’s easier to transition into designing and developing for these layouts, although they require more work than their responsive conterparts. This is also the route many people take when retrofitting an existing website to be mobile friendly. Because of the nature of adaptive layouts, they give much more control over the design of the website. You only have to design for specific viewports, and browsers only display the highest one that will fit in it’s width. These layouts are the ones that “snap” when adjusting as you resize your browser window. In fact if you resize your window to be smaller than 1024 pixels, you’ll see this sudden change I’m talking about as the layout of this website adjusts to focus on a medium resolution viewport.

Adaptive design

When designing for an adaptive development approach, the work is fairly easy. Before responsive webdesign became a thing, you simply designed one layout and then developed it. Now, you’ll design for multiple viewports, and develop them. Generally, it’s easier to start at low resolution viewports and work your way up. If you start with high resolution viewports and go down, things could end up a little…compact. And by the time you reach mobile, cluttered.

The number of viewports you design for is entirely up to you and the developer, work out a battle plan based on your users. If current site analytics show users mostly using low and medium resolution viewports, plan for those. You want at least three: one for low resolution viewports (smartphones), medium resolution viewports (tablets), and one for high resolution viewports (desktops and laptops). Ideally, planning for six is the standard, having a high and low resolution layout for each of the three viewports listed above. However, having too many more than that will make the development and maintenance too much to handle, so be wary.

Adaptive development

Developing an adaptive layout is actually quite simple as well. Assuming you’ve worked with the designer (or are the designer) from the get-go it’s just like developing a traditional website. You’ll start by developing the site at a mobile low resolution viewport. Once you get that done, we’ll use media queries to expand the layout for higher resolution viewports. Below are low, medium, and high resolution viewport media queries:

/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }
/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }
/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }

This is where the “snap” comes from in the adaptive approach. Since we’re targeting multiple common viewport resolutions, going from one to the other when resizing the window may cause the layout to jump. As I mentioned before, adaptive design & development is only highly useful for retrofitting or for complex webapps. Designing and developing for this many layouts for independent viewports is much more of a hassle if it isn’t needed.

 

Responsive layout design & development

As of today, responsive design and development is the de-facto approach to use. While it offers less control over the layout compared to an adaptive approach, it’s much less work to implement and maintain as you technically only have one layout. It’s also more customized for the website too, and this is the key selling point. You’ll be able to make your own breakpoints based upon when your design breaks or doesn’t look as intended.

Responsive layouts also include fluid layouts. Before responsive webdesign caught on, fluid systems were popular – layouts using percentages for widths. While they certainly worked well in most cases, that was before we had smartphones and tablets. Now, most fluid layouts are augmented by media queries at very low and very high resolutions. Otherwise you could end up with highly compact or immensely large layouts.

Responsive design

While you have a very simple guide to follow with adaptive design, responsive design isn’t so clear cut. There is heated debate that designing in the browser is the best way to go about it—designing and developing at the same time. Since you’re essentially going to take all viewports into consideration when designing, there is more work involved on the design side. Ideally, we want to keep the viewports in mind, but not design for any particular one. If possible, try to meet at a middle ground; Focus on mid resolution viewports while keeping in mind the layout will need to adjust for lower and higher resolutions later.

It’s exceedingly important to use existing user analytics if you have them. If your site already has analytics that demonstrate your audience primarily reads from low resolution viewports, design with a focus on those. Target your audience, even if that means ignoring some of the best practices out there. In the end, your website is going to be serving them, not the people aggregating these ‘best’ practices.

Responsive development

Once the design phase is complete, development is where the real fun begins. As mentioned before, if you have analytical data of your typical audience, start there. Once you get your layout developed, you’ll use media queries to make it responsive. Instead of defining set viewports though, you’ll instead manually resize your browser until the layout breaks. When that happens, that is your breakpoint width—add a media query to fix the break in design and continue on resizing. Ideally, you’ll be doing this from a high resolution device so you can see all viewports. Once you ensure you have support for low and high resolution viewports, move on to testing.

 

Custom or mixed layout types

Rarely, You may encounter a website that uses a custom solution, such as WebdesignerDepot. Generally speaking, the majority of the web falls into either the responsive or adaptive groups as outlined above, but sometimes people get creative and make their own solution. WebdesignerDepot does so by starting with the standard low, medium, and high breakpoints, then supplementing as needed inbetween when the layout breaks. On top of that, the layout is also fluid in nature up to a set max resolution. With this in mind, get creative and build something that breaks the norm!

 

Browser testing responsive and adaptive websites

Unfortunately, there really isn’t any good solution to browser testing these layouts yet. The best way to go about testing is to do it manually: loading up the page on your phone, tablet, laptop, and anything else around. You can also use a viewport spoofer in your browser if it supports such an extension. Ripple Emulator is an extension I use in chrome to test some low resolution viewports. While it’s certainly inconvenient to manually test on devices, it gives a more accurate impression of the functionality your site has. UI that looks alright on an emulator, may actually perform quite poorly on an actual device.

 

In conclusion

As extensive as this article is, this is simply a primer on the subject of layout types. There is a lot of information about responsive webdesign methods not included in this article; Optimizing UI elements & typography, responsive images & media, device pixel ratios, and much more isn’t explained here. However, there are plenty of sources for such knowledge, in much more information dense forms. Since the idea of responsive webdesign came around, we’ve contributed to an exceedingly vast wealth of knowledge on the subject. I hope by explaining the difference between layout types here, you’ll be able to better have a handle on the idea of a responsive web… without getting lost down the rabbit hole.

The community is constantly creating new techniques and constructing creative solutions to problems we’re only just starting to encounter. So while there is a vast wealth of information available about responsive webdesign out there, it’s a concept still in it’s infancy. While best practices and common use cases are easy to conform to, being creative and paving your own solution is always encouraged. If you have any tips or suggestions for those of us just getting into, or extending our knowledge of responsive webdesign and development, spark a discussion below!

 

Featured image/thumbnail, uses responsive image via Shutterstock.

0 shares
  • http://www.nathanhornby.com/ Nathan Hornby

    Seems there’s a core mistake/some confusion in this article.

    RWD still uses breakpoints, it still uses media queries, in fact it has almost the exact same workflow as AWD, the only difference is that *between breakpoints* the layouts are fluid. What you seem to have described above is a pure fluid site.

    • http://www.scanpartner.no/ Thomas L.G.

      You’re right, @NathanHornby:disqus. But also, AFAIK, I believe there’s another difference as well: While responsive design just stretches and re-orders the content in a fluid way, using adaptive design could mean you get different content (html) based on the type of device you’re using. Entering a landing page using a mobile device might get you a very different layout because the user intent is different than when using a desktop device.

      This also means performance might be better on mobile devices using adaptive design, as it would load media/images specifically for mobile devices. That being said, responsive design also has some options on this now, like srcset/picture element/responsive images.

      Amirite or amiwrong? ;)

      • http://noxxten.com/ Dustin Cartwright

        Exactly this. On both adaptive and responsive layouts, we would want to use progressive enhancement. Meaning some of the more frivolous features that are too intense on mobile could be removed. Things like video backgrounds, long animations, etc. We wouldn’t want to remove anything that’s actually useful though, only move those objects into a more ideal position.

    • http://noxxten.com/ Dustin Cartwright

      Actually, that’s what’s explained in the article. Responsive is fluid at it’s most basic level, with breakpoints added via media queries when things break. In the end, we would want a responsive site to appear as if it’s a simple fluid layout, but using media queries we can move objects around to be more usable (or aesthetically pleasing) at lower viewport sizes Adaptive is sort of the same, only without the fluid aspect. When the viewport gets too small, the layout jumps to the next smallest viewport defined.

      I was more so trying to provide a primer into the two, rather than an in depth analysis. With either type, there’s still so much more we can add for a better experience on smaller viewports… changing font sizes, images, re-aligning call to actions and other buttons, optimizing for a thumb rather than a pointer, etc. The list goes on haha.

  • J Hardy

    When will people begin thinking about the actual meaning of the words they give things instead of just the “industry terms” that have been shoved down our throats.

    Via dictionary.com, Respond – to react favorably / Adapt – to adjust oneself to different conditions, environments. etc.: to adapt easily to all circumstances.

    Adaptive design should be looked at far beyond just media queries. Adaptive design should be thought of as the sites framework adapts easily to it’s environment.

    Responsive design should be looked at less from weather a site expands or shrinks, or if it is “liquid”. Responsive design should be thought of from a component standpoint.

    So, do the components of a site respond to the framework, and does the framework adapt to the environment it is being viewed in.

    Stop thinking about defining a design/code primer on weather it has breakpoints or not, or if it’s “liquid” or not.

    People need to start looking deeper into the terms and meaning of what they are talking about, rather than just “running with the herd” and leading new developers into the same fold.

    • Tim

      When will people learn how to spell “whether”? Dictionary.com could’ve helped with this.

  • http://www.ebay-store-designer.com/ eBayStoreDesigner

    very nice explaination. A responsive website shows the same content in different layouts based on the device used, while an adaptive website does the same thing, but technically it shows different files based on the device used to access the site. Absolutely. The ultimate goal of responsive/adaptive design is to offer enhanced user experience to the visitors. Thanks a lot!!

  • http://www.firmennest.de/ firmennest webdesign berlin

    Thank You for the “adaptive” code.
    We realy try to optimize our Websites for every Windowsize and mobile-Versions ;)

  • Tom Rudge

    Why not use both AWD & RWD – “redaptive” – http://www.redaptive.co.uk

  • http://www.locksandunlocks.com Locks and unlocks

    As we know that many companies are still going with the basics of
    responsive, and they’re not ready to confront the more sophisticated
    flavors of adaptive.