Responsive vs Adaptive Design – Which is Best for Mobile Viewing of Your Website?
The rush to mobile dev has led many web developers to the holy grail of mobile design: the world of responsive vs adaptive. Which one do you choose?
It’s no secret that mobile devices can no longer be ignored. More and more visitors are using mobile devices such as tablets and smartphones to visit websites. Your site should be easy to view on a mobile device, otherwise you’re losing visitors AND driving less traffic to your site. In addition – and more importantly – websites that have a responsive design are garnering better results in search, as search engines have evolved to give higher precedence to these sites.
If you are viewing a website on a phone, and it’s easy to view, it’s probably built in one of these designs. If it’s difficult to view, it’s probably still in the pre-mobile method of building websites, known as fixed width design.
Both adaptive and responsive can prepare your website for mobile use, but in very different ways. Which one is best suited to your site needs, budgets, and goals? Will you need to switch over at some point? What are the advantages of each?
Responsive Web Design
Responsive Web Design provides the optimal viewing experience of a website, no matter what type of device the user is seeing it on. Wikipedia describes it as “an approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).” This is done by using fluid grids. That’s a term for a design that works no matter what the screen size is. So no matter how much you resize the screen, that same layout will automatically respond to that size, like a single ball growing or shrinking to fit through several different hoops.
Adaptive Web Design
Adaptive web design is different from responsive design in that there isn’t one layout that always changes. Instead, there are several distinct layouts for multiple screen sizes. And the layout used depends on the screen size used. For example, there could be a specific layout for mobile phones, tablets, and desktop computers – each of which are made in advance. These three designs wait on standby until someone visits the site. The site detects the type of device used, and delivers the pre-set layout for that device. So instead of a single ball going through several different-sized hoops, you’d have several different balls to use depending on the hoop size.
How do Responsive and Adaptive Compare?
Responsive is Harder to Make
Responsive design is the more difficult choice to pull off since it requires extra attention to the site’s CSS and organization to make sure it functions well at any possible size. It’s easier to make a few specific layouts for your website instead of making one layout that can work in any screen size. While this means that each adaptive layout needs a bit of flexibility to work on several screen sizes, it is easier than making one layout that works for all of them.
Adaptive is Less Flexible
So the one drawback of adaptive design’s easier approach is that the final results don’t always display the best for a wide variety of screen sizes. 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. So if a new device with a new screen size is released, you may find out that none of your adaptive layouts fit with it well. And that means you will have to edit them or add a new one. Responsive sites are flexible enough to keep working on their own, but adaptive sites will likely need some occasional maintenance.
Responsive Sites Load Faster
Load time is a consideration. An adaptive website needs to load ALL possible layouts while responsive websites only need to load the one that works across all platforms. Adaptive sites have a lot of loading to do – all those extra layouts takes extra time and resources, so know that they will be a bit slower than their responsive counterparts. This won’t always be the case, however, such as when you have a responsive site with 100 pages compared to an adaptive site with 10 – for sheer size of the site, the adaptive one will likely be faster.
Should I Use Adaptive or Responsive Design?
Tallying up the score, responsive web design is almost always the safer option to go with for your site. It always functions well regardless of what new screen sizes come and go, improves loading times, and is usually well worth the extra effort in putting it together.
However, for some sites, adaptive may be a better option. These would likely be newer, smaller websites that are just starting out and need to preserve their resources. An adaptive site is easier to create, and the smaller size and audience would keep the slower load times or lower flexibility from being an issue.
Additional Resources
Responsive Web Design – The Basics