Why Teams call analytics are critical to your entire business
Responsive Responsive Design
1. Tim Kadlec @tkadlec 2012 Web Peformance Summit 8/29/2012
Responsive
Responsive Design
Building sites that are flexible and fast
NY Web Perf Meetup | April 23, 2013
2. — Ethan Marcotte
Now more than ever, we’re designing work
meant to be viewed along a gradient of
different experiences. Responsive web
design offers us a way forward, finally
allowing us to “design for the ebb and flow
of things.
http://alistapart.com/article/responsive-web-design
3.
4. — John Allsopp
The control which designers know in the
print medium, and often desire in the web
medium, is simply a function of the
limitation of the printed page. We should
embrace the fact that the web doesn’t have
the same constraints, and design for this
flexibility.
http://alistapart.com/article/dao
6. — Ethan Marcotte
Now more than ever, we’re designing work
meant to be viewed along a gradient of
different experiences. Responsive web
design offers us a way forward, finally
allowing us to “design for the ebb and flow
of things.
gradient of
different experiences
http://alistapart.com/article/responsive-web-design
7. — Ethan Marcotte
Now more than ever, we’re designing work
meant to be viewed along a gradient of
different experiences. Responsive web
design offers us a way forward, finally
allowing us to “design for the ebb and flow
of things.
gradient of
different experiences
http://alistapart.com/article/responsive-web-design
8. — Stephanie Rieger
Shoot me now…responsive design has
seemingly become confused with an
opportunity to reduce performance rather
than improve it.
https://twitter.com/stephanierieger/status/245240465572642816
31. March 2012: 829kb
March 2013: 1031kb
http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
32.
33. Performance needs to matter because it matters to users
A culture of performance
34. — A friend
I doubt anyone really wants to release a
site that doesn't perform well, it's just a
product of not being afforded the luxury of
time and top-down pressure.
50. <div data-picture data-alt="A giant stone face at The
Bayon temple in Angkor Thom, Cambodia">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg"
data-media="(min-width: 400px)"></div>
<div data-src="large.jpg"
data-media="(min-width: 800px)"></div>
<div data-src="extralarge.jpg"
data-media="(min-width: 1000px)"></div>
<!-- Fallback content for non-JS browsers. Same
img src as the initial, unqualified source element. -->
<noscript>
<img src="external/imgs/small.jpg" alt="A
giant stone face at The Bayon temple in Angkor Thom,
Cambodia">
</noscript>
</div>
88. Embedded External
One HTTP request Many HTTP requests
Large file could be hard to maintain Organization can be easier
Extra weight, regardless of if needed
Smaller CSS for device not supporting
media queries
All styles downloaded
All styles downloaded (if media queries
supported)