Responsive Web Design
Media Queries - Breakpoints
First decide on the breakpoints you will use in your CSS, for example: 980px, 768px, 600px; 480px. Although these are key widths for various devices there are a lot more sizes than those I have listed. There are numerous sizes for cell phones some with widths as narrow as 280px. You need for your design to be able to transition from one size to another smoothly, for this you need to use percentages.
Percentages
In order for your site to work on all devices regardless of their size you need to start by using percentages for all widths.
For the box model the size of all elements, width, padding, margin can be expressed using percentages except for the size of a border. If you do decide to add a border the total of all elements cannot have the sum of 100%, it needs to be a little less depending upon the width of the border. You can also express your percentages using decimals to be even more precise.
First Breakpoint
This page has a wrapper as shown below. Which is initally set-up so that the contains will appear in the center of the browser
#wrapper{
position: relative;
width: 1024px; (this could be wider)
margin-right: auto;
margin-left: auto;
}
For the first breakpoint I am using 980px:
@media (max-device-width : 980px) {
#wrapper{
width: 96%;
margin-left: 2%;
margin-right:2%;
}
}
At this point we probably will not have to change any of the other sizes because as they are also percentages they will just resize to fit the wrapper as the wrapper resizes. For example the two main columns on this page which have the ids left and right have the styles as shown below.
#left {
float: left;
width: 48%;
padding-right: 2%;
}
#right {
float: right;
width: 48%;
padding-left: 2%;
}
These measurements will probably only need to be changed for the phone in which case you will need to get rid of the float and increase the width of each as shown below:
Set-up the break-point to 480px;
@media (max-device-width : 480px) {
#left {
float: none;
width: 96%;
padding-left: 2%;
padding-right: 0%;
}
#right {
float: none;
width: 96%;
padding-left: 2%;
}
}
The examples shown are extreamly simplified. At certain breakpoints you will need to make changes to the header, menus and footer as well as other elements within the page.
Text
h2>You should use em as a font size and either state the font-size in pixels in the body or 100%. The default on most browers is 16px therefore 16px equal 100%.
This site is set at:
body{
font-size: 20px;
}
The rest of the styles are in em. if necessary I can change the font-size for the body at each breakpoint and the rest of the text will change accordingly.
Flexible Images & Videos
You can use a percentage for the width of your image in which case the height will be calculated correctly based on the orginial width and height of your image. This measurement can also be used for Videos.
When using the width of 100% the width will stay within the width of the container. You can also use
max-width: 100% or max-width: number pixels
max-width: 100%;
allows the image to never go any wider than its container
width: 100%;
forces the image to be as wide as the container
max-width is not read by IE6 and other older browsers so if you are still designing with them in mind you can write:
.image{
width: 100%;
max-width: 100%;
}
You can also choose not to display an image for small devices.
For instance for the top menu on this page I only wanted to display the icon representing home on a phone therefore I instructed the others not to display. Icon Menu is the id of the nav that contains the menu images that have the ids twitter, email and updates.
@media (max-device-width : 480px) {
#iconMenu #twitter, #email #updates{
display: none;
}
}
Although the image will not be displayed it will still be downloaded. You can also decide to have a different image depending upon the device but if you have one image replace another both images will downloaded which will add to the load-time of the page. You can also choose not to show other elements within the page for certain devices but once again the element will still be downloaded.
REPLACING CONTENT (W3C)
ALERT - CANNOT IMPLIMENT AT THE MOMENT
W3C is in the process of considering and testing whether or not you will be able to use different images at different stages within the Media Queries. This would eliminate the necessity of downloading a large image when only a smaller one would be required for a particular device.