February 24th, 2012 Posted in Web Design

Building the Responsive version of FCSWebsites.co.uk

I have recently rebuilt my main business website at www.fcswebsites.co.uk using responsive design techniques. I was confused by the whole thing until I read Ethan Marcotte’s book Responsive Web Design, which explained how responsive design is based on a flexible grid, flexible images and media queries.

Converting to Responsive

After a brief bit of planning, I stripped back the CSS on the site, replacing my old code with Skeleton framework code. I have been using the 960gs for a couple of years, and Skeleton is based on that so the grid framework was easy to pick up. The FCS design is very clean and simple, so making variations was pretty straightforward. It runs on the Textpattern platform, and I developed it locally using MAMP Pro with a localhost alias for the domain name.

I used .inner divs on the main containers, to allow for whitespace around the content without altering the grid CSS elements themselves. It’s a bit of extra markup, but I don’t care. Some people will get upset about that but there is nothing for me to gain by spending hours removing every last DIV or SPAN to make sites perfectly semantic. Extra DIVs are fine in my book if they get the job done quicker. This is a business, not a time lavish hobby.

My original homepage carousel used jQuery and the Innerfade plugin. That relies on fixed height for the carousel items, which didn’t work when scaling images down for smaller screen sizes. I chucked that away and replaced it with the WooThemes Flexslider, which worked beautifully without any extra configuration or headaches.

Converting fcswebsites.co.uk took me around eight hours and this is the first customised responsive site I have built, so there was a bit of a learning curve.

Time for Change

Clients are starting to ask for mobile friendly websites or upgrades to their sites, so this has been a perfect learning experience. I feel the time has come to start using responsive techniques as the proportion of users using non-desktop devices is now greater than desktop browsers. This is a permanent change to the way we have to think about developing websites – using mobile or non-desktop devices to access websites is here to stay. Some excellent talks from the New Adventures Conference in Nottingham have nudged me towards this shift.

Standardising Systems

I am always looking at ways of speeding up our development cycle by reusing base CSS classes and standardising systems. Typing the same code over and over is pointless and soul destroying as well as being a waste of time.  I currently use a framework based on the 960 grid system, with lots of extra classes added for buttons, error boxes etc. which saves me lots of time. The Skeleton framework has been a massive help, with base code available for standalone websites, and themes for WordPress and OpenCart. Using Skeleton has also moved us onto using HTML5, with the necessary fixes for Internet Explorer.

I plan on using Skeleton to replace my 960gs based CSS framework on all projects, but will turn off the media queries for client projects that don’t specify responsive design. This means I can use one CSS framework for responsive or non-responsive static websites, WordPress content managed sites (including our www.Horsey-sites.co.uk brand) and eCommerce sites.

What’s Next?

Next steps are to style this blog up, convert my PC Repair business WordPress site to Skeleton and convert a Textpattern client website that we built two years ago to be responsive!