Katie
An introduction to responsive theming
When planning our new website (now the old one!!!), we knew we wanted it to be responsive so that it worked perfectly across different devices.
While I have my own minimal HTML5 base theme for Drupal 7 sites, it's not responsive, so I turned to the Omega base theme which I knew was great for easily creating responsive HTML5 themes as I'd previously used it on a couple of client sites.
Using the Omega Tools module, it's possible to easily generate your sub-theme using Drush, plus there is an interface for exporting theme settings which you can paste into your .info file which is perfect if you use source control like we do.
Responsive websites start with the design. The design needs to be flexible enough to work when scaled up or down and also needs to work when displayed on a mobile device, with the sidebar blocks below the main content. As long as the design doesn't stray from the 960 grid system, you shouldn't run into any issues.
Out of the box, Omega comes packed with functionality and configuration options, which are very flexible. If you're using Omega for the first time, I'd recommend experimenting with various configuration combinations until you've got a good base to start from before implementing the design using custom CSS and template files in your sub-theme. I've found that while Omega can allow for rapid theme development, I'd spend more time testing in different browsers and devices than I usually would - perhaps because it's fun resizing the browser and watching the site scale : )
We decided we needed a bit of extra functionality and customisation, so we've utilised existing libraries for certain aspects of the site. One very nice touch is to use jQuery mobileMenu, which turns your main navigation into a select element for mobile devices. This means that mobile visitors can use the standard iOS and Android select element functionality for navigating your site - much slicker than trying to click on tiny links with fat fingers!
We ended up removing the wide layout and only using normal, narrow and mobile as we felt our design was a bit overwhelming when displayed wide - this means our website scales up to a maximum of 960px wide.
We also used FitText.js and FitVids.js which use jQuery for scaling headings and videos to a minimum or maximum size depending on the context.
Not responsive theme specific, but other plugins used are formalize.js (which comes with Omega) and labelify.js for consistent display of forms and nice input hints, greyScale.js for creating a grey scale version of an image using canvas, an image preloader and David DeSandro's amazing Isotope which works beautifully within a responsive theme.
One of the downsides of Omega is that it doesn't support IE8 and under - I considered implementing respond.js but this would have required hacking Omega and we decided that it didn't matter to us since the site still works at a fixed width in IE8 and below and we could live with the site not being responsive in those older browsers.
And I can't forget two of my favourites: css_browser_selector.js which adds information on the current browser as classes to the html tag - I love using this as it's perfect for those small CSS tweaks that are sometimes needed for specific browsers or devices; and the HTML5shiv (included with Omega for IE8 and below) which makes life easier for front end devs working on HTML5 sites.