Correct adaptive layout. Adaptive layout

The more popular they become mobile devices, the more discomfort you feel when scrolling most sites. That is why, starting in 2012, webmasters began to use a solution that makes viewing resources on low-resolution screens more comfortable - adaptive layout.

Current trend

Today, about five billion people on Earth use mobile phones, with a third of them owning smartphones. That's why mobile traffic is becoming increasingly important for website owners. This source of visitors is likely to only grow over time.

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

Definition of adaptive layout

Adaptive layout is a method of creating a web page frame that automatically changes the arrangement of blocks in accordance with the device on which it is viewed. That is, with this approach, separate styles are created for a variety of resolutions. This effect is achieved by specially writing CSS files.

Previously, the problem was solved somewhat differently. Developers had to make much more “body movements”, creating the layout and design of the main version of the site and doing the same for the mobile one. Depending on the screen of the device on which the Internet project was viewed with the available mobile platform, the appropriate version of the site was launched.

This approach did not justify itself in many ways, and most webmasters never took up the versions. Now this order has been replaced by adaptive layout. By creating a website framework using this technology, the webmaster concentrates all his efforts on creating one version of the project, and visitors can view it with the same level of comfort both on a large computer screen and on mobile phone, smartphone or tablet.

Advantages of a responsive layout

What are the advantages of adaptive website layout? It was noted earlier that the advantage is the correct display of all page blocks on any device. Another positive aspect of this approach to creating a template is the speed of implementation of changes. What does it mean?

If the site had two platforms, the changes made to the layout had to be first implemented in the working version, and then in the mobile version. If the changes to 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 carried out in one file. Changes made to the web page layout will appear equally quickly in both the desktop and mobile versions.

Some webmasters say the downside of this approach is the complexity of its implementation. But with the advent of CSS 3, creating a responsive layout template has become very easy. Even less experienced webmasters can make their website convenient for viewing on mobile devices.

Principles and features of adaptive layout

What principles underlie the responsive layout method in web design?

Using the “rubber” type of layout.

- “Rubber” images.

Using media queries.

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

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

1. Design and creation of a website design taking into account work on the entire range of resolutions: from mobile to wide-format displays.

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

3. Programming on both the client and server sides to transmit images of a smaller size and resolution to mobile devices.

An important aspect, taking into account which adaptive layout is created, is the resolution of the matrix of popular electronic devices. This approach to design will make viewing web pages on any screen very comfortable. But how do you know which ones to include in your styles?

Where to start creating a responsive layout?

Most sites are made in such a way 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”. Sites created for teaching web design contain a variety of screen resolutions various devices, for which you should layout the pages of your site.

Adaptive layout, examples of which can be found quite often, has a lot of advantages. What should you keep in mind when approaching page layouts this way?

Once you start working on a template, it is important to periodically test how well the content and layout blocks are displayed on different screens. To do this, sometimes it is enough to simply change the width of the browser window. The style file receives a media query and rearranges the blocks, making significant changes. A good tool Websites that imitate mobile device screens can be used for testing an adaptive layout template different models. Such services will allow you to carefully examine and evaluate how the design looks on the displays of a variety of mobile devices.

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

Website layout is the process of creating a website structure, which is the basic skeleton. Design styles and dynamic effects are superimposed on top of it. For s...

From Masterweb 04/20/2018 01:00

Layout is the creation of the structure and design of the elements of a web page. A web page coder or front-end developer is responsible for writing the code. He uses graphics program for cutting layouts, code editor, additional programs to speed up the process.

What is layout

The layout code is the skeleton of the site page, written in the html markup language. It consists of parts of the page logically divided into elements - tags. Each of them is responsible for its own area: menu, site footer, media, forms, maps, site search, time. They have attributes, with their help individual elements are identified. Cascading style sheets are responsible for the design, and JavaScript is responsible for dynamic effects.

A well-made layout is displayed equally on all browsers. The result is determined by conducting a series of tests. The ability to run on more than one hardware platform is called cross-platform. There are several approaches to implementing layout; various frameworks are used.

To create pages according to modern standards, various adaptive layout methods are used. This ensures that elements are displayed correctly on all types of screens.

Types of layouts

Standards are constantly being improved, and as a result, the way layouts are developed is changing. At the moment there are 3 main types of pages:

• static;
• rubber;
• adaptive.

Static layouts are pages that cannot change their design. Their design does not change, and the dimensions of the elements have a clear meaning.

Adaptive layout means that website elements will adjust to the screen size of the device being used. When the width of the document changes, the blocks are rearranged, some parts are replaced by others, and some elements disappear. The idea of ​​adaptability has replaced mobile versions sites living on separate subdomains. The main principle of creating adaptability is to develop a design for three screens: computer, tablet, smartphone.

