What points to use for adaptive design. Adaptive and responsive web design. What is responsive design

Adaptive layout changes page design depending on user behavior, platform, screen size and device orientation and is an integral part of modern web development. It allows you to save significantly and not have to draw new design for each resolution, but change the size and location of individual elements.

This article will look at the main elements of the site and how to adapt them.

Adjusting screen resolution

In principle, you can split the devices into different categories and typesetting for each of them separately, but it will take too much time, and who knows what standards will be in five years? Moreover, according to statistics, we have a whole range of different resolutions:

It becomes obvious that we will not be able to continue to design for each device separately. But what to do then?

Partial solution: make everything flexible

Of course, this is not a perfect method, but it eliminates most of the problems.

Ethan Marcotte created a simple template demonstrating the use of responsive layout:

At first glance it may seem that everything is easy, but it is not. Take a look at the logo:

If you reduce the entire image, the inscriptions will become unreadable. Therefore, in order to save the logo, the picture is divided into two parts: the first part (illustration) is used as a background, the second (logo) changes its size proportionally.

The h1 element contains an image as the background, and the image is aligned to the background of the container (header).

Flexible images

Working with images is one of the most important problems when working with responsive design. There are many ways to resize images, and most of them are quite simple to implement. One solution is to use max-width in CSS:

Img (max-width: 100%;)

The maximum width of an image is 100% of the width of the screen or browser window, so the smaller the width, the smaller the image. Note that max-width is not supported in IE, so use width: 100% .

The presented method is a good option for creating adaptive images, but by changing only the size, we will leave the weight of the image the same, which will increase the loading time on mobile devices.

Another way: responsive images

The technique, introduced by Filament Group, not only resizes images, but also compresses the resolution of images on small screens to speed up loading.

This technique requires several files available on Github. First we take the JavaScript file ( rwd-images.js), file .htaccess And rwd.gif(image file). Then we use some HTML to link large and small resolutions: first small image with prefix .r(to show that the image should be responsive), then a link to large image using data-fullsrc:

For any screen wider than 480 px, a higher resolution image will be loaded ( largeRes.jpg), and on small screens it will load ( smallRes.jpg).

On iPhone and iPod touch there is a feature: a design created for large screens will simply shrink in a browser with a small resolution without scrolling or additional mobile layout. However, images and text will not be visible:

To solve this problem, use meta tag:

If initial-scale is equal to one, the width of the images becomes equal to the width of the screen.

Customizable page layout structure

For significant changes in page size, you may need to change the overall arrangement of elements. It is convenient to do this via separate file with styles or, more efficiently, via a CSS media query. There shouldn't be any problems as most of the styles will remain the same and only a few will change.

For example, you have main file with styles that define #wrapper , #content , #sidebar , #nav along with colors, background and fonts. If your master styles make your layout too narrow, short, wide, or tall, you can identify this and include new styles.

style.css (main):

/* Basic styles that will be inherited by the child style sheet */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul() /* Structural elements */ #wrapper( width: 80%; margin: 0 auto; background: #fff; padding: 20px; ) #content( width: 54%; float: left; margin-right: 3%; ) # sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20%; float: left; )

mobile.css (child):

#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: both; /* Additional styles for the new design */ border-top: 1px solid #ccc; margin-top: 20px; ) #sidebar-right( width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; )

On wide screen left and right side panels fits well on the side. On narrower screens, these blocks are located one below the other for greater convenience.

CSS3 media queries

Let's look at how you can use CSS3 media queries to create responsive designs. min-width specifies the minimum width of the browser window or screen to which certain styles will be applied. If any value is below min-width , the styles will be ignored. max-width does the opposite.

@media screen and (min-width: 600px) ( .hereIsMyClass ( width: 30%; float: right; ) )

The media query will only work when the min-width is greater than or equal to 600 px.

@media screen and (max-width: 600px) ( .aClassforSmallScreens ( clear: both; font-size: 1.3em; ) )

In this case the class ( aClassforSmallscreens) will work when the screen width is less than or equal to 600 px.

While min-width and max-width can apply to both screen width and browser window width, we may only need to work with device width. For example, to ignore browsers opened in a small window. You can use min-device-width and max-device-width for this:

