Converting sites to responsive - any tips?

Permalink 1 user found helpful
I have several sites that I want to add responsive code to. Are there any hints or tips? Any pitfalls?

I presume as well as the main stylesheet, I have to amend all the stylesheets for each block component?

Any chance of a new tutorial in the designer section for coping with responsive coding when 'concretizing' a theme?

View Replies: View Best Answer
goldhat replied on at Permalink Best Answer Reply
Although it is possible to make responsive HTML/CSS with nothing more than your bare hands and a decent understanding of CSS media queries and a lot patience I wouldn't recommend that approach to anyone. Choose a responsive CSS framework. It's grid will do the tedious work of giving you responsive layout classes. My personal favorite is Foundation Framework because it comes with many responsive components aside from a grid. Skeleton is more lightweight, it's just a grid, a responsive form of the 960 grid I believe. Others use Twitter Bootstrap. There are probably 5-10 more that you could checkout but those come to mind for me. Once you find one you like and know it, you might want to stick with it. I use Foundation whenever, wherever possible.

Now just using a Framework alone does not mean you will have a good responsive site. Frameworks are not magic, they just give you a responsive layout. You must still understand responsive design and apply responsive design principles, and test heavily in all screen sizes. Generally the approach of "mobile first" is exactly that, layout your design in 1 column or at most 2 columns and make sure it looks great at about 320px wide. Watch for any images that don't scale to that size. Watch for any elements that by design are too wide to scale nicely and look garbled at 320px.

Foundation provides a grid where options look like "large-4" and "small-12". So if I make the following divs it will use 4 columns out of 12 on a large screen, and all 12 on a small screen. So basically on larger screens in the example below it will be 3 columns beside each other. But on mobile each of those divs will be full width of the screen because of the "small-12" class.

<div class="small-12 large-4 column">My content here...</div>
<div class="small-12 large-4 column">Second column on large screen...</div>
<div class="small-12 large-4 column">Third column on large screen here...</div>

Generally we never want more than 2 columns on a small mobile device unless we're layout out some small buttons but if you split 320px across 3 columns it's only 110 or pixels each. Very small. So normally I would mostly use "small-12" to make all my divs collapse into 1 column. But I could use the class "small-6" to say use half the available width.

Hope you find this helpful, also consider checking out YouTube for responsive design videos there are quite a few that show specific site examples and go quite deep into the topic.
enlil replied on at Permalink Reply
To add to goldhat's fantastic response, there are also some responsive "framework" packages available in the marketplace ready for customization. Including which I've created a theme with that I use on a few different sites.
PineCreativeLabs replied on at Permalink Reply
To add on top of both goldhat and enlil's responses, I offer several themes - all of which are responsive - for free in the marketplace!


FlexCRETE (based on Skeleton framework):

Plus there are many others you can find either on my profile, or in the marketplace.
trixiemay replied on at Permalink Reply
Thanks for the freebies.
trixiemay replied on at Permalink Reply
Thanks for your responses. Very helpful.
My biggest issue with frameworks is the very generic look to the design of sites:

3/4 even columns breaking to 1 col