The Future is Responsive

  • 1,416 views
Uploaded on

My talk at Webshaped 2013 in Helsinki, Finland about the past, present and future of Responsive Design and the Web.

My talk at Webshaped 2013 in Helsinki, Finland about the past, present and future of Responsive Design and the Web.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,416
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
40
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. zurb.net/deviceGo there and just, you know, hang out.Thursday, May 23, 13
  • 2. zurb.net/deviceGo there and just, you know, hang out.Thursday, May 23, 13
  • 3. Everyone pulled it up right?Thursday, May 23, 13
  • 4. Thursday, May 23, 13Small screen / low res / landscape = turtleSmall screen / low res / portrait = snailSmall screen / hi res / landscape = butterflySmall screen / hi res / portrait = parrotLarge screen / low res / landscape = giraffeLarge screen / low res / portrait = elephantLarge screen / hi res / landscape = tigerLarge screen / hi res / portrait = t-rex
  • 5. That was only 8 types.That’s 3 characteristics, each with only 2 possible states. Pretty simple.Thursday, May 23, 13
  • 6. Devices are different.Thursday, May 23, 13
  • 7. Devices are different. Duh.Thursday, May 23, 13
  • 8. The Web has come a long way....in really, a very short time.Thursday, May 23, 13
  • 9. Thursday, May 23, 13We’ve made a huge transition to a whole slew of new ways to access content and services online like mobile sites
  • 10. Thursday, May 23, 13...native apps
  • 11. Thursday, May 23, 13...mobile-specific frameworks
  • 12. Thursday, May 23, 13...and responsive sites.
  • 13. How much does mobile matter?Thursday, May 23, 13
  • 14. He gets this one and 9 more.Thursday, May 23, 13There are almost ten mobile devices sold for every baby born, every day. (Source: http://www.lukew.com/ff/entry.asp?1728)
  • 15. Mobile devices will double in thenext 5-8 years.Thursday, May 23, 13http://allthingsd.com/20111010/mobile-devices-seen-doubling-by-2020-as-non-phones-dominate-wireless-airwaves/
  • 16. There are already more mobiledevices than humans.Thursday, May 23, 13http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
  • 17. Thursday, May 23, 13That’s 3 empire state buildings of mobile devices, today.
  • 18. Mobile users will outnumber desktop this year.05001000150020002007 2008 2009 2010 2011 2012 2013 2014 2015you are here>Mobile DesktopThursday, May 23, 13http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf and http://www.lukew.com/ff/entry.asp?1427
  • 19. Thursday, May 23, 13Fab.com mobile shoppers purchase TWICE as often as desktop shoppers. (http://gigaom.com/2012/01/11/fab-com-mobile-shoppers-buy-twice-as-often-as-web-visitors/)
  • 20. iPadMacBook ProMacBook Pro=Thursday, May 23, 13Fab.com mobile shoppers purchase TWICE as often as desktop shoppers. (http://gigaom.com/2012/01/11/fab-com-mobile-shoppers-buy-twice-as-often-as-web-visitors/)
  • 21. Thursday, May 23, 13One Kings Lane CEO Doug Mack was surprised one evening to see someone bought a $17,000 vintage hermes wallet...
  • 22. Thursday, May 23, 13...on their phone. That’s pretty legit.
  • 23. If you’re not considering mobiledevices you’re not just insane...Thursday, May 23, 13
  • 24. ...you’re nearly obsolete.Thursday, May 23, 13
  • 25. :)Thursday, May 23, 13
  • 26. Hi. I’m from ZURB.Thursday, May 23, 13
  • 27. ZURB has worked with startupsand enterprises for 15 years.Thursday, May 23, 13
  • 28. Thursday, May 23, 13
  • 29. Okay, mobile is a big deal.Is that a problem?Thursday, May 23, 13
  • 30. Thursday, May 23, 13Samsung makes Android devices, phones and tablets, and they’re one of the larger manufacturers.
  • 31. Samsung has made 40 different Android phones.Just. Phones.Thursday, May 23, 13http://en.wikipedia.org/wiki/Comparison_of_Android_devices#HTC
  • 32. Samsung has made 40 different Android phones.Just. Phones.Thursday, May 23, 13http://en.wikipedia.org/wiki/Comparison_of_Android_devices#HTC
  • 33. Oh, and they have 9 different resolutions.And 20 different screen sizes.Thursday, May 23, 13What are we gonna do about this? This is a LOT of variability to design for.http://en.wikipedia.org/wiki/Comparison_of_Android_devices
  • 34. Thursday, May 23, 13Maybe we could just bury our heads in the sand?
  • 35. Thursday, May 23, 13...like Adobe tried to do with Flash? Pretend it’ll go away, stick with our sweet desktop layouts, I mean pinch and zoom worksright?
  • 36. Let’s not do that.Thursday, May 23, 13
  • 37. Thursday, May 23, 13Maybe we could design a native app for every device? Very expensive. Many OS’s, many devices, many sizes.
  • 38. Thursday, May 23, 13How about a mobile app? Just mobile? What about tablets? Is that different from your desktop Web app?
  • 39. Thursday, May 23, 13Could you please point to where phones stop and tablets begin? Or where laptops begin?
  • 40. Thursday, May 23, 13Could you please point to where phones stop and tablets begin? Or where laptops begin?
  • 41. These solutions...meh.Thursday, May 23, 13These solutions have flaws. They don’t scale, they cost too much, and they presume that what we have now is what we’ll alwayshave. It’s not.
  • 42. Responsive DesignA more civilized solution for a more civilized Web.Thursday, May 23, 13
  • 43. What’s a responsive design?Thursday, May 23, 13There’s a technical definition, and we’ll get to that (briefly) in a second, but what responsive design really means is that...
  • 44. Thursday, May 23, 13...your design works here.
  • 45. Thursday, May 23, 13...your design works here.
  • 46. Thursday, May 23, 13...your design works here.
  • 47. Thursday, May 23, 13...your design works here.
  • 48. Thursday, May 23, 13...your design works here.
  • 49. Thursday, May 23, 13...your design works here.
  • 50. Thursday, May 23, 13...your design works here.
  • 51. In other words, everywhere.Thursday, May 23, 13Because you just don’t know, and you’ll never know again. People will use whatever they want to access your product or site andyou can’t stop them. All you can do is provide a great experience, or a shitty one. Or none at all.
  • 52. What is responsive, technically?Thursday, May 23, 13You really ought to know, if for no other reason than listening to Vitaly this morning, but let’s recap.
  • 53. Flexible, fluid grid.Thursday, May 23, 13It’s a flexible, fluid grid.
  • 54. Flexible, fluid grid.Thursday, May 23, 13It’s a flexible, fluid grid.
  • 55. Media styles that flex and scale.Thursday, May 23, 13
  • 56. Media queries to adapt the page.Thursday, May 23, 13
  • 57. What’s great about responsive?More like what’s not great amiriteThursday, May 23, 13
  • 58. It scales.Thursday, May 23, 13
  • 59. Thursday, May 23, 13One code to rule them all, as it were.
  • 60. Thursday, May 23, 13There’s a reason large companies like Microsoft are using responsive design – it not only works well on their devices, but all theircompetitors and that’s CRITICAL to reclaiming some of those converts.
  • 61. It’s becoming ubiquitous.Thursday, May 23, 13How many of you who’s used responsive design, or seen it, will load up a page and then just drag drag drag to resize and see ifit’s responsive? I do, and I’m sad when it’s not.
  • 62. Thursday, May 23, 13
  • 63. Thursday, May 23, 13
  • 64. Thursday, May 23, 13Even Disney, creators of the meaninglessly proprietary “Disney DVD” use responsive design for their main site.
  • 65. It has tons of great tools.Thursday, May 23, 13
  • 66. FrameworksThursday, May 23, 13Okay this is gonna get real self-serving for a moment.
  • 67. Thursday, May 23, 13
  • 68. foundation.zurb.comMIT licensed so it’s mad free.Thursday, May 23, 13
  • 69. Thursday, May 23, 13
  • 70. Thursday, May 23, 13
  • 71. Thursday, May 23, 13There are a number of other frameworks out there you could explore, they all have various interesting facets.
  • 72. Thursday, May 23, 13There are a number of other frameworks out there you could explore, they all have various interesting facets.
  • 73. Plugins andbest practices galore.Thursday, May 23, 13
  • 74. Thursday, May 23, 13
  • 75. Responsive ImagesThursday, May 23, 13
  • 76. Thursday, May 23, 13
  • 77. Lazy LoadingThursday, May 23, 13
  • 78. Thursday, May 23, 13This is an example from Luke Wroblewski that shows using Ajaxload from Filament Group to load the content for each sectionafter they’ve been opened on small devices.
  • 79. Thursday, May 23, 13
  • 80. Patterns! Patterns are cool.Thursday, May 23, 13There are tons of new patterns being developed and popularized for responsive design, navigation probably has the most,because nav is a pain in the ass.
  • 81. Thursday, May 23, 13http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  • 82. Thursday, May 23, 13Love the name of this one.
  • 83. Thursday, May 23, 13Off canvas layouts (Luke has some, Foundation has some as well, there are numerous examples these days) can be very effectiveand are a fun pattern to play with.
  • 84. Thursday, May 23, 13
  • 85. Thursday, May 23, 13
  • 86. It’s pushing the Web forward.Thursday, May 23, 13Responsive design has created some of the most interesting challenges we’ve faced so far developing for the Web, and solvingthem is creating great new tools for anyone to use (even outside the confines of the Web).
  • 87. It’s also pushing devices.Thursday, May 23, 13Devices now have rich, robust experiences to live up to, so they’ve been exposing more hardware functionality, they’ve becomefaster and used hardware to accelerate more and more...it’s very cool to see.
  • 88. What sucks about responsive?Okay it’s not all roses.Thursday, May 23, 13
  • 89. Still struggling with optimization.Thursday, May 23, 13
  • 90. Images and media arechallenging.Thursday, May 23, 13
  • 91. A single codeset is not superduper crazy optimized.Thursday, May 23, 13
  • 92. Still not as fast as native apps.Thursday, May 23, 13...and really, responsive sites and apps need to stop trying to be and act native right now. They sit in an “uncanny valley” wherethey don’t look quite right, they don’t most quite as fast...
  • 93. Down here we have a CGIstormtrooper, or Tom Hanks inthe Polar Express”“Thursday, May 23, 13Web apps that look native sit in the uncanny valley of apps – not fast enough to seem native, not quite the right conventions.Making things look native isn’t the way to go, but web apps will get there on their own.
  • 94. Doesn’t have access toeverything. Yet.Thursday, May 23, 13
  • 95. Thursday, May 23, 13Web apps can access the camera, local storage (more or less), orientation, location, and some 3D acceleration
  • 96. 3DThursday, May 23, 13Web apps can access the camera, local storage (more or less), orientation, location, and some 3D acceleration
  • 97. Thursday, May 23, 13Web apps can’t access audio/video, user profiles, 3rd party apps (except in some cases) or push notifications)
  • 98. Thursday, May 23, 13Web apps can’t access audio/video, user profiles, 3rd party apps (except in some cases) or push notifications)
  • 99. All of that stuff is irrelevant.Thursday, May 23, 13The Web will catch up, it’s a matter of time. Access to the remaining components of devices is coming through various means.
  • 100. What’s next for responsive?Totally awesome stuff.Thursday, May 23, 13
  • 101. Updated, more advancedframeworks.Thursday, May 23, 13
  • 102. Foundation 4It’s all shiny and new.Thursday, May 23, 13
  • 103. Foundation 5This summer, baby.Thursday, May 23, 13
  • 104. Bootstrap 3Competes with Foundation but @mdo’s a handsome devil.Thursday, May 23, 13
  • 105. New ToolsThursday, May 23, 13
  • 106. Thursday, May 23, 13Who would have ever thought Adobe would manage to pivot back around into such cool stuff? Not me.
  • 107. Thursday, May 23, 13
  • 108. New ApproachesThursday, May 23, 13
  • 109. Mobile FirstThursday, May 23, 13
  • 110. Thursday, May 23, 13Luke W, an advisor for ZURB, literally wrote the book on mobile first and managed to bully - I mean persuade - us into makingFoundation 4 mobile first. Smart move.
  • 111. All SemanticThursday, May 23, 13
  • 112. Semantic code = rad.<div class=”eight columns”>Presentational classes suck.</div><article>Much better.</article>article { @include grid-columns(8) }Thursday, May 23, 13
  • 113. Easier OptimizationThursday, May 23, 13Plugins like lazy load, polyfills and other, well, hacks are at least making optimization considerably easier even if it’s still not asconvenient / built-in as we’d like
  • 114. Thursday, May 23, 13
  • 115. The really hot stuff?Thursday, May 23, 13New devices and new tech
  • 116. Thursday, May 23, 13
  • 117. Thursday, May 23, 13
  • 118. Thursday, May 23, 13
  • 119. Thursday, May 23, 13
  • 120. Thursday, May 23, 13
  • 121. Thursday, May 23, 13
  • 122. The Web is everything.Thursday, May 23, 13
  • 123. Thursday, May 23, 13
  • 124. Thursday, May 23, 13
  • 125. [image] connecting peopleThursday, May 23, 13
  • 126. [image] resolving conflictsThursday, May 23, 13
  • 127. [image] teaching kidsThursday, May 23, 13
  • 128. Thursday, May 23, 13
  • 129. Thursday, May 23, 13
  • 130. Fin.Thursday, May 23, 13
  • 131. Thanks!Thursday, May 23, 13
  • 132. Work@zurbNot Work@smileyThursday, May 23, 13