Re-styling for responsive design is a ton of re-work. It’s much easier to build a website correctly the first time! I’ve still got about a day and a half of css tweaking ahead of me, but here are a few concrete tips for avoiding the pain I am experiencing…

1) Whenever possible, style repeatable components (e.g., menus and block views) so they’ll look good as they adapt to your responsive breakpoints.

Here is a sidebar component that is not very flexible. I will have to write and test separate css code for each breakpoint to make it work with my responsive layout…

I’m having to style this component for each of my breakpoints like so…

Here is a flexible alternative that only needs to be styled once (global.css), but adapts as the screen/device width shrinks. The irony here is that my client actually prefers this approach to the non-flexible widget. No extra styling – I just rely on the Adaptive Image module to resize the album cover graphic. Easy peasy…

2) Define body font-size as 100% for your “normal” responsive layout (set it to a higher or lower percentage for your larger and smaller breakpoints). Define all other font-sizes in ems and not in pixels or percentages. The only exception would be text that for some reason you don’t want resized. This will give you text that scales for different screen or device widths.

You’re still going to have to spend some time figuring out the best font-sizes for your content, and you’re going to need to consider and view your styled content at each breakpoint. Realistically, there are likely to be some components on your site, where you still need to individually style the text for a certain breakpoint. That’s OK , but it should be exception-based and not the norm.

3) Every situation and site design is different, but in general, you should define the width of menus, blocks and other components in percentages and not in pixels. There will be times you need to specify widths in pixels, but it should always be a conscious and rational decision…

• Do I want this component to resize on different screen/device widths? –> If ‘yes’ use percentage widths.

• Do I want this component to remain the same width regardless of screen/device width? –> If ‘yes’ use pixel widths.

4) Base your theme on Omega. It provides invaluable responsive design support. Essentially, Omega provides 3 responsive grids (wide, normal and narrow), with the functionality to control the breakpoints through the Drupal admin interface. This is extraordinarily powerful: as the grid responds to each breakpoint, it “squeezes” your percentage-based boxes to the appropriate size for the layout. The best part is the option to view the grid columns which display as a sheer red overlay. This gives you the ability to design using the same relative grid for each display, though I believe in going to fluid for mobile phones. Omega supports fluid layouts as well…

Omega saved my life!