Adaptive design and responsive design are two ways of creating interfaces that display correctly on different devices. They have a common goal of ensuring ease of use on any screen, but the methods of implementation are different.

Adaptive layout is used when we need to display a specific layout for each device type. Layouts can be similar to each other or they can be completely different.

How it works: When you visit a website, your device and screen size are first determined. You will then be given the appropriate HTML and CSS. The number of layouts depends on the design and requirements of the project. Often three layouts are created: for desktops, tablets and mobile devices, but there are also more complex options.

For designers, drawing several types of pages is a common thing, regardless of whether the site will be adaptive or responsive.

For front-end developers, adaptive layout is a more difficult task. Each layout needs to be typeset separately, with its own markup and styles. Such code is more difficult to maintain: if we change the appearance of an element, we need to change it in all layouts.

Advantages of adaptive design:

• Precise tuning: each layout is optimized for a specific resolution.
• Detailing: we can carefully refine the interface elements for each screen size.

Disadvantages of adaptive design:

• Large amount of work: you need to create and maintain multiple layouts.
• Less flexibility: it is difficult to adapt layouts to new resolutions.

CSS-frameworks

CSS frameworks are sets of ready-made solutions that help us avoid problems when displaying the site on different devices and in different browsers. Each framework offers its own approach to implementing responsive design.

Here are some of them:

Bootstrap. The most popular CSS framework in web development. It allows us to easily and quickly adapt the site to any device using a 12-column grid.

Bootstrap benefits:

• Huge library of ready-made components.
• Sass and Less support.
• Cross-browser compatibility via Normalize.css.

Materialize. This is a platform created on the principles of material design («cards», smooth transitions, no sharp corners, strict layouts and animations).

Features of Materialize CSS:

• A set of styles and tools for their implementation.
• 12-column grid.
• Sass support.

Bulma. A modern framework that uses Flexbox instead of the traditional column grid. This allows us to create flexible and adaptive layouts.

Bulma features:

• A large number of ready-made components.
• Sass support.

Pure. A set of small adaptive modules that we can use in any project.

Features of Pure CSS:

• Minimum number of built-in styles: we will need to write our own.
• 24-column grid.
• Does not use JavaScript.

CSS3 Media Queries

This is a CSS tool that allows us to control the styles of elements according to the characteristics of the user’s device.

In simple terms, we can set conditions by which the browser will decide which styles to apply to the page and which not to.

Creating a media query begins with the keyword @media, followed by one or more conditions. As a condition, you can specify the type of device or the requirements for a specific characteristic. The requirement for a specific characteristic is written in parentheses.

After compiling @media, the styles specified in it will be applied only if the final result of the calculation of the conditions is true.

An example of a media query with one condition:

Example of a media query with a combination of several conditions:

In @media you can specify certain types of devices:

• all — for all types of devices;
• print — for printers and in page preview mode before printing;
• screen — for devices with screens;
• speech — for screen readers.

For example, this @media is for screens only:

And here for screens and printers:

The media feature width, min-width, and max-width allows you to set a condition for the equality of the viewport width to a certain value. For example, apply CSS only for a viewport with a width of 320px.

To set conditions for the height of the viewport, you can use height, min-height, and max-height.

For example, @media for viewport height greater than 720px:

Orientation allows you to set certain styles based on the mode (landscape or portrait) in which the site is displayed.

For example, depending on the orientation of the viewport, we will display different pictures:

Aspect-ratio, min-aspect-ratio, and max-aspect-ratio allow you to set styles depending on the aspect ratio of the viewport.

Resolution, min-resolution, and max-resolution can be used when you need to set styles depending on the pixel density of the device.

For example, set a different font size for devices with a pixel density per inch greater than 150:

When connecting a style sheet, you can use the media attribute to set media queries and thereby define the conditions when they should be used.

In addition to <link>, they can also be used in @import:

Responsive layout is based on the idea that the user receives the same HTML and CSS, regardless of the device. The appearance of the page is adapted using CSS styles and media queries.

Simply put, if you open a responsive site in a browser and start to resize the window, you will see how the page elements are rebuilt based on the width and height of the viewport.

Advantages of responsive design:

• Flexibility: one layout automatically adapts to different devices.
• Less work: we don’t need to create separate layouts for different resolutions.

Disadvantages of responsive design:

• Complex setup: It may take more time to set up media queries and flexible elements.
• More testing: we need to check the display of the site on a large number of screen sizes.

One of the tools for achieving responsive design is viewport units: vw, vh, rem, em, and combinations thereof. Below we will show some examples of their use.

Viewport units in CSS are percentages of the screen size available in the web browser to display content. Unlike pixels, which remain the same regardless of screen size, viewport units offer a flexible approach to sizing elements, fonts, and padding.

vw and vh:

• vw (viewport width) is equal to 1% of the viewport width.
• vh (viewport height) is equal to 1% of the viewport height.

When using pixels to create a header element, its height will be constant on different screens:

Let’s make our header more responsive by giving it a dynamic height of 10vh. Depending on the screen size, the header will always take up 10% of the screen height:

Let’s look at some examples of using vw and vh to create responsive designs:

Creating a full-screen section with a background image that adjusts to the height and width of the viewport:

Position elements relative to the viewport size to create a more responsive layout:

Adjust font sizes using viewport units so that text remains proportional across devices. This can be done like this:

However, using only vw for font sizes can result in text that is too small or too large on very small or very large screens. Often use the clamp () function to set the minimum and maximum font size:

The clamp () function is used to dynamically adjust the font size of the body element, with three parameters:

• Minimum value: 16px is the minimum font size. No matter how small the screen gets, the font size will not drop below 16 pixels.
• Preferred value: 2vw — this size allows the font to dynamically change depending on the width of the viewport. 2vw means 2% of the viewport width, which makes the font size responsive to the screen width.
• Maximum value: 24px is the maximum font size. Even if the viewport width gets very large, the font size will not exceed 24 pixels.

Both em and rem are relative units that are calculated from the font size.

rem (from root ephemeral unit).

em (from ephemeral unit) or root element

In modern browsers, the root font size is 16px, so 1rem = 16px.

Let the font size of the root element <html> be 16 pixels:

Then the font size of the element with the class block will be equal to 16px × 1.5 = 24px:

The value in em units is always calculated from the font size of the element: it is either inherited from the parent or set on the element itself. Continuing our example, if the block element is simply given a width of 5em, then the inherited font size will be used for the calculation: 16px × 1,5 × 5 = 120px.

And if the element itself is set to a font size of 2em, then another multiplier will be added to the inherited size: 16px × 1,5 × 5 × 2 = 240px.

Adaptive design is better suited for projects where we know in advance which devices the site will be used on, and where there are clear layout requirements. It allows us to fine-tune the interface for each device.

Responsive design is a more versatile and flexible approach. It is ideal for projects where we need support for a large number of devices and screen sizes.

Usually responsive design is a more practical and flexible solution. But before starting a project, it is better to check with the client if he needs a design for a specific device.