Html adaptive layout. Adaptive layout

Hi all!

When the principle of adaptive layout appeared, it turned out to be a nightmare for me, from which I still can’t recover, it’s such a pain - after all, for every resolution you practically need to rearrange the layout, write new code, you end up with a lot of code that is more difficult to maintain. Let's understand this pain as "code entropy"

Recently I was given the opportunity to create a layout for a mobile application and I decided to finally try to overcome this pain, make it beautiful and concise - use rem. This seemed like the simplest solution to me, 100% of mobile browsers support this unit. The point is that we write several lines of media queries for the html tag, indicating only the basic font sizes in pixels, in proportion to how our layout should look in different resolutions, and the rest of the layout without media queries is laid out as usual, only we use pixels instead rem. This technique is easily scalable and adjusts the layout depending on the base font size.
The minimization of code and the ease of adaptive layout in this way is simply colossal!

There was only one disadvantage of this method: it was necessary to constantly recalculate the pixels of the psd layout into rem, but I quickly solved this problem - I wrote a special function and laid it out as before in pixels, the preprocessor itself translated into rem.

But! The main joke is that I used this method to design an adaptive mobile application, where the design was the same.

When I returned to the adaptive for regular sites- the pain returned to me even more powerful than before, because as a rule we have from 3 to 6 different designs:
1) Large desktop 1600-1920 pixels
2) Small desktop/laptop ~1100-1400 pixels
3) Old Monica/tablet - 768-1024 pixels
4) Under-tablet/over-sized smartphone ~600 pixels
5) Smartphone 300-480
6) Old smartphone 250 pixels.

Of course, I exaggerated, but at least three layouts need to be done for sure.

So here is question No. 1 and the most important one: how to minimize adaptive layout and make the code beautiful? How to reduce the so-called entropy of the code? Is there any cool approach/technique?

I looked at various sites of cool web studios in order to find the answer there and saw that everyone was laying out haphazardly, that is, in general without bothering.
The only thing I saw is that for some reason some people use em and percentages for fonts instead of the usual pixels. It seems like for scaling text, although it’s not clear how this reduces the code for adaptation, in my opinion it only complicates everything - you need to carry out calculations depending on the font size of the parent block and even preprocessors most likely won’t help... I don’t know why you need to worry about setting font sizes in em units , the troubles with rem still didn’t go anywhere... Maybe I’m a bad layout designer... By the way, the most stubborn of those sites used em for margin and other box-size properties...
Question #2:
What's the point of using em?
And now question number 3:
Is there really no single methodology, is everything really so bad in the layout that everyone can do whatever they want? Or did I see unsuccessful examples (although I was looking among the top themes of themeforest and the sites of top web studios)?

Preface

Currently, the share of mobile traffic is growing rapidly. Every day there are more and more people using devices with Internet access. The phone is always at hand, anywhere people can look up the necessary information, read news, etc. A regular website can be viewed using a mobile device. However, some nuances arise when viewing - to read individual blocks of text on a relatively small screen, you need to scale the page. As a result, readability and convenience are lost; the site needs to be constantly scrolled, stretched, and zoomed in. Many website controls are difficult to use because the pages are not designed to be operated by touching the screen. To solve these problems, they began to develop websites that can conveniently display information on any device.

About the article

This article is intended for developers who have experience in website layout and who know HTML And CSS who understand the purpose of CSS selectors, etc.

This article will discuss the types of layouts that allow you to correctly display sites at any resolution, and the techniques with which this is accomplished. Let's look at the concept CSS-framework and do a comparative analysis of the most popular ones.

Types of layouts

Let's look at the main types of layouts, their differences and the basic principles used in their implementation.

Fixed layout

Fixed Layout is an approach to creating website pages that have a given width. The width of the components on the page does not change. On low-resolution monitors, a horizontal scroll bar appears. This type of layout is not suitable for convenient display of information on mobile devices.
The example below demonstrates strictly setting the width for a tag body:

Rubber layout

Elastic layout implies the ability of website components to change their sizes depending on the size of the browser window, stretching from and to the specified minimum and maximum sizes. This is achieved by using relative values, max-width / min-width(max/min width), max-height / min-height(maximum/minimum height).
Examples of using rubber layout techniques:

Adaptive layout

Adaptive layout ( Adaptive Layout ) allows the main container and any other element of the site to adapt to the screen resolution, making it possible to change the font size, arrangement of objects, color, etc. This happens dynamically, for example, using media queries ( @media), allowing you to automatically determine the monitor resolution, device type and substitute the specified values ​​in automatic mode. The example below sets the width div equal 960px 1200px And 320px for all devices whose width is smaller 480px.

