The Past, Present and Future of Responsive Web Design The humble beginnings of the Mobile. The Birth - It all started with WAP and frustrated developers providing WML powered sites to even more frustrated users. The Toddler Years - Palm, Blackberry. Although with severely limited browsers, recognizable devices are starting to get hooked up. Growing Up - iPhone and many other powerful devices accessing the web with pretty darn good browsers. Mobile Sites -Great in theory, not in practice. Advantages of mobile "optimized" websites Improved UX -Nobody wants to browse a desktop website on their phone. Pinch, zoom and scroll is not the best way to consume! Better Performance -Remove the fluff and provide the user with what they want, when they want it. Optimized images and asset management can provide huge performance gains. Engagement & Context -Provide your users with mobile optimized features. Click to call, geolocation, mapping, your mobile users are ready and waiting. Disadvantages of mobile "optimized" websites - Double the code By definition you have two separate, although somewhat related, code bases to maintain. Double the work, double the aggravation. Redirecting Redirecting your users is a real strain on perceived performance. Before the client can even begin to download your page they must be redirected to the mobile site. Inconsistent links Inconsistent links only worsen this problem. If I share a url from the mobile site and my buddy opens it on a desktop machine, there's another load of unrequired redirects. The Present Oh Hai Responsive Web Design. Term coined by Ethan Marcotte coined the term responsive web design in a May 2010 article in A List Apart, this is where it all began. Fluid grids - Responsive grid systems are built based on percentage widths relative to the viewport, as opposed to fixed pixel values. Media Queries: Introduced in CSS3, media queries allow us to target device classes as well as the physical characteristics of the device rendering of the page. Max width, min width, resolution, orientation. Media Queries = Happy Developers! Write once, run anywhere. Device divergence has rendered desktop & mobile an obsolete design pattern Advantages of RWD - Single codebase Having a single codebase that molds to each client makes maintaining your application 100 times easier and makes development way more efficient. All devices are equal You have a single application served up to all clients, only the CSS changes. No longer are mobile users punished for being mobile users, they get your app in all it's glory. Better SEO -Your one application has one sitemap and one set of urls. One set of urls for users to share and one set of urls for you to optimize and Google to crawl all over. Disadvantages of RWD - Massive Images To be truly responsive we must adapt to the needs of the individual

2. The Past

3. Web
The humble
beginnings of the
Mobile
The Birth
It all started with WAP and frustrated
developers providing WML powered sites to
even more frustrated users.
The Toddler Years
Palm, Blackberry. Although with severely
limited browsers, recognizable devices are
starting to get hooked up.
Growing Up
iPhone and many other powerful devices
accessing the web with pretty darn good
browsers.

4. Mobile Sites
Great in theory, not in practice.

5. Improved UX
Nobody wants to browse a desktop website on
their phone. Pinch, zoom and scroll is not the
best way to consume!
Better Performance
Remove the fluff and provide the user with
what they want, when they want it. Optimized
images and asset management can provide
huge performance gains.
Engagement & Context
Provide your users with mobile optimized
features. Click to call, geolocation, mapping,
your mobile users are ready and waiting.
Advantages of
mobile "optimized"
websites

6. Double the code
By definition you have two separate, although
somewhat related, code bases to maintain.
Double the work, double the aggravation.
Redirecting
Redirecting your users is a real strain on
perceived performance. Before the client can
even begin to download your page they must
be redirected to the mobile site.
Inconsistent links
Inconsistent links only worsen this problem. If
I share a url from the mobile site and my
buddy opens it on a desktop machine, there's
another load of unrequired redirects.
Disadvantages of
mobile "optimized"
websites

7. The Present

8. Oh Hai,
Responsive
Web Design.
Term coined
Ethan Marcotte coined the term responsive
web design in a May 2010 article in A List Apart,
this is where it all began.
Fluid grids
Responsive grid systems are built based on
percentage widths relative to the viewport, as
opposed to fixed pixel values.
Media Queries
Introduced in CSS3, media queries allow us to
target device classes as well as the physical
characteristics of the device rendering of the
page. Max width, min width, resolution,
orientation. Media Queries = Happy Developers!

