Beyond Responsive Web Design
- 1. Beyond Responsive Web Design “...let a hundred devices bloom...”
- 3. Responsive Web Design One HTML file + multiple devices and displays ______________________________ a range of custom experiences
- 4. Responsive Web Design In 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 is composed of three distinct parts:”
- 6. 1. A flexible grid.
- 7. Flexible / fluid grids Break up the site’s layout into modules that can be moved and resized as needed Size modules proportionately using ems or 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 images overflow: hidden max-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 queries Ever make a print stylesheet before? <link rel=”stylesheet” href=”#” media=”screen” /> <link rel=”stylesheet” href=”#” media=”print” />
- 12. Media queries More 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 queries height aspect-ratio resolution width device-aspect-ratio scan device-height color grid device-width color-index orientation monochrome
- 15. COLLY.COM DESKTOP > NARROW > MOBILE
- 16. INFORMATIONARCHITECTS.JP WIDE DESKTOP > DESKTOP > MOBILE
- 18. “Switchy” designs Not responsive designs
- 19. FLUID GRID FLUID IMAGES MEDIA QUERIES COLLY.COM DESKTOP > NARROW > MOBILE
- 20. FLUID GRID FLUID IMAGES? MEDIA QUERIES INFORMATIONARCHITECTS.JP WIDE DESKTOP > DESKTOP > MOBILE
- 21. Media queries are not enough
- 22. Why not?
- 23. “Pinch-to-zoom makes any site usable on iPhone/Android” “Viewport browsing still works on Blackberry” “Only people with smartphones use the mobile 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 users Almost 1/3 of Internet users access only via mobile (including almost 25% of U.S. users) Only 21% of mobile users have 3G access
- 33. 1.96 billion Internet connections... minus 1.3 billion mobile users... equals about 500 million broadband Internet connections worldwide
- 34. WORLDWIDE MOBILE DEVICE SALES APPLE? 3%. RIM? 3%. MOTOROLA? 3%. HTC? 2%.
- 36. The Jakarta effect Capital of Indonesia, ~9.6 million people $100/month ADSL vs. ~$17/month unlimited mobile data Proximity to China = cheap Shanzhai (“bandit”) phones
- 37. The Jakarta effect ~2 million BlackBerry users Largest 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 than desktops Mobile bandwidth is more expensive So why are we sending more (and more complicated) code for mobile than desktop?
- 41. Mobile First Mobile site + media queries = desktop site Progressive enhancement
- 42. No support for media queries is the first media query Media queries don’t work on most mobile devices Most desktop browsers support media queries (and are powerful enough to use them without slowing down) Old desktop browser = less complicated site!
- 43. Avoid unnecessary data transfer NYTimes.com mobile: ~970KB
- 44. Avoid unnecessary data transfer Guardian.co.uk mobile: ~80KB
- 45. Avoid unnecessary data transfer display: none still uses bandwidth Load images as progressive enhancement instead through media- queried stylesheets
- 46. Use JS for progressive enhancement only Mobile devices are less powerful Animation takes a lot of processing Frameworks are big downloads
- 47. Use JS for progressive enhancement only So, avoid JavaScript for mobile whenever possible Use CSS3 animation instead Amazon, FB, and Google all launched with no JS in their original designs
- 48. Testing!
- 50. Device-specific emulators Nokia Symbian RIM Blackberry Palm webOS Windows Mobile iPhone SDK Android SDK
- 51. Who gets it right?
- 52. HICKSDESIGN.CO.UK SUPER-WIDE > WIDE > TABLET > MOBILE (ALL FLUID)
- 53. STPAULSSCHOOL.ORG.UK THREE COLUMN > TWO COLUMN > ONE COLUMN (ALL FLUID, WITH ANIMATION)
- 54. YIIBU.COM WIDE > NARROW (FLUID GRIDS + IMAGES GO A LONG WAY)
- 55. HUFFDUFFER.COM TWO LAYOUTS (THREE VARIATIONS)
- 56. Limitations
- 57. Conditional HTML Image size overhead Conditional JS behavior Capabilities detection
- 58. “The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all.” - Jeremy Keith, “A responsive mind”
- 59. Resources Volkside Wirify filamentgroup’s “responsive-images” plugin Sencha Animator iAd Producer
- 60. Websites Yiibu (and SlideShare page) A List Apart Unstoppable Robot Ninja Mobiforge
- 61. Thanks! Kevin Zurawel @kzurawel arborwebsolutions.com
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n