Making sure a website renders optimally on various device screen sizes via responsive design is a satisfying exercise for a website developer, and I went through this exercise recently. Of course, I ran into my share of bugs during the process. Below are 3 of the issues I ran into and what (if anything) can be done about them.
responsive design
Converting to Responsive Design With CSS
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.