What is ‘responsive & adaptive’ web design?
As customers increasingly use a range of multiple devices to browse, shop and communicate, it is becoming critical that applications work seamlessly across a range of mobile and web devices. To ensure that the consistent functionality that customers need is delivered, developers must select the best design approach to suit their needs, whether this is responsive web design (RWD), or adaptive web design (AWD).
RWD uses a single fluid website for all platforms. As browser width changes, the layout scales down website elements to fit the screen. Conversely, AWD doesn’t use a single layout that changes with each screen size, but rather multiple layouts designed for various screens.
There are some key considerations to bear in mind when using each method outlined below.
Cost
AWD is more costly than RWD, as it’s expensive to develop several layouts for each webpage or for each webpage template. This is necessary when using AWD in order to ensure that each web page loads correctly across devices.
Visual quality and user experience
AWD delivers a more precise mobile web experience than RWD because pages are rendered based on what mobile users care about the most. For instance, airlines often have a completely different website layout for mobile than desktop to provide quick access to ‘check-in’, ‘flight status’ and ‘book a flight’ features. This is not possible using RWD, which in some cases may lead to a poorer user experience.
Kinsbruner: “I ordered ‘smokey charcoal grey’ for my background. Kind of says ‘responsive but mysterious’, no?
Kinsbruner: “I ordered the ‘smokey charcoal grey’ for my picture background. Kind of says ‘responsive but mysterious’, no?
Adaptive design allows organisations to deliver a unique mobile web experience because an AWD smartphone layout actually strips away unnecessary desktop website elements, giving users what they need for a great experience on mobile.
Load time
In general, RWD sites load faster than AWD, but it depends on the size. If RWD code is written efficiently the site will work well on any new device and screen size. RWD sites tend to load faster for content heavy websites, with not much difference between mobile and desktop user interfaces.
AWD sites will only work on screen sizes that have an existing layout and an organisation may not have a layout prepared for every new device. With AWD, images are resized rather than scaled down, and ads and JavaScript that aren’t needed on a mobile website are eliminated. Therefore, when AWD code is written efficiently, load times are faster than RWD.
Ease of development and maintenance
Although it is more expensive than responsive design, AWD can be easier to develop and maintain as long as no new or different platforms are introduced.
RWD is more time consuming to implement. Because RWD uses one layout and one code base, it requires developers to pay extra attention to the code to make sure it functions well on any screen size.
Search engine optimisation
Responsive design has an advantage over adaptive design in terms of Search Engine Optimisation because responsive sites deliver the same HTML code, no matter the device. This makes it easier and faster for search engines like Google to index a responsive website.
So which design style suits your needs?
In general, if you are developing a complex site that needs to be highly customised and will be used heavily on mobile, it will make sense to use AWD, as this enables the creation of unique mobile web experiences.
However, if you want to design a simpler website that is cost-effective and easily searchable, it will usually make the most sense to choose RWD. This decision must be based on the user experience required, as well as business needs, strategy and budgets.
For more check out: