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.
Rendering OK in browser but not in real device
This can sometimes be vexing, as all the code appears to be working properly. The solution to this is actually pretty easy — just add the following line in the <head> section:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1″ />
This will allow your device to render the beautiful responsive design as you see when you change the size of your browser.
To avoid this issue altogether, I recommend that you include this as part of your template if you are creating a new site. If you are converting a non-responsive site to a responsive site, I recommend you add this line as the first step in your conversion.
Page layout appears out of alignment
This happens when the floating elements are not cleared. So, elements appear in unintended locations — for example, what should be below another element ends up appearing to the right of the element. To solve this issue, make sure to include the following statement to “clear” the floats:
<div style=”clear:both;”></div>
IE8 not rendering correctly
IE8 does not support CSS3. Therefore, a responsive design site will not look right in IE8 because that browser does not support CSS3 elements such as @media. There is, unfortunately, no workaround for this issue. The best thing a webmaster should do is to look at the percentage of IE8 traffic to the site, and decide whether the benefits of converting to responsive design outweighs the sub-optimal user experience for IE8 users.