Responsive layout – features, advantages, ways of implementation

Responsive layout - features, advantages, ways of implementation

According to statistics, mobile devices accounted for more than half of the traffic in 2020. In turn, adaptive layout is becoming more and more relevant, so let’s take a closer look at it.

Direct Line
Who are we

Largest agency
Internet marketing outside the Moscow Ring Road:
1200+ projects
65 specialists
fourteen years on the market
TOP 10
the best online promotion companies in Russia 2020

Commercial offer

What is responsive website layout

Earlier in web development, it was important to correctly display the site in different browsers, including the notorious Internet Explorer, famous for its proprietary glitches. The situation has changed: today search engines give preference to pages that display correctly on any device, regardless of display size. Therefore, the site needs to be adapted not only for desktop devices but also for mobile devices.

Responsive website layout is the use of a set of tools, thanks to which pages are displayed correctly on screens of any resolution. Content adjusts to resolution, device display orientation and user interaction, and looks harmonious under any circumstance.

Pros and cons

The advantages of this approach include:

  • Saving resources and funds for site maintenance. Instead of several versions, it is enough to ensure the smooth operation of one universal one.
  • Each version of the page has the same URL, which makes SEO easier.
  • Parallel to this, advertising on social networks is being simplified.
  • The statistics in the analytical reports of Yandex and Google are improving – thanks to the synchronization of requests from computers, tablets and smartphones, it is taken into account for a single site.
  • No complex server components required. It is enough to modify the existing site once using CSS styles so that the content of the pages adapts to the size of the display of the gadget that visited the site.
  • Duplication of content is eliminated, which is often observed when the mobile version of the site is launched in parallel.

This solution has some disadvantages as well:

  • Difficulty adapting a working project. It’s easier to launch a new site than to rewrite the code.
  • A responsive site has more pages than a regular site: CSS styles and JavaScript add extra kilobytes. This slows down the loading of individual pages, which may not please both visitors and search engines.
  • It is difficult to post high-quality, high-resolution illustrations. We have to look for workarounds using tools like the Adaptive Images plugin.

Responsive design, responsive or mobile – what’s the difference?

While responsive and responsive designs are mistakenly considered synonymous and the same type of layout, there is little difference between the two. The screen sizes used for responsive layouts are strictly fixed and based on a finite number of base values ​​- usually the most common ones. The main container adjusts to the base values, changing the size of the font and objects, their position on the screen, color, and more. This is done dynamically using media queries to automatically determine the monitor resolution and device type – in particular, the control method: tap your finger on the touch screen or mouse and cursor.

However, in exceptional cases, there are devices with “atypical” display resolution, and then a suitable option may not be found in the ready-made templates. Accordingly, the page may be displayed a little “crookedly” on such a device.

Responsive design is more perfect in terms of implementation. The site is designed with fit of all elements to fit a flexible layout grid, the size of which can take any value. In this case, the percentage display of the width of the components and media queries are combined. It can be guaranteed that the site is adaptable to any device.

The mobile version is, in fact, a separate site, the content of which duplicates the main one. Has a different domain name and requires a separate server space. Accordingly, the additional costs of maintaining the work. An acceptable option for such giants as, for example, Facebook or AliExpress, but in terms of promotion, it is not suitable for small informational sites.

Principles of responsive layout

When creating a “universal” design, developers adhere to the following principles:

  • Conformity. The more compact version of the site should not differ in design from the volumetric one. It is allowed to hide unnecessary elements, taking into account the needs of users of various devices. Full version for Full HD monitor resolution should display full functionality.
  • Coordinate system relativity. It is important to remember that a 480 pixel image looks different on a smartphone screen and a laptop display. The size should be set according to the objects that are on the screen of each device. Today, this is the top of the screen that developers measure up to.
  • Control points. The size of responsive pages snaps to breakpoints. The site will be displayed in the same form until the user logs in from another device.
  • Nesting objects. If the size of one block depends on the size of another, it is allowed to place them in a common container for mutual communication. This technique is effective in the case of a logo, buttons and other navigation elements.
  • Suitable fonts. It is allowed to translate them into web format so that they fit the screen size.
  • Adequate illustrations. If the image has a lot of detail, it is better to rasterize it. Otherwise, you can make it vector. For faster loading, it is recommended to compress images.
  • Usability. The size of the elements with which the user interacts must be adapted for convenient use. For example, a finger is larger in relation to a touchscreen than a mouse cursor is compared to a monitor. It may be inconvenient for the user to click small buttons or follow links that are too close to each other.

Screen sizes for responsive layout

