The number of browsers and devices that are used to surf the Web is much larger than just a few years ago. All these devices have different properties. Large or small screens, high or low resolution, different bandwidth at different locations and so on.
To view a website in the best possible way, no matter the device, a design that automatically adjusts depending on the characteristics of the device that loads it, can be used. This type of Web design (responsive Web design) is usually carried out by making everything fluid/elastic, and with the help of CSS3 media queries.
Another approach is to present different sites depending on what type of device is used (e.g. one version for desktops and another one for mobile phones). It is perhaps in the current situation the most user-friendly approach, but also the least cost-effective one.
If you instead give visitors access to a single source of content, fewer resources need to be on maintained and the risk of something going wrong is reduced.
There is, however, a downside too. The same images get delivered to all devices no matter what their capabilities are. Whatwg is working on that ( see the currently proposed solution ), but as I understand it there is no good solution at this time.
2 Basic Steps to Prepare for Responsive Web Design
-
Most browsers in mobile devices scale down webpages to make them fit the viewport. Since we want to rearrange stuff with CSS3 media queries instead ,we prevent this by using a simple meta tag that tells the browser to use the device width without any scaling. This is the meta tag that goes in the <head>.
<meta name="viewport" content="width=device-width"> -
The elephants in the room (Internet Explorer 8 and versions below) doesn’t handle CSS3 Media Queries. You can use Modernizr to add support for CSS3 in older browsers, and at the same time get HTML5 support and other stuff such as feature detection with media queries and conditional resource loading.
Or – to only add support for media queries – you can include this script in the <head>.<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
That’s all to be done to prepare for a responsive web design layout. Now CSS code for making images and videos resize automatically and the actual CSS3 media queries to rearrange stuff can be added to your style sheet.
You can put the media queries in a separate style sheet, or to the bottom of your main style sheet. Having them in your main style sheet reduces the number of http requests, but might feel cluttered if its already a large file.
Making Images & Videos Resize Automatically
This is what I use here at AppGlobe for handling the resizing of videos and images.
img {
height: auto !important;
}
embed,input, img, object, select {
max-width: 100%;
}
audio[controls],
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
video {
width: 100% !important;
height: auto !important;
}
.fluid-media {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin-bottom: 15px;
}
.fluid-media iframe,
.fluid-media object,
.fluid-media embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
When I need to embed a video in an article I wrap the code in a div with the class name fluid-media (unless I use the HTML5 video element). The technique used here for scaling videos is the one described in this article published on alistapart.
Max-width Media Query
AppGlobe has a simple 2 coloumn layout. The sidebar is floated to the right, and the main content area to the left. If you read this from a big screen and try and reduce the size of the browser window you’ll se that a one coloumn layout is created automatically (the sidebar gets pushed below the main content area) as the window gets smaller.
This is done by unfloating the main content area and sidebar and setting their widths to auto at a certain window width.
@media screen and (max-width:42em) {
/* Make everything vertical and unfloated */
#main, #sidebar {
float: none;
width: auto;
}
}
There is of course more to responsive web design than this, but these are the basics to get you going.
Good info, plan to make my blog responsive. Have no link yet, it is still in early development … code is a mess 🙂