When creating a rubber layout, changes in screen sizes are also taken into account and all elements are adjusted. The main difference from adaptive is that the layout expands or contracts to fit the screen at every moment of change.

You can check which principle is used as follows. If, when you stretch the browser window, the page stretches along with it, it means that this is a rubber layout. When a website page changes only in a few positions, it means it is adaptive.

Dimensions for adaptive layout

To create responsive layouts, relative units are used instead of the standard static px. The most common:

In adaptive HTML layout, em is used to set font sizes and indents. By default, 1 em equals 16 pixels. Accordingly, to set the font for paragraph p to be 32 pixels, you must specify the following:

The peculiarity of using the unit is that 1em is equal to the font size of its element. That is, 1em takes on different values ​​in different parts of the code. For example, in a block where the font size is 2em (32px), a margin of 1em will equal 32 pixels. But where the font is 1em (16px), padding of 1em will equal the standard 16px.

Rem is the root em that is defined in the tag. 1 root-em, as opposed to 1em, is equal to one number under any circumstances. The value only changes when changes are forced.

Percentages are typically used to set the width of blocks or images. Regardless of the screen size, it will correspond to the specified value, for example, 80%.

Media queries

CSS includes support for various device technical parameters. A smartphone with a small screen extension is identified, and a style property for its value is specified. Media queries identify differences in orientation: portrait and landscape. Widely used to create adaptive layout. The layout adapts to the specified screen resolution, the structure of the document changes in accordance with the code.

Defined device types:

• braille devices and embossed printers for the blind;
• regular print printers;
• monitor screen;
• speech synthesizers;
• televisions

The query name value specifies several conditions. For example, display content only for monitor screens and only with a maximum width of 600 px. It looks like this:

@media screen and (max-width: 600px) (output code).

Responsive design is based on the use of media queries. A layout is created for screens with a minimum width of 1200 pixels, the body of the code is placed in @media screen and (max-width: 1200px) ( ). Next, a block is created for tablets @media screen and (min-width: 700px) ( ) and mobile devices @media screen and (max-width: 699px) ( ).

Mobile First

According to recent indicators, people access the Internet from mobile devices and tablets much more often than from computers. Accordingly, mobile traffic becomes more significant for websites. Due to features such as small screen size, gadget users prefer sites from the first lines search results, they spend less time searching for information.

The Mobile First approach involves displaying the most important content, keeping the website light and optimized, and not loading other resources.

Adaptive website layout using this methodology involves initially creating a page for small screens and then adding elements as required by the page design for a large monitor. Despite the transparency of the approach, customers and performers are making great efforts to completely reconsider the usual method of website development.

Bootstrap

One of the popular frameworks that gave a simple answer to the question of how to make responsive layout is Twitter Bootstrap. Using a 12-column bootstrap grid, websites are created that are displayed correctly on mobile device screens by default. The main tools used are:

• predefined column widths, which can be used to determine the width of elements;
• fixed and rubber document components;
• built-in fonts and classes for them;
• table design tools;
• design classes in menus and toolbars.

Dynamic effects are written in jQuery, the SASS preprocessor is used to describe the appearance, and popular web fonts are built into the functionality. Websites developed on latest version bootstrap do not display correctly in rarely used versions of browsers such as IE8, IE9 and iOS 6. It is noteworthy that the font sizes of some elements are root ems. The official website has detailed manuals in English and Russian, examples of adaptive layout, and ways to use built-in components.

Foundation

Foundation is a powerful framework, one of the main competitors of Twitter Bootstrap. It supports any grid sizes and has a number of advantages that Bootstrap lacks.

The components feature a large range of different animation effects that can be customized. The SASS preprocessor is used to manage styles. The list of basic templates contains sliders, navigation bars, and Social Media icons.

The dimensions are specified by the values ​​​​given in the table.

small 0 smedium 420px medium 640px large 1024px xlarge 1200px xxlarge 1440px Grid Layout

Another system that deserves attention is Grid Layout. It is a set of intersecting vertical and horizontal lines. They form columns and rows. Elements are placed in a grid and sized according to rows and tables. It is possible to use fixed sizes, such as px, and flexible ones - percentages, rem and em.

First, the grid container needs to be declared.

To set the width of rows, use the grid-template-columns property, and the width of columns, grid-template-rows. Dimensions can be specified in a single grid-template-columns property. The width of the stripes is measured in units of fr, which represent the proportion of available space in the container. It is possible to use fx and px in one property. For example, grid-template-columns: 500px 1fr 2fr.

Conclusion

A complete practice of adaptive layout from A to Z includes using the maximum number of methods. To figure out from scratch what layout is for all devices, you need to manually use media queries and calculate the sizes of images and fonts. After acquiring the appropriate skills, you can start using frameworks.

