Responsive vs. adaptive design
Two website design approaches featured in web integration are at first glance very similar, and often overlap in the production process. It is often the case that a website based on responsive web design has elements of adaptive design, and vice versa. On the other hand, these two approaches contain substantial differences.
Responsive design is a method of designing web pages in which the server always sends the same page, regardless of the user's device, and the page layout changes directly in the browser, using cascaded style sheets according to the page width. The result is that the mobile user sees the same content as on a desktop or tablet, and the content is adapted to be as user-friendly as possible.
- Users work with a single page code, and the page can be edited only with CSS.
- In contrast to a mobile website, the user has one measurement code, in one place. It offers global statistics, and users can see from which equipment the page was viewed and at which resolution.
- Thanks to the focus on the resolution, not on the device, responsive design is a good long- term solution on a device because the finished website requires no additional adjustments and optimisation for a new device. Only the media is optimised, during a content update.
- The website has the same graphics, and offers the same user experience on all platforms.
- When a website is optimised incorrectly, large amounts of data are downloaded on mobile websites.
- Compared with a mobile website, adding media to a desktop or other website is more demanding. Pictures and videos must be adjusted for each resolution, and videos optimised. But as a result, the website operates faster on mobile devices, and large amounts of data do not need to be downloaded unnecessarily.
- A situation arises where some time has passed, and a decision is taken to make changes to the website. This is where another disadvantage arises in comparison to a responsive design website with a mobile version. Instead of changing the website and mobile site, changes must be made to each of the dimension of the design, which was established during development. And this costs more time and money.
Adaptive design means optimising the pages for each platform separately and applying all its advantages and making use of the opportunities it offers, so that on each device the design should comply with the standard GUI of the platform. In this method, the server sends the device a web page exactly adapted to the resolution and type of device, mostly using cascading style sheets with relative units so that page exactly fits into the user's display.
- Compared to responsive design, adaptive web design is website-optimised for each platform separately, and makes use of the opportunities presented by the platform, as well as the models and functions.
- It offers fast-loading pages due to the server detection device and browser sending data tailored for a particular device.
- When the setting is correct, the user should be able to switch to the “large” version of the website designed for desktop computers. This option is not available with responsive design.
- Development of the site is time-consuming because of the need to optimise the page for each selected platform front-end and back-end. Before development it is essential to determine for which platform the website will be optimised.
- With responsive design the html, CSS and test result on displays with different sizes must be known. For adaptive design a thorough knowledge is required for all platforms for which website edits are needed, in order to make best use of the possibilities they offer.
- There are strengths and weaknesses in each of these two methods, which in many cases are fully complementary. Therefore, it is very often possible to use such approaches, or at least part of them, in one project. In its focus on devices, adaptive design as an add-on to responsive design offers the web integrator fantastic opportunities to adapt the website to the needs of the client and user.
There are strengths and weaknesses in each of these two methods, which in many cases are fully complementary. Therefore, it is very often possible to use such approaches, or at least part of them, in one project. In its focus on devices, adaptive design as an add-on to responsive design offers the web integrator fantastic opportunities to adapt the website to the needs of the client and user.