Menu
homeAndroid

Creation of adaptive design. Adaptive layout: what it is and how to use it. Discussions and different points of view on responsive web design

Hi all! Recently, looking at the statistics of one of my projects, I realized that it was time to learn how to create adaptive design website, that is, a design that will look good on desktop computers both laptops and mobile devices Oh. 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 outrageously 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 a ready-made design

IN Lately Almost all designers try to adapt their templates for mobile devices. You can search 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 block #left has a width of 600 pixels and will be located to the left of the block #right 400 pixels wide. 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 have never used myself), but this is truly the best training material on layout that I have 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.

Internet users browse websites on different devices with screens various sizes. Screen sizes are constantly changing, so it is important that the site adapts to any of them. There are two main approaches to creating websites that are easily adaptable for different types devices:

Responsive Design (RWD) — responsive design— designing a site with certain property values, for example, flexible mesh layouts that allow the same layout to work on different devices;

Adaptive Design (AWD)— adaptive design, or dynamic display — designing a site with conditions that change depending on the device, based on several fixed-width layouts.

1. Responsive Design Techniques

The philosophy behind responsive web design is to make the site easy to view on any device, regardless of screen size. Phrase responsive design was invented by Ethan Marcotte in 2011. main feature responsive web design - due to the fluid grid, the layout automatically responds to changes in screen size, inflating or contracting like a balloon.

Responsive Design(English) Responsive Web Design) combines three methods - flexible layout mesh based, flexible images And media queries.

Layout flexibility based on use relative units dimensions instead of fixed pixel values, allowing the width to be adjusted to suit the available space.

Flexibility of text content achieved by calculating font sizes relative to browsers' default font size of 16px, such as fixed font-size: 42px relative size is 42px / 16px = 2.625em.

Problem flexible images solved using the img rule (width: 100%; max-width: 100%;) for all images on the site. This rule ensures that images are never wider than their containers and never exceed their true dimensions by big screens.

Media queries change styles based on device characteristics related to the display of content, including screen type, width, height, orientation, and resolution. Media queries create a responsive design that applies appropriate styles to each screen size.


Rice. 1. Responsive design

Additional Responsive Design Techniques

Scalable Vector graphics - use svg images that scale to any size without losing quality and look good on Retina displays.

Card interfaces- use so-called card interfaces - rectangular shapes with rounded corners that represent containers for content. Such blocks are self-contained interface units and are easy to move around the layout.

Rice. 2. Pinterest, card-based layout

Leave only the essentials — good welcome, especially for responsive design. Create responsive and friendly minimalist interfaces that are becoming increasingly popular nowadays.

Rice. 3. Hotellook, minimalism in web design

Prioritize and hide content correctly- use hidden elements control, especially for devices with small screens. Pop-up windows, tabs, off-canvas menus and other similar techniques will help reduce the number of elements on the page. Freeing up space from unnecessary elements, you will make the interface convenient and user friendly.

Create a large clickable space for buttons— the larger the active area of ​​the button, the easier it is for the user to interact with it.

Add interactivity to your interfaces- in response to a user action, create a response action - an animation that will work when hovering over an element on desktop devices and when touching an element on mobile devices.

2. Customizing the viewport using the viewport meta tag

So that mobile browsers for operating systems Android and iOS do not automatically resize site pages; a special tag is used with the name="viewport" attribute. IN this tag allowed to install specific value For width parameters and initial-scale:

— initial-scale=1 means that the page size in the browser will be equal to 100% of the viewport size. That is, the relationship between the physical pixel and css by pixel will be 1:1;

— width=device-width means that the page width will be equal to 100% of the width of the window of any browser. That is, the width of the site page corresponds to the width of the device, so it does not need to be scaled.

IN in this example the content in the browser window will be 2 times larger compared to the physical size.

Also tag can be used to control how much users can increase or decrease the page width:

This code will allow you to increase the page width to a value equal to 3 times the width of the device screen and reduce it to half the width of the device screen.

You can deny users the ability to scale using the user-scalable attribute:

3. Universal templates

