Responsive Vs adaptive design: which is better for the user? Find a ready-made design. The most important screen resolutions for adaptive layout

IN Lately Technologies and various devices (tablets, smartphones, monitors) with which sites are viewed are developing more and more.

In this area, we get a huge variety of different screen resolutions, which in turn makes it difficult to obtain information from sites. To ensure that the information is easy to read and viewable on most devices, adaptive design technology has been developed.

The goal of responsive design is to develop a universal website design that would, in turn, allow you to view and interact with the resource from various devices.

And this technology involves developing one version of a website for all devices, rather than several.

Adaptive Web Design is the design of web pages that ensures the correct display of the site on various devices, connected to the Internet and dynamically adapting to given dimensions browser window.

Basic principles of responsive design:

Adaptive website template, the ability of the template to adapt to different device screen resolutions from computer monitors to smartphones;
Adaptation and movement of content blocks, the ability of content blocks to take the required dimensions depending on the device screen resolution, as well as the ability to move to another position in the layout;
Image responsiveness, the ability of images to change size depending on screen resolution or to load a more tailored image with less weight and size;
Usage flexible mesh, allows you to quickly change the layout design;
Hiding less important blocks by small screens some blocks may be hidden;
Reworking the usability of navigation elements, since on mobile devices, due to their low resolution, navigation elements become less clickable, they are redesigned, making them convenient to use;
Simplification of a number of elements on the web page, some elements are simplified for use on mobile devices;
Adaptation of video content, video adaptation should also be taken into account;
Using media queries ( media query), allow you to create a responsive layout;
Mobile first ( mobile first), designing a responsive design starts with a mobile-friendly layout.

Regarding the last point, whether this is correct or not is a difficult question, according to at least, many argue that it is necessary to start developing a layout with a version for mobile devices. I take a slightly different view; it’s easier for me to develop a layout for maximum resolution with a well-thought-out grid and full functionality, and only then adapt it to other resolutions.

Responsive Design Layout Dimensions

Once upon a time in 2012, I wrote a short article about which ones should be chosen when developing a design - a layout for a fixed site. This article received great interest among readers; it turns out that this issue is of interest to many novice designers and developers. In connection with this, I also decided to highlight this issue in this article.

So, purely from my vision, I will outline the principle and dimensions for which the layout should be developed.

If you follow the principle of mobile first, then there will be resolution sizes for which you need to develop a layout 320px / 480px / 768px / 1024px / 1280px, maybe more depends on the tasks.

The picture looks something like this, but often there is no need to create a layout for certain resolutions, for example, 480px. if the layout does not break at the interval 768 - 320px.

Of course, we will create a canvas in Photoshop taking into account the padding, scrollbar and everything else, just like a regular layout. for ease of development, as well as faster layout design. Many people use frameworks in their work, and therefore rely on the grid of the framework on which they develop.

Thanks to this, we will be able to show the layout designer how the layout will behave on different screen resolutions and devices. As an example, I sketched out a small layout, you can see it in the screenshot below.

Media query and viewport in responsive design

The viewport meta tag is used to tell the browser how to display page dimensions and change its scale. This meta tag is written into the site. It allows developers to set the screen width for devices, which is written in css.

The viewport meta tag is written like this:

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:

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 enlarge 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.

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, it has become popular Rubber layout sites, which I wrote about in 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, a mobile revolution occurred - the number of connections to the Internet of mobile devices (laptops, smartphones, tablets) 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 behavioral factors worsen.

To check how your site looks when viewed on different devices, you can use the Screenfly service. To do this, enter the site address and select the desired device from a fairly large list. It could be desktop computer , and tablets, 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, and leave the old one. For new websites, of course, you should choose a responsive design.

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 mobile phone with a small screen 320 px wide, then 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 structure of the page 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 to 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 download speed. Speed mobile Internet is still relatively small, and this must be taken into account when developing a site intended 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.
Working with mobile functions, such as geolocation.

How responsive design is created

This design is based on using CSS 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 accesses the site with regular computer, one style sheet is connected, and he sees a site with a large colorful header, 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 vertical list, and the content is pulled into one column.

Responsive Templates

Is it possible to remake an existing website template for adaptive 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 I should now add one more item “Checking the template for adaptability”.

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 the Bootstrap framework, today you can create a website with a beautiful, pleasant, professional design, without the need to be a professional 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, but 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.