Kievyan Street, 16 0016 Armenia, Yerevan +374 11 233 255

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 to me the most simple solution, 100% mobile browsers support this unit. The point is that we write several lines of media queries for 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 rem instead of pixels. This technique is easily scalable and adjusts the layout depending on the base font size.
The code minimization and 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 typed up 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)?

There are more and more sites with adaptive markup every month, customers, in addition to cross-browser functionality, are increasingly demanding adaptability, but many developers are in no hurry to learn new techniques. But responsive design- it's simple! This article presents 5 examples of responsive markup various elements web pages.

1. Video (demo) Very simple CSS and HTML, and your embed video will scale to fit the page width:

Video ( position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; ) .video iframe, .video object, .video embed ( position: absolute; top: 0; left: 0; width: 100% ; height: 100% )

2. Maximum and minimum width (demo) Max-width helps determine the maximum possible width of an object. In the example below, the width of the div is 800 pixels if possible, but no more than 90% of the width:

Container (width: 800px; max-width: 90%; )

You can also scale the image:
img (max-width: 100%; height: auto; )

This design will work in IE 7 and IE 9, but for IE 8 we do the following hack:

@media \0screen ( img ( width: auto; /* for ie 8 */ ) )

Min-width - the opposite of max-width, allows you to set the minimum width of the object. In the example below, min-width scales the text field:

3. Relative values ​​(demo) If you use relative values ​​in the right places in adaptive layout, you can significantly reduce the CSS code of the page. Below are examples. Relative margin An example of the layout of nested comments, where relative values ​​are used instead of absolute values. As you can see from the screenshot, the second method is much more readable:

Relative font size When using relative font values ​​(em or %) the relative values ​​for line space and indents are also inherited:

Relative padding The screenshot below clearly shows the advantages of relative padding values ​​over absolute ones:

4. Overflow:hidden trick (demo) You can clear the float from the previous element and leave the content inside the container using overflow:hidden, which can be very useful in responsive markup. Visually - in the demo.

5. Word wrapping (demo) When CSS help You can wrap non-portable text structures:
.break-word ( word-wrap: break-word; )

Greetings to all HeavenWeb blog readers. Today on the blog I will give an example of the so-called adaptive layout, and also, as an example, I will show how to create a simple layout taking into account adaptability for different screen resolutions.

If we talk in simple words, adaptive or “responsive” layout means an arrangement of blocks and elements that adapts to the size and resolution of the screen of the device with which the page is opened.

With the growing popularity of tablet PCs and smartphones, web masters are required to support new formats for displaying sites, and, accordingly, new screen resolutions in which these sites open.

The most critical value is the width of the browser window. Minimum, at the most budget smartphones this is 240-360px, but in most cases it is still 480 px and above. And that's more than half the size of standard 1024-pixel wide monitors.

Another important point is large high-resolution monitors, which should not be forgotten either. The goal of the webmaster is to make the site adjust to the resolution and to avoid horizontal scrolling on any screen.

This can be achieved through CSS media queries, as well as style properties that limit the minimum and maximum width and height within specified limits.

But it’s better to show everything with an example. Let's create a simple responsive layout with a minimum of elements, appearance You can see the finished example on the demo page:

So, our requirements for its adaptability are as follows:

• The width of the main part should be stretched at high resolutions, but up to a certain amount, because lines that are too long are not convenient to read.
• As the browser width decreases, images should shrink proportionally to stay within the area boundaries.
• With a width of less than 700 pixels (minimum - a tablet or smartphone with an HD screen in portrait orientation), the three blocks at the bottom should line up one after another and occupy 100% of the width of the main block.
• Also, in this case, the left sidebar should collapse into a narrow strip, freeing up space for the main part.
• Provide a button that, when clicked, opens and closes the sidebar, which should now be positioned above the main block, in the form of a pop-up menu.

Let's begin. I created an index.html file, and css and images folders, where I placed the style file and pictures cut out from the layout, respectively.

In the HTML file we will create two root containers. left_side and .wrapper, respectively, for the left menu and the main part. In .left_side we will place some markup for the logo, social links and an unnumbered menu list.

In the right main block, we will wrap each post with a div with the class .text_block, add placeholder text from the Yandex abstracts tool, and images for example.

Let's add three .footer_block blocks to the bottom and wrap them in a common .footer. Let's add headings H2, H3 to the articles, and as a result we will get markup similar to this:

An example of adaptive layout layout. Heaven Web - a blog for web masters. Blog about web development

• Home
• Layout
• Jquery
• Drupal
• Other
• Contacts

Out-of-the-ordinary placement plan: methodology and features

Here is the text from Yandex abstracts...

Some more text with pictures

First title

At the same time, brand building organizes the sublimated survey, taking into account the results of previous media campaigns.

Second title

Based on the structure of Maslow's pyramid, sales leadership streamlines the principle of perception, winning its market share.

