8. 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
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://webaim.org/blog/user-agent-string-history/
(cc) flic.kr/p/vUBHv
19. OS X Lion
The world’s most advanced desktop
operating system advances even further.
With over 250 new features including
Multi-Touch gestures, Mission Control,
full-screen apps, and Launchpad, OS X
Lion takes the Mac further than ever.
Learn More
iCloud iOS 5 OSX Lion iPad 2 iPhone
20. !
OS X Lion
" ←
The world’s most advanced desktop
operating system advances even further.
With over 250 new features including
Multi-Touch gestures, Mission Control,
full-screen apps, and Launchpad, OS X
↑
Lion takes the Mac further than ever.
Learn More
iCloud iOS 5 OSX Lion iPad 2 iPhone
21. ! ↙
OS X Lion
" ← ←
The world’s most advanced desktop
operating system advances even further.
With over 250 new features including
Multi-Touch gestures, Mission Control,
full-screen apps, and Launchpad, OS X
↗ ↑
Lion takes the Mac further than ever.
↖
Learn More
↑ ↖
iCloud iOS 5 OSX Lion iPad 2 iPhone
22. ↑ ↗
OS X Lion
← " "
The world’s most advanced desktop
operating system advances even further.
With over 250 new features including
Multi-Touch gestures, Mission Control,
full-screen apps, and Launchpad, OS X
↙ !
Lion takes the Mac further than ever.
↘
Learn More
! ↘
iCloud iOS 5 OSX Lion iPad 2 iPhone
26. Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
1024x1536 2x 1,745kb
Extra
Large
512x768 1x 503kb
640x960 2x 746kb
Large
320x480 1x 223kb
500x750 2x 485kb
Medium
250x375 1x 145kb
27. Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
1024x1536 2x 1,745kb
Extra
Large
512x768 1x 503kb
640x960 2x 746kb
Large
320x480 1x 223kb
500x750 2x 485kb
Medium
250x375 1x 145kb
28. <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)">
<!-- Fallback content for non-JS browsers. Same src as the initial
source element. -->
<noscript><img src="small.jpg" alt="A giant stone face at The Bayon
temple in Angkor Thom, Cambodia"></noscript>
</picture>
http://www.w3.org/community/respimg/2012/03/15/polyfilling-
picture-without-the-overhead/
29. One Image, One IMG
<img src="rock-climber.jpg" alt="" />