Adaptive website layout: step-by-step instructions with examples

Layout is the creation of the structure and design of the elements of a web page. Writing code for a web page is a layout designer or a front-end developer. He uses a graphic program for cutting layouts, a code editor, additional programs to speed up the process.

What is the layout

Adaptive layout

The layout code is the skeleton of the site page, written in the markup language html. Consists of logically divided into parts of the page - tags. Each of them is responsible for his area: menu, basement, 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 for dynamic effects.

Qualitative layout is equally displayed on all browsers. The result is determined by conducting a series of tests. The ability to work on more than one hardware platform is called cross platform.There are several approaches to the implementation of the layout, using different frameworks.

To create pages according to modern standards, different methods of adaptive layout are used. This ensures the correct display of elements on all types of screens.

Types of layouts

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

  • static;
  • rubber;
  • adaptive.
Different screens

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

Adaptive layout implies that the elements of the site will adapt to the screen size of the device used. When the width of the document is changed, the blocks are rebuilt, some parts are replaced by others, some elements disappear. The idea of ​​adaptability has replaced the mobile versions of the site, living on separate subdomains. The main principle of creating adaptability is to develop a design for three screens: a computer, a tablet, a smartphone.

When creating a rubber layout, screen resizing is also taken into account and all elements are adjusted.The main difference from adaptive is that the layout expands or shrinks under the screen at each moment of change.

Check which of the principles used, as follows. If, when stretching a browser window, a page is stretched along with it, then this is a rubber layout. When a site page changes in only a few positions, it means that it is adaptive.

Sizes for adaptive layout

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

  • em;
  • rem;
  • %.
What is em, px, px

In adaptive layout on html, em is used to set font and indent sizes. By default, 1 em is 16 pixels. Accordingly, in order to set the font for a paragraph p with a size of 32 pixels, you must specify the following:

p {

font-size: 2em;

}

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

Rem - the root em, which is defined in the <html> tag.1 root-em, unlike 1em, equals one number in all circumstances. The value changes only when the 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

Media requests

CSS includes support for various technical device parameters. A smartphone with a small expansion of the screen is determined, the style property is indicated under its value. Media queries reveal differences in orientation: portrait and landscape. They are widely used to create adaptive layout. Layout to adapt to the specified screen resolution, changes the structure of the document in accordance with the code.

Determined device types:

  • braille devices and printers embossed for the blind;
  • conventional printers print;
  • screen monitor screen;
  • speech synthesizers speech;
  • tv tv.

In the value of the name of the request there are several conditions. For example, display content only for monitor screens and only a maximum width of 600 px. It looks like this:

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

Adaptive 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 the @media screen and (min-width: 700px) tablets {} and @media screen and (max-width: 699px) {} mobile devices.

Mobile first

MobileFurst Methodology

According to the latest indicators, from the mobile devices and tablets to the Internet come much more often than from computers. Accordingly, mobile traffic becomes more meaningful for websites. Due to such features as a small screen size, users of gadgets prefer sites from the first lines of search results, they spend less time searching for information.

Mobile First's approach involves displaying the most important content, an easy and optimized website, refusing to download other resources.

The adaptive layout of the site according to this methodology provides for the initial creation of a page for small screens and the subsequent addition of elements as required by the page design for a large monitor. Despite the transparency of the approach, customers and implementers make great efforts to completely revise the usual method of developing the site.

Bootstrap

The Bootstrap Framework

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

  • predetermined width of the columns, which can determine the width of the elements;
  • fixed and rubber document components;
  • embedded fonts and classes for them;
  • means of design tables;
  • design classes in the menu toolbar.

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

Foundation

Framework Foundation

Foundation is a powerful framework, one of the main competitors of Twitter Bootstrap. It supports all sizes of grids, has a number of advantages that are missing in Bootstrap.

Components are distinguished by a wide range of different animation effects that can be customized.To manage styles, the SASS preprocessor is used. The list of basic templates contains sliders, navigation bars, Social Media icons.

The sizes are set 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 the Grid Layout. It is a set of intersecting vertical and horizontal lines. They form columns and rows. Elements are placed in a grid, their sizes are indicated in accordance with rows and tables. It is possible to use fixed sizes, such as px, and flexible - percents, rem and em.

First, the grid container must be declared.

display: grid

To set the width of the rows, use the grid-template-columns property, and the columns use the grid-template-rows. Dimensions can be specified in one grid-template-columns property. The width of the bands is measured in units of fr, which represent the fraction 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

The full practice of adaptive layout from A to Z involves the use of the maximum number of methods. To disassemble from scratch what layout is for all devices, you need to manually use media queries, calculate the sizes of images and fonts.After obtaining the appropriate skills, you can start using frameworks.

Related news

Adaptive website layout: step-by-step instructions with examples image, picture, imagery


Adaptive website layout: step-by-step instructions with examples 76


Adaptive website layout: step-by-step instructions with examples 93


Adaptive website layout: step-by-step instructions with examples 17


Adaptive website layout: step-by-step instructions with examples 9


Adaptive website layout: step-by-step instructions with examples 22