Responsive layout

Responsive Layout is a combination of fluid and adaptive layout. This approach uses both media queries and percentage specification of component widths. Using this type of layout, we can confidently say that the site will adapt to any device.
The width is set below div equal to 50% of the size of the parent component for all devices whose width is less than 1200px and 100% for all devices whose width is less than 480px.

Basic techniques for implementing websites at any resolution Relative values

Using relative values ​​allows you to display information and components on a page without losing readability or viewability.

Relative values ​​for sizes and paddings

Relative values ​​can be specified for width, height, margin, padding etc. The most well-known way to specify the relative size is as a percentage (%).
Below is an example of setting the width to 90% of the size of the parent component.

In this case, the value is calculated relative to the parent component.
There are also values ​​regarding screen size:

• vw- 1% of the window width. When the window width is reduced, the width, height, and font of the element are reduced;
• vh- 1% of the window height. When the window height is reduced, the width, height, and font of the element are reduced;
• vmin - select the smallest of vw And vh;
• vmax - the largest one is selected vw And vh.

Below is an example of use vw And vh. In this case, the width and height of the tag div will be equal to 50% of the screen width and height, respectively.

Relative values ​​for font size

The following relative values ​​for fonts exist:

• em- sets the size relative to the parent font;
• rem- sets the size relative to the font.

Let's look at an example:

Calculate the font size for the tag body. In this example, the font size for body specified relative to size html. So the font size for body will be equal to 30 px (20px * 1.5 = 30px).

You can also set relative font sizes using %, vw,vh etc. In the following example, the font size for body equal to 80% of font size html - 16px.

Maximum and minimum component sizes

To set the maximum and minimum values ​​for the width and height of a component, use the properties max-width / min-width And max-height / min-height respectively.

Let's look at an example:

Let us assume that the parent component of this div is body. Then, when the screen width changes, the width of this component will be 60% of the width body. However, it will only increase to the amount specified in max-width, this is 500 px. As soon as the container reaches this width, it will stop growing.

Using Media Queries

Media queries allow you to specify styles for a specific screen size, device type based on device characteristics, etc. All media queries begin with @media, and then follows the condition.

Using media queries, you can set styles for the following device types:

• all- all types (default value)
• braille- devices based on the Braille system, which are intended for reading by blind people
• embossed- printers using the Braille system for printing
• handheld- smartphones and similar devices
• print- printers and other printing devices
• projection- projectors
• screen- monitor screen
• speech- speech synthesizers, as well as programs for playing text out loud
• tty- devices with fixed character size
• tv- TVs.

An example of setting the width for a div tag, on monitor screens, smartphones, etc.

Links to techniques for implementing adaptive layout

You can view and study the approaches discussed in this article and others in more detail using the following links:

• Should we make a mobile version? 5 common problems that adaptive layout solves. Yandex experience

CSS frameworks

CSS-framework - a framework created to simplify the work of a layout designer, speed up development and eliminate the maximum possible number of layout errors (compatibility problems with different versions of browsers, etc.). These frameworks imply the use of various approaches to correctly display sites on devices of any size.
Many developers prefer to use CSS-frameworks, instead of writing all the styles manually. This is due to the following reasons:

• Faster development
• Cross-browser support
• Supports various devices and screen sizes
• Code consistency when working as a team reduces disagreements during development.

Like libraries of scripting programming languages, CSS-libraries, usually having an external appearance CSS-file are added to the header of the web page.

Let's look at the most popular CSS-frameworks.

Bootstrap

The most popular framework for responsive and mobile development web-projects. Bootstrap is an open source tool for developing websites using HTML, CSS and JS. Bootstrap- an intuitively simple and at the same time powerful interface framework that increases speed and facilitates development web-applications.

Bootstrap Easily and efficiently scales your project with one code base - from phones and tablets to desktop computers. A 12-column grid is used for this:

In addition to CSS this framework includes support for the two most popular CSS-preprocessors: Less And Sass.

Distinctive features:

• 12 - column grid
• Large number of ready-to-use components
• Support Less And Sass
• Usage Normalize.css.

Material Design for Bootstrap

Material Design for Bootstrap is an open source application development toolkit based on Bootstrap and using approaches Material Design.
The framework allows you to quickly create an application using variables Sass, adaptive grid, a large number of ready-made components and powerful plugins implemented in jQuery.

