A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/. Event page: https://www.facebook.com/events/296799847060237/

1. Responsive websites.
Toolbox
@appspirina
WARSAW, 29.03.2012

2. Agenda
• Feature detection • Responsive images
• Media Queries 101 • Micro libraries
• Viewport Tricks • jQuery plugins
• Performance • Mobile Wordpress
• CSS frameworks • Browser testing

3. PROGRESSIVE
enhancement
vs
PIXEL
perfection

4. Source: Justin Avery (CC BY-SA 3.0)
Interfaces don’t have to
look the same everywhere.
TV already solved this problem.

5. “Android WebKit
is the closest thing to being
the IE6 of mobile development for me.”
Dion Almaer, A day in the life of Android WebKit dealings
http://www.flickr.com/photos/thebetancourts/899849126/

6. We know There are
features: constraints:
✦ screen size ✦ screen size
✦ local storage ✦ no touch
✦ touch ✦ poor JavaScript
✦ canvas ✦ no canvas
✦ SVG ✦ isMSIE
Hat tip: Yiibu

7. Feature detect

9. Media Queries 101
http://www.flickr.com/photos/seeminglee/3967329241/

10. Party like it’s 1998!
<link rel="stylesheet" media="screen, projection" href="normal.css">
<link rel="stylesheet" media="print" href="print.css">
CSS2 media types

11. CSS3 Media Queries
<link rel="stylesheet" type="text/css"
href="example.css" media="screen and (color)">
Media type Expression

12. Better CSS3 Media Queries
Increase maintainability with @import:
@import url("example.css") screen and (color);
Save HTTP requests:
@media screen and (color) {
body { background: #f00; }
}

13. max/min
-width or
-device-width?
✦ former updates on orientation change, latter doesn’t
✦ only max/min-width will be visible in desktop browser

14. Detect high DPI screens
Just retina display:
<link rel="stylesheet"
media="only screen and (-webkit-min-device-pixel-ratio: 2)"
type="text/css" href="highdpi.css" />

15. “Remove iPhone from ass.”
PPK, The iPhone obsession
http://www.flickr.com/photos/redux/5065152716/

16. Detect high DPI screens
Saves HTTP request, non-iOS-specific:
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* Styles */
}

17. Detect iPad orientation
<link rel="stylesheet"
media="all and (orientation: landscape)"
href="landscape.css">
<link rel="stylesheet"
media="all and (orientation: portrait)"
href="portrait.css">

18. Test it!
• Screenfly
• Responsive Design
Testing
• Responsive Design
Test Bookmarklet

19. Browser support
— caniuse.com

20. Need support
for IE6-8?
respond.js
https://github.com/scottjehl/Respond

21. Viewport Tricks
http://www.flickr.com/photos/neilkrug/3934372897/

22. Viewport demystified
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=500 Custom width setting
minimum-scale=1.0 Prevents from zooming out
maximum-scale=1.0 Prevents from zooming in. Useful with forms
user-scalable=no Use cautiously. Mostly for mobile-specific designs

23. Hey girl,
when I see you,
my iPhone
gets 2x initial zoom

24. Home screen icon
<link rel="apple-touch-icon" href="apple-touch-icon.png">
pported by Andr oid 2.1+, too!
su

25. Home screen icon
iOS adds by default:
• Rounded corners
<link rel="apple-touch-icon-precomposed"
• Drop shadow href="apple-touch-icon-precomposed.png">
• Reflective shine
prevents addition of iO
S effects

26. Home screen icon
144 × 144 iPad ‘Retina’ display
114 × 114 iPhone ‘Retina’ display
72 × 72 iPad, iPad 2
57 × 57 non-Retina iOS and others
Complete snippet:
http://mathiasbynens.be/notes/touch-icons

27. Hiding address bar
After adding as a bookmark:
<meta name="apple-mobile-web-app-capable" content="yes">
Cross-browser solution:
https://github.com/scottjehl/Hide-Address-Bar

28. iOS viewport scaling bug
Portrait Landscape

29. iOS viewport scaling bug fix
if (navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta
[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0,
maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-
scale=0.25, maximum-scale=1.6';
}, false);
}
}
— http://adactio.com/journal/4470/

30. Performance
http://www.flickr.com/photos/frinky/2548934532/

31. Mobile first, stupid!

32. Decrease dependencies

33. Load resources conditionally
The Boston Globe used the following methodology:
ASSETS DESIGN
depend on depends on
screen window
dimensions dimensions

34. Optimize performance
✦ Mobile perf bookmarklet
✦ YSlow for mobile bookmarklet

35. Use CSS Data URL generators
or… built-in editor tools
(e.g. implemented in Sublime)

36. Mobile-friendly frameworks
http://www.flickr.com/photos/dunechaser/3385957841/

42. Develop your own!
Starbucks style guide:
http://www.starbucks.com/static/reference/styleguide/

43. 6 takes to responsive images
http://www.flickr.com/photos/mightyboybrian/3457507731/

44. max-
width:
100%;
Doesn’t provide resources optimization

45. lowsrc
Defined as obsolete in HTML5
Needs 2 http requests

46. Standard
JavaScript
replacement
Uses up the most resources

47. 1px
gif
Relies on JS for displaying content. Poor idea.

48. data-highsrc
developed by Filament Group
used on Boston Globe

49. Adaptive-images.com
by Matt Wilcox
✦ PHP solution
✦ quick to set up
✦ doesn’t work with CDNs

50. Micro libraries
http://www.flickr.com/photos/lrargerich/4999906554/

54. jQuery Plugins
http://www.flickr.com/photos/vidyo/6109749573/

59. Wordpress goes mobile
http://www.flickr.com/photos/andivszf/5306544164/

60. 1. Complete plugins
✦ WPTouch
✦ Wordpress Mobile Pack
✦ MobilePress
WPTouch plugin used on
Stephen Fry’s website

61. 2. Responsive themes
✦ Twenty ten fully responsive
equivalent available
✦ List of responsive themes
at Free Themes Directory grows constantly
✦ Lots of responsive premium themes
on Forest, WooThemes and Themify
http://responsivetwentyten.com/

62. 3. Theme switchers
Theme switchers usually base on user agent sniffing
to serve users separate WordPress theme.
✦ Wordpress Mobile Pack
✦ Mobile Smart
✦ Device Theme Switcher

63. 4. Responsive design helpers
✦ Mobble
if (is_mobile()) {
✦ Dropdown Menus echo "Dude, you rock."
}
✦ WP Fluid Images

64. Browser Testing
http://www.flickr.com/photos/blakespot/6860486028/

67. There are
38 to solve your
EMULATORS *
99
P R O B LEMS
* http://www.mobilexweb.com/emulators

69. Testing on
REAL
DEVICES
is crucial.

70. Building your pool of devices
✦ Analyze your website’s traffic
✦ Review the local platform landscape
✦ Check against device-specific factors
(form, screen size, performance, DPI)
✦ Compare with project-specific factors
(location-based?)
— Stephanie Rieger,
http://stephanierieger.com/strategies-for-choosing-test-devices/

71. Thanks!
Q&A
Wojtek Zając (@theanxy)
This work is licensed
http://www.slideshare.net/wojciechzajac under a Creative
Commons Attribution
3.0 Unported License

72. Credit where it’s due
Based on the brilliant research and works by:
• Scott Jehl • Matt Wilcox • Yiibu.com
• Patrick H. Lauke • Brad Frost
• Russ Weakley • Rachel McCollin
& others.
First slide photo: http://www.flickr.com/photos/johnmcnab/5758738799/
Stephanie Rieger: http://www.flickr.com/photos/29022619@N03/6116794697/