Designing responsively

When CM Bookkeeping approached us to create their new site we took it on ourselves to build it responsively. As a simple one-page site it was a nice opportunity to get involved with this new approach to designing websites.

Visual showing the various screen layouts of CM Bookkeeping

Responsive web design

For those unaware, responsive design is an approach that allows a website to respond to the user's screen size, platform and orientation. It consists of a mix of flexible layouts and images and a use of media queries. As the user switches from their mobile to their laptop, the website will automatically re-size to make use of the available screen space.

This approach is growing in popularity because we are quickly getting to the point of being unable to keep up with the number of different devices that users are accessing the web from. Designing a version for each new device is costly and impractical, hence the growing popularity of responsive design.

Our design process

We started by creating a standard 960px width mock up of the desktop design. Once the client was happy we then set up our media queries and did the rest of the work in the browser. Starting with a 320px mobile layout we worked our way up until the 960px layout was reached. Working directly in the browser was a real bonus as it allowed us to experiment and tweak until the design felt right.

The first major change in writing your CSS is to get used to using percentages instead of pixels. There are a whole host of great tools out there, we particularly found this fluid grid calculator helpful. On that note we also found fluid baseline grid and this responsive tester of use when setting up our media queries and testing them.

We also found a little more planning is needed at the markup stage too. You can't think of things being static and fixed anymore. You need to embrace fluidity and consider the various ways the content might need to be presented when it comes to different devices. The accounts logo section is a good example of this. Because the logos and the words above shift in display across various screen sizes, we found a mixture of floating, absolutely positioning and hiding some background images was the best way to achieve the result we were looking for. We also implemented some interesting CSS3 on the logos and found the box-sizing declaration handy when applying borders on 100% width containers. Do take a peak at the code if you're interested to see our implementation.

We had alot of fun getting involved with this approach and look forward to our next responsive project. Do take a look at our little one page site for CM Bookkeeping, re-size your browser and as always let us know your thoughts.

Article comments…

Nice work guys. What is the CSS effect on the logo's?

Thanks Ben. We adapted some interesting hover effects from Alessio Atzeni over at Codrops. These days Javascript is not the only solution when thinking about this sort of effect.

Leave a comment…

* Fields required.

Proud to use Microsoft.NET, Umbraco, EpiServer, Sitefinity and SharePoint