Distinctive features:

• 12 - column grid
• A large number of ready-to-use components according to the concept Material Design.

I am not a professional in the field of website design and layout. Basically, all my activities in this direction come down to minor edits to existing templates. But one day I really wanted to figure out “how it works” and I put together a set of basic rules for creating a responsive website template in one article.

Concept of adaptability

Adaptability should be understood as a site layout in which the appearance of the site changes depending on the resolution and screen orientation of the device on which the site is viewed. Moreover, all changes are made for the convenience of using such a site on mobile devices.

Adaptive layout allows you to view the site equally conveniently not only on a computer monitor, but also on the screen of a mobile phone (smartphone) without loss of functionality.

Media queries for adaptive layout

To change the layout of the site and the corresponding styling, media queries are used that activate one or another code depending on the width of the screen. In order for media queries to work and the template to be adaptive, you need to place the following line of code in the HEAD section of the site:

Basic principles of adaptability

Since the screen size of mobile devices (smartphones, tablets) is noticeably smaller than the screen of a computer monitor, both in size and resolution. The main task of adaptive design is to reduce the width of a website page for mobile visitors.

And this is achieved in two ways:

Deleting (hiding) blocks and/or redistributing them among themselves;

Change block sizes depending on screen width.

A classic example is moving the sidebar column below the main content.

At the same time, the width of the sidebar became equal to the width of the main content, and both of them, in turn, stretched across the entire width of the screen.

How to remove a sidebar block depending on screen width

Let me start with the fact that the markup of most modern templates is implemented using blocks. For horizontal placement, so-called floating blocks are used, that is, with the FLOAT style. Accordingly, to cancel the horizontal arrangement of blocks when viewing on mobile devices, you need to remove the floating block style.

In the simplest case, the CSS code will look like this:

@media only screen and (max-width: 1199px) ( .content(float: none;) .sidebar(float: none;) )

It should be placed at the end of the style file, at least after it has been formatted for display on desktop computers.

Explanations for the code: in the first line we say that the following styles will apply to devices with a screen width up to and including 1199 pixels. For such devices, the sidebar ceases to be a floating block and is displayed in the order of its order in the site’s HTML code. Therefore, if you want the sidebar to appear after the content, you need the sidebar code to be below the main content code, like this:

... ...

Automatic block width - rubber layout

You should also work with the width of the content blocks and sidebar. It is necessary to make them “rubber” when viewing on mobile clients:

@media only screen and (max-width: 1199px) ( .content (width:100%;).sidebar (width:100%;) )

With the above styles, the blocks will stretch across the entire width of the screen.

Adaptive images for the website

After we have changed the placement and size of the blocks, we should take care of the remaining elements of the site. After all, many of them may simply not fit on the screen, for example images. To adapt them to mobile clients, we use the following code:

Img (max-width:100%; height: auto;)

The problem with long words

Sometimes a horizontal scroll bar may appear from a very long word when it does not fit on the screen. For example, this could be a URL left in a comment. I wrote more about this problem and its solution earlier:. The CSS code to fix responsiveness issues would look like this:

Hyphenate ( overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )

Adaptive website menu

It is also advisable to adapt the site menu, especially if it has many items, since it can occupy a significant part of the screen. To free up the screen as much as possible for menu content, they usually hide the menu and instead show a button (link), when clicked, the menu will be shown on the screen.

To implement your plan, you need to create two mutually exclusive objects. For example, the main menu should be hidden on mobile screens, but a button should appear that opens this menu. On computer screens it’s the other way around: the main menu should be visible, but the button to call it hidden.

This is very easy to implement in CSS.

#mainmenu (display:block;) #mobilemenu(display:none;) @media only screen and (max-width: 1199px) ( #mainmenu (display:none;) #mobilemenu(display:block;) )

As soon as the screen width becomes less than 1200 pixels, the main menu will disappear from the screen, and a link to open it will appear (more precisely, a block with a link or button will be shown).

Please note that in this case the block IDs are used, not the style class. And the main menu code will look something like this:

<div id="mainmenu">Main menu of the site

To show the main menu when you click a button, add a small script to the HEAD section:

function showmobilemenu() ( if (document.getElementById("mainmenu").style.display == "block") (document.getElementById("mainmenu").style.display = "none") else (document.getElementById(" mainmenu").style.display = "block") )

