Recently I went through the process of converting several websites into responsive design. For those who are not familiar, the concept of responsive design is to make sure the website renders nicely on both desktop and mobile devices by serving up different CSS stylesheets depending on the screen width.
Below are the steps I took to convert the sites (the starting point is a non-mobile optimized website):
1. Add the following code into the <head> section:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1″ />
This statement will make sure the website renders correctly on your mobile device.
2. Go through the HTML document and make sure to remove any width declaration, and replace these with a CSS Class (or ID). The idea here is that since we want the styling to be dynamic based on the screen width, we cannot hardcode any width information on the HTML code.
3. It important to note that it’s still OK to have the <table> element in the HTML code. Having said that, if the layout of your table will change based on screen size (for example, on a 800px screen, you want to show 4 columns, and on a 300px screen, you want to show 2 columns), you’ll want to convert your <table> code to <div>. When you do this, make sure you remove all the tags associated with <table>, such as <tr> and <td>. If you leave a stray <td> or <tr> element in the code, it may cause your site to render in a way that you do not expect.
4. In the CSS declaration, use @media to set CSS based on screen width. The way to do this is as follows:
|
<-- CSS declarations for styles common across screen widths @media (min-width: 240px) and (max-width: 480px) { <-- CSS declarations for screen size between 240px and 480px } @media (min-width: 481px) and (max-width: 800px) { <-- CSS declarations for screen size between 481px and 800px } @media (min-width: 801px) { <-- CSS declarations for screen size of 801px or larger } |
In the example above, there are 4 CSS code blocks: 1 for CSS declarations that are common across all screen sizes, and 3 width-specific CSS block declarations. There is no hard rule on how many width-specific CSS blocks you should have — you can have as many as you want, or as few as two. It all depends on how you want your site to look on the various devices.
To test your responsive design site, you can either just vary the width of your desktop browser (since CSS is dependent on the width of the device, setting your browser to be 300px wide will allow you to see how the website will look like on a 300px wide mobile device), or use a tool like Responsinator, which will show how your site will look like in several popular mobile device configurations.
That’s really it. Good luck on your efforts to make your site responsive!