Most of the layouts used to create responsive web design fall into one of the five pattern categories defined by Luke Wroblewski:
Mostly Fluid(Most rubbery)
Column Drop(Columns below each other),
Layout Shifter(Moving layout),
Tiny Tweaks(Tiny changes)
Off Canvas(Off screen).
In some cases, a page may use a combination of templates, such as Column Drop and Off Canvas.

3.1. Mostly Fluid

A popular layout consisting mainly of rubber mesh. On large or medium-width screens, its size usually remains unchanged; on large screens, only the margins are adjusted. On smaller screens, the rubber grid causes the layout to be recalculated for the main content, and the columns are placed one below the other. The advantage of the template is that it only requires one control point between small screens and large screens.

3.2. Column Drop

Columns are placed one by one vertically if the width of the window cannot display all the content. As a result, the columns will be positioned vertically below each other. The choice of breakpoints for this layout template depends on the content and is determined for each design option separately.

3.3. Layout Shifter

Most responsive template, since it provides multiple control points for screens of different widths. The main difference with this layout is that instead of recalculating the render tree and placing columns underneath each other, the content is moved. Due to significant differences between the main control points, support for this layout is more challenging task, in addition, you will probably have to change not only the overall layout of the content, but also its elements.

3.4. Tiny Tweaks

The template makes small changes to the layout, such as adjusting the font size, resizing images, or moving content. It works well on single-column layouts, such as single-page sites and articles with big amount text.

3.5. Off Canvas

Content that is rarely used, such as navigation elements or application menus, is placed off-screen and shown only when the screen size allows it. On smaller screens, content opens with one click.

4. Responsive design

Unlike responsive design, adaptive design(Adaptive Web Design) focuses on device sizes. It uses multiple static layouts for different types of devices (mobile devices, tablets, desktop computers), based on control (turning) points. That is, layouts load at certain device browser window sizes, and transitions between layouts occur abruptly rather than smoothly.

Typically, responsive layouts have six layout options depending on screen width:
320
480
760
960
1200
1600.

IN adaptive layouts Functionality plays the main role, that is, when creating a design, the features of devices are taken into account, for example, touch control for mobile devices or large spaces for desktop monitors.

Basic Responsive Design Techniques

Keep it consistent- any website should create trusting relationship with the user so that he feels comfortable when navigating and interacting with him. Consistent design means that when moving to another page on a site, the user does not feel like they are on another site. Pay attention small details, build a visual hierarchy, highlight important elements in bold. Use serial color scheme throughout the site, reuse the same elements to various situations, for example, the same design of pop-up notifications.

Use a grid— a 12-column structure is more preferable for controlling the width of columns and the padding between them.

5. What is the difference between responsive and adaptive web design


Rice. 4. Responsive and adaptive design on different devices

To create responsive layouts, use media queries and relative sizes grid elements specified using % . In responsive design, server-side scripts first determine the type of device the user is trying to access the site on (desktop, phone, or tablet), then loads exactly the version of the page that is most optimized for it. Grid elements are given fixed px sizes.

Therefore, the main difference between these techniques is responsive design - one layout for all devices, adaptive design - one layout for each type of device.

6. Useful services and tools

Android emulator for Windows, Linux and Mac OS X. iOS simulator is only available for Mac users OS X and is part of the Xcode package (you can download it for free from Mac App Store).

A PHP script running on any website detects the screen size and adjusts the image size to fit it, resulting in a small image size on small screens.

Correspondence tables physical dimensions devices css height and width values, as well as pixel-ratio value for mobile devices.

A collection of websites using media queries and responsive web design.

CSS framework based on 12-column layout, maximum 960px. Supported by Chrome, Safari, Firefox, IE 7 and above, mobile versions of browsers.

A set of tools for developing web applications. LESS language, 12-column adaptive layout, support for mobile devices, tablets and monitors, many components, buttons, drop-down menus, own style input fields, lists, headers, labels, icons, alerts, tabs, progress bars, tooltips, accordion, carousel, and so on, various Javascript plugins, Scaffolding support, including the application of Bootstrap style to already generated HTML.

Greetings, casual visitors and regular readers of the blog site!