Developers are guided not by specific page sizes in an adaptive layout, but by breakpoints – control points, upon reaching which the design and the ratio of elements change. The following display sizes are considered “canonical” for different devices:

  • Smartphones – 320 pixels, 480 and higher;
  • Tablets – 768 pixels and above;
  • Netbooks – 1024 pixels or higher;
  • Monitors – 1280 pixels, 1600, 1920 and above.

In the case of non-adaptive layout on different devices, the page content may shift or crawl away. Breakpoints rigidly anchor elements to the width of the screen: they increase or decrease, move to different places in the interface, new ones may appear.

Today it is considered “good form” in adaptive layout to comply with the Mobile First rule: the design is developed with a priority on the screen resolutions of mobile gadgets and only then is adjusted to high-resolution displays.

How to make a responsive layout

A webmaster who knows a little about HTML and CSS and has some experience, with due diligence, will be able to adapt even a long-running large site, but it will take a lot of tinkering. Let’s take a look at how to make a responsive design in a minimal amount of time.

CSS frameworks

Responsive website layout is greatly simplified by CSS frameworks – sets of ready-made solutions that maximally exclude the possibility of incorrect display on different devices and in different browsers. Each of them implies different approaches to implementing responsive design. Among them it is worth noting:

  • Bootstrap… The most popular web development framework. Easily and quickly adapts the site to any device using a 12-column grid. A huge number of off-the-shelf components are available. Supports 2 of the most popular CSS preprocessors: Sass and Less, and Normalize.css for cross-browser content.
  • Materialize… The platform was created according to all the principles of material design (use of “cards”, smooth transition between elements, absence of sharp corners, use of strict layouts and animations). The tool contains a set of styles and tools for their implementation. A 12-column grid is used. Supported by Sass.
  • Bulma… A modern framework that uses Flexbox instead of a grid of columns is a very good implementation of fluid containers. A large number of ready-made components are available, Sass is supported.
  • Pure… Compilation of small adaptive modules that can be used on any resource. Requires writing your own custom styles, since their number is minimized in this framework. Supports 24-column grid. Doesn’t use JS files.

We adapt the current design

One of the conditions that must be met in any type of responsive layout is the use of Viewport, that is, the area visible to the user without scrolling the screen. In the absence of adaptation, the content goes beyond the limits of the device’s resolution and it is inconvenient to use such a site. It is highly likely that the visitor will stay on the resource for a short time and will go to competitors. Responsive layout makes it easier to read, navigate and shop, which increases behavioral factors.

Almost always the line with the Viewport tag looks like this:

The width parameter instructs the browser to adjust the page to the screen of the device from which the user entered the site. The scaling is determined automatically. Initial-scale stands for scaling factor. If set to 1, device screen resolution and CSS are equal to each other regardless of size. The Viewport tag needs to be added to the head of every page on the site.

Let’s consider the adaptation of a working site using the example of the most popular Bootstrap framework. For it to work on the page, you need to write the activation code in the head. In the case of the latest, 5th version, it looks like this:


Bootstrap Sample Code

Code for Bootstrap 4:

Bootstrap 4 Sample Code
Bootstrap 4 Sample Code

And the final touch, without which it is impossible to make up a responsive design to fit the screen, is adding Bootstrap grid classes to the markup. Different devices in this framework are assigned different class prefixes, from which we will build on.

Bootstrap Grid Classes
Bootstrap Grid Classes

It should be borne in mind that the .col- prefix is ​​responsible not only for the minimum values, but also for automatic layout on screens of any size.

An example of columns of equal width. You can add any number of classes, while the widths of all columns will be equal:

Example of Equal Width Columns
Example of Equal Width Columns

You can set fixed column widths by assigning an appropriate number of grid cells. It will look like this:

Fixed column width
Fixed column width

The following method is used to adapt the content to the screen size:

Adapting content to fit the screen
Adapting content to fit the screen

Taking into account all breakpoints, you can set a fixed column size when there is a need for it, and an adaptive size for all other content:

Fixed column sizes and adaptive size for the rest of the content
Fixed column sizes and adaptive size for the rest of the content

CSS3 Media Queries

As an additional tool, you can use media queries – CSS rules that control element styles based on the technical characteristics of the device. These constructs help determine which elements to display on which device and which to hide. Media queries that were introduced in CSS3 are now defining all modern browsers. In this case, you also need to add the Viewport tag to the head of the page.

The syntax for media queries is:

Syntax for media queries
Syntax for media queries

For example, for all devices except smartphones, the request will look like this:

@media all and (not handheld) {…}

Overall, a responsive layout from scratch is really going to be easier. If the site has been launched for a long time and is filled with content, you will have to tinker with adding all the necessary elements. But the temporary inconvenience can be more than compensated for by traffic from mobiles, which will begin to increase in the near future.

# Web development
# internet shop

Leave a Reply

Your email address will not be published. Required fields are marked *