Website design has become increasingly challenging with not only the expectation that new websites will render properly on all devices and screen sizes but also that they come up quickly with more users becoming impatient and skipping sites that take too long to load.
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, graphics, scripts and style sheets 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.
