FARM Education: Responsive Design
Upcoming SlideShare
Loading in...5
×
 

FARM Education: Responsive Design

on

  • 7,307 views

Given the penetration of mobile devices in Australia, responsive web design should no longer be just a consideration but a priority. ...

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.

Statistics

Views

Total Views
7,307
Views on SlideShare
6,133
Embed Views
1,174

Actions

Likes
0
Downloads
6
Comments
0

6 Embeds 1,174

http://blog.thefarmdigital.com.au 1024
http://suite101.thefarmdigital.com.au 76
http://thefarmdigital.com 70
http://webcache.googleusercontent.com 2
http://www.thefarmagency.sg 1
http://www.pinterest.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

FARM Education: Responsive Design FARM Education: Responsive Design Presentation Transcript

  • 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 sold exceeded PCs.
  • 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)
  • 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 VodkaBarack Obama Clear Air ChallengeSee 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 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)
  • 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 Three columns Three columns Three columns Twelve columns Six columns Six columns Four columns Four columns Four columns
  • 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
  • 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
  • 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
  • 1. Flexible, grid-based layout (iPhone) Three columns Three columns Three columns Three columns Twelve columns Six columns Six columns Example >
  • 2. Flexible images/media img, embed { width: 960px; } 960px
  • 2. Flexible images/media img, embed { max-width: 100%; } 960px Non responsive example > Responsive example >
  • 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 >
  • 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)
  • 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 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/
  • ReferencesWEB: http://www.thefarmdigital.com.auFACEBOOK: http://www.facebook.com/thefarmdigitalTWITTER: @THEFARMDIGITALPINTEREST: http://www.pinterest.com/thefarmdigitalPHONE: +612 9690 1415