During the existence of this site, I changed the template several times and even created my own from scratch.
One of the main tasks when choosing a new template is the adaptive layout of the site for all screen resolutions.

Brief outline of the article:

In a previous article I already wrote about why it is needed. But how to achieve this very adaptability?

For this there is different ways. Some use javascript, some use something else. But I believe that the simplest and The right way is an adaptive using CSS.

How to make a responsive website layout


Firstly, if you set out to create a responsive website design, between the tags paste the following code:

What a fool I was that I didn’t do this right away when I was trying to make an adaptive website layout!!!
The problem with mobile browsers is their scaling of website layout, even adaptive ones.

Imagine, I draw a design, then write down all the necessary styles and queries, check the site’s adaptability at different resolutions. Everything seems to be fine! But when I open my blog on my smartphone, I see that the site has simply shrunk. It did not adapt to the mobile device, but simply reduced the size of the font, pictures, etc.

How so? I began to double-check all the styles to see if I had written the classes correctly, and eventually got to the point where I checked the width of the browser window in px using javascript. I was shocked. When checking on a laptop, I got a result of 1024px, and I got about the same result when opening the site on a smartphone!

But this cannot be!

Turns out, if you do not write the code that I indicated above, mobile browser doesn't understand that the site is responsive and is simply trying to shrink the site page so that it fits into small screen mobile phone

Because of my stupidity and incompetence, I lost a lot of time. But now I remember it forever))).

Adaptive layout CSS media queries


To make it responsive using CSS, you need to use media queries.

How is that? Yes, very simple. IN CSS file you need to write queries like:

@media screen and (min-width: 1440px) and (max-width: 1599px)( )

This code means that styles enclosed between “( )” will work for screens with a minimum width of 1440px and a maximum of 1599px.

That is, those styles of site elements that must be adapted depending on screen resolution must be written separately for each possible screen width.

The most important screen resolutions for adaptive layout

  • 320px- Mobile devices (portrait orientation);
  • 480px- Mobile devices (landscape orientation);
  • 600px- Small tablets;
  • 768px- Tablets (portrait orientation);
  • 1024px- Tablets (landscape orientation)/Netbooks;
  • 1280 px or more- PC.

It is these resolutions that you need to focus on and pay special attention to when making adaptive layouts. These are the most common types of screen resolutions.

bootstrap responsive design


Very convenient to use for creating adaptive bootstrap layout. The convenience is that all styles for adapting blocks, buttons, tables, etc. are already registered in bootstpap. You just need to figure out which class to assign to which element.

To get started, download the latest version of bootstrap and connect it to your site. Please note that connecting styles and scripts to WordPress has its own characteristics.

The layout on Bootstrap is different in that the width of the block or screen is divided into 12 equal parts. And by assigning a certain class to a block, you can set the width of the block equal to the required number of parts.

For example, this design will allow you to allocate one wide block for content 8 parts wide and one narrow block for a sidebar 4 parts wide:

The width of the blocks will be calculated automatically depending on the width of the screen. And when viewed on a mobile device, these blocks will shift under each other.

You can also adjust the block's distance from the edge, again by required quantity parts. For example this design:

A block 10 parts wide will be created with a left indent of 1 part of the screen.

If you look at it, working with bootstrap makes the work very fast. Moreover, these styles definitely work correctly and there will be nothing crooked on the site.

In the future I plan to post several lessons on working with bootsrap. Therefore, I advise you not to miss this moment.

Checking website adaptability


But the question arises: how to check the website’s adaptability? Now you have written media queries in CSS, connected bootstrap and used the necessary classes. How can you check that the site adapts correctly at all screen resolutions?

Very accurate and most importantly free service, which deserves respect and gratitude from webmasters and layout designers who deal with adaptive website layout.

Well, how do you like the article? All clear? If not, write in the comments, we’ll figure it out together.

Yes, to make a responsive website design, you need to work hard. But these efforts will be rewarded with a favorable attitude towards your site from search engines, and most importantly, visitors to your site.

Terms such as responsive and adaptive design have been used quite often lately. As it turns out, for some people these two concepts are almost identical. In this article we will talk about what responsive and adaptive design is and what the difference is between them.

