Adaptive design. Adaptive layout: what it is and how to use it
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 resolutionIn principle, you can divide devices into different categories and design for each of them separately, but this 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 flexibleOf 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 imagesWorking 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 imagesThe 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 associate large and small resolutions: first a small image with a 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, the image will load from high resolution (largeRes.jpg), and on small screens it will load ( smallRes.jpg).
iPhone and iPod Touch have a special feature: a design made 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 structureFor 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 a 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 queriesLet'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.
Load a specific stylesheet for different meanings media queries can be done 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 content displayThe 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.
From the author: adaptive design site is a completely new approach to design that is gaining more and more attention, but considering how completely 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 and large, web design should not be perceived so unambiguously, 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 StrategyThis strategy development was proposed back in 2009 by Luke Wroblewski, author of books and articles on web design, head social network Bagcheck, which was acquired by Twitter Inc. just 9 months after its creation.
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 for the mobile version of the site, and then they 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 trends 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 each user with the necessary content at every stage of their 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 you.
Take the time to sketch and prototypeDeciding on what resolutions to make responsive design for should start 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 site 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
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) became greater than the number of desktop computers. Mobile traffic is growing, and there is a need to display the site correctly on screens large number various 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 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. It could be desktop computer, and 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 and has a hand-drawn design that is part of the brand, then perhaps it is worth making a mobile version for it and leaving 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, from large desktop monitors 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 fit the screen size.
- Removing unimportant template elements. They can be either decorative elements or 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.
- Use of relatively 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.
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 a vertical list, and the content is pulled into one column.
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 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, 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.
Terms such as responsive and adaptive design are used in Lately often enough. 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 being viewed using touch-controlled devices, 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.
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 core principles of responsive design:
- arrangement of all elements within the modular grid;
- all layout elements and media files (including images) are “flexible” - their sizes depend on the screen size;
- working with Media queries - a CSS3 module that allows you to specify different styles(or even style sheets) depending on screen resolution, screen size and other characteristics.
- Responsive design is created using responsive markup (not to be confused with responsive design). Adaptive layout means that several styles are created on the site, options for arranging elements on a modular grid, and several options for styles of design elements. 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.
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.
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.
Responsive 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 approachesThere are several important aspects in which responsive and adaptive designs are fundamentally 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 websites than adaptive ones.
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 mobile version 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.
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 decide to create a responsive website design, insert the following code between the tags:
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 when 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!
It turns out that if you do not write the code that I indicated above, mobile browser does not understand that the site is adaptive and is simply trying to make the site page smaller so that it fits into a small mobile phone screen.
Because of my stupidity and incompetence, I lost a lot of time. But now I remember it forever))).
Adaptive CSS layout media queries
To make it responsive using CSS, you need to use media queries.
How is that? Yes, very simple. In the 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- 320 px - Mobile devices (portrait orientation);
- 480 px - Mobile devices (landscape orientation);
- 600 px - Small tablets;
- 768 px - Tablets (portrait orientation);
- 1024 px - Tablets (landscape orientation)/Netbooks;
- 1280 px and more - PC.
It is these permissions that need to be emphasized and given Special attention with adaptive layout. 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 viewing on mobile device these blocks will shift under each other.
You can also adjust the distance of the block from the edge, again, to the required number of 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.