Responsive vs Adaptive Web Design

In April of this year, Google encouraged a push towards mobile-friendly websites by changing their algorithm so that sites that are optimised for viewing on a mobile device rank higher in search engines. This change led to many businesses taking another look at how their sites were developed. Having a website that only looks good on a desktop is no longer good enough – the site needs to look good across all types of devices and on a variety of screen sizes.

But this move to mobile optimisation is for the better. More of us now than ever are accessing information on mobile phones or tablets. This trend is clearly pointing to the fact that for businesses to stay alive, they need to present content in a way that’s readable and usable on a variety of devices.

Let’s talk about web development and the part it plays in mobile optimisation. There are two ways that a site can be developed to be mobile-friendly – by using responsive web design or adaptive web design. We’ll take a look at both of these options and weigh the pros and cons of each.

Responsive Web Design

Websites developed with responsive web design (RWD) can instantly adapt to any screen size. The content is readable, the images and videos adjust accordingly, and the navigation on the site is usable – whether you’re viewing the site on a large monitor, a tablet, or on the small screen of a mobile phone. The technology behind RWD is developed in the front-end and executed on the device.

This adaptation to different screen sizes is made possible by using fluid grids, flexible images, and CSS3 media queries. Fluid grids use page element sizing in relative units such as percentages, rather than absolute units like pixels. Flexible images are also sized in relative units so that they aren’t displayed outside their container element. The CSS media queries allow the use of CSS style rules based on the characteristics of the device that the site is being viewed on, usually the width of the browser.

Adaptive Web Design

Adaptive web design (AWD) is another way to solve the issue of making a website mobile-friendly. The goal may be the same as with responsive design, but the approach is quite different.

In adaptive design, the developer creates a separate website layout, with a different HTML code, for each of the screen sizes that the site is viewed on. When a user comes to the site on a mobile phone, for instance, the server detects the device and displays the layout developed for a mobile device. Alternatively, if a desktop is used to access the site, the layout designed for optimal viewing on a desktop will be displayed.

Comparing Responsive and Adaptive Web Design

Both responsive and adaptive design succeed in making sites mobile-friendly by creating a website that’s usable and easy to read on a variety of screen sizes. But since their approach to optimising the user experience on mobile devices is quite different, each has it’s pros and cons.

One benefit that responsive web design has over adaptive design is SEO. Because responsive sites deliver the same HTML code for all the devices used, it’s easier and faster for search engines like Google to index them.

RWD delivers a consistent design. No matter what device you’re viewing the site on, the site will look very similar – with similar navigation and images that fluidly adjust to the screen – so that the user experience is the same across all devices. On the other hand, adaptive design provides an optimized website experience that is unique for each device used. A site seen on a desktop might look quite different if viewed on a mobile device. However, this may be the better way to go if the users of the site have different needs depending on the device they’re using to access the site.

Since responsive design sites are made to work well on any screen size, they will also be compatible with any new devices that may come to the market in the future. But an adaptive design only works on the specific screen sizes it’s developed for – so that if a new device is released, there’s a chance that none of the adaptive design layouts will fit well. In this case, a new layout would have to be developed to fit the new device.

One disadvantage of RWD is a slower load time.  Since the images are first downloaded and then re-sized to fit the device screen, responsive sites tend to take longer to load. Adaptive sites already use images optimised for specific device screens, so they load quicker.

Responsive design sites are also more complex to develop. They require more coding to make sure that the site will be compatible with the wide variety of devices available today. But adaptive design requires development and maintenance of the separate HTML and CSS code needed for each layout – so the amount of work that goes into responsive vs adaptive design may equal out in the end.

What is HTML, and why should I learn it?

3-Minute Read

15-Minute Rule - who you gonna call?

In our Full-Stack course, our tutors and mentors recommend something called the 15-minute rule. Yep… we all know what the 5-second rule is, which is completely different, and if you were to eat your food 15 minutes after it landed on the ground, that would be unhygienic. No, the 15-minute rule is a wise way […]

Developer Spotlight

If you’re thinking about a career in web development, advice from someone working in the field can help.We talked with a developer from Arcusys – a software development company that uses open source solutions based on Liferay technology.Started in 2003 in Finland, Arcusys also has offices in Russia and the United States. It’s been named […]