Responsive Web Design
Responsive web design is an approach for designing and developing a website so that the layout changes depending on the device/viewport on which the website is being viewed. The device could be a mobile phone, tablet, laptop, desktop computer, or even a smart TV. This type of design gives the best quality browsing experience.
Three key technical features are at the heart of responsive web design:
- Media queries
- A flexible grid-based layout that uses relative sizing
- Flexible images and media, through dynamic resizing or CSS
Truly responsive web design requires all three features to be implemented
Media Queries
CSS3 media queries go hand in hand with the flexible grid to make responsive web design work.
Luckily CSS3 is supported by many modern browsers.
For the purpose of making web sites responsive it can be said that the most important media feature is the “min-width”, this property allows us to apply specific CSS styles if the browser window (in pixels) drops below a particular width.
The main attributes of media queries are:
- (min-|max-)width and (min-|max-)height: These allow us to query the width and height of the viewport (i.e. the browser window).
- (min-|max-)device-width and (min-|max-)device-height: These allow us to query the width of the entire display.
- orientation: To show different content based on the orientation of your phone .
- (min-|max-)aspect-ratio: This allows us to adapt layouts based on the ratio of the browser window…
- (min-|max-)device-aspect-ratio: …and this allows us to do the same based on the device aspect ratio.
- (min-|max-)monochrome: We can also test whether a device has a monochrome display or not.
Some common Media Query settings for different devices:
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Viewport
To allow mobile browsers to zoom in to your designs to fit them to the device width, add the following meta tag to the head section of your page:
<meta name="viewport" content="width=device-width" />
This itself makes your page instantly more responsive, as the width will automatically adjust to the width of the user’s device.
Other viewport settings include maximum-zoom and initial-scale.
CSS3 Grid Layout
Combining the CSS3 Grid with media queries creates a powerful solution for building fluid, responsive applications
Media queries are used to apply different grid styles depending on the screen width.
Here is a sample code for a 3 column layout:
HTML Part
<div class="section group"> <div class="col span_1_of_3"> This is column 1 </div> <div class="col span_1_of_3"> This is column 2 </div> <div class="col span_1_of_3"> This is column 3 </div> </div>
CSS Part
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 100%;
}
}
How it works
.section
This Splits up the page horizontally. You’ll need a few of these to break up the content, and you can use them in your main wrapper, or within other divs.
.col
This divides the section into columns. Each column has a left margin of 1.6% (around 20 pixels on a normal monitor), except the first one. Using .col:first-child { margin-left: 0; } means you don’t need to use class=”last” anywhere. It works in all browsers since IE6.
.group
It solves floating problems, by forcing the section to self clear its children (aka the clearfix hack). This is good in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+.
.span_1_of_3
It specifies the width of the column. Using percentages means it’s 100% fluid.
@media queries
As soon as the screen size gets less than 480 pixels the columns stack and the margins disappear.
Flexible Images and Media
This feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.
Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.
img, object {
max-width: 100%;
}
Conclusion
One of the major challenges in providing excellent responsive websites is the wide range of devices. It’s no longer possible to test your website on every one of these new devices. The idea is to use flexible and fluid layouts that adapt to almost any screen.