Gain marketing insights, consumer behaviour trends and creative inspiration from team BTI
Newsletter Signup
Newsletter Sign-up
Subscribe to our newsletter to gain marketing insights, consumer behaviour trends and creative inspiration.

*By clicking the submit button, you agree to receive newsletters and informational emails from BTI Brand Innovations.

Posted by Amit Chail on May 25, 2012

A Dispatch from BTI’s Web Development Gurus

There has been a big term making the rounds and stirring up some pretty significant buzz as of late when it comes to web design. You have likely been seeing and hearing it thrown around much more this year, especially as fiery debate has been raging among the design and development community as to the pros and cons of the practice.

The term in question here is none other than “Responsive Web Design”. Since today (May 25th, 2012) just so happens to be the second anniversary of the term originally being coined, we here at BTI thought it would be a great time to flesh out a few of the details and set you in the right direction.

What exactly is responsive design and why has the online world gone so bonkers over the concept?

It is established fact now that web use is going mobile. This really isn’t up for debate anymore. As of early 2011, smartphones alone began out-shipping traditional computers. When you add-on tablets and the increasing variety of web-accessible mobile devices we are left with a vastly different web surfing demographic from the past decades. Mobile dominance has certainly not caught designers and developers off guard, however, and the web community has been predicting the numbers for a while now.

‘Web Developer’s Manifesto’, posted on the wall of BTI Interactive, from http://bradfrostweb.com/

Mobile browsing itself isn’t new, though, and developers have been working with mobile-specific sites since at least 2007 with the climb of smartphone sales and availability. Mobile-specific sites have been the go-to solution for years and certainly have their advantages. Facebook and Twitter, among countless others, have been running with separate phone-oriented sites from the get-go. This practice also has its limits. For starters, mobile sites were originally implemented for phones with medium-to-small touch screens. Since tablets really didn’t hit the market in a big way (nor did phones with massive screens) until 2010, mobile sites had some time to gain traction and become the generally accepted solution. If you have ever been redirected to a mobile site while browsing on a tablet and had to deal with over-sized touch buttons and extremely limited content, you know that this is no longer a sustainable practice.

This is where responsive design comes in.

Responsive design asks developers and designers to look at the web from every perspective and build one site that encompasses any screen size on the market (and allows room to count for screens that haven’t released just yet). Without getting too far into the code, this basically works by detecting the size of the screen you’re accessing a given page from and shuffling the content around according to rules written by the developer. If a responsive design is properly developed and tested, you will wind up with a seamless and functional experience on a site regardless of what device you’re accessing it from – with no redirect or separate site.

Why is mobile design so important?

If you access a website on a desktop or laptop computer, there are certain elements that you expect to be shown in what has become a pretty conventional manner (we touched on this as well in our last blog poston web accessibility). Navigation menus sometimes change colours when your mouse hovers over the link, drop-down menus will appear when you hover over a menu item, graphics (images, videos, slideshows) light up or display extra content when hovered over, etc. Well, there is no such thing as hovering on a phone or tablet. You either click (tap the screen with your finger) or you don’t. On the subject of finger-based navigation (as opposed to a mouse-pointer), very tiny links really don’t cut it. Mobile users need larger touch-friendly buttons and menus. Sure, phones and tablets can zoom with simple gestures (and users have probably become accustomed to a certain level of zooming-in to view content), but why demand that extra step when proper planning and development can easily render it a non-issue?

Web-surfing can be a much different experience with the tactile world of phones and tablets.

James Young of Off Road Code, a small web development company based in the UK, summed the whole idea up with one aptly delivered tweet just over a month ago: “Don’t think of it as “mobile first” or “responsive” just think of it as “doing a good job planning, designing & developing stuff” ”. Ultimately, this should really be every developer’s goal – regardless of what buzz word is tossed around or which method they choose to implement. Keep an eye out for BTI’s upcoming redesign of our own site, which will be fully responsive so you can check us out from any internet-accessible device.

Pro tip: If you want to test out the responsive design of any website, simply adjust the width of your Internet browser window with the page open. As the site gets slimmer (or wider), you should notice elements shifting around and re-organizing to better suit the browser width. Here are a couple of great examples for you to try:

The Boston Globe

Smashing Magazine

Clean Air Commute Challenge

Enochs Fish & Chips

Are you interested in learning about how to build a responsive website for your brand? Contact your interactive and web development experts at BTI and lets get started!