Given the penetration of mobile devices in Australia, responsive web design should no longer be just a consideration but a priority. This education presentation addresses the why, what, who, when and how & best practices of responsive design including the three main considerations: grid-based layout, flexible media & media queries.

1. Responsive Design
Education Series

2. MENU
Why?
What ?
Who?
When?
How?
Strengths, weaknesses?
Best practices?

3. BEFORE…
43.7% of all statistics
on the internet are made up(7)

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

5. 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)

6. 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.

7. 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) >

8. 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: DID YOU KNOW?
• Very short budget
• Very short deadline The process of making a site
responsive takes anywhere between
an extra 10% - 50% of project
time(6)

9. HOW?
Three parts:
1. Flexible, grid-based layout
2. Flexible images/media
3. Media queries

10. 1. Flexible, grid-based layout

11. 1. Flexible, grid-based layout

12. 1. Flexible, grid-based layout
Twelve columns
Twelve columns
Six columns Six columns
Four columns Four columns Four columns

13. 1. Flexible, grid-based layout (computer)
Three columns Three columns Three columns Three columns
Twelve columns
Six columns Six columns
Four columns Four columns Four columns

14. 1. Flexible, grid-based layout (computer)
Three columns Three columns Three columns Three columns
Twelve columns
Six columns Six columns
Four columns Four columns Four columns

15. 1. Flexible, grid-based layout (iPad)
Three Three Three Three
columns columns columns columns
Twelve columns
Six columns Six columns
Four Four Four
columns columns columns

16. 1. Flexible, grid-based layout (iPad)
Three Three Three Three
columns columns columns columns
Twelve columns
Six columns Six columns
Four Four Four
columns columns columns

17. 1. Flexible, grid-based layout (iPhone)
Three columns
Three columns
Three columns
Three columns
Twelve columns
Six columns
Six columns
Example >

18. 2. Flexible images/media img, embed {
width: 960px;
}
960px

19. 2. Flexible images/media img, embed {
max-width: 100%;
}
960px
Non responsive example > Responsive example >

20. 3. Media Queries
Media 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 >

21. Strengths Weaknesses
Content development Overall management
User-friendly experience Time and effort
Smaller load time (images Cost
smaller, less content, …)
DID YOU KNOW?
DID YOU KNOW? Second rule in usability 101: don’t
make the user feel like they are not in
61% of customers who visit a mobile control
unfriendly site are likely to go to a
competitor’s site(5)

22. 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)

23. Thank You !
Questions, thoughts… feelings?

24. 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 Wroblewski
http://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 NET
http://www.bored.com/greatfacts/

25. 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