1. CHRISTOPHER SCHMITT @teleject
DESIGNING WEB
&MOBILE GRAPHICS
SXSW 2013

2. @teleject
CHRISTOPHER SCHMITT

3. CHRISTOPHER SCHMITT

5. WHY DON’T WE ASK
THE BROWSER?
(cc) flic.kr/p/vUBHv

6. Mozilla/1.0 (Win3.1)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv

7. Mozilla/1.0 (Win3.1)
Mozilla/1.22 (compatible;
MSIE 2.0; Windows 95)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv

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

12. SVG

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

23. (cc) flic.kr/p/64fGf6

25. 446kb < 8,755.2kb
0% vs 100%
(cc) flic.kr/p/64fGf6

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="" />

31. EXTREMELY
COMPRESSED PROBLEMS
(cc) flic.kr/p/64fGf6

35. THANK YOU!
CHRISTOPHER SCHMITT @teleject
http://goo.gl/gSYmS @DWMGbook