How size changes in responsive design. Principles of creating mobile versions
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 as more and more more people use mobile devices, such as iPhone, iPad, BlackBerry, as well as other smartphones and tablets with Internet access.
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 is not only about taking care of 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 computer, and for a mobile device. 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. 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, which your website should produce. And then, if necessary, you can use conditional loading methods, where your layout grids, large images and media queries are layered on top of the 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 a horizontal to a vertical display for smaller devices.
The key element of flexibility in responsive design, is the fluid width of the layout. 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
- 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 questions when switching from fixed width on fluid, these are 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 the 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 installed on certain number pixels, width=960, or by 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).
Making a responsive website template is easy enough, but keeping the elements balanced at all points throughout the template is a real art. This tutorial introduces 5 techniques to use in CSS for a responsive template. There are very simple ones CSS properties, such as min-width, max-width, overflow and relative values, but they all play an important role in developing responsive designs.
1. Adaptive videoThis CSS trick allows the embedded video to stretch to the specified boundaries.
Video ( position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; ) .video iframe, .video object, .video embed ( position: absolute; top: 0; left: 0; width: 100% ; height: 100%; )
2. Minimum and maximum widthThe max-width property allows you to set the maximum width of an element. It should be used to prevent an element from expanding beyond a certain frame.
Container with max-width propertyThe example below defines the container size as 800px, but sets the size limit to 90%.
Container (width: 800px; max-width: 90%; )
Adaptive ImageYou can make an image automatically resize to its maximum size using the max-width:100% and height:auto properties.
Img (max-width: 100%; height: auto; )
The above code is for adaptive image works in IE7 and IE9, but does not work in IE8. To correct the situation, you need to add the width:auto property. You can use conditional CSS rule specifically for IE8 or below given trick for IE:
@media \0screen ( img ( width: auto; /* for ie 8 */ ) )
min-width propertyThe min-width property is the opposite of the max-width property. It sets the minimum possible width of the element. Below is an example of using the min-width property to prevent the input field from becoming too small when zoomed out.
3. Relative valuesIN adaptive template Using relative values can greatly simplify your CSS code and improve appearance design.
Relative fieldsBelow is an example of comments that use the relative width of the left margin to create indentation in a tree structure. Instead of absolute value px uses the percentage value for the next level in the list. On the left side of the figure you can see that on mobile devices, the available space for list items may not be enough for normal display if absolute values are used.
Using relative values for font size (em or %) you can easily achieve appropriate changes in line height and indentation sizes when adapting the template to the device screen size. For example, all related elements are automatically resized when you set new font size sizes for the parent element.
The figure below demonstrates the benefits of using a relative % value for padding. The block on the left has unbalanced space when applying absolute px values. The block on the right has great view with proportional filling of content.
You can prevent text from wrapping around an element using the overflow property. Very simple and useful way. You can cancel text wrapping previous element and maintain the structure of the content.
The max-width property helps place unbreakable text (such as long URL address) in several lines instead of one.
Break-word ( word-wrap: break-word; )
From the author: Responsive website design is a completely new approach to design that is gaining more and more attention, but considering how much it differs 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
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 an excellent service for checking - 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 designAt 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.
Depending on your budget and knowledge of CSS/HTML, there may be several options.
Order adaptive layout from a freelancerThe 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 designIN 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 - one of the most popular collections paid templates For different 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 frameworksFramework - 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 yourselfThis 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 resolutions screen, 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.
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 make a responsive 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 desktopFirst, 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 with the display of a site on regular computers they have no problems, since someone designed 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 convert all large values into template css from pixels (px) to percentages (%). There are several rules here:
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.
I have before adaptation (saved for history old file CSS) 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 disable horizontal scrolling with:
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 for mobile devicesThe 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 it will not be possible to compress everything into a percentage for a small screen. 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. Narrowing the screen, I found my point of “curvature”, it starts at a width of 1000px, which means writing down the main mobile styles from here - everything that will be displayed more in the styles of a regular desktop, and less in separate styles.
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 adapting the site (design) using CSS.
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.