Responsive vs. Adaptive Websites

As we all know, a couple of months ago Google introduced ‘Mobilegeddon’; a word which spread anxiety
across the digital land. It’s release encouraged businesses to reconsider their website design and how
accessible their website was on mobile and tablet devices. With the overall emphasis placed on optimising the
user experience across multiple platforms, achieving a mobile-friendly site plays a key part in website
redesign. It’s something that should be considered very carefully and you may have more options than you
think…

As we all know, a couple of months ago Google
introduced ‘Mobilegeddon’; a word which spread anxiety across the digital land. It’s release
encouraged businesses to reconsider their website design and how accessible their website was on mobile and
tablet devices. With the overall emphasis placed on optimising the user experience across multiple platforms,
achieving a mobile-friendly site plays a key part in website redesign. It’s something that should be considered
very carefully and you may have more options than you think…

Responsive design or adaptive design: these are your two options, right? Well no actually, it doesn’t have to be so
black and white. For us, when it comes to choosing which mobile-friendly design is the best, we simply don’t
choose. We use the best of both. Why? By pulling the best bits from adaptive design and the best bits from
responsive design, we can provide the best possible user experience. It’s a no brainer in our eyes.

But, it is confusing and we get that it can over-complicate your decision-making if you’re not even sure what the
differences between the two are, so let’s start from the beginning.

What are these designs?

These design approaches serve the same HTML code on the same URL regardless of the user’s device, meaning one single
website is optimised for all devices.

All content and design is adjusted accordingly, and the SEO ranking is not split between a main site and a mobile
site. For you, this means no extra maintenance and a chance to reap Google’s mobile-friendly ranking rewards.
Winning!

Boy Using iPhone

Young man using an Apple iPhone

What’s the difference and how do I decide which one
is best for my business?

Responsive

In simple terms, responsive web design takes the same site but uses a single fluid design to fit and
adapt to the various and many device screens it can be viewed on. It is based upon media
queries, flexible grids, and responsive images that can be used to create a user experience that
flexes and changes based on a multitude of factors. But don’t worry, you can leave this to the
front end developers!

With Windows 7 and up, Android and now iOS 9 on iPad and OS X El Capitan allowing side-by-side
multitasking on various sized screens, sites should work at any size if they are to have any
chance of maintaining or increasing their Google ranking.

In theory, this mobile-friendly design is prepared and optimised for this, including new screen sizes
that may come out. For a digitally forward-thinking business, this option is one that could
prepare them for new gadgets or web-based devices that may appear in the future.

There is an ongoing debate as to whether responsive is more difficult to design and develop than
adaptive. It is supposedly harder because all functions must be done well and optimised on one
particular design for all devices, as opposed to optimising features to meet each particular
device’s needs.

However, JBi are less convinced by this argument because nowadays so many new sites are using
responsive, it has been made easier for less experienced designers and developers to understand,
use and create! One drawback however, is a slower loading time because the same desktop assets
will be used for mobile.

Ultimately, the primary benefit of responsive web design is that each user experiences a consistent
design, regardless of the device they are using. And not just because the JBi team love simple,
practical and effective design, but because we believe creating consistency is one of the best
ways to build your brand identity.

Adaptive design

In the opposite corner stands adaptive website design. One that again takes the same single site,
however it has different designs for mobile, tablet, and desktop types, rather than one fluid
design.

Adaptive design recognises the device being used and cleverly displays the design that fits best.
Creating an adaptive site involves designing several distinct layouts for multiple screens which
wait on hold until the site is visited, adaptive design will then deliver the correct pre-set
layout for that specific user’s device.

The thing we love about this approach is it’s faster load time as content has already been optimised
for each particular device design. With 40%
of people abandoning a website that takes more than 3 seconds to
load, it is a major factor to be considered in your endeavour for mobile-friendly.

But, and there is a big but, results can be inconsistent for users. As screen sizes vary, there is a
chance that the adaptive designs will be less flexible or streamlined… something which is often
avoided through a responsive design that has been primmed and polished to meet all possible
display requirements.

Conclusion

So there you have it, the pros and cons of adaptive and responsive design. Just choosing these design
approaches will often require a complete overhaul of your existing website, which in turn can be
expensive.

Deciding on what mobile-friendly approach is best for you will depend entirely upon the needs of your
project. But we don’t think the decision needs to lie between adaptive or responsive. At JBi, we
don’t think there should be a specific definition for each design because they are not
completely restrictive of each other. We use a combination of the two to produce designs that
will work best for the user regardless of their device. After all, that is what Mobilegeddon is
all about.

And if you’re still completely caught in a crossroads, just know that responsive is Google’s
recommended design pattern.