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.