FARM Education: Responsive Design

Responsive DesignEducation Series

MENU

Why?

What ?

Who?

When?

How?

Strengths, weaknesses? Best practices?

BEFORE…

43.7% of all statistics on the internet are made up(7)

WHY RESPONSIVE DESIGN?People are buying more and more smartphones and tablets: since last year, the number of smartphones sold exceeded PCs.

WHY?

People are using more and more mobile devices:

• Half of the searches are mobile(1)

• Some website near 50% mobile(1)

• Australian spend about 22min per week browsing Internet on computer and 10min on mobile and tablets(4)

Explosion of devices, platforms, and browsers that we need to work with.

Weekly time spent across media by online Australians(4)

WHAT?What is responsive web design?

Creating a flexible layouts that can adapt, to suit the size or orientation of any device, while offering a consistent and attractive

experience to the user.

WHO?Not just demos, design website… but REAL client work !

The Boston Globe Grey Goose Vodka

Barack Obama Clear Air Challenge

See more > Responsive Design Examples (Pinterest) >

WHEN?

A web responsive website project makes sense for us… ALL THE TIME!

We really should try to push it as much as we can: User’s expectations change based on new technology, and responsive design is one of them.

Except specified:• Very short budget• Very short deadline

The process of making a site responsive takes anywhere between an extra 10% - 50% of project time(6)

DID YOU KNOW?

HOW?

Three parts:

1.Flexible, grid-based layout2.Flexible images/media3.Media queries

1. Flexible, grid-based layout

1. Flexible, grid-based layout

1. Flexible, grid-based layout

Twelve columns

Twelve columns

Six columns Six columns

Four columns Four columns Four columns

1. Flexible, grid-based layout (computer)

Three columns

Twelve columns

Six columns Six columns

Four columns Four columns Four columns

Three columns Three columns Three columns

1. Flexible, grid-based layout (computer)

Three columns

Twelve columns

Six columns Six columns

Four columns Four columns Four columns

Three columns Three columns Three columns

1. Flexible, grid-based layout (iPad)

Twelve columns

Six columns Six columns

Four columns

Four columns

Four columns

Three columns

Three columns

Three columns

Three columns

1. Flexible, grid-based layout (iPad)

Twelve columns

Six columns Six columns

Four columns

Four columns

Four columns

Three columns

Three columns

Three columns

Three columns

1. Flexible, grid-based layout (iPhone)

Three columns

Twelve columns

Six columns

Six columns

Three columns

Three columns

Three columns

Example >

2. Flexible images/media

960px

img, embed {     width: 960px; }

2. Flexible images/media

960px

img, embed {     max-width: 100%; }

Non responsive example >

Responsive example >

3. Media QueriesMedia Queries allow you to have conditional style instructions according to some parameters like for example the size of display.

Have a specific CSS file for a specific screen size

< link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href= "iPod.css" />

- Have a specific CSS instruction for a specific screen size

@media screen and (max-device-width: 480px) { .column { float: none; } }

IE7 & IE8 Example >

Strengths Content development User-friendly experience Smaller load time (images smaller, less content, …)

61% of customers who visit a mobile unfriendly site are likely to go to a competitor’s site(5)

DID YOU KNOW?

Weaknesses Overall management Time and effort Cost

Second rule in usability 101: don’t make the user feel like they are not in control

DID YOU KNOW?

BEST PRACTICES?

Here are the best practices generally pointed out:

• Plan for small, expand for large: mobile first at every stage (focus on only the most important data and actions)(2)

• Simple content• Think modular• Loose wireframes• Test the flow early• Test frequently (don’t make assumptions)

Thank You !Questions, thoughts… feelings?

References

(1) RESPONSIVE WEB DESIGN – Powerpoint presentation http://www.slideshare.net/maxdesign/responsive-web-design-13036471

(2) MOBILE FIRST – Article witten by Luke Wroblewski http://www.lukew.com/ff/entry.asp?933

(3) RISE OF MOBILITY – Youtube Video http://www.youtube.com/watch?v=rFfPXSAo8TU

(4) MOBILE FIRST – Article witten by Luke Wroblewskihttp://au.nielsen.com/site/documents/AustralianOnlineLandscapeExecSummReport2012FINAL.pdf

(5) Karim Temsamani at IABALM 2012 via IAB

(6) HOW MUCH LONGER DOES IT TAKE TO PRODUCE A RESPONSIVE DESIGN FOR A WEBSITE ON AVERAGE – Article witten by John Rau

http://www.quora.com/How-much-longer-does-it-take-to-produce-a-responsive-design-for-a-website-on-average

(7) THE MOST INTERESTING AND UNUSUAL FACTS ON THE NEThttp://www.bored.com/greatfacts/

References

WEB: http://www.thefarmdigital.com.au

FACEBOOK: http://www.facebook.com/thefarmdigital

TWITTER: @THEFARMDIGITAL

PINTEREST: http://www.pinterest.com/thefarmdigital

PHONE: +612 9690 1415