The document discusses the rise of responsive design and mobile devices. It notes that with dozens of phone models and screen sizes, designing separate mobile and desktop sites is impractical. Responsive design, which uses fluid grids and media queries to adapt a single website across devices, is presented as a better solution. The document outlines the benefits of responsive design, such as reaching all users and reducing development costs, while also addressing challenges like optimization and accessing all device features. It predicts continued improvements in responsive frameworks, tools, and new technologies that will push responsive design forward.
4. Thursday, May 23, 13
Small screen / low res / landscape = turtle
Small screen / low res / portrait = snail
Small screen / hi res / landscape = butterfly
Small screen / hi res / portrait = parrot
Large screen / low res / landscape = giraffe
Large screen / low res / portrait = elephant
Large screen / hi res / landscape = tiger
Large 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
14. He gets this one and 9 more.
Thursday, May 23, 13
There 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 the
next 5-8 years.
Thursday, May 23, 13
http://allthingsd.com/20111010/mobile-devices-seen-doubling-by-2020-as-non-phones-dominate-wireless-
airwaves/
16. There are already more mobile
devices than humans.
Thursday, May 23, 13
http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
17. Thursday, May 23, 13
That’s 3 empire state buildings of mobile devices, today.
18. Mobile users will outnumber desktop this year.
0
500
1000
1500
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
you are here
>
Mobile Desktop
Thursday, May 23, 13
http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf and http://www.lukew.com/ff/entry.asp?
1427
19. Thursday, May 23, 13
Fab.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. iPad
MacBook Pro
MacBook Pro
=
Thursday, May 23, 13
Fab.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, 13
One Kings Lane CEO Doug Mack was surprised one evening to see someone bought a $17,000 vintage hermes wallet...
29. Okay, mobile is a big deal.
Is that a problem?
Thursday, May 23, 13
30. Thursday, May 23, 13
Samsung 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, 13
http://en.wikipedia.org/wiki/Comparison_of_Android_devices#HTC
32. Samsung has made 40 different Android phones.
Just. Phones.
Thursday, May 23, 13
http://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, 13
What 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, 13
Maybe 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 works
right?
37. Thursday, May 23, 13
Maybe we could design a native app for every device? Very expensive. Many OS’s, many devices, many sizes.
38. Thursday, May 23, 13
How about a mobile app? Just mobile? What about tablets? Is that different from your desktop Web app?
39. Thursday, May 23, 13
Could you please point to where phones stop and tablets begin? Or where laptops begin?
40. Thursday, May 23, 13
Could you please point to where phones stop and tablets begin? Or where laptops begin?
41. These solutions...meh.
Thursday, May 23, 13
These solutions have flaws. They don’t scale, they cost too much, and they presume that what we have now is what we’ll always
have. It’s not.
43. What’s a responsive design?
Thursday, May 23, 13
There’s a technical definition, and we’ll get to that (briefly) in a second, but what responsive design really means is that...
51. In other words, everywhere.
Thursday, May 23, 13
Because you just don’t know, and you’ll never know again. People will use whatever they want to access your product or site and
you 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, 13
You really ought to know, if for no other reason than listening to Vitaly this morning, but let’s recap.
60. Thursday, May 23, 13
There’s a reason large companies like Microsoft are using responsive design – it not only works well on their devices, but all their
competitors and that’s CRITICAL to reclaiming some of those converts.
61. It’s becoming ubiquitous.
Thursday, May 23, 13
How 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 if
it’s responsive? I do, and I’m sad when it’s not.
78. Thursday, May 23, 13
This is an example from Luke Wroblewski that shows using Ajaxload from Filament Group to load the content for each section
after they’ve been opened on small devices.
80. Patterns! Patterns are cool.
Thursday, May 23, 13
There 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, 13
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
83. Thursday, May 23, 13
Off canvas layouts (Luke has some, Foundation has some as well, there are numerous examples these days) can be very effective
and are a fun pattern to play with.
86. It’s pushing the Web forward.
Thursday, May 23, 13
Responsive design has created some of the most interesting challenges we’ve faced so far developing for the Web, and solving
them 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, 13
Devices now have rich, robust experiences to live up to, so they’ve been exposing more hardware functionality, they’ve become
faster 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
91. A single codeset is not super
duper 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” where
they don’t look quite right, they don’t most quite as fast...
93. Down here we have a CGI
stormtrooper, or Tom Hanks in
the Polar Express”
“
Thursday, May 23, 13
Web 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.
95. Thursday, May 23, 13
Web apps can access the camera, local storage (more or less), orientation, location, and some 3D acceleration
96. 3D
Thursday, May 23, 13
Web apps can access the camera, local storage (more or less), orientation, location, and some 3D acceleration
97. Thursday, May 23, 13
Web apps can’t access audio/video, user profiles, 3rd party apps (except in some cases) or push notifications)
98. Thursday, May 23, 13
Web 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, 13
The 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
110. Thursday, May 23, 13
Luke W, an advisor for ZURB, literally wrote the book on mobile first and managed to bully - I mean persuade - us into making
Foundation 4 mobile first. Smart move.
113. Easier Optimization
Thursday, May 23, 13
Plugins like lazy load, polyfills and other, well, hacks are at least making optimization considerably easier even if it’s still not as
convenient / built-in as we’d like