Responsive Web Design (RWD) is an approach to building websites which caters to the vast array of devices that are now connecting to the internet. Gone are the days when designers and developers only had to take into account a small number of web browsers being used on desktop and laptop computers. The staggering array of smartphones and tablets now available on the market mean that more and more users are using these devices to connect to the internet. The chances are very high that a large proportion of your website’s visitors are now reaching your site via one of these devices, and that number is only going to get higher.

While many of those devices do a very good job of scaling websites to fit on their invariably smaller screens, the end result is not always ideal. A website that is designed from the ground up to fit on those screens is better for everyone, which is where responsive web design comes in.

We’ve needed a new website here at Design Community for some time; we’ve been busy building them for our clients but rather neglected our own! So with all of the above in mind, it was a very easy decision for us to choose a truly responsive website for our new home.

Responsive Web Design Technical Challenges

The technical challenges we were faced with appeared pretty daunting at first. Desktops and laptops, iPhone’s, iPad’s, Blackberry’s, a bewildering array of Android phones and tablets, Windows phones and a whole lot more besides all needed to be taken into account. The general consensus in the developer and design community (pun intended!) is to design for mobile first. What that means is start from the smallest screen size and design from there up. While that appears to be a sensible option, we decided on a “big picture” approach for our project.

Our initial development meetings discussed what was possible with this “new” way of working and how best to design a site that would adapt to a change in screen size while still retaining much of the information contained in the “full fat” version. These meetings were invaluable because they enabled our team of designers to fully appreciate the more technical aspects of the building process. This meant the first design for the new website needed very little changing to it structurally and the development stage could begin in earnest.

Surprisingly, one of the first challenges we were confronted with isn’t so much a responsive feature as such, but is something that underpins the whole look and feel of the site and is perhaps my favourite part of the site. Dean asked me if it would be “possible to make the background of the page act like the sky going from light to dark when you scroll up and down the page, with geometric shapes that remain fixed at the bottom?”

As you can see from the site, this (very cool!) effect was possible, but little did I know that such a cool feature would end up causing as much head scratching and hair pulling as it did. It seems simple enough now, but making it work across the whole range of devices and older browsers was a different matter altogether. I will explain exactly how this was achieved in a future article.

In other forthcoming articles we will be shining a light on some of the other technical challenges we faced during development, including responsive video, images and maps, flipping from portrait to landscape mode, backward compatibility and biggest of all; which screen sizes to include as our “breakpoints”.

Please let us know what you think about our new website in the comments section below. If you would like a responsive website designing, please don’t hesitate to get in touch, we’ll be happy to discuss your requirements with you!