@media screen and (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen and (min-device-width: 768px) ( .minimumiPadWidth ( clear: both; margin-bottom : 2px solid #ccc; ) )

Especially for iPad, media queries have the property orientation, whose values ​​can be either landscape(horizontal), or portrait(vertical):

@media screen and (orientation: landscape) ( .iPadLandscape ( width: 30%; float: right; ) ) @media screen and (orientation: portrait) ( .iPadPortrait ( clear: both; ) )

You can also combine media query values:

@media screen and (min-width: 800px) and (max-width: 1200px) ( .classForaMediumScreen ( background: #cc0000; width: 30%; float: right; ) )

This code will only be executed for screens or browser windows between 800 and 1200 px wide.

You can load a specific sheet with styles for different media query values ​​like this:

JavaScript

If your browser does not support CSS3 media queries, then replacing styles can be done with using jQuery:

$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // If the width is less than 600 px , mobile stylesheet is used if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // If the width is greater than 600 px, the desktop stylesheet is used $("link").attr((href: "style.css")); ) ) ));

Optional display content

The ability to shrink and rearrange elements to fit on small screens is great. But it is not the best option. Mobile devices typically feature a broader set of changes: simplified navigation, more focused content, lists or rows instead of columns.

Here's our markup:

Left Sidebar Content | Right Sidebar Content

Main Content A Left Sidebar A Right Sidebar

style.css (main):

#content( width: 54%; float: left; margin-right: 3%; ) #sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20 %; float: left; ) .sidebar-nav( display: none; )

mobile.css (simplified):

#content( width: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

If the screen size is reduced, you can, for example, use a script or alternative file with styles to increase white space or replace navigation for greater convenience. Thus, having the ability to hide and show elements, change the size of pictures, elements and much more, you can adapt the design to any device and screen.

The presence of adaptive design is a necessity - life has proven this with its rake; no Mobile Joomla gives such an effect as direct site adaptation. Today I will tell you how to do adaptive design through editing CSS styles using your head and fingers. It won’t be possible to put everything into detail, since each template has nuances, but I will give an impetus to start adapting.

Adaptation for desktop

First, we adapt it for the desktop. This is the basic stage, from which dancing with a tambourine begins. Many people mistakenly perceive the world, thinking that they have no problems with displaying the site on ordinary computers, since someone laid out the template, and it looks smooth at normal resolution. Depending on the resolution of your monitor, yes, but what about bigger screen, how do you look with absolute and pixels on a screen with a resolution of 1920x1080? The purpose of adapting the design is to display the site normally on mobile devices and avoid any problems on large screens.

What are we doing? The main thing is to translate everything large values V template css from pixels (px) to percentages (%). There are several rules here:

- We change px by % only for large values, there is no need to change 5 px by 1% (for example),

- Do all work through Firebug, then transfer the values ​​to real life.

A little for common understanding. You have a website on which the page width is 1000 px, it has three blocks - a central 800 px and two side sitebars of 100 px. This means that after replacing with percentages, the page size will become 100%, the central container will be 80%, and the side blocks will be 10%. Rough, but understandable. Now a little more specifics.

Before adaptation (I saved the old one for history) CSS file) the main container was styled like this:

#container(margin:0 auto;width:1100px; …

After adaptation it became like this:

#container(margin:0 auto;width:77%;overflow: hidden !important; …

Top menu has changed from:

Top-menu>ul>li ul(width:155px; …

Top-menu>ul>li ul(width:90%; …

And the offset of the content block is implemented with:

#content(margin:0 220px; …

#content(margin:0 20% …

Pay attention to the code:

overflow: hidden !important;

We use it to remove horizontal scrolling, this is useful for mobile adaptation, sometimes it makes sense to only indicate a ban horizontal scroll by using:

overflow-x: hidden !important;

Carry out all work through Firebug or the Google inspector, check with your eyes - the site should look the same after converting px to %. You don’t have to squeeze the screen yet, we haven’t gotten to mobile adaptation yet, we’ve done it yet basic work for large screens.

CSS under mobile devices

The database has been created, by the way, this is the most difficult stage; now we need to ensure that the site is displayed correctly on all mobile devices. There are few previous manipulations, since under small screen It’s not possible to compress everything into percentages. Agree, it’s impossible to see a 10% wide sitebar on a smartphone with a resolution of 320 px.

We'll need to use @media screen and which make style changes for devices with a specific resolution. I first determined by reducing the browser screen at what resolution I was having display problems. By narrowing the screen, I found my point of “curvature”, it starts at a width of 1000px, which means that you need to register the main mobile styles from here - everything that will be displayed more in the styles of a regular desktop, and less in separate styles.

Example @media screen and

I have written CSS for mobile devices on Joomla template 1.5 like this:

@media screen and (max-width:500px)(body, tbody(-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;)

@media screen and (max-width:400px)(td(word-break:break-all;)

@media screen and (max-width:1000px)(td(word-break:break-all;).page-numbers, #footer, #navigation, #header,.logo,.nav-box (display: none !important ;) #content (position: auto; width: 80%;margin-bottom: 0;margin-left: 10%;margin-right: 20%;) #container ( width: 90% !important;).content-box (widht:110%).content-box h1 (font-size: 130%;).content-box h2 (font-size: 110%;).content-box h3 (font-size: 120%;).content -box h4 (font-size: 100%;) .top-menu>div (padding-right: 0px !important;) img(max-width:96% !important;height:auto !important;)

Some specifics on the code.

When the screen width is less than 1000 px, the side sitebars, header, pagination and footer stop displaying. In my opinion, they are not needed in the mobile version. This is what the code does:

Page-numbers, #footer, #navigation, #header,.logo,.nav-box (display: none !important;).

By default, in mobile Joomla 3 and higher, the side blocks go down, stretching the page to the point of disgrace, so even on new engines you can correct some things manually.

Other values ​​are also indicated for the blocks of the main container and the content window, and the output of H1-H4 is converted to percentages (pixels suit me for the desktop). Corrections have been made to the output. top menu(fortunately, it needs to be minimized, but this is not critical and I’ll do it later) and the display of pictures has been changed:

img(max-width:96% !important;height:auto !important;).

For them it is indicated that maximum size The width of the images is 96% (with nice indents), and the height is set automatically.

The specifics are over, once again general sense website adaptation (design) via CSS.

- Change large px values ​​to %,

- We register separately @media screen and for mobile devices.

Via @media screen and be sure to close the display blocks that are unnecessary for mobile, but convert to % those values ​​that are displayed incorrectly, since they were left in pixels in the desktop version of CSS.

As a result, the user experience when working with Joomla Mobile was 65-70%, with responsive design using CSS, it became 99%. The conclusions are obvious: Yandex and Goole were not tested for adaptability, but now they are passing with a bang.

Everyone is talking about responsive web design. But does this mean that everyone understands what it is for?

Responsive design is not only about developing websites for mobile devices, here we're talking about about adapting layouts for different sizes screen (viewports).

In this tutorial, we will look at the basic principles behind responsive web design to better understand this technique. Next, we'll create a responsive website that will scale perfectly on large and small screens. Responsive web design has become very popular with more and more people using mobile devices such as iPhone, iPad, BlackBerry, and other internet-enabled smartphones and tablets.

It is important to understand that the site should not be built for a specific desktop or mobile device. What is important here is the ability of the layout to adapt to different sizes.

User frustration

Some people think that it is normal for the user to reduce functionality and eliminate content that they consider unimportant. But how can you be sure that the information you cut or moved to a secondary page is not the content that is most important to me?!

First, you need to understand that responsive design isn't just about mobile design. Secondly, developing a good responsive website requires a large number of time and effort, not just the help of media queries. With a huge and growing number of web devices, it is very important to give your website a chance to effectively facilitate the user experience.

For a responsive website, we can use the same code for both desktop and mobile. This is convenient because we do not have to separately adjust the content for each device. But many websites hide their content, deeming it unnecessary for mobile users. There are two problems with this:

• First, it effectively penalizes mobile users browsing the site.
• Secondly, hidden styles in CSS do not mean that the content is not loading. This can have a massive impact on efficiency, especially for those with poor connectivity.

Therefore, the best approach to website development is to consider mobile or small devices, Firstly. This way, you can focus on the most important information your website needs to deliver. And then, if necessary, you can use conditional methods uploads where your layout grids, large images and media queries are layered on top of an existing small-screen design.

Step by step guide

For this tutorial, we created a website that scales perfectly between large and small screens. You save all content, on all screen sizes. And using media queries, navigation will be switched from horizontal to vertical display, for smaller devices.

The key element of flexibility in responsive design is fluid layout width. All you need to do is create wrapper, content and column widths that will adapt to different device widths. This is nothing new, but it is more important now than ever. To keep things simple, we will create a fluid page consisting of navigation, a main image and two columns, which takes into account the location on devices various sizes. We've also included respond.min.js, which allows media queries to work in IE6-8.

Main HTML structure:

Responsive site Demo

• Scroll to content

Logo

• home
• Buy
• Service
• Contacts

Story

The history of the Mercedes SL model goes back to 1954 - it was then that the Germans presented the two-door Mercedes 190 SL at the New York Auto Show. You can imagine the level of aesthetic shock among visitors to the then motor show. Under the body of captivating beauty was a shortened platform from the Mercedes W120 Ponton sedan and a steel monocoque. The suspension was completely independent - with a double wishbone at the front and swing axle shafts at the rear. Length - 4290 mm, distance between axles - 2400 mm.

When it comes to CSS, setting max-width is a good idea; it will stop the site from scaling on huge screens, but it won't stop pages from shrinking. One of the main issues when switching from fixed width to fluid is images. In CSS, there is a simple solution to this problem. Just set the image width to 100%. Let's also add auto for the height of the images to avoid squashed images in Opera and Safari on small screens:

/* Layout */ #wrapper ( width: 96%; max-width: 920px; margin: auto; padding: 2%; ) #main ( width: 60%; margin-right: 5%; float: left; ) aside ( width: 35%; float: right; ) /* Logo H1 */ header h1 ( height: 98px; width: 216px; float: left; display: block; background: url(images/sllogo.png) 0 0 no- repeat; text-indent: -9999px; ) /* Navigation */ header nav ( float: right; margin-top: 40px; ) header nav li ( display: inline; margin-left: 15px; ) header nav ul li a ( text-decoration:none; color:#333;) #skipTo ( display: none; ) #skipTo li ( background: #ccc; ) /* Main image*/ #banner ( float: left; margin-bottom: 15px; width : 100%; ) #banner img ( width: 100%; height: auto; )

Your image will appear on its parent element at full width, and will shrink along with it. Just make sure that the images max-width does not exceed the maximum width of its container.

Using large images may impact loading times. Therefore for small screens, there is a responsive method for images that detects the size of the user's screen, and produces a smaller/larger image depending on what is needed. This method is still difficult to call ideal, but it is still worth considering.

Switch main navigation

The main reason why you need to change your navigation is because of the minimization that occurs, which can make the buttons unreadable and difficult to click. Using this method will make the user's life easier. You'll also notice in the code that we've made changes to the #main and aside sections to combine them into one column.

/* Media queries */ @media screen and (max-width: 480px) ( #skipTo ( display: block; ) header nav, #main, aside ( float: left; clear: left; margin: 0 0 10px; width : 100%; ) header nav li ( margin: 0; background: #ccc; display: block; margin-bottom: 3px; ) header nav a ( display: block; padding: 10px; text-align: center; )

You will notice that on some mobile devices, your website will automatically shrink to fit. of this screen. This point becomes a problem when we need to increase the screen size in order to navigate through inconvenient content.

To allow media queries to come into full effect, a typical mobile-optimized, responsive site should contain something like the following:

The width property is responsible for the size of the viewport. It can be set to a specific number of pixels, width=960, or to the device-width value, which is the width of the screen in pixels at 100% scale. The initial-scale property controls the scale when the page is first loaded. maximum-scale, minimum-scale, and user-scalable properties control how users can scale the page (larger/smaller).

More recently, literally 10 years ago, when creating websites, web designers were guided by a certain average screen width of users’ monitors. At first the most common resolution was 800*600, then it grew to 1024*768. On the Internet one could come across the following words: “The site is optimized for such and such a resolution.” With the increase in the number of screen sizes, the rubber layout of websites has become popular, which I wrote about in the article of the same name. Thanks to this type of layout, it was possible to view sites on monitors with different resolutions.

However, in last years rubber layout has ceased to be a “panacea”. On the one hand, monitors with huge screen sizes appeared, on the other hand, the mobile revolution took place - the number of connections to the Internet of mobile devices (laptops, smartphones, tablets) has increased more number desktop computers. Mobile traffic is growing, and there is a need to display the site correctly on screens large number diverse different devices. The size range is too wide.

If the site looks bad on small screens, then the visitor simply leaves it, traffic drops, and the behavioral factors.

To check how your site looks when viewed on various devices, you can use the Screenfly service. To do this, enter the site address and select from a sufficient number of big list desired device. This can be a desktop computer or tablets various types

, and mobile phones. You can change the screen orientation from landscape to portrait and vice versa.

• How to solve the problem of normal website display on different devices? There are two ways out: Use two versions of the site, the regular one for desktop computers
• , and mobile.

Use responsive design. Which of these options to apply is, of course, up to the owner or customer of the site to decide. If the site was created a long time ago, has a hand-drawn design that is part of the brand, then it might be worth doing something for it mobile version

What is responsive design?

What kind of design is this and how does it differ from rubber?

The rubber template does not change its structure when the screen width changes, but only changes its dimensions. For example, a web page has three columns: on the left is a menu with a width of 25% of the window width, in the center is content – ​​50%, on the right is a sidebar – 25%. With a window width of 1000 px, they will have sizes of 250, 500 and 250 px, respectively, which is quite normal. But if you use a mobile phone with a small screen 320 px wide, the columns will shrink to sizes of 80, 160, 80 px and become unreadable.

What's the solution? It involves radically changing the web page. This change consists in the fact that after a gradual decrease in the width of the columns, the page structure is rebuilt - it is stretched into one column. But this is not the only difference.

Responsive design requirements

• Adapts to screen size and orientation, ranging from large monitors desktop PCs and ending mobile phones.
• Resize images when changing screen resolution. Even on sites with a “fluid” design, the image sizes do not change, and at a certain screen width, horizontal stripe scroll to view them. When using responsive design, images also “fit” to the screen size.
• Removing unimportant template elements. They can be like decorative elements, and software that do not work on mobile devices.
• High speed downloads. Speed mobile Internet is still relatively small, and this must be taken into account when developing a site designed for viewing on mobile devices.
• Usage is relative large buttons. Mobile devices use touch input and the absence of a cursor must be taken into account when developing the design.
• Work with mobile functions, for example, geolocation.

How responsive design is created

This design is based on the use CSS media queries (media queries). Thanks to these requests, the parameters of the device that the visitor is using are first determined, and, depending on this choice, the appropriate style is connected, that is, with adaptive design, one site is used with a set of styles for different devices. For example, if a visitor comes to the site with regular computer, one style sheet is connected, and he sees a site with a large colorful header, a horizontal menu, several columns of content, and when using the iPad, a different style is applied, and instead of a huge header, a small logo is displayed, the menu turns into a vertical list, and the content is stretched into one column .

Responsive Templates

Is it possible to convert an existing website template into a responsive version? Of course, you can if you have sufficient knowledge of HTML and CSS. But, if you use any content management system - WordPress, Joomla!, Drupal, then it is better to find ready-made template, Now adaptive templates a lot has been developed. By the way, in my article “How to choose a template for WordPress” you should now add another item “Checking the template for responsiveness”.

So, we can say that responsive design is currently It is the most in a modern way website development and, despite its relative complexity, it is the future. Progress does not stand still, new, more complex devices appear, and software it also becomes more difficult for them.

By the way, a unique course by Andrei Kudlay has just appeared. Using Bootstrap framework, today you can create a website with a beautiful, pleasant, professional design, and you don’t need to be a pro in layout. Using frameworks, even the most beginner in website building can layout a page, create a one-page website or landing page. Moreover, the site will be quite professional, and the time spent on its creation is minimal.

All this is very serious, and in order to take a break, I suggest putting together puzzles and looking at another painting by my fellow countryman, People's Artist of Russia N.P. Eryshev.

Write your opinion about responsive design in the comments.

Hi all! Recently, looking at the statistics of one of my projects, I realized that it was time to learn how to create an adaptive website design, that is, a design that will look good on both desktop computers both laptops and mobile devices. Take a look for yourself, Metrica hints.

How do you like this picture? Perhaps in some topics the percentage mobile traffic It will be less, in others it will be more, but in any case, you can no longer ignore visitors who read you from a smartphone or tablet.

Do you know how mobile device users see your website? Fortunately, there is a way to check great service— responsinator.com

Everything here is incredibly simple - you enter the site address and see how it looks on mobile devices. Let's take an example of a blog that everyone is probably familiar with.

At Alexander Borisov's beautiful template, it’s immediately obvious that a lot of money has been invested in the design and layout. However, reading a blog from a phone is very inconvenient, and I would not be surprised if the failure rate among mobile device users is much higher than among those who access the site from a computer.

What to do? There are two ways out: leave everything as it is and watch how other projects bypass yours in the search results. search engines or make your website design responsive.

What is responsive design

At first, I didn’t see the difference between adaptive and “fluid” layout, when the block sizes change depending on the screen width. However, there is a difference.

Responsive design doesn't just stretch or shrink in width, it adapts to the screen size, sometimes completely changing the style of the blocks.

The simplest example: the content area is stretched across the entire width of the screen, and the sidebar is either moved down or completely disappears from the page. Or the menu turns from a regular horizontal one into a drop-down list.

How to make a responsive design for your website

Depending on your budget and knowledge of CSS/HTML, there may be several options.

Order adaptive layout from a freelancer

The most correct option, in my opinion, is also the most unpopular. Because pleasure is not cheap. And yet, if funds allow, and there is no desire to understand the intricacies of layout, it is better to find a studio or freelancer who will adapt your template for mobile devices or make a new one. And you already know how to check its operation on devices with different resolutions - responsinator.com can help.

Find ready-made design

IN Lately Almost all designers try to adapt their templates for mobile devices. You can look for a ready-made design, for example, here:

• www.templatemonster.com is one of the most popular collections of paid templates for various CMS and just HTML sites.
• www.templatemo.com - many free options modern design.

This option is suitable for those who are not chasing an exclusive design or are able to make their own changes to the code to make the template unique.

Use frameworks

Framework - one might say, the framework of the template, its main files and a grid of blocks. Designers love them for their ease of use and time savings, because a ready-made “fish” template allows you not to waste time on routine. If you know how to work with frameworks, using them to create responsive design is a great solution.

You will find a huge list of adaptive frameworks for every taste on Habré. But most of them are quite difficult to use and heavy in volume. Therefore, for those who love minimalism, I recommend another list of lightweight adaptive frameworks from Beloweb.ru. At the same time, take a closer look at the blog, there are a lot of useful “goodies” for designers and layout designers.

Make the layout yourself

This method is for those who are not looking for easy ways and want to figure everything out on their own. Essentially, to make your template responsive, you need to use two things:

Viewport meta tag
Which determines the type of device from which the visitor accessed the site and sets the correct screen width. Just copy this code into the head of your site.

@media rule
Thanks to which we can write different styles for the same blocks in your css file. It looks something like this:

#left( width: 600px; float: left; margin-right: 10px; ) #right( width: 400px; float: right; ) @media only screen and (max-width: 1010px)( #left, #right( width : 98%; float: none; margin: 10px auto;

In this example, the #left block is 600 pixels wide and will be positioned to the left of the 400 px wide #right block. But if the monitor resolution is less than 1010 pixels, we remove the wrapping from both blocks and stretch them to 98% of the screen width.

And this is how you need to write rules for the following screen sizes:

• 320px for iPhone 3-5 in vertical position
• 480px for iPhone 3-4 in horizontal position
• 568px for iPhone 5 horizontally
• 384px for smartphone in vertical position
• 600px for smartphone in horizontal position
• 768px for iPad horizontally
• 1024px for iPad in vertical position

A complete list of resolutions can be found on responsinator.com or in the Yandex.Metrica report for your site (section Technologies/Display Resolutions). In a word, it will not be difficult for those who are familiar with website layout to understand this issue.

You know, I rarely give links to paid courses(because I never recommend something that I’ve never used myself), but this is truly the best training material on layout that I’ve ever watched. It is thanks to Mikhail that my blog template is now not only adapted to different screen resolutions, it has become lighter than the previous version and is better optimized for search engines.

By the way, if you are reading the article from a mobile phone, write if everything is in place, is everything convenient? That's all for today. If you have any questions or additions, welcome to the comments; as always, they are open to everyone.