Responsive and Adaptive Web Design – Okay, what’s the difference?

Web design has indeed gotten trickier over the past few years with so many people viewing websites on tablets and mobile phones.  The expectation is that today’s websites will render nicely no matter what type of device they’re being viewed on.

The first website we ever built at Pixweaver is still in service – 10 years after launch. When viewed on one of today’s widescreen monitors, it literally looks like a roll of toilet paper flowing down the centre of the screen. Nowadays, websites tend to sprawl across the page with much bigger photos and graphics to provide a more dramatic and visually appealing viewing experience on today’s expansive monitors.

This is all well and good until that same website has to please its audience on a tablet or mobile phone. Suddenly, text and links are annoyingly tiny and the darn pages take so long to load.  Enter the need for responsive and adaptive websites.

The Responsive Website

The responsive design “responds” to the browser by fluidly squishing itself down to fit within the narrowing browser width but serves up the same content as the broader desktop version. Those nice big images and graphics that came down from the server to fill out the wide screen are now scaled down to fit the shrinking browser window. Page elements and text are re-arranged to fall into a vertical column format but can often lead to some extremely long pages and cause thumb cramps for the poor phone viewer with all the vertical scrolling up and down. The mobile phone, which has much less processing horsepower than its big brother desktop, still has to download those enormous images and graphics even though they are being rendered at a fraction of their actual physical size.  Enter the need for the “adaptive website”.

The Adaptive Website

The adaptive website has the same goal as the responsive website and that is to provide a pleasurable viewing experience no matter what type of device. The adaptive website detects the physical screen size of the device it’s talking to and, through the use of scripting techniques, delivers the best format & content for that device.  Much smaller versions of images and graphics can be downloaded from the server to speed up load times on smaller and less powerful mobile phones. Some content may be summarized or condensed or left out completely to avoid endlessly long pages on smaller devices. Special touch screen and swipe software may be brought in to handle photo galleries and sliders.  In short, the adaptive website will alter content and functionality rather than just re-arrange & scale down page elements as is done in the responsive design.

A Quick Re-cap

In general, adaptive websites are quicker, leaner and better tailored to perform on smaller devices.  They’re also more time consuming to develop and therefore can be more pricey than a responsive website design.

Responsive Website Design – The website uses the same URL on all devices. The website serves the same content to any device but will change the view and order depending on the size of the device. In other words, it rearranges the content to fit onto any screen size. Responsive design is client-side rendering. This means the browser will have to download the entire web page, then resize it according to the screen size.

Adaptive Website Design – The website uses the same URL on all devices. The server (where the website is hosted) detects the device whether it is a mobile phone, tablet, or desktop, and will load the version of the site that is optimized for that device. In other words, only mobile-optimized assets are downloaded. This method is the server-side approach, because all the work is done by the servers before it even reaches the client.

Separate Mobile Website – The website has a separate URL for the mobile website. Usually you will see it as a sub-domain of your regular domain name. Something like m.mywebsite.com. These different URLs are usually optimized for mobile devices.

Category: Pixweaver Articles
Comments are disabled