Beyond Responsive Web Design

21,445 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
3 Comments
39 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total views
21,445
On SlideShare
0
From Embeds
0
Number of Embeds
4,561
Actions
Shares
0
Downloads
389
Comments
3
Likes
39
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×