Adaptive layout for sites

The more popular mobile devices become, the greater the discomfort of scrolling most sites. That is why, starting from 2012, webmasters began to use a solution that makes viewing resources on screens with a small resolution more comfortable, - adaptive layout.

The current trend

Today, about five billion people on the Earth use mobile phones, with one third of them having smartphones. Therefore, mobile traffic is becoming increasingly important for site owners. Probably, this source of visitors will only grow with time.

Search engines quickly reacted to this trend. Large corporations Yandex and Google have made significant changes to their algorithms for ranking sites in search results, taking into account the availability of adaptive layout and design. Simply put, web resources optimized for mobile phones, smartphones and tablets will have some advantage over their competitors.

Definition of adaptive layout

Adaptive layout is a method for creating a web page skeleton that automatically changes the location of blocks in accordance with the screen resolution of the device on which it is viewed. That is, this approach creates separate styles for a variety of permissions. This effect is achieved by special writing of CSS files. Previously, the problem was solved somewhat differently. Developers had to do much more "gestures", creating layout and design of the main version of the site and doing the same for mobile. Depending on the screen of the device on which the Internet project was viewed with the existing mobile platform, an appropriate version of the site was launched.

This approach in many respects did not justify itself, and most webmasters did not undertake to create a mobile version. Now in place of this order came adaptive layout. By creating a Web site with this technology, the webmaster concentrates all his efforts on creating one version of the project, and visitors can view it at the same level of comfort on a large computer screen, or on a mobile phone, smartphone or tablet.

Advantages of the adaptive layout

What are the advantages of adaptive layout of sites? Earlier it was noted that the plus is the correct display of all page blocks on any device. Another positive aspect of this approach in creating a template is the rate at which changes are implemented. What does it mean?


If the site has two platforms, the changes made to the layout must first be implemented in the working version, and then - in the mobile version. If the edits in the code were quite significant, then the process of making such changes could take a long time. With adaptive layout, work on the site is conducted in one file. Changes made to the layout of a web page will be displayed in the same way soon both in the working version and in the mobile version.

By the disadvantage of this approach, some webmasters call the complexity of its implementation. But with the advent of CSS 3, creating an adaptive layout template has become quite simple. Even the most experienced webmasters can make their site convenient for viewing on mobile devices.

Principles and features of adaptive layout

What are the principles behind the adaptive layout method in web design?

- Using a "rubber" type of layout.

- "Rubber" images.

- Use media-queries.

- The need to think about mobile devices from the very beginning of making layout.

From these basic principles of this method of creating a template, the following features of adaptive layout follow:

1. Designing and creating a website design taking into account work on the whole range of permissions: from mobile to widescreen displays.

2. Layout using cascading style sheets using media query technology that appeared in CSS 3.

3. Programming on the side of both the client and the server for transferring to mobile devices an image of a smaller volume and resolution.

An important aspect, taking into account the creation of adaptive layout, is the resolution of the matrix of popular electronic devices. Such an approach in the design development will make viewing web pages on any screen very comfortable. But how do you know which ones should be included in the styles?

How to start the layout of the adaptive layout?

Most sites are made so that scroll bars appear on the screens of smartphones and tablets, which are not so convenient for surfing, and the design and layout of many Internet projects simply "float". Web sites designed to teach web design collects a wide variety of screen resolutions of various devices, which are worth checking out the pages of your site.
Adaptive layout, examples of which can be found quite often, has a lot of advantages. What should be remembered with this approach to creating a page layout?

Having started working on the template, it is important to periodically test how successfully the content and layout blocks are displayed on different screens. To do this, sometimes it's enough just to change the width of the browser window. A file with styles receives a media query and changes the location of the blocks, making significant changes. A good tool for testing the pattern of adaptive layout can be sites that simulate screens of mobile devices of different models. Such services will allow you to carefully consider and evaluate how the design looks on the displays of various mobile devices.

Although the technology of such an adaptive layout is not so simple, its development will bear fruit very soon.