The adaptive layout or mobile version: pros and cons. Part 1

The mobile audience overtook the desktop back in 2018 and has been growing ever since. Therefore, website optimization for mobile devices has already become a necessity. How it is better to do this – using an adaptive layout or using a separate mobile version of the site – we will analyze in today's article.

About mobile traffic and new website design requirements

The volume of mobile traffic in the world is enormous and continues to increase every day.

At the head of web development is now adaptability - a property that allows the site to be displayed correctly on screens of any size: even on tablets, even on smartphones, projectors, and televisions. Without any additional settings and dancing with a tambourine.

The screen of each device has a different diagonal, orientation, and aspect ratio. Naturally, if the site does not use an adaptive template, then the page will be displayed correctly only on the computer monitor, but not on the smartphone screen.

In simple terms, the term "adaptive" means a design that automatically adapts to the screen of each device. An adaptive website displays equally well on different devices: smartphones (with horizontal and vertical orientation), desktops, and tablets (also with horizontal and vertical orientation).

What's important here? Firstly, the site is convenient for the visitor when opened from any device. Secondly, all elements are displayed equally on the screens of all devices. Small elements and fonts remain readable.

Why do we need adaptive design and adaptive layout

Devices from which you can access the Internet are not limited to desktops and smartphones. It is necessary to take into account how the site is displayed on other types of devices, for example, tablets and smart TVs.

That is why web developers strive to ensure that the content of sites is correctly displayed on the screens of a variety of device types.

The complexities of adaptive development

Due to the variety of screen resolutions and formats, the development process has become much more complicated. The aspect of adaptability is taken into account not only by web developers, but also by designers, layout designers, and other specialists who create websites.

In many cases, problems arise when trying to transfer an existing site to an adaptive "template". Especially if the site is self-written and was created many years ago. In some cases, it is cheaper and easier to create a new version of the site than to migrate the old version.

Convenience/ usability for mobile devices/adaptability is separate ranking factors.

These include several indicators at once:

1. page loading speed on mobile devices;

2. ease of navigation;

3. the absence of too small elements that are unreadable from the screens of mobile devices;

4. font size;

5. the absence of elements outside the screen.

If the site is not adapted for mobile traffic, then refusals will begin to grow and the behavioral factors of the audience will worsen. This, in turn, leads to a loss of positions in the search results and a decrease in traffic.

Which screen to consider initially

The question is interesting. There are two main approaches.

First: the smartphone screen is taken as a basis, and then the work on the arrangement of elements moves towards increasing the size of the screen.

Second: the screen of a classic monitor is taken as a basis, and then the display of elements on smaller screens is worked out.

Previously, the most common way of developing was the second option. Today, the first method is more relevant – this concept is called Mobile First. This way of development is more logical and simple initially.

Basic rules of adaptive design

Adaptive design implies compliance with several basic "laws". Let's talk about the most important of them in more detail.

Dimensions of layouts. Breakpoints

When creating an adaptive design, the developer focuses not on specific values, but on the so-called breakpoints. Breakpoints indicate the specific screen resolution at which the page design should be changed.

Let's say you use a smartphone with certain screen settings to view the page. When opening a non-adaptive page, the content begins to shift or crawl away. Breakpoints will help to avoid this. The conditions for displaying the page and its elements will change depending on the width of the site visitor's screen. Elements can increase, decrease, disappear altogether, or be added to the page.

The "canonical" values for adaptive design are as follows:

• smartphones: from 320 pixels / 480 / above;

• computer monitor screen: from 1280 pixels and above;

• tablets: from 768 pixels and above;

• netbooks: 1024 pixels.

Relativity of coordinates, dimensions, and scales

A wide variety of screens and device types does not allow the use of any precise units of measurement. When we talk about adaptive design, we need to understand that relative values are used as such units. Because each screen has its own pixel density, which naturally correlates with its size. So, the resolution of 360 x 240 pixels will look absolutely different on the tablet and TV screen. That is why adaptive design uses relative values. For example, the coordinates/dimensions/scales of the block are determined in relation to the upper boundary or in relation to any other element.

Nesting

There are many different objects on any page. Their relative positioning is not only an advantage but also a disadvantage, since there are difficulties with the location of interactive objects relative to each other. Usually, this problem is solved with the help of a block container - the entire group of elements is sent to it.

Threading

This means the absence of block shifts. When accepting the site, please note: if the blocks are shifted, then viewing the page becomes a real test.

Graphic formats

There is a simple rule with graphics. When there is minimal detail in the image, we select a vector. When maximum detail is required, we select a raster. In any case, absolutely all images on the site should use compression.

Fonts

The most beautiful design fonts, in addition to their undeniable advantages, have some disadvantages. Yes, embedded fonts are beautiful, and they effectively separate your site from the gray mass and dozens of competitors who use system fonts. But embedded fonts have a significant disadvantage: in addition to the fact that many of them are paid, they also increase the page loading time for the visitor. Here you will have to find a compromise between the two types of fonts or do an ideal optimization of the entire site in order to achieve the best page loading speed.