Responsive or Adaptive Web Design?

With the development of technology requirements for design have also grown, now the site design should not only be functional, reflecting the company’s activities, beautiful, but also adaptive.

What do they usually mean by adaptive web design?

Adaptive web design it is a design of web pages, which will ensure the correct display of the site on devices with different screen sizes. This means that viewing the same site will be equally convenient and understandable, regardless of the size of the user’s screen, there will be no need to increase individual areas to click on the desired link.

Why did adaptive web design become a necessity?

• Increase the number of devices with Internet access

Today, there are many devices that are used to access the Internet. These devices differ in screen size, resolution, as well as in how they display pages of sites. That’s why it’s important that your site is ideally displayed on any user’s device.

• The growth of the popularity of mobile devices with Internet access, and mobile Internet traffic.

Recently, access to the Internet from a smartphone or tablet has become available to almost everyone. Therefore, each of the user should be comfortable on your site, otherwise – they will simply stop using it.

• Quick information

The fast pace of life dictates new scenarios of user behavior. Now nothing is surprising in making purchases from a mobile phone or finding contacts of the nearest necessary store, service, restaurant.

The main differences between the mobile version of the site and the adaptive site

Mobile versions of sites and mobile applications that have been specially developed for various mobile devices can make browsing the site convenient and enjoyable. But they have certain drawbacks:

• Each type of operating system must have its own application or version of the site, which means the use of additional resources, that is, finance and time.
• Need to download the application. In order for a user to use your application, he needs to install it on his gadget. Consequently, this requires additional effort from the user, so most will not perform such actions if they do not have confidence that they need this application and they are going to use it constantly.
• Separation of traffic. The main disadvantage of the mobile application is that all the traffic of the resource is divided into two “streams” – site traffic and application traffic. This means that the traffic to the site will be significantly lower than before the creation of a mobile application.
• The need to integrate site materials. If you use a mobile application, then you need to synchronize the site with the application (which will require the use of additional resources), or perform a double work, which means filling the site and applications with the same materials.

The main difference between adaptive design is that the site will have one address, one design, one management system and one content.

Principles of adaptive design:

The first step to developing adaptive design is to create an adaptive version of the site, designed for mobile devices. At this stage, designers face the challenge of conveying meaning and basic ideas with a small screen and a few buttons. In this case, the content of the site may be reduced, minor blocks may be deleted or hidden, and as a result, only the important part should remain.

• Create a project for mobile devices from the first stages.
• Use a flexible layout, taking as a basis the grid.
• Use of flexible images.
• Working with media requests.
• Continuous and consistent improvement.

The differences between the approaches of Responsive Web Design (RWD) and Adaptive Web Design (ADW)

Responsive Web Design (RWD) – responsive web design, Adaptive Web Design (ADW) – adaptive web design. Each term stands for a special approach to creating your website and is used to describe the process of creating a website that will be conveniently viewed from various mobile devices. In this article, we will tell you about the difference between adaptive and responsive design in practice, without going into technical terminology.

Developers are increasingly abandoning individual mobile versions of websites and creating a single version that works and adapts immediately for all devices: desktops, laptops, tablets and smartphones.

In fact, ADW (adaptive web design) and RWD (responsive web design) solve the same problem, but in different ways.

When creating a Responsive (responsive) website, the flexible page structure is used – a “fluid grid”, the proportions and sizes of which are set in percentages. In addition to the “rubber” structure, flexible images (fluid images), “rubber” text blocks are used. If the width of such a page is reduced, all content will be smoothly compressed, the structural elements will decrease relative to each other. So, for example, if your website had a 3 column structure, then on a narrower screen it would have two or one content columns.

To create a responsive version of a website, media queries are used – blocks of code with device parameters. Media queries allow you to apply certain styles to output different content blocks in different order and proportions depending on the width of the screen and the capabilities of the device on which the site is viewed.

Here is a good example of a “rubber” site:

Adaptive websites (ADV) seem to resemble a response, but the key difference between them is what can be unnoticeable to the eye of a simple user. For an adaptive website, a set of different layout variants is pre-created for devices with different screen widths, as well as the functionality that a certain version for certain types of devices can possess.

For example, when creating a website, the design of pages of several typical sizes along the width is projected: 320 px for smartphones, 760 px, 1024 px for tablets and 1680 px for desktop browsers. When a user visits an adaptive site, the server determines which device is browsing, and shows the user the desired content and template.

This approach allows you to achieve much more complete interaction between the user and your site.

Having determined that the user came to your site with the help of the iPad, we can use the touch screen navigation capabilities, which is not available in the browser version, or disable unnecessary blocks with flash elements that can’t be played on iOS devices, as well as use other characteristic capabilities of mobile devices.

In addition to differences in the interface and user interaction with the site, adaptive websites have a high download speed, since after determining your device, the server gives optimized content specifically for your smartphone or tablet. The response version uses the same HTML template, and the mobile user downloads the same content as for the browser-based desktop version, entirely.

To better understand and see an adaptive website in action, visit www.lufthansa.com from your desktop computer and smartphone. Changing the size of the browser window, you can track how the site template changes.

Which approach should I choose?

Now imagine that you need to decide which approach will be used when creating your site.

Responding sites are more suitable when there is no difference between using a website on a mobile and desktop device, and when the budget and development time are limited.

Adaptive sites are suitable in most cases, but are most needed when the speed of loading pages is important and the user’s interaction with the mobile version is very different from using the browser-based desktop version.

There is no universal solution, however much they talk about at conferences and workshops, and every case of creating a mobile site needs to be considered separately.