From the author: in the future, a constant increase in mobile traffic is expected in the Internet world. This means that now you need to be able to create layouts so that your project looks good on all devices. The solution has long been found - adaptive website layout! We'll talk about her.

2 ways to please mobile users

The easiest way to determine how a site is laid out is to reduce the size of the window. If a horizontal scroll bar appears, then this is a fixed layout. All sizes were most likely specified in pixels. Will this site be convenient for users on mobile devices? No.

There are essentially two solutions to this problem. The first is to create different versions of the layout (for PCs, for tablets and for mobile phones). This is exactly what was done, for example, on the social network Vkontakte. The second option is to make adaptive layout. Such a site will respond to changes in the window width. This option is being used more and more often today.

Rice. 1. As you can see, webformyself is displayed well even on a mobile phone.

Adaptability is the beginning of the journey

Adaptive layout is no different from regular layout, except that media queries are added to the style sheet, where styles are specified for different screen widths. Sometimes they are placed in a separate css file, and sometimes they are written at the end of the main style sheet. Example media query:

@media only screen and (max-width: 980px)()

@media only screen and (max - width: 980px) ( )

Let's take a closer look at this entry.

@media – the actual designation of the media query

Screen – we indicate that this refers to the screen (here you can also specify a TV or projector). Only – means that the rules will be applied only to screen.

And (and) – adding a condition for which the media query will work. The condition is added in parentheses.

Max-width: 980px – the condition itself. In simple terms, this means that the media query will work when the screen width is a maximum of 980 pixels (that is, from 0 to 980px). If the width is greater than 980, the rules will not work. Most often, the conditions here are max-width, min-width, max-device-width, min-device-width. The last two mean that the rules will only work on the mobile devices themselves (that is, when changing the window width on a computer, a horizontal scroll will appear). You can also specify max-height, but this is used very rarely.

() – all the CSS rules are written in these curly braces. There can be as many of them as you like. Let me give you a couple of examples to make it clear to you:

@media only screen and (max-width: 980px)( .selector(background: black) ) @media only screen and (min-width: 600px)( img(float: left) )

@media only screen and (max - width: 980px) ( Selector (background: black) @media only screen and (min - width: 600px) ( img (float: left)

Let's translate it into human language: if the window width is less than 980 pixels, then the rule (background: black) will be applied to the element with the selector class. In even simpler terms, the background of this element will become black.

Second example: if the window width is more than 600 pixels, then all images will be pressed to the left edge.

Have you already realized the genius of this layout method? Essentially, with the help of media rules, you can adjust existing or add new CSS rules. This way you can implement a fully responsive template.

Rice. 2. An example of a media query that specifies rules for widescreen monitors.

Learn more about adaptability

This is understandable, but how to make an adaptive website layout yourself? To do this, it is clearly not enough for you to write down those two examples. I hope you get the gist of them, but they are of little use. We need real benefits. And you can get it from. But this is if we take adaptability seriously. The fact is that since the course is paid, after studying it you yourself will be able to teach others adaptive layout.

If you need something simpler just to get things going, this one will suit you much better. It consists of five video lessons that will walk you through the basics. The course is very easy, the information is selected specifically for beginners. At the same time, you will be able to look at several practical examples, so that after studying it you can adapt a simple layout yourself.

Is it difficult to master adaptive layout?

When I first started studying web technologies, I didn’t even really know what adaptive website layout was. It was not possible to do this on my own. Fear is our main enemy. It turned out that everything was quite simple. And now, when I sometimes look at the code of adaptive templates, I understand how easy adaptability is sometimes to implement.

How to test adaptability

The easiest way to do this is in the browser. For example, in my Google Chrome, when I press F12, the debugger appears. Now try resizing the window. In the upper right corner you will see the value of its width. This is very convenient for quickly checking your layout. I can also recommend responsivetest.net. The service is quite convenient and perfectly tests adaptability.

Rice. 3. When you hold down F12, the debugger appears. Now in the upper right corner you can see the current width of the window when changing.

Why adaptive layout?

At the beginning of the article, I said that there is another way to please mobile users - to develop separate versions for different devices. What do you think is the easiest way? Adaptability is much easier to implement. This is just a couple hundred extra lines of code, rather than a separate version of the site, which is often very different in design. As practice shows, mobile versions for their websites are made only by large companies that can afford to spend more money on project development.

For everyone else, adaptive layout is something to strive for now. And since mobile traffic will only grow, start implementing it now. And at the same time, subscribe to our blog to improve your knowledge in website building.