Download - FARM Education: Responsive Design
![Page 1: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/1.jpg)
Responsive DesignEducation Series
![Page 2: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/2.jpg)
MENU
Why?
What ?
Who?
When?
How?
Strengths, weaknesses? Best practices?
![Page 3: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/3.jpg)
BEFORE…
43.7% of all statistics on the internet are made up(7)
![Page 4: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/4.jpg)
WHY RESPONSIVE DESIGN?People are buying more and more smartphones and tablets: since last year, the number of smartphones sold exceeded PCs.
![Page 5: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/5.jpg)
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)
![Page 6: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/6.jpg)
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.
![Page 7: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/7.jpg)
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) >
![Page 8: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/8.jpg)
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?
![Page 9: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/9.jpg)
HOW?
Three parts:
1.Flexible, grid-based layout2.Flexible images/media3.Media queries
![Page 10: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/10.jpg)
1. Flexible, grid-based layout
![Page 11: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/11.jpg)
1. Flexible, grid-based layout
![Page 12: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/12.jpg)
1. Flexible, grid-based layout
Twelve columns
Twelve columns
Six columns Six columns
Four columns Four columns Four columns
![Page 13: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/13.jpg)
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
![Page 14: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/14.jpg)
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
![Page 15: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/15.jpg)
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
![Page 16: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/16.jpg)
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
![Page 17: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/17.jpg)
1. Flexible, grid-based layout (iPhone)
Three columns
Twelve columns
Six columns
Six columns
Three columns
Three columns
Three columns
Example >
![Page 18: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/18.jpg)
2. Flexible images/media
960px
img, embed { width: 960px; }
![Page 19: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/19.jpg)
2. Flexible images/media
960px
img, embed { max-width: 100%; }
Non responsive example >
Responsive example >
![Page 20: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/20.jpg)
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 >
![Page 21: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/21.jpg)
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?
![Page 22: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/22.jpg)
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)
![Page 23: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/23.jpg)
Thank You !Questions, thoughts… feelings?
![Page 24: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/24.jpg)
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/
![Page 25: FARM Education: Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022081414/544248848d7f723b798b5853/html5/thumbnails/25.jpg)
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