6. WHY DON’T WE ASK
THE BROWSER?
(cc) flic.kr/p/vUBHv
Friday, October 5, 12
7. Mozilla/1.0 (Win3.1)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
Friday, October 5, 12
8. Mozilla/1.0 (Win3.1)
Mozilla/1.22 (compatible;
MSIE 2.0; Windows 95)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
Friday, October 5, 12
9. Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
Friday, October 5, 12
10. Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
http://webaim.org/blog/user-agent-string-history/
(cc) flic.kr/p/vUBHv
Friday, October 5, 12
11. FEATURE TESTING
vs. BROWSER SNIFFING
1
2
3
Friday, October 5, 12
12. FEATURE TESTING
vs. BROWSER SNIFFING
1 Browser width
2
3
Friday, October 5, 12
14. The jQuery approach
// returns width of browser viewport
$(window).width();
// returns height of browser viewport
$(window).height();
// returns width of HTML document
$(document).width();
// returns height of HTML document
$(document).height();
http://api.jquery.com/width/ & http://api.jquery.com/height/
Friday, October 5, 12
15. CSS media queries
// default, mobile-1st CSS rules devices go here
@media screen and (min-width: 480px) { ... }
@media screen and (min-width: 600px) { ... }
@media screen and (min-width: 768px) { ... }
@media screen and (min-width: 910px) { ... }
Friday, October 5, 12
26. “ [In 2013, Intel sees their
product line] offer a higher
resolution experience than a
top-of-the-line 1080p HDTV.”
http://liliputing.com/2012/04/intel-retina-laptop-
desktop-displays-coming-in-2013.html
Friday, October 5, 12
33. FEATURE TESTING
vs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
Friday, October 5, 12
34. SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
(cc) flic.kr/p/4DziUN
Friday, October 5, 12
35. “ Testing for speed of an
internet connection is like
stepping in front of a car to see
how fast it is.”
(cc) flic.kr/p/4DziUN
Friday, October 5, 12
36. “ Testing for speed of an
internet connection is like
stepping in front of a car to see
how fast it is.”
“ But, Christopher, you only
have to test it once.”
(cc) flic.kr/p/4DziUN
Friday, October 5, 12
37. Speed test image
https://github.com/adamdbradley/foresight.js
Friday, October 5, 12
38. Speed test image
+50k
https://github.com/adamdbradley/foresight.js
Friday, October 5, 12
44. “ ...the server has no way to
know what resolution the
client’s device is, so it can’t
send the appropriately sized
embeded images.”
http://mattwilcox.net/archive/entry/id/1053/
Friday, October 5, 12
47. IMG
GIMME THAT OLD SCHOOL
1 .htaccess
2 <picture> and/or srcset
3
Friday, October 5, 12
48. media queries in HTML
<video controls>
<source type="video/mp4" src="video/windowsill_small.mp4"
media="all and (max-width: 480px), all and (max-device-width:
480px)">
<source type="video/webm" src="video/windowsill_small.webm"
media="all and (max-width: 480px), all and (max-device-width:
480px)">
<source type="video/mp4" src="video/windowsill.mp4">
<source type="video/webm" src="video/windowsill.webm">
<!-- proper fallback content goes here -->
</video>
http://www.w3.org/community/respimg/2012/03/15/polyfilling-
picture-without-the-overhead/
Friday, October 5, 12
49. <picture> patch
<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<!-- <source src="small.jpg"> -->
<source src="small.jpg">
<!-- <source src="medium.jpg" media="(min-width: 400px)"> -->
<source src="medium.jpg" media="(min-width: 400px)">
<!-- <source src="large.jpg" media="(min-width: 800px)"> -->
<source src="large.jpg" media="(min-width: 800px)">
<!-- <source src="extralarge.jpg" media="(min-width: 1000px)"> -->
<source src="extralarge.jpg" media="(min-width: 1000px)">
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified
source element. -->
<noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in
Angkor Thom, Cambodia"></noscript>
</picture>
http://wil.to/picturefill/
Friday, October 5, 12
50. ADD IF-ELSE HTML, JS,
BORROW <VIDEO>, &
THEN <IMG>
Friday, October 5, 12
88. WORKAROUNDS &
TRICKS
1 background-size: auto
2 SVG
3 font-based solutions
(cc) flic.kr/p/64fGf6
Friday, October 5, 12
89. “ ...if you use <meta
charset="utf-8"> (you should
be for HTML5), you’re adding
common Unicode characters
like and ✆, and you don’t
need a specific font’s version...
just copy and paste them into
your HTML.”
Friday, October 5, 12
90. Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
Friday, October 5, 12
94. IMG
GIMME THAT NEW SCHOOL
1
2
3
Friday, October 5, 12
95. IMG
GIMME THAT NEW SCHOOL
1 simple design for users
2
3
#rwdimg
Friday, October 5, 12
96. IMG
GIMME THAT NEW SCHOOL
1 simple design for users
2 browser, server handshake
3
#rwdimg
Friday, October 5, 12
97. IMG
GIMME THAT NEW SCHOOL
1 simple design for users
2 browser, server handshake
3 same, several formats
#rwdimg
Friday, October 5, 12
98. “ JavaScript has solved a lot of
our past problems, so it’s
human nature to beseech her
to save us again.”
http://www.alistapart.com/articles/mo-pixels-mo-problems/
Friday, October 5, 12