General “mobilization”: moving to adaptive design. Responsive design requirements. Responsive WordPress blog template
Today, most people access the Internet through mobile gadgets- tablets, phones, in this regard, site optimization also includes new level. If a user comes in and sees that the site is not optimized for mobile devices: the image cannot be viewed, the buttons have moved out, the fonts are small and unreadable, the design is skewed - 99 out of 100%, that he will leave and start looking for another more convenient one. And it will check the box that the resource is irrelevant, that is, it does not correspond to the search query. Therefore, the page design must be adapted to various mobile devices. What's happened mobile version site, how to make it, and which method is best to use? Read more in this article.
So there are four key ways adapt the site for a mobile version.
Method one - responsive designAdaptive templates involve changing the website image depending on the screen size. As a rule, they are set to standard 1600, 1500, 1280, 1100, 1024 and 980 pixels. Queries are used for implementation. It doesn't change itself.
The advantages of this method include:
- convenient development, since the structure itself adapts to the screen parameters, and any update does not require developing a design from scratch, it is enough to correct the CSS and HTML;
- one URL address - the user does not need to remember several names, there is no need for a redirect (redirection from one address to another), which can complicate the work of a webmaster, and it is easier for a search engine to sort and rank a resource with a single address.
Of course, adaptive templates also have their disadvantages, which, by the way, outweigh their advantages. Nevertheless, many developers adhere to this particular concept, for example, Google Corporation, whose mobile version of the site has a responsive design. So, the disadvantages:
- Responsive design does not support the same tasks on a mobile device as on a desktop. If this is, for example, a mobile version of a bank’s website, where the user will most likely need information about exchange rates or nearby ATMs, then this design is quite sufficient. But if it is a complex structured resource with many sections and subsections, then it is unlikely to appeal to visitors.
- Slow loading turns your favorite site into a hated one. This is especially true for resources where there is an abundance of animation, videos, pop-ups and others. active elements. Due to the large weight, the page will simply “slow down”, the user will get angry and leave, and search positions site - to fall.
- The inability to disable the mobile version is another significant drawback. If an element is hidden by such a layout, you cannot do anything to open it, unlike sites where you can disable it and switch to a regular domain.
Nevertheless, such a mobile version of the site quickly, without special skills and costs, allows you to adapt the resource to any gadget. But, in view of the listed shortcomings, it is suitable for small, simple resources with a minimum of information and multimedia, without difficult navigation and animation. For a complex site, 2 other methods are suitable.
This method is very common and often successfully makes a site more user-friendly on a mobile device. Its essence is to create a separate version of the page, designed for the application and located on a separate URL or subdomain, for example, m.vk.com. At the same time, the main functionality is preserved, the site design just looks different. The advantages of this method are obvious:
- convenient user interface;
- it is easy to change and make edits, since the version exists separately from the main resource;
- due to its low weight, a separate version of the site works much faster than an adaptive template;
- Most often it is possible to switch to the main version of the page from the mobile one.
But there are some drawbacks here too:
- Several addresses - desktop and mobile versions of the site. How to make the user remember two options? Web masters often transfer from the desktop version to the mobile version, but if this page does not exist in the mobile version, the user will receive an error. Here difficulties arise with search engines, which find it difficult to rank 2 identical resources, and this directly affects promotion.
- The mobile version of the site from a computer, if a user accesses it by mistake, will look ridiculous, which can also affect traffic.
- This version is often very stripped down, desktop, so the user will receive very limited functionality. But at the same time, if something is missing, the visitor can go to full version pages.
In general, a separate mobile site justifies itself and is the most common way to adapt a resource for mobile devices. He is popular among large online stores, for example, Amazon.
Google search engine actively supports this direction of mobile design. This is the most difficult, costly, but effective method adapt the site for a phone or tablet. It's called RESS. This is targeting a resource into a mobile application that can be downloaded for each device separately. For Android - from GooglePlay, and for Apple - from iTunes.
Such applications are fast, free, convenient, and have the ability to host various types of information, while phone memory and Internet traffic are not consumed as much as when visiting a site through a browser. They are easy to access, since the link will always be on the screen at hand, and there is no need to enter a complex name into the address bar of the browser.
Of course, there are also disadvantages here, such as complexity in development, high labor costs large number programmers, the need to make several layout options. Sometimes the mobile device is not recognized by the application. Regular technical support, correction of deficiencies. Nevertheless, this option is considered the best of the three proposed due to its productive, uninterrupted operation.
All of the above methods require, although not always long and complex, but still paid work for the webmaster. If you do not see an urgent need for such development, a simple and free mobile version of the site will suit you. What's the easiest way to do it?
Download special templates (plugins) for responsive design. For example, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile and others. They will help you display the site more correctly on your phone, and you will receive several tips on what should be corrected to better adapt the page to the mobile version.
Certainly, this method hardly suitable for serious resources. Rather, it's free opportunity Intended for small and simple sites, blogs, news feeds. We should also not forget that the Google search engine, like Yandex, today places serious demands on mobile versions, so there is a huge chance of lowering your rankings using this method.
With this method, most likely, advertising and pop-up banners will be cut off, but the page will load quickly and without lags.
It doesn’t matter whether the mobile version of the site was created for free or with the help of a staff of webmasters, whether it was made using the RESS system or using an adaptive template. The most important thing is that for it to work effectively, you need to adhere to several extremely important principles. So, what should the mobile version of the site be like? How to make it productive, efficient and productive?
Minimalism is what a developer of a mobile version of a website should strive for. Imagine how difficult it is to perceive information that is full of colors, buttons, banners, and which you have to endlessly scroll through in search of the required material. Mobile design should be simple and clean. Choose 2-3 colors to divide the space (for example, branded colors). It's better if one of them is white. Divide the small screen space into clear and readable areas. Virtual keys must be visible so that the user clearly knows where to press and sees - here is the product, here is the form for filling out the data, here is the information on delivery and payment.
All additional options, which would be useful in the desktop version and would make life easier for the user, will only bring complications here. Leave only the most important elements. Animation, advertising banners, multimedia will most likely only slow down the operation of the site or application and distract from the main thing.
AlignmentThe issue of alignment is no less pressing, since if done incorrectly, the user will only receive the endings of important words. It is generally accepted to align left and vertically. Imagine scrolling through the news feed on your phone. You do this from top to bottom, but not to the left or right.
An associationWhen there is no possibility of a long chain of transitions, try combining several steps into one. For example, a site requires entering data in several stages - a name, then an address, where in each individual cell there is a separate house, street, apartment, etc. In order not to force the user to try to get into many small cells, ask him to fill in only 2 - name and address.
And disconnectionSometimes, on the contrary, it is necessary to disconnect too a large number of information. For example, in the drop-down menu you have a list of more than 80 cities where delivery is carried out. Group them by region so that the user does not have to scroll through this huge list. When he moves the cursor over a regional center or region, another list of cities will appear.
ListsBy the way, about the lists. There are two of them - fixed in alphabetical or other order and with substitution. Their choice depends on what will be listed.
Fixed is convenient if the user knows exactly what he is looking for. For example, city, number or date. The second option is suitable for long, complex names or for cases where there are many variations of the same name, and each one brings the user one step closer to the goal. The auto-substitution option is more often used when a visitor needs help. For example, a knitting website offers to buy knitting needles. The user enters the search query “Metal knitting needles”, and in the hint he sees “Knitting needles 5 mm”, “Knitting needles 4.5 mm”, etc.
AutofillThis point especially applies to sites where they sell something online, and you have to fill out standard forms for payment, delivery, etc. If a person makes a purchase from his phone, then most likely he does not have time to get to the computer, which means the process purchases need to be made as quickly and convenient as possible.
To do this, the forms may contain already filled in data; you can resort to the most popular answers. For example, insert today's date, cash payment method, city, if you work in the same region. They can be changed, but if you hit the target, the user's time will be saved.
Everything is read, everything is viewedWhen creating the design of the mobile version of the site, remember that everyone’s phone is different, and so is their vision. Your site will probably be viewed on a small screen, so fonts should be simple and readable, buttons should be large enough to click without being taken to another page, and images should open separately and large, especially if we're talking about about the online store.
Some statisticsWhen talking about adapting a website to mobile devices, one cannot help but resort to statistics to understand how important this process is for online promotion.
The numbers are as follows. Today, 87% of the population uses gadgets, apparently except for the youngest children and some elderly people. Economists predict growth mobile commerce 100 times over the next 5 years. However, only 21% of sites are adapted to work with mobile devices. This means that Internet traffic and the market e-commerce Only a small 5th part is occupied.
Think about these numbers. Does it make sense to adapt your resource? Of course yes. Moreover, while there are so many free space in this market, you can take your own segment in it.
Using the mobile version is advisable for any platform that seeks to get a high rating. After all, this is a direct impact on the user, creating comfortable conditions for him to stay on your site.
The following cannot exist without a mobile version:
- news portals, since these are what most people view from their phones on the way to work or school;
- social networks - for the same reason, plus there is the factor of online communication, which means that a convenient, understandable chat must be created for this;
- reference books, sites with navigation, etc., where people turn when looking for something;
- Online stores are an opportunity to attract customers who do not waste time shopping, but buy everything via the mobile Internet.
Today mobile technologies are in a stage of active growth and development, therefore, striving for market leadership, any company must ensure that its Internet resource meets the requirements. Due to growing user requests, sites have to be constantly modernized and adapted to different devices. It is clear that if a person is inconvenient to be on a particular resource, he cannot get information about a product or price there, place an order, find out about delivery, then he will find the site where all this will become possible. Therefore, in order to win the competition, it is important to have a flexible, convenient, functional and interesting resource.
The mobile version of the site Android or iOS will help you do this. To do this, you need to choose one of the above redesign methods - an adaptive template, creating a new site on a subdomain and moving to it by redirecting, using free templates or creation mobile application, with the help of which the user can more conveniently enter and stay on the page.
From April 21, 2015, the Google search engine, and from February 2, 2016, Yandex, made changes to their rules for issuing pages on search query Internet user.
Now for those who use the Internet from mobile devices, top positions the search engine will primarily show adaptive sites, that is, those sites that will be most convenient to view on mobile devices.
Due to the new rules search engines, for better relevance of the resource on the Internet, the site must now support adaptive design. You'll have to redo the site a little and that's it. :)
To understand how a responsive website works, let’s create the simplest template from which we will make an adaptive one:
Adaptive design
body (
background: #CEE9E8;
}
p, br, h1, h2, h3, h4, h5, h6 (
padding-left: 20px;
padding-right: 20px;
}
#wrapper(
background: #ccc;
width: 100%;
max-width: 1000px;
margin: 0 auto;
margin-top:5px;
height: auto !important;
}
#header(
border: 0px solid #000;
background: #00cc00;
width:100%;
max-width:1000px;
height:150px;
margin:0 auto;
margin-top:0px;
}
#header h1 (
font-size: 3.5em;
text-shadow: none;
text-align: center;
padding-top: 0.5em;
}
#content #colRight(
background: #00ccff;
float:left;
margin-left:0%;
width:25%;
}
#content #colLeft(
float:left;
margin-right:0px;
width:75%;
}
#footer (
background: #F0DA0E;
width: 100%;
max-width: 1000px;
height: 90px;
margin: 0 auto;
padding-top: 0.7em;
clear: both;
}
/* Start Wrapper */
Logo
/* Start Content */
Adoptive design
Sidebar
/* End Content */
Basement
/* End Wrapper */
#wrapper is the framework of the site, what unites the entire template; its closing tag is located before the closing tag.
#header is the site header; it can be placed either before or after the wrapper.
#header h1 - logo.
#content - serves as block element, combines colLeft and colRight.
#colRight - sidebar.
#colLeft - space for content.
#footer - site footer.
All these elements, header, colLeft, colRight, footer must be independent of each other. They can be moved and swapped like in the game "Tag". And all this will depend on what mobile device the site will be viewed from (the size of its display). I don't mean exactly this template, it’s the simplest and you can’t move much here. Other adaptive templates that have additional columns one or two, an additional horizontal menu, etc., but more on that later.
This is what happened, as seen on a personal computer monitor:
As the screen size decreases, the site begins to shrink and the text becomes small and difficult to read.
To ensure that the text remains the same size on small screens, you need to add a viewport meta tag between the tags:
Adaptive design
the text will become clearly readable, but then a horizontal scroll bar will appear, since two blocks do not fit horizontally on the display.
And this is neither beautiful nor user-friendly!
Adaptive website design media screenTo display a website normally on mobile devices with different extensions, use media screen media queries. A little higher, I talked about playing "Tag". So, with the help of media screen, an adaptive design is created for any screen of a mobile device. Elements of the site can be swapped from left to right, top to bottom, and somewhere enlarged or reduced. You can create your own adaptive website design for each mobile device.
In our example, the sitebar is not positioned correctly; using the media screen, we will lower it under the content. Let's do this not only for this extension, but also for mobile devices with an extension from 240px to 375px inclusive. That is, on a phone with a screen resolution greater than 375px, the sitebar will no longer go down.
@media screen and (min-width:240px) and (max-width:375px)#footer (
background: #F0DA0E;
width: 100%;
max-width: 1000px;
height: 90px;
margin: 0 auto;
clear: both;
}
#header (
font-size: 0.7em;
}
#wrapper #colLeft (
float:none;
width:100%;
margin-right:0px;
}
#wrapper #colRight (
margin-left:0px;
margin-top:25px;
float:none;
width:100%;
}
This media query specifies rules for mobile devices with a screen no larger than 375px
#header - in the site header I reduced the size of the logo, since with a small extension it may not fit.
#wrapper #colLeft - canceled the left alignment float:none, made the content width Full Screen width:100%, and the sidebar drops below the content.
#wrapper #colRight - made the sidebar indent from the content margin-top:25px, width:100% of the width of the sitebar in full screen.
@media screen and (min-width:376px) and (max-width:768px)
@media screen and (min-width:376px) and (max-width:768px) (
#wrapper #colLeft (
float:none;
width:100%;
margin-right:0px;
}
#wrapper #colRight (
margin-left:0px;
margin-top:25px;
float:none;
width:100%;
}
}
@media screen and (min-width:240px) and (max-width:375px) (
#header (
font-size: 0.7em;
}
#wrapper #colLeft (
float:none;
width:100%;
margin-right:0px;
}
#wrapper #colRight (
margin-left:0px;
margin-top:25px;
float:none;
width:100%;
}
}
It seems more convenient to me to create rules separately for each popular or not so popular extension, with precise adjustment of any element and font size to the device:
@media screen and (max-width: 768px)
@media screen and (max-width: 640px)
@media screen and (max-width: 375px)
...
But that doesn't mean that an extended media query like and (min-width:376px) and (max-width:768px), should be ignored. The extended one will be quite sufficient in CSS, for example, where there is nothing to hide, or to reduce something separately when changing the screen size.
Where to test a responsive websiteSee what it looks like on different mobile devices with different screens, very convenient for quirktools.com or directly from the browser. Open your website by clicking right button> View code, look for screen resizing tool. In Google Chrome and Yandex browser it is located at the top center.
Making the simplest responsive website turned out to be not so difficult :) Of course, this is not everything here; you can write media queries alone and write them under different extensions. The goal was to describe the very mechanism of building an adaptive website.
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 responsive 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 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!
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 reduce the site page so that it fits small screen mobile phone
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 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 permissions screen, with 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 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.
Adaptive layout changes the 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 a 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 it's not perfect way, but it fixes 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 link large and small resolutions: first small image with prefix .r(to show that the image should be responsive), then link to the large image using data-fullsrc:
For any screen wider than 480 px, a higher resolution image will be loaded ( largeRes.jpg), and on small screens it will load ( smallRes.jpg).
On iPhone and iPod Touch has a special feature: a design created for large screens, will simply shrink in a browser with a small resolution without scrolling or additional mobile layout. However, images and text will not be visible:
To solve this problem, use meta tag:
If initial-scale is equal to one, the width of the images becomes equal to the width of the screen.
Customizable page layout 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 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 style sheet for different meanings media queries can be done like this:
JavaScript
If your browser does not support CSS3 media queries, then style replacement can be done using jQuery:
$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // If the width is less than 600 px , mobile stylesheet is used if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // If the width is greater than 600 px, the desktop stylesheet is used $("link").attr((href: "style.css")); ) ) ));
Optional display contentThe ability to shrink and rearrange elements to fit on small screens is great. But this 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 an alternative styling file to increase the white space or replace the 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.
Everyone's talking about responsive web design. But does this mean that everyone understands what it is for?
Responsive design is not only about developing sites for mobile devices, but here we are talking about adapting layouts for different sizes screen (viewports).
In this tutorial, we will look at the basic principles behind responsive web design to better understand this technique. Next, we'll create a responsive website that will scale perfectly on large and small screens. Responsive web design has become very popular with more and more people using mobile devices such as iPhone, iPad, BlackBerry, and other internet-enabled smartphones and tablets.
It is important to understand that the site should not be built for a specific desktop or mobile device. What is important here is the ability of the layout to adapt to different sizes.
User frustration
Some people think that it is normal for the user to reduce functionality and eliminate content that they consider unimportant. But how can you be sure that the information you cut or moved to a secondary page is not the content that is most important to me?!
First, you need to understand that responsive design isn't just about mobile design. Secondly, developing a good responsive website requires a lot 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 for mobile users. There are two problems with this:
- First, it effectively penalizes mobile users browsing the site.
- Secondly, hidden styles in CSS do not mean that the content is not loading. This can have a massive impact on efficiency, especially for those with poor connectivity.
Therefore, the best approach to website development is to consider mobile or small devices, Firstly. This way, you can focus on the most important information your website needs to deliver. And then, if necessary, you can use conditional methods uploads where your layout grids, large images and media queries are layered on top of an existing small-screen design.
Step by step guide
For this tutorial, we created a website that scales perfectly between large and small screens. You save all content, on all screen sizes. And using media queries, navigation will be switched from horizontal to vertical display, for smaller devices.
The key element of flexibility in responsive design is fluid layout width. All you need to do is create wrapper, content and column widths that will adapt to different device widths. This is nothing new, but it is more important now than ever. To keep things simple, we'll create a fluid page consisting of navigation, a main image, and two columns that takes into account placement on devices of different 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 issues when switching from fixed width to fluid is images. In CSS, there is a simple solution to this problem. Just set the image width to 100%. Let's also add auto for the height of the images to avoid squashed images in Opera and Safari on small screens:
/* Layout */ #wrapper ( width: 96%; max-width: 920px; margin: auto; padding: 2%; ) #main ( width: 60%; margin-right: 5%; float: left; ) aside ( width: 35%; float: right; ) /* Logo H1 */ header h1 ( height: 98px; width: 216px; float: left; display: block; background: url(images/sllogo.png) 0 0 no- repeat; text-indent: -9999px; ) /* Navigation */ header nav ( float: right; margin-top: 40px; ) header nav li ( display: inline; margin-left: 15px; ) header nav ul li a ( text-decoration:none; color:#333;) #skipTo ( display: none; ) #skipTo li ( background: #ccc; ) /* Main image*/ #banner ( float: left; margin-bottom: 15px; width : 100%; ) #banner img ( width: 100%; height: auto; )
Your image will be displayed on it parent element full width, and will shrink along with it. Just make sure that the images max-width does not exceed the maximum width of its container.
Using large images may impact loading times. Therefore for small screens, there is a responsive method for images that detects the size of the user's screen, and produces a smaller/larger image depending on what is needed. This method is still difficult to call ideal, but it is still worth considering.
Switch main navigation
The main reason why you need to change your navigation is because of the minimization that occurs, which can make the buttons unreadable and difficult to click. Using this method will make the user's life easier. You'll also notice in the code that we've made changes to the #main and aside sections to combine them into one column.
/* Media queries */ @media screen and (max-width: 480px) ( #skipTo ( display: block; ) header nav, #main, aside ( float: left; clear: left; margin: 0 0 10px; width : 100%; ) header nav li ( margin: 0; background: #ccc; display: block; margin-bottom: 3px; ) header nav a ( display: block; padding: 10px; text-align: center; )
You will notice that on some mobile devices, your website will automatically shrink to fit. of this screen. This point becomes a problem when we need to increase the screen size in order to navigate through inconvenient content.
To allow media queries to come into full effect, a typical mobile-optimized, responsive site should contain something like the following:
The width property is responsible for the size of the viewport. It can be set to a specific number of pixels, width=960, or to the device-width value, which is the width of the screen in pixels at 100% scale. The initial-scale property controls the scale when the page is first loaded. maximum-scale, minimum-scale, and user-scalable properties control how users can scale the page (larger/smaller).
