How to make one site for all devices (Responsive Web Design)
Yesterday a good article was published “ Web Design. Each device has its own idea . ” Despite the good thoughts, unfortunately, the conclusion in it is rather stupid. Namely:
“You need to determine what devices your visitors can use, work out and create a representation of your site for these devices, determine the device by checking the headers of the browsers , and send the most suitable presentation .”
Firstly, no one can predict which devices your visitors will use. You need to focus not on devices, but on permissions.
This is a screenshot from the presentation “ Beyond the mobile web by yiibu ” (highly recommend).
Secondly, if you are not facebook or yandex, most likely you will not pull the creation and support of different versions of the site for each device. Yes, and it does not make much sense. Because the situation is becoming similar to the realities of fifteen years ago. Then they made the site “for the browser”, and now the author suggests making the site “for the device”.
The questions raised by the author of the above article have been considered in the civilized world for quite some time, and, moreover, they have already been resolved.
Now you can make 1 site with a single layout that will work on devices, starting with phones, ending with huge TVs. For example, yiibu.com or alistapart.com (reduce the browser window):
Responsive consists of the following techniques:
The main idea is a formula for calculating the proportions in percent “target / context = result”. For example, we have a psd layout with a width of 1000px. It has two blocks: one on the left with a width of 270px, the other on the right with 730px. We make them like this:
If there is another block inside the left column and, say, on the layout it is 170px wide, then the target and context will change for it, and the code will look like this:
On habr there was a translation of the original article by Ethan Marcotte "Fluid Grids" .
Adjust their sizes to the parent unit. The main idea in the non-obvious application of the {max-width: 100%} property. An image with img {max-width: 100%} will never crawl out of its parent block.
If the parent block is smaller than the img size, then the image will be proportionally reduced. This principle applies to both img and embed, object, video.
Detailed original article "Fluid Images" .
We need to display a layout optimized for the resolution from which this site currently looks. This is part of the CSS standard, which allows you to apply styles based on device resolution information.
For example, like this:
All media browsers understand media queries . For ie, there is Respond.js
This is a technique in which the site is first compiled for devices with less features, and then features and buns are added using media queries.
So stupid browsers without media queries will get the simplest content (for example, on mobile phones). And more advanced ones will understand and draw the page, taking into account media queries.
Learn more about Mobile first
1. Russian-language blog about Responsive Web Design
2. The only good book on this topic is “ Responsive Web Design ”. Written by Ethan Marcotte, which in general laid the foundation for adaptive layouts. After reading it, much will become clear.
“You need to determine what devices your visitors can use, work out and create a representation of your site for these devices, determine the device by checking the headers of the browsers , and send the most suitable presentation .”
Why is this stupid
Firstly, no one can predict which devices your visitors will use. You need to focus not on devices, but on permissions.
This is a screenshot from the presentation “ Beyond the mobile web by yiibu ” (highly recommend).
Secondly, if you are not facebook or yandex, most likely you will not pull the creation and support of different versions of the site for each device. Yes, and it does not make much sense. Because the situation is becoming similar to the realities of fifteen years ago. Then they made the site “for the browser”, and now the author suggests making the site “for the device”.
How to make one site for all devices
The questions raised by the author of the above article have been considered in the civilized world for quite some time, and, moreover, they have already been resolved.
Now you can make 1 site with a single layout that will work on devices, starting with phones, ending with huge TVs. For example, yiibu.com or alistapart.com (reduce the browser window):
This is all called Responsive Web Design.
Responsive consists of the following techniques:
Proportional rubber layout (fluid grid)
The main idea is a formula for calculating the proportions in percent “target / context = result”. For example, we have a psd layout with a width of 1000px. It has two blocks: one on the left with a width of 270px, the other on the right with 730px. We make them like this:
.leftcolumn {
width: 27%; / * 270px / 1000px = 0.27 * /
float: left;
}
.rightcolumn {
width: 73%; / * 730px / 1000px = 0.73 * /
float: right;
}
If there is another block inside the left column and, say, on the layout it is 170px wide, then the target and context will change for it, and the code will look like this:
.leftcolumn .some-div {
width: 62.962963%; / * 170px / 270px = 0.62962963 * /
float: left;
}
On habr there was a translation of the original article by Ethan Marcotte "Fluid Grids" .
Rubber images (fluid images)
Adjust their sizes to the parent unit. The main idea in the non-obvious application of the {max-width: 100%} property. An image with img {max-width: 100%} will never crawl out of its parent block.
If the parent block is smaller than the img size, then the image will be proportionally reduced. This principle applies to both img and embed, object, video.
Detailed original article "Fluid Images" .
Media queries
We need to display a layout optimized for the resolution from which this site currently looks. This is part of the CSS standard, which allows you to apply styles based on device resolution information.
For example, like this:
/ * start css * /
Here are the basic styles for silly browsers. For example, for phones not a high-end level. Pocket Internet Explorer for Windows Mobile 6.5 is here :).
@media only screen and (min-width: 480px) {
The styles here are more reasonable, but still mobile devices. Android, iPhone and so on.
}
@media only screen and (min-width: 768px) {
Tablets in portrait mode.
}
@media only screen and (min-width: 992px) {
Tablets in landscape mode, netbooks, laptops, desktop.
}
@media only screen and (min-width: 1382px) {High-resolution desktop
, TVs.
}
/ * end of css * /
All media browsers understand media queries . For ie, there is Respond.js
Mobile first
This is a technique in which the site is first compiled for devices with less features, and then features and buns are added using media queries.
So stupid browsers without media queries will get the simplest content (for example, on mobile phones). And more advanced ones will understand and draw the page, taking into account media queries.
Learn more about Mobile first
References
1. Russian-language blog about Responsive Web Design
2. The only good book on this topic is “ Responsive Web Design ”. Written by Ethan Marcotte, which in general laid the foundation for adaptive layouts. After reading it, much will become clear.