JBi-Film-Cover
JBi-Film-Cover
Sales by Country by Unsplash
Sales by Country by Unsplash

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.