Responsive Web Design Fundamentals and 25 examples
Every day more and more humanity to surf on the plates, or communicators. Therefore, the development of the site is to take care of versions for a variety of permits. This technique is called responsive web design or "helpful" web design.
Responsive consists of the following techniques:
A. Rubber-based model of proportions (fluid grid)
The basic idea - the formula for calculating the proportions of a percentage «target / context = result». For example, we have a psd layout with a width of 1000px. It has two parts: one on the left width 270px, the other right-730px. We have laid out their way:
. Leftcolumn {width: 27%; / * 270px / 1000px = 0,27 * / float: left;}
rightcolumn {width: 73%; / * 730px / 1000px = 0,73 * / float: right;}
At habrahabr.ru was translation of the original article Ethan Marcotte "Fluid Grids" .
Two. Rubber Images (fluid images)
Adjust its size for a block parent. The main idea in non-obvious use of the properties of {max-width: 100%}. An image with img {max-width: 100%} will never come out from their parent unit.
If a parent block is smaller than the size of img, the image is proportionally reduced. This principle applies both to img, and to embed, object, video.
See the original article "Fluid Images" .
Three. Media queries
We need to show a layout that is optimized for resolution, from which at the moment the site looks. This is part of the standard CSS, which allows you to apply styles based on the information on the resolution of the device.
For example, as follows:
/ * Start css * /
Here, the basic styles for stupid browsers. For example, a phone is not high-end level. Pocket Internet Explorer for Windows Mobile 6.5 here :).
@ Media only screen and (min-width: 480px) {
This style is more reasonable but still mobile. Android, iPhone and so on.
}
@ Media only screen and (min-width: 768px) {
Tablet mode portrait.
}
@ Media only screen and (min-width: 992px) {
Tablet mode landscape, netbooks, laptops, desktop.
}
@ Media only screen and (min-width: 1382px) {
Desktop with high resolution TVs.
}
/ * End css * /
media queries to understand all reasonable browsers . For ie there is Respond.js
4. Mobile first
This is a technique in which the site is first typeset for devices with less capacity, and then using the media queries are added features and buns.
So stupid browsers without media queries will be the most simple content (such as mobile phones). A more advanced will understand and will draw a page, taking into account the media queries.
More about Mobile first
Less than 25 examples of responsive web design in practice:
Simon Collison
Stephen Caver
Sparkbox
Food Sense
Think Vitamin
Internet Images
Seminal Responsive Web Design Example
Forefathers Group
Spigot Design
Illy Issimo
Arrrrcamp Conference
Earth Hour
Clean Air Commute Challenge
Teixido
Deren Keskin
Glitch
Adaptive Web Design
Splendid
FlexSlider
El Sendero del Cacao
Ben Handzo Photography
Halifax Game Jam
Tigres 3200
Pixelab
Alsacreations
And if you want to see how the site work on the iPad , check out the site iPad Peek
Sources: http://designmodo.com/responsive-design-examples/
Every day more and more humanity to surf on the plates, or communicators. Therefore, the development of the site is to take care of versions for a variety of permits. This technique is called responsive web design or "helpful" web design.
Responsive consists of the following techniques:
A. Rubber-based model of proportions (fluid grid)
The basic idea - the formula for calculating the proportions of a percentage «target / context = result». For example, we have a psd layout with a width of 1000px. It has two parts: one on the left width 270px, the other right-730px. We have laid out their way:
. Leftcolumn {width: 27%; / * 270px / 1000px = 0,27 * / float: left;}
rightcolumn {width: 73%; / * 730px / 1000px = 0,73 * / float: right;}
At habrahabr.ru was translation of the original article Ethan Marcotte "Fluid Grids" .
Two. Rubber Images (fluid images)
Adjust its size for a block parent. The main idea in non-obvious use of the properties of {max-width: 100%}. An image with img {max-width: 100%} will never come out from their parent unit.
If a parent block is smaller than the size of img, the image is proportionally reduced. This principle applies both to img, and to embed, object, video.
See the original article "Fluid Images" .
Three. Media queries
We need to show a layout that is optimized for resolution, from which at the moment the site looks. This is part of the standard CSS, which allows you to apply styles based on the information on the resolution of the device.
For example, as follows:
/ * Start css * /
Here, the basic styles for stupid browsers. For example, a phone is not high-end level. Pocket Internet Explorer for Windows Mobile 6.5 here :).
@ Media only screen and (min-width: 480px) {
This style is more reasonable but still mobile. Android, iPhone and so on.
}
@ Media only screen and (min-width: 768px) {
Tablet mode portrait.
}
@ Media only screen and (min-width: 992px) {
Tablet mode landscape, netbooks, laptops, desktop.
}
@ Media only screen and (min-width: 1382px) {
Desktop with high resolution TVs.
}
/ * End css * /
media queries to understand all reasonable browsers . For ie there is Respond.js
4. Mobile first
This is a technique in which the site is first typeset for devices with less capacity, and then using the media queries are added features and buns.
So stupid browsers without media queries will be the most simple content (such as mobile phones). A more advanced will understand and will draw a page, taking into account the media queries.
More about Mobile first
Less than 25 examples of responsive web design in practice:
Simon Collison
Perhaps you must think about this from far much more than 1 angle. Or possibly you shouldnt generalise so considerably. Its much better in the event you consider what other people could need to say instead of just going for a gut reaction to the topic. Take into consideration adjusting your own believed procedure and giving others who may read this the benefit with the doubt.
ReplyDeleteLead For Sale
Really interesting article.A great collection of responsive web designs.Responsive design continues to get a lot of attention.Thank you so much for this fine piece of quality content.Keep sharing.
ReplyDeleteI found lots of interesting information here. The post was professionally written and I feel like the author has extensive knowledge in this subject.
ReplyDeleteI just got to this amazing site not long ago. I was actually captured with the piece of resources you have got here. Big thumbs up for making such wonderful blog page! front end developers
ReplyDelete