Third title

Raising living standards, as follows from the above, develops image formation, regardless of costs.

Pay attention to line 6. The fact is that mobile devices scale web pages to convenient viewing, however, we don't need this. With this meta entry we prohibit page scaling.

Now let's move on to the CSS styles. Let's create the left block:

Left_side( background: #1d282b; width: 300px; position: fixed; left: 0; top: 0; height: 100%; z-index: 5; ) .logo_text( padding: 20px 10px; color:#ffffff; font- size: 24px; line-height: 30px; font-family: myPTNarrow; text-align: center; .logo_text a( display: inline-block; ) .logo_text span( color:#72898f; font -size: 18px; line-height: 24px; padding: 0 10px 18px; text-align: center; display: block; type: none; ) .left_menu li( display: block; height: 30px; line-height: 30px; ) .left_menu li a( display: block; line-height: 30px; font-size: 18px; font-family: myPTNarrow ; color:#ffffff; text-decoration: none; padding-left: 60px; block; margin: 0 10px; width: 30px; overflow: hidden) .social_img a:hover( opacity: 0.7; ) .tw_icon( background: url("../images/social.png") top left no-repeat; ) .go_icon( background: url("../images/social.png") top right no-repeat; ) .left_swap( display: none;/* By default the block is not visible, it is shown if the media query is triggered */ position : fixed; width: 0px; height: 100%; background: url(../images/swipe.png) #1d282b no-repeat

Here for the container.left_side we specified position: fixed. This property will allow the block to always remain on the left (thanks to left: 0; top: 0; and height: 100%;) and not scroll with the main content. To ensure that the block does not overlap with anything, add z-index: 5.

Since the width of the left block is 300 pixels, the central block (.wrapper) must have an internal padding from the left edge - padding-left: 300px, so as not to “fall” under left menu.

General code for the central block:

Wrapper( position: relative; background: #ffffff; min-height: 200%; min-width: 400px; max-width: 1200px; padding-left: 300px; padding-right: 0px; box-shadow: 0 0 10px rgba (0,0,0,0.2); ; line-height: 24px; background: url("../images/hr.png") left bottom repeat-x; .cent_img( display: block; margin: 0 auto 40px; ) .auto_img( display: block; max-width: 100%; margin: 0 auto 24px; )

The most important thing here is the design of the width of this block. For .wrapper we specify properties

Min-width: 480px; max-width: 1200px;

That is, when the screen increases in width, the block will expand along with the content to 1200 pixels, then it will remain on the left side, and on the right there will be just a background. When you reduce it, it will shrink to 400px; if it is stronger, horizontal scrolling will appear.

Images inside the central block must have the class .auto_img. If they do not fit in width, they will shrink proportionally and will be equal to 100% of the width of the container.

Next, let's look at CSS media queries. All such requests look like this. First comes the @media header, then indicates the type of device on which you want to apply css code this request. For a regular color screen, this is the word screen (or more often they write all, that is, for all devices). Then in parentheses conditions and parameters are indicated.

What we're interested in now is the max-device-width condition, which specifies that subsequent rules will only apply when the browser's maximum width is less than a certain value specified after the colon.

That is, one of our conditions will look like this:

@media screen and (max-width:800px)( .left_side( display: none; ) .left_swap( display: block; ) .wrapper( padding-left: 50px; ) )

IN curly braces we have already filled in the required ones CSS rules, namely, we hide the left menu, and show the previously hidden auxiliary narrow left block - .left_swap.

Let's add one more condition for moving the lower horizontal blocks to the vertical row.

@media screen and (max-width:720px)( .footer_block( display: block; width: 96%; ) )

Those. elements cease to be inline and become block-based, due to which they line up one after another. With the width: 96% property, we increase their width to the maximum (not to 100%, since we retain padding - internal margins).

Here I started from the fact that the resolution of HD tablets and smartphones is usually 800 pixels in portrait orientation, so for everything below, the menu block is hidden.

In fact, CSS media queries can be made more complex by adding multiple conditions at once using the and operators. You can determine not only the width of the screen, but also the height, orientation, number of supported colors and other parameters.

Lastly, let’s arrange with using jQuery opening the left menu by clicking on the collapsed narrow left block - on.left_swap. For example like this:

JQuery(function($) ( $(".left_swap").click(function ()( $(".left_side").toggle(); return false; )); ))

Everything here is extremely simple, we process a click on the block and show or hide the block with the menu. The code is probably too simple and could be improved, but it will do as an example.

Thus, we looked at an example of the layout of a responsive website, and the resulting result can be viewed as usual on the demo page. Try increasing or decreasing the width of the browser window and observe the behavior of the blocks.

PS: Lately there has been a lot of spam in the comments on the blog, I don’t always have time to clear it, but I still read all your comments to the point and will try to respond.