Starting from the moment tablet computers and smartphones have become available to the general public, websites are increasingly viewed using touch-controlled devices with small screens. Many Internet resources turned out to be completely unsuitable for use by the owners of such devices.
Two fundamentally appeared different approaches to creating websites for mobile devices: Adaptive web design and Responsive web design. Let's look at each of them separately, and then compare their applications and features.

What is responsive design

Responsive web design (RWD) is an approach to design in which a website is designed to be as easy to use as possible: convenient viewing website with a minimum of resizes and unnecessary scrolling - on the widest range of devices. Responsive design has the following features:

  • When creating a responsive design, only HTML and CSS are used - without JavaScript connections to determine the “responsiveness” of design elements.
  • Responsive layout determines how website elements will look on different devices; however, these elements are not hidden/replaced by others, and their behavior, as well as the functions they perform, do not change.
  • Three basic principles of responsive design:
    1. arrangement of all elements within the modular grid;
    2. all layout elements and media files (including images) are “flexible” - their sizes depend on the screen size;
    3. working with Media queries - a CSS3 module that allows you to set different styles (or even style sheets) depending on the screen resolution, its size and other characteristics.
  • Responsive design is created using responsive markup (not to be confused with responsive design). Adaptive layout is that several styles are created on the site, options for the arrangement of elements on modular grid and several design element styles. These options replace each other as the screen size changes, and certain transition points are formed between different types site layout/styles.
  • Responsive design does not involve working with object model elements on the page does not imply a change in the hierarchy/nesting of blocks and objects when the type of markup changes.

What is responsive design

Adaptive web design (AWD) is a design that manipulates different site layouts or layouts to ensure best use on specific, predetermined devices and screen resolutions.

  • In the case of adaptive design, site elements can be hidden and replaced with others; The behavior and functionality of individual website elements may change.
  • Responsive design makes extensive use of JavaScript to control the behavior and functionality of objects on a site.
  • Adaptive design requires working with the object model of elements on the page and involves changing their hierarchy/nesting on different devices.
  • It is not obligatory to ensure the same appearance of the site and its functionality in different browsers. It is possible to use new technologies that are not supported by older versions of programs - because the design, as mentioned above, is adapted to certain types of devices.

Definition confusion

In RuNet, the concepts of responsive and adaptive design are almost identical with each other. It is worth understanding that these approaches differ primarily in the tasks for which they are used.

Adaptive markup and responsive design are completely different things. Adaptive website layout involves changing the styles of elements on different devices and is used in responsive design. Adaptive design is a separate approach to designing and creating the front-end of websites.

Features of the approaches

Some important aspects, in terms of which responsive and adaptive designs are radically different:
Website speed. A site created according to the principles of adaptive design can load several times faster, since the user will need to download from the server only those parts of the design that are necessary for the site to work on his device. In the case of responsive design, the user will be forced to wait until all the styles and images are loaded, regardless of the device the visitor is using.
Complexity of development. Creating a website with adaptive design requires a higher professional level from the developer. In particular, solid experience with JavaScript.
SEO aspect. Rumor has it that Google is much more accepting of responsive sites than adaptive ones.

On practice

In practice, Responsive design is quite common, unlike adaptive design. Which is obvious: after all, the first one is easier to implement and master. Most templates that are sold on marketplaces are responsive, not adaptive.
Adaptive design is more often used in serious and multifunctional products. The most obvious examples: in the mobile version of the VKontakte network, mail from Google.

P.S. If you pay attention, you will notice that the layout of our site is an example of responsive design. To verify this, on your computer, try changing the width of the browser window - and you will notice how the site's layout style gradually transforms, turning into a mobile view.

From the author: responsive website design is absolutely new approach to a design that is gaining more and more attention, but given how different it is from traditional methods development, at first it may seem prohibitively difficult for novice web designers and developers. In this article I'm going to cover some the most important points related to the development and implementation of responsive web design and make your life, friends, a little easier.

The classic approach to creating a website looks something like this: a development block, a web design block, a layout block, etc. However, in the last few years, everything has begun to change dramatically: the term “web design” is gradually fading away, while while “adaptive design” insidiously strengthens its position, gradually making shifts in the consciousness of specialists.

