General Guidelines to Making Your Fixed Width Site Responsive.
1. Start Small- My recommendation would be to focus on the pages that matter most. In my last project with WhyHunger we converted just two pages to be responsive. One was our get involved page and the other was our donate page. In this case the choice was clear since not converting those pages would have meant the loss of hundreds of potential donors. If the case is not clear for you take a look at your analytics and see which pages get the most traffic and which have the highest mobile bounce rate and go from there.
2. Keep the media quieries simple– Don’t get overwelmed by all the devices and sizes. When wrtiing media quieries I try to keep it to 3 breaking points. One for small devices (less than 320px) , one for mediium tablets (less than 800px). one for to large tablets and small monitors 1024px. Your queries will look something like this:
@media (max-width: 320px){}
@media (max-width: 800px){}
@media (min-width: 1024px){}
The set up above will give you 3 different breaking points with four potenital layouts if you count all screen sizes above 1024px. For those screens your default site styles will kick in.
3. Keep the layout simple – I usually have the site stack on small devices and then on large tablets have a two column layout. On large monitors you can let your regular site styles take over.
4. Convert – Make sure you convert your HTML elments and all text from pixels into ems or percentages.
Here are the results of a recent project to convert parts of a static site to a responsive one: http://whyhunger.org/getinvolved
A seperate responsive layout was created for a donation page in Black Baud’s Net Community: http://whyhunger.org/donate
Go ahead and check these pages on your phone or by sizing your browser down. You will see that there are 3 different layouts based on size. One three column default layout, one two column layout and a single stacked layout.
Some problems I encountered during my conversion and solutions:
Problem: Iframes and emebded YouTube videos were not responsive:
Solution: This tutorial was very helpful: http://avexdesigns.com/responsive-youtube-embed/
Problem: Elements would not stack properly on small devices.
Solution: Make sure to use proper clearing. To get a three column layout to stack on any screen your CSS will look something like this:
#col1 {float:left;}
#col2 {float:left; clear:left;}
#col3 {float:left; clear:both;}
Use this basic CSS to define stacking columns within the media query that you want the elments to stack in. Let us know your own techniques and experiences with responsive design by commenting below. Thanks for reading!