Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beyond Responsive Web Design

22,598 views

Published on

Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness.

N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!

Published in: Design
  • Great presentation, I enjoyed this!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for the good stats with regard to mobile usage. Very helpful!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • http://www.jerseysshopsonline.com We believe that if we give our customers a great shopping experience, then growth in sales will eventually come on their own. So rather than focusing on maximizing profits, we focus on maximizing the service that we provide.
    is committed to your complete satisfaction: it is our top priority. In addition to offering a wide variety of merchandise, we strive to provide you with the best service in the industry. So if you need anything, just feel free to contact us.
    Delivery Time:3-7days
    Shippment: EMS,DHL,TNT,FEDEX,UPS and so on,we will mark the goods as 'gift'so that you don't have to pay the tax
    Payment:Western Union,Moneygram,Bank transfer,Paypal
    jerseysshopsonline International Trade Co., Ltd.
    Email: jerseysshopsonline@hotmail.com
    Manager: Sophia Emme
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Beyond Responsive Web Design

  1. Beyond Responsive Web Design “...let a hundred devices bloom...”
  2. Responsive web design?
  3. Responsive Web Design One HTML file+ multiple devices and displays______________________________ a range of custom experiences
  4. Responsive Web DesignIn keeping with the fundamental ideas of the Web: Access by anyone, on any device Separation of content and presentation Progressive enhancement / Graceful degradation
  5. ETHAN MARCOTTE (@BEEP), “ON BEING RESPONSIVE”“A responsive design iscomposed of threedistinct parts:”
  6. 1. A flexible grid.
  7. Flexible / fluid gridsBreak up the site’s layout into modulesthat can be moved and resized asneededSize modules proportionately using emsor percentages (or both)target ÷ context = result
  8. 1. A flexible grid.2. Flexible images. Or more specifically,images that work in a flexible context.
  9. Flexible / fluid imagesoverflow: hiddenmax-width: 100%JS solutions to load an appropriately-sized image
  10. 1. A flexible grid.2. Flexible images. Or more specifically,images that work in a flexible context.3. Media queries.
  11. Media queriesEver make a print stylesheet before?<link rel=”stylesheet”href=”#” media=”screen” /><link rel=”stylesheet”href=”#” media=”print” />
  12. Media queriesMore in-depth rules for when styles apply<link rel=”stylesheet” href=”#” media=”screen and (min-device-width: 640px)” />Can be used within a stylesheet too @media screen and (orientation:landscape) { #content { ... } }
  13. Media queriesheight aspect-ratio resolutionwidth device-aspect-ratio scandevice-height color griddevice-width color-indexorientation monochrome
  14. “Responsive” redesigns
  15. COLLY.COMDESKTOP > NARROW > MOBILE
  16. INFORMATIONARCHITECTS.JPWIDE DESKTOP > DESKTOP > MOBILE
  17. “Switchy” designs
  18. “Switchy” designs Not responsive designs
  19. FLUID GRIDFLUID IMAGESMEDIA QUERIESCOLLY.COMDESKTOP > NARROW > MOBILE
  20. FLUID GRIDFLUID IMAGES?MEDIA QUERIESINFORMATIONARCHITECTS.JPWIDE DESKTOP > DESKTOP > MOBILE
  21. Media queries are not enough
  22. Why not?
  23. “Pinch-to-zoommakes any site usableon iPhone/Android”“Viewport browsingstill works onBlackberry”“Only people withsmartphones use themobile web anyways”
  24. Really?
  25. A bit of perspective...
  26. IPHONE SOLVES ALL PROBLEMS?IPHONE IS JUST A DROP IN THE MOBILE OCEAN
  27. WEBKIT SOLVES ALL PROBLEMS?WEBKIT != FULL SUPPORT FOR MEDIA QUERIES
  28. PHONE-NATIVE BROWSERS SOLVE ALL PROBLEMS?PROXY BROWSERS CAN ACT LIKE DESKTOP BROWSERS
  29. TABLETS SOLVE ALL PROBLEMS?INSANELY TINY TEXT WHEN MEDIA QUERIES FAIL
  30. Cold, hard facts
  31. World population, 2010: 6.9 billion 1.96 billion global Internet connections (28.7% of the world: 42% Asia, 24% Europe, 13% NA) 5.1 billion mobile subscriptions (over 4 billion use 2G GSM)SOURCES: INTERNETWORLDSTATS.COM, BUDDE.COM.AU
  32. 1.3 billion mobile Internet usersAlmost 1/3 of Internet usersaccess only via mobile (includingalmost 25% of U.S. users)Only 21% of mobile users have 3Gaccess
  33. 1.96 billion Internet connections...minus 1.3 billion mobile users...equals about 500 millionbroadband Internet connectionsworldwide
  34. WORLDWIDE MOBILE DEVICE SALESAPPLE? 3%. RIM? 3%. MOTOROLA? 3%. HTC? 2%.
  35. The Jakarta effect
  36. The Jakarta effectCapital of Indonesia, ~9.6 millionpeople$100/month ADSL vs.~$17/month unlimited mobile dataProximity to China = cheap Shanzhai(“bandit”) phones
  37. The Jakarta effect~2 million BlackBerry usersLargest Twitter user base worldwide#2 Opera Mini user base worldwide#3 Facebook user base worldwide
  38. So what do we do?
  39. - BRYAN RIEGER, “RETHINKING THE MOBILE WEB”
  40. Desktop before mobile is backward!Mobile devices are less powerful thandesktopsMobile bandwidth is more expensiveSo why are we sending more (andmore complicated) code for mobilethan desktop?
  41. Mobile FirstMobile site + media queries =desktop siteProgressive enhancement
  42. No support for media queriesis the first media queryMedia queries don’t work on mostmobile devicesMost desktop browsers support mediaqueries (and are powerful enough touse them without slowing down)Old desktop browser = lesscomplicated site!
  43. Avoid unnecessary data transferNYTimes.com mobile:~970KB
  44. Avoid unnecessary data transferGuardian.co.uk mobile:~80KB
  45. Avoid unnecessary data transferdisplay: none still uses bandwidthLoad images as progressiveenhancement instead through media-queried stylesheets
  46. Use JS for progressive enhancement onlyMobile devices are less powerfulAnimation takes a lot of processingFrameworks are big downloads
  47. Use JS for progressive enhancement onlySo, avoid JavaScript for mobilewhenever possibleUse CSS3 animation insteadAmazon, FB, and Google all launchedwith no JS in their original designs
  48. Testing!
  49. OPERA MINIUC WEB
  50. Device-specific emulatorsNokia SymbianRIM BlackberryPalm webOSWindows MobileiPhone SDKAndroid SDK
  51. Who gets it right?
  52. HICKSDESIGN.CO.UKSUPER-WIDE > WIDE > TABLET > MOBILE (ALL FLUID)
  53. STPAULSSCHOOL.ORG.UKTHREE COLUMN > TWO COLUMN > ONE COLUMN (ALL FLUID, WITH ANIMATION)
  54. YIIBU.COMWIDE > NARROW (FLUID GRIDS + IMAGES GO A LONG WAY)
  55. HUFFDUFFER.COMTWO LAYOUTS (THREE VARIATIONS)
  56. Limitations
  57. Conditional HTMLImage size overheadConditional JS behaviorCapabilities detection
  58. “The choice is not between usingmedia queries and creating adedicated mobile site; the choiceis between using media queriesand doing nothing at all.” - Jeremy Keith, “A responsive mind”
  59. ResourcesVolkside Wirifyfilamentgroup’s “responsive-images”pluginSencha AnimatoriAd Producer
  60. WebsitesYiibu (and SlideShare page)A List ApartUnstoppable Robot NinjaMobiforge
  61. Thanks! Kevin Zurawel @kzurawelarborwebsolutions.com

×