05 Jun 2012 Spacer Responsive design
2 SHARE
Back to blog home
 

Responsive design

We recently had a relaunch of the Zeroseven site and one of the things we explored and decided upon for the relaunch of our new site was to build it responsively. We dabbled with the idea of responsive at the very start of the planning process but what cemented the idea was an inspired talk about the subject by Andy Clarke at the start of the year.

For those of you that don't know about responsive design, let me give you some background...

Responsive Design - Oh so easy

In the beginning there were only monitors and web designers started making website for the 800 x 600 monitor. They wanted to emulate print as much as possible and the thought of being within the constraints of a printed page, because that's what they knew, so a lot of sites were fixed width. We also tried to cram everything above the fold* and that was no mean feat on an 800 x 600 monitor.

So over the next few years, monitors slowly (in the grand scheme of things) got bigger, first to 1024 x 768 and then to 1280 x 1024. Designers got a lot more space to play with but we still constrained everything to a set width. It wasn't only designers who wanted this control, clients did as well because they in turn wanted to have an 'online brochure', with the same connotations as a printed brochure, but on the screen. In fact, sites were being sold by web design firms as 'brochureware', further cementing these connotations for designers and their clients alike.

Then something unexpected happened, someone changed the rules….
In early 2007, the iPhone was released. It had the internet and for the first time you could browse the web on the go in a way that was actually easy. Then shortly after the iPod touch came out and not only did we have a smaller screen size to think about, we also had a landscape layout on both devices.

We thought…hang on, it's really hard to read some of the websites that we're building for desktop on the smaller screen of the mobile, so we started to see mobile versions of websites. At the time, when the smart phone market was fresh, it didn't worry us too much if the small percentage of users with smart phones had trouble viewing our website content.

Responsive Design - Ever changing devices

However mid 2010, something big happened… Apple released the iPad and it started a revolution.

It didn't start a revolution because websites had to be built to an iPad size now, because viewers (generally) could view desktop websites on the iPad without too much trouble. The reason it was a revolution is due to the success of the iPad and iPhone, other manufacturers started to make other web capable devices and so, we started to have a plethora of different screen sizes and operating systems to contend with. In addition to all these device sizes, monitor sizes didn't suddenly stop increasing, they go bigger and bigger as well.

Responsive Design - Different screen sizes

In 2011 for the first time smart phone shipments worldwide overtook the shipment of PCs ,488 million to 415 million, and we can no longer kid ourselves into thinking that the web has the same constraints as a printed page and we simply have to adapt.

Responsive Design - Smart Phones vs PCs

So, from the range of screen sizes available, it became apparent that for those that wanted their site to be compatible across a range of devices, it was no longer viable to build for these different sizes. It would take too much time and money, you could not keep up the development pace compared to what was being release onto the market.

Because we can't keep up with the different sizes of screens and devices that are coming into the market today, we need to think about a new idea, the idea that the web has no edges and that websites should work well on any device, no matter the screen size.

...and this is the premise of responsive design.

Responsive Design - This is Responsive

What's so great about responsive?
1. It's more than just a design trend - it's a new design solution
2. It solves the problem of the ever increasing number of different device sizes
3. Content adapts to give the best user experience (eg. you might want reduced content on the mobile for easier reading)

But don't panic…

We build perfectly good websites and applications that aren't responsive as sometimes there's no need (not every application lends itself to this) and it does require more development time and cost, but this is a new way of design thinking that really makes sense and also helps explain what we did with the Zeroseven website.

So, let's look at some example to help you visually understand the concept of responsive..

Responsive Design - Example Food Sense

Food Sense Website
This site has a responsive layout. Generally we set a range of 'sizes', called 'break points' where the layout changes and content reorganises itself into a slightly different structure. This is generally three break points but it could theoretically be as many as you'd like. In between these break points, the content is fluid, it adapts to the width of the screen.

Take this Food Sense website example:
Desktop - This has a two column layout with the navigation on the left
Tablet - This has a one column layout with the navigation at the top
Mobile - This has a one column layout with the navigation at the top with no icons and the logo centred

Responsive Design - Example Boston Globe

Boston Globe website
In late 2011 the first major commercial responsive website was launched, and that was the Boston Globe. They went through a long redesign process where they looked at the type of content they had and adapted this to different screen sizes. By looking at their major break points, we can see the following:

Desktop - This has a three column layout with an open navigation at the top
Tablet - This has a two column layout where they close the top navigation and have a search box next to it
Mobile - This has a one column layout with a closed menu navigation at the top and a closed search box - making it easier to read and scroll through articles that are also at a bigger size for reading on screen.

And so, now that you know a little bit of background about responsive design, have a little bit of a play with the new Zeroseven responsive website and see how it all works.

Responsive Design - Example Zeroseven

*The fold: The visible area on screen before having to scroll down the page. A term that comes from print, when newspapers were folded for sale and the most important content was 'above the fold'.

References:
Andy Clarke  //   Stuff and Nonsense Blog  //   Hard Boiled Web Design book
Ethan Marcotte
// Jason Santa Maria // A List Apart
Canalysis Data // Smart Phones vs PCs statistics

 
Margaret
Margaret
FOUNDER / DIRECTOR OF DESIGN & USER EXPERIENCE
Margaret's Articles
 
 
 

GET IN TOUCH

Zeroseven
2/75 Hope St
South Brisbane, QLD 4101

CALL US

07 3844 0001
 

GET A QUOTE

MAP

   
ZEROSEVEN MAIL STAY IN TOUCH

Your monthly newsletter of the latest in digital trends, articles and tips for your business.

WANT MORE?

Who we are

Who we are

We're a passionate bunch of internet professionals with a complementary set of skills that go together on any one website project. Our team of client consultants, designers, developers and project managers nurture your project from start to finish.

A website is the calling card of an organisation and utilising quality website design and development will boost the effectiveness of the site. We can build you a website or online project that will appeal to your target audience and promote your brand, enhanced with appropriate technology to create a rewarding user experience on every platform.

More