Your SlideShare is downloading. ×
0
Responsive DesignEducation Series
MENUWhy?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 s...
WHY?People are using more and more mobiledevices:•   Half of the searches are mobile(1)•   Some website near 50% mobile(1)...
WHAT?What is responsive web design?      Creating a flexible layouts that can adapt, to suit the size or orientation of an...
WHO?Not just demos, design website… but REAL client work !The Boston Globe                                                ...
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:U...
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 colum...
1. Flexible, grid-based layout (computer)         Three columns    Three columns     Three columns       Three columns    ...
1. Flexible, grid-based layout (computer)         Three columns    Three columns     Three columns       Three columns    ...
1. Flexible, grid-based layout (iPad)                  Three     Three     Three       Three                  columns   co...
1. Flexible, grid-based layout (iPad)                  Three     Three     Three       Three                  columns   co...
1. Flexible, grid-based layout (iPhone)                     Three columns                     Three columns               ...
2. Flexible images/media   img, embed {                             width: 960px;                           }            9...
2. Flexible images/media                    img, embed {                                              max-width: 100%;    ...
3. Media QueriesMedia Queries allow you to have conditional style instructions according to someparameters like for exampl...
Strengths                                Weaknesses  Content development                     Overall management  User-frie...
BEST PRACTICES?Here are the best practices generally pointed out:• Plan for small, expand for large: mobile first at every...
Thank You !Questions, thoughts… feelings?
References(1) RESPONSIVE WEB DESIGN – Powerpoint presentation    http://www.slideshare.net/maxdesign/responsive-web-design...
ReferencesWEB: http://www.thefarmdigital.com.auFACEBOOK: http://www.facebook.com/thefarmdigitalTWITTER: @THEFARMDIGITALPIN...
Upcoming SlideShare
Loading in...5
×

FARM Education: Responsive Design

7,038

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
7,038
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "FARM Education: Responsive Design"

  1. 1. Responsive DesignEducation Series
  2. 2. MENUWhy?What ?Who?When?How?Strengths, weaknesses?Best practices?
  3. 3. BEFORE… 43.7% of all statistics on the internet are made up(7)
  4. 4. WHY RESPONSIVE DESIGN?People are buying more and more smartphones and tablets:since last year, the number of smartphones sold exceeded PCs.
  5. 5. WHY?People are using more and more mobiledevices:• 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, andbrowsers that we need to work with. Weekly time spent across media by online Australians(4)
  6. 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. 7. WHO?Not just demos, design website… but REAL client work !The Boston Globe Grey Goose VodkaBarack Obama Clear Air ChallengeSee more > Responsive Design Examples (Pinterest) >
  8. 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 isone 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. 9. HOW?Three parts:1. Flexible, grid-based layout2. Flexible images/media3. Media queries
  10. 10. 1. Flexible, grid-based layout
  11. 11. 1. Flexible, grid-based layout
  12. 12. 1. Flexible, grid-based layout Twelve columns Twelve columns Six columns Six columns Four columns Four columns Four columns
  13. 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. 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. 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. 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. 17. 1. Flexible, grid-based layout (iPhone) Three columns Three columns Three columns Three columns Twelve columns Six columns Six columns Example >
  18. 18. 2. Flexible images/media img, embed { width: 960px; } 960px
  19. 19. 2. Flexible images/media img, embed { max-width: 100%; } 960px Non responsive example > Responsive example >
  20. 20. 3. Media QueriesMedia Queries allow you to have conditional style instructions according to someparameters 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. 21. Strengths Weaknesses Content development Overall management User-friendly experience Time and effort Smaller load time (images Costsmaller, 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. 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. 23. Thank You !Questions, thoughts… feelings?
  24. 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. 25. ReferencesWEB: http://www.thefarmdigital.com.auFACEBOOK: http://www.facebook.com/thefarmdigitalTWITTER: @THEFARMDIGITALPINTEREST: http://www.pinterest.com/thefarmdigitalPHONE: +612 9690 1415
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×