The Future is Responsive

zurb.net/deviceGo there and just, you know, hang out.

Thursday, May 23, 13

zurb.net/deviceGo there and just, you know, hang out.


Everyone pulled it up right?



Small 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

That was only 8 types.

That’s 3 characteristics, each with only 2 possible states. Pretty simple.


Devices are different.


Devices are different. Duh.


The Web has come a long way....in really, a very short time.



We’ve made a huge transition to a whole slew of new ways to access content and services online like mobile sites


...native apps


...mobile-specific frameworks


...and responsive sites.

How much does mobile matter?


He gets this one and 9 more.


There are almost ten mobile devices sold for every baby born, every day. (Source: http://www.lukew.com/ff/entry.asp?1728)

Mobile devices will double in the next 5-8 years.

Thursday, May 23, 13http://allthingsd.com/20111010/mobile-devices-seen-doubling-by-2020-as-non-phones-dominate-wireless-airwaves/

There are already more mobile devices than humans.


http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html


That’s 3 empire state buildings of mobile devices, today.

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


http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf and http://www.lukew.com/ff/entry.asp?1427


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/)

iPad

MacBook Pro

MacBook Pro

=


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/)


One Kings Lane CEO Doug Mack was surprised one evening to see someone bought a $17,000 vintage hermes wallet...


...on their phone. That’s pretty legit.

If you’re not considering mobile devices you’re not just insane...


...you’re nearly obsolete.


:)


Hi. I’m from ZURB.


ZURB has worked with startups and enterprises for 15 years.



Okay, mobile is a big deal.Is that a problem?



Samsung makes Android devices, phones and tablets, and they’re one of the larger manufacturers.

Samsung has made 40 different Android phones.Just. Phones.


http://en.wikipedia.org/wiki/Comparison_of_Android_devices#HTC

Samsung has made 40 different Android phones.Just. Phones.


http://en.wikipedia.org/wiki/Comparison_of_Android_devices#HTC

Oh, and they have 9 different resolutions.And 20 different screen sizes.


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


Maybe we could just bury our heads in the sand?


...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?

Let’s not do that.



Maybe we could design a native app for every device? Very expensive. Many OS’s, many devices, many sizes.


How about a mobile app? Just mobile? What about tablets? Is that different from your desktop Web app?


Could you please point to where phones stop and tablets begin? Or where laptops begin?


Could you please point to where phones stop and tablets begin? Or where laptops begin?

These solutions...meh.


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.

Responsive DesignA more civilized solution for a more civilized Web.


What’s a responsive design?


There’s a technical definition, and we’ll get to that (briefly) in a second, but what responsive design really means is that...


...your design works here.













In other words, everywhere.


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.

What is responsive, technically?


You really ought to know, if for no other reason than listening to Vitaly this morning, but let’s recap.

Flexible, fluid grid.Thursday, May 23, 13

It’s a flexible, fluid grid.

Flexible, fluid grid.Thursday, May 23, 13

It’s a flexible, fluid grid.

Media styles that flex and scale.Thursday, May 23, 13

Media queries to adapt the page.Thursday, May 23, 13

What’s great about responsive?More like what’s not great amirite


It scales.



One code to rule them all, as it were.


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.

It’s becoming ubiquitous.


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.




Even Disney, creators of the meaninglessly proprietary “Disney DVD” use responsive design for their main site.

It has tons of great tools.


Frameworks


Okay this is gonna get real self-serving for a moment.


foundation.zurb.comMIT licensed so it’s mad free.





There are a number of other frameworks out there you could explore, they all have various interesting facets.


There are a number of other frameworks out there you could explore, they all have various interesting facets.

Plugins and best practices galore.



Responsive Images



Lazy Loading



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.


Patterns! Patterns are cool.


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.


http://bradfrostweb.com/blog/web/responsive-nav-patterns/


Love the name of this one.


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.



It’s pushing the Web forward.


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).

It’s also pushing devices.


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.

What sucks about responsive?Okay it’s not all roses.


Still struggling with optimization.


Images and media are challenging.


A single codeset is not super duper crazy optimized.


Still not as fast as native apps.


...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...

Down here we have a CGI stormtrooper, or Tom Hanks in the Polar Express”

“


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.

Doesn’t have access to everything. Yet.



Web apps can access the camera, local storage (more or less), orientation, location, and some 3D acceleration

3D


Web apps can access the camera, local storage (more or less), orientation, location, and some 3D acceleration


Web apps can’t access audio/video, user profiles, 3rd party apps (except in some cases) or push notifications)


Web apps can’t access audio/video, user profiles, 3rd party apps (except in some cases) or push notifications)

All of that stuff is irrelevant.


The Web will catch up, it’s a matter of time. Access to the remaining components of devices is coming through various means.

What’s next for responsive?Totally awesome stuff.


Updated, more advanced frameworks.


Foundation 4

It’s all shiny and new.


Foundation 5

This summer, baby.


Bootstrap 3

Competes with Foundation but @mdo’s a handsome devil.


New Tools



Who would have ever thought Adobe would manage to pivot back around into such cool stuff? Not me.


New Approaches


Mobile First



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.

All Semantic


Semantic code = rad.

<div class=”eight columns”> Presentational classes suck.</div>

<article> Much better.</article>

article { @include grid-columns(8) }


Easier Optimization


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


The really hot stuff?


New devices and new tech







The Web is everything.




[image] connecting people


[image] resolving conflicts


[image] teaching kids




Fin.


Thanks!


Work

@zurb

Not Work

@smiley


The Future is Responsive

Technology

3rd party

mobile shoppers

desktop shoppers

push notifications

13web apps

fluid grid

uncanny valley

interesting