Some sites look the same on a computer and a smartphone. It’s difficult to use them from a phone: the font is small, it’s impossible to hit a button, the content is off the screen, and ads block the text.
To keep the user from leaving an uncomfortable site, adaptive web design is used. This approach adjusts pages for different devices: phone, tablet, netbook, laptop and computer.
Adaptive design came about for a number of reasons:
- Mobile Internet traffic has increased,
- Many devices with screens of different sizes and resolutions appeared,
- search engines began to focus primarily on mobile devices.
How Adaptive Web Design Works
When designing an adaptive site, several fixed-width layouts are created. The standard set consists of the six most popular formats: 320, 480, 760, 960, 1200 and 1600 pixels, but in practice the 3 most common are 320-768 px (phone), 769-1024px (tablet) and 1025px+ (laptop/desktop).
The main goal is to make the site functional, so the features of the devices are taken into account. For example, the presence of a sensor or screen orientation.
Adaptive sites determine the type of device independently based on the stated screen width. When a person clicks on a link, the site asks the device’s characteristics. After that, it chooses the appropriate layout for a particular device and shows it to the user. This operation is called a media query.
Why use responsive web design
More visitors. The number of users who visit sites from a computer is constant. If the page is convenient to enter only from the desktop, its attendance will fall.
Higher position in search results. Search engines rank better for adaptive sites. Since 2018, Google has been following the mobile-first principle. The search engine gives preference to pages that are adapted for mobile devices.
Simplifying SEO. Adaptive uses a single URL for all device types. Content from the site is not duplicated in search results and does not compete with itself. This simplifies the work of promotion.
There are situations when adaptive web design is not necessary. For example, for sites that can only be accessed using a QR code. It cannot be scanned by a computer, so such pages can only be designed for smartphones and tablets.
