A look at Responsive Design

If you’re a regular reader of the fatBuzz blog, you will have worked your way through plenty of content regarding the evolution of social media; how it affects our every day lives, the way it has changed for the better or for worse, as well as updates on some of our clients' progress.

However, rather than focus on social media in today's blog post, one of our web developers, Jon, will share his thoughts on one of the key aspects that differentiates one of our latest web projects - a new website for clothing brand, Punk Royal - from most others. Responsive Design. 

Over the years, the way that we view websites has changed massively. If we go back 20 years to the early 90s, you had one platform (the Personal Computer) in which to view Internet content, through either Microsoft’s Internet Explorer or the Netscape browser, which is essentially now known as Firefox.

Building content was pretty straightforward; you had two browsers, rendering content in a very similar fashion, so what you designed on your home/work machine is what all your customers/followers would see on their machine. It was a simple time to be a web developer

Fast forward ten years to the millennium and things had really progressed. We had more browsers, more styling techniques, and ultimately, more permutations to design and build for. You could say this is where things started to get tricky, to make sure that 100% of your audience would see your site, or more specifically, your content, as you intended them to see it.

If we jump forward to the present day, the number of permutations has increased exponentially. We not only have multiple browsers to contend with, we also have multiple platforms, with the introduction of tablets and smartphones. It goes without saying that your site will display on all of the above, but, of course, you want it optimised for your audience. This is where responsive design comes in.

The main premise of having a responsive site is the ability to have one content management system and one set of content, but essentially a different looking site optimised to whatever device you’re viewing on. Roughly five years ago, we did have the option of creating mobile specific sites, but generally, this required having two separate sites, separate domains with two separate lots of content, which when scaled up, is not at all manageable.

Simply using CSS, we can now change how a user views a site, purely based on the width of the device that they are using. This then allows us to optimise websites for not only mobile devices, but for desktop machines too; a category that Punk Royal falls into, with its maximum width sitting at 1440 pixels, generally considered too big for a standard site brochure site.

However, the main target is still mobile devices. 28% of Internet traffic is from a mobile device and a new smartphone is bought every 2 seconds on eBay! And in 2011, mobile transactions accounted for $241billion worth of sales on online stores[1]. Just think of the customers that you could be missing out on if your site isn’t optimised for their use?

The site will change depending on your device - view it for yourself 

The Punk Royal site was built responsively in conjunction with the Twitter Bootstrap, an HTML/CSS framework that helps to maintain cross browser compatibility, something that is equally essential to ensuring as many people as possible see your site as intended. There are essentially two different ways of building responsively; either with breakpoints or as a fluid site.

A site with breakpoints is pretty self explanatory, in that when the browser width gets to point A, it changes, point B, changes again etc. A fluid site constantly changes width and size as the browser size gets smaller and covers every pixel between the maximum and minimum size. If you drag the browser windows horizontally to as small a size as possible, you will understand what is meant.

Building a site with fluidity is very time consuming and requires a lot of patience but it does create the best result in terms of creating something that will optimize to any screen (in the case of Punk Royal, screens between 320 pixels and 1440 pixels wide).

The key part of the site was the navigation and how to handle this on a mobile browser. When a website has only a handful of links, the need to change the menu is probably minimal, however to future proof things, you need to consider that somewhere in the future, further pages may be added and the menu may evolve. This is why with the Punk Royal site, the menu evolves to a dropdown when viewed on mobile devices, essentially removing any restrictions from the design element.

We (well, I...) look at the Punk Royal site most days with pride in what we’ve created, and probably spend a bit too much time moving the browser back and forth to watch the elements morph into their new home. If you didn’t before, you really need to try it!

Hopefully you have something to think about regarding the importance of responsive design and the need to meet as much of your target audience as possible. Remember to have a look at the new Punk Royal website, on either your desktop, tablet or mobile device, and let us know what you think!

If you want to discuss responsive design further, or indeed any aspect of web design or development, just give myself or David a call on 0141 427 0727.

[1] http://mobilewebrockstar.com/13-killer-mobile-web-usage-statistics/