9. Write once, run anywhere.
Device divergence has rendered desktop &
mobile an obsolete design pattern
</>

10. Single codebase
Having a single codebase that molds to each client makes maintaining
your application 100 times easier and makes development way more
efficient.
All devices are equal
You have a single application served up to all clients, only the CSS
changes. No longer are mobile users punished for being mobile users,
they get your app in all it's glory.
Better SEO
Your one application has one sitemap and one set of urls. One set of urls
for users to share and one set of urls for you to optimize and Google to
crawl all over.
Advantages of RWD

11. Massive Images
Unfortunately some developers think that RWD means you can throw the
same assets at every client. Your poor mobile users, viewing your app on a
3G connection, are now stuck downloading (and often paying for) your
ridiculous 1400x800 px pngs.
Load + Shrink
This is one of the great RWD sins and is known as the dreaded "load +
shrink". You make your users load those assets and then shrink them with
CSS to half the size.
Load + Hide
Another of the great RWD sins is to load + hide. Again, wasting your users
bandwidth (and often money) on unnecessary bytes.
Disadvantages of RWD

12. #PERFMATTERS
RWD should be embraced but
implemented with care

13. To be truly responsive
we must adapt to the needs of the individual

14. Best of the RESS
Responsive Images
Appropriate formats
Progressive Enhancement
Compress and optimize
#perfmatters

15. Best of the RESS
Responsive Images
Appropriate formats
Progressive Enhancement
Compress and optimize
#perfmatters
Responsive design + server side components
Don't load & shrink, serve appropriate files
jpg, png, gif, svg, webp, data URI, canvas...
Not graceful degradation, start small
Compress, gzip, dynamically load
Understatement of the year, slow < pinch, zoom, scroll

16. Frameworks
are here to help
Don't reinvent the wheel

17. The ultimate tool in providing truly responsive
applications. Modernizr detects a clients
HTML/CSS feature support so you can provide
the most interactive experience possible for the
individual.
Asynchronous module definition is the future of
loosely coupled JavaScript in the browser.
RequireJS makes dynamically loading HTML, CSS
and JS straightforward.
No developer is complete without Chrome dev
tools, features like the network inspector and
the awesome tracing tool are essential in
creating bandwidth aware apps.

18. This provides a server side solution to Gumby’s
responsive images module. Visitor’s screen
sizes are detected and appropriate images
created, cached and delivered.
Large JavaScript libraries are becoming too
bloated for mobile. The release of jQuery 2.0
(which loses a lot of polyfil and functionality
redundant to mobile) and lightweight CSS
based libraries like Zepto are a major
improvement.
A JavaScript library enabling easy control of
multi touch gestures. Tap, swipe, pinch are all
made easy with Hammer.

19. Gumby's Little
Helpers
Responsive Images
This module allows you to specify different
inline/background images to load based on
media queries and feature support.
Shuffle the Dom
Don't use CSS to load + hide dom fragments
with media queries, use this module to shuffle
the dom around with media queries.
Responsive Text
Based on fittext.js, let your copy expand to fill
the available space, making titles as impactful
as possible all the time.
Check out Gumby Framework

20. The Future

21. To Infinity &
Beyond!
Better APIs
Look forward to network and battery APIs, the
Shadow DOM, components, HTML
templates/imports and formats like Google's
awesome webp and webm.
Moar CSS!
We'll get new media queries based on attached
pointer devices, hover capabilities, luminosity
and more, as well as responsive grids going
native to CSS.
Device convergence
Device divergence brought the need for rwd,
now the way we interact with those devices is
converging, point, click, tap, swipe, multi input
is the future.

22. #CONTEXTFIRST
RWD shouldn’t be about viewport
size, it’s more than that...

23. Context,
context, context.
Not mobile first, or anything first
Content and context first

24. Better. Brand. Experiences.
digitalsurgeons.com