By by and large, web design should not be taken so clearly, but rapid development adaptive design, which is considered almost an industrial standard, has entailed a whole carousel of various tools and platforms.

Concept of adaptability

“What is responsive design and what does it adapt to?” - an ignorant person may ask. I will answer you: to the type of device used. Responsive design ensures a good web page experience on various gadgets connected to the Internet.

The same website should look great on laptops, smartphones, tablets, etc., regardless of the screen format and resolution used. At the same time, it should be equally convenient for users to view web pages for all formats, without the need, for example, to expand individual blocks so as not to miss the desired button.

Due to the fact that each adaptive project is individual and iterative, it is quite difficult to analyze all its processes in order to provide solutions for all situations and improve work efficiency. However, there are general successful strategies and techniques for implementing, improving and creating responsive website design that can be applied in almost any situation.

Mobile First Strategy

This strategy development was proposed back in 2009 by Luke Wroblewski, author of books and articles on web design, director social network Bagcheck, which was acquired just 9 months after its creation Twitter company Inc.

Luke Wroblewski's approach to development is called "Mobile First" for three reasons:

the mobile environment allows you to focus and get rid of the clutter that occurs due to “cluttering” a large amount of space on the screen;

mobile market tends to develop at a breakneck pace;

The mobile environment is associated with many possibilities (camera, multi-touch gestures, GPS, accelerometer, geolocation).

Since then, web design has steadily shifted towards this approach. Many web designers and web developers first think about how to make a responsive design mobile version site, and then engage in desktop development.

The "Mobile First" strategy starts by creating the structure and content of a mobile version that works in low-speed Internet environments, and moving towards major breakpoints with higher speeds. fast connection, while improving and optimizing the simplified versions.

Modern tendencies and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

This ensures innovative and effective work all types of devices. Website developers focus on the needs of users, create optimized and high-speed pages, pay attention to important content. By the way, even Google uses the “Mobile First” approach.

Content strategy “Content out”

The goal of creating responsive design is to provide the best usability in any context. This is an excellent opportunity to analyze content and make it easily accessible and readable on all types of devices.

Many who do not use a Mobile First strategy prefer a Content First strategy. This is, of course, the right thing to do, however, you should not take this call literally and think that you should not start developing a design until all the content is ready.

Content should be continuously created and discussed both at the stage of creating a responsive website design and after its completion! As renowned designer Cennydd Bowles said, “design and content should go hand in hand.” They must complement each other.

The “Content structure first” strategy is a completely different matter. First of all, you need to be clear about the site's mission, what it is trying to tell the world. And only then carefully consider the structure of its content, methods of creation, types and purpose of each element, while the user should be put at the forefront.

You must have a strategy in place that will ensure that you provide every user with necessary content at every stage of his journey on your resource. The site structure should be based on research into your behavior and needs. target audience.

If you structure your content well in the initial stages of website development, you can easily transfer it to other platforms and devices in the future. Of course, it wouldn’t hurt to have an example of responsive design as a reference for your reference.

Take the time to sketch and prototype

Deciding on what resolutions to use for adaptive design should begin with creating an organized layout - sketching, which will be easy to scale in the future.

The variety of devices with their capabilities, resolutions and screen sizes means a large number of layouts. Creating a sketch will lay the foundation for a future prototype of the project. With its help, you can bring up various ideas for discussion, make rough sketches that will form the basis of the site’s framework.

Once the sketch is ready, you can move on to creating a working draft version of the website or HTML template. This process is called prototyping, and it involves minimal visual design, in order to improve interaction and functionality.

This strategy will help you rethink your entire approach to creating responsive design. Instead of developing “mobile sites” and “web sites,” you will now focus on developing flexible systems with a set of rules that determine how content is delivered and delivered based on context.

I hope this article was useful to both experienced and novice web designers.

And finally, the traditional parting words: make the site useful, convenient and familiar, regardless of the device on which it is viewed. See you again, friends!

P.S.: have you already subscribed to our blog updates?

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building