Responsive Design for WordPress Presented by Shannon Smith • Technical Track • WordCamp Montreal 2012 Responsive design: is it mobile, fluid, dynamic, or all of the above? A summary of all the ways you can get your WordPress site ready for the responsive Web. I’ll look at responsive images, typography, grids and video. I’ll cover online services that create a responsive version of your site, special WordPress plugins, responsive-ready WordPress themes, and more. I’ll talk about how to target specific devices, what to avoid and what’s best for SEO. Requires familiarity with WordPress, HTML and CSS. This talk is intended for web designers and developers. Shannon Shannon is the founder of Café Noir Design, a boutique Montreal web design company specializing in multilingual web development. She builds beautiful, functional websites that her clients can update themselves and that are easy for search engines to find. She support things like making the web accessible for everyone, using open source software, helping organizations find greener more sustainable ways to operate through online technology and helping non-profits with online community organizing. Also foodie and mother of four.

1. Responsive Design
for WordPress
WordCamp Montréal 2012
August 19, 2012
Sunday, 19 August, 12

2. Shannon Smith
Web Developer
Café Noir Design
www.cafenoirdesign.com
@cafenoirdesign
Sunday, 19 August, 12

3. Why Design for Mobile?
Sunday, 19 August, 12

4. Cell Phone Use
Sunday, 19 August, 12

5. Mobile Browsing
✤ 8.5% of all Web browsing from mobile devices (Net Application/
Statcounter)
✤ 4.2% of U.S. Web browsing comes on the iPhone, 4.0% on
Android devices, and 4.2% on the iPad with BlackBerry next at
0.46%. (As of Jan 2012, Netmarketshare)
✤ 50% smart phone penetration by 2014 (eMarketer)
✤ Mobile retail dollars doubled between April and December
2011 (RichRelevance)
Sunday, 19 August, 12

6. Share of Canadian Non-Computer
Device Traffic - May 2011
iPad
iPod Touch Android Tablet
15% Other tablet
iPad
34% iPhone
Android Phone
Android Phone
8% Other Smart Phone
Feature Phone
iPod Touch
iPhone Other
35%
Source: comScore Device Essentials
http://bit.ly/mJVyy5
Sunday, 19 August, 12

7. Easy Solutions
Sunday, 19 August, 12

8. Online Services for Any Site
✤ Via RSS feed: MoFuse
and Mippin Mobilizer,
WireNode, Mobify,
dotMobi
✤ Google Mobile
Optimizer
Sunday, 19 August, 12

9. Mobile Landing Page
✤ http://buildinternet.com/2011/01/add-a-
mobile-landing-page-to-your-site/
Sunday, 19 August, 12

10. WordPress Solutions
✤ Mobile-Ready Themes (Mobius, iPhonista)
✤ Mobile Frameworks (Obox, JQTouch)
✤ Free Plugins (MobilePress, WPTouch, WordPress Mobile Edition,
WPTap, WordPress Mobile Pack, BuddyPress Mobile)
✤ Premium Plugins (WPTouch Pro)
✤ Plugins for online services
✤ Tools for Admins (WordPress for iPhone, Blackberry, and
Android, and WPhone)
Sunday, 19 August, 12

11. WPTouch
Sunday, 19 August, 12

12. Custom Mobile Site
Sunday, 19 August, 12

13. Planning & Testing
Sunday, 19 August, 12

14. What are we designing for?
✤ OS
✤ Browser
✤ Screen resolution
✤ Screen aspect ratio
✤ Special capabilities
Sunday, 19 August, 12

15. Design for iOS First
✤ iPhone (landscape and portrait)
✤ iPad (portrait)
Sunday, 19 August, 12

16. Other OSs?
✤ Android: which one?
✤ Blackberry: market share?
✤ Windows: market share?
✤ OS, resolution, screen dimensions
Sunday, 19 August, 12

17. How are we serving this?
✤ Server-side methods & the UA (User Agent) string
✤ Client-side methods & media queries
✤ Measuring screen size with javascript
http://css-tricks.com/snippets/javascript/redirect-mobile-devices/
✤ PHP function to detect mobile user agents & browsers
http://detectmobilebrowsers.mobi/
Sunday, 19 August, 12

18. Serving with WordPress
✤ Theme Switch plugin
http://digwp.com/2009/12/redirect-
mobile-users-to-mobile-theme/
✤ Built in conditional tags
<?php if ( $is_iphone ) {?>
<?php include( TEMPLATEPATH . '/mobile/single.php' ); ?>
<?php } else { ?>
// entire contents of your regular single.php template
<?php } ?>
Sunday, 19 August, 12

19. What needs to change
✤ Dimensions
✤ Bandwidth
✤ Font-size
✤ Features
✤ Floated elements
✤ Mouseover states
✤ Flash
Sunday, 19 August, 12

20. Tools
✤ Browser testing tools
✤ Emulators iOS SDK, Android SDK, Online Opera Mini Emulator
✤ Screen Capture Tools (iPhone-Simulator Cropper)
✤ Validators (W3C mobileOK Checker)
✤ Screen width bookmarklets (RWD Bookmarklet)
✤ Adobe Shadow
Sunday, 19 August, 12

21. Responsive Wireframing
✤ Style Tiles
(http://styletil.es)
Sunday, 19 August, 12

22. Images for Mobile
Sunday, 19 August, 12

23. Icons
✤ iPhone icon (rel="apple-touch-icon")
114x114 pixels
✤ Opera browser icon (rel="icon")
195x195px
✤ Precomposed icons
✤ Retina display icons (Append @2x) 144x144px
Sunday, 19 August, 12

24. <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
Sunday, 19 August, 12

25. Images
✤ Double image dimensions, then resize
✤ Individual component caching: iOS 3.x will only cache HTML
pages under 25k , iOS 4 102.4 kb per item, iOS5 4MB
✤ Total component caching: Older Android and iOS 4 set limit at
2MB, iOS 5 at 100 MB and Android Chrome at 250 MB
✤ gzip has no effect on cache-ability on any device
✤ http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/
Sunday, 19 August, 12

26. Variable Resolution
✤ Use fewer images
✤ Use CSS for images
✤ Use icon fonts
✤ High-resolution iOS: For every image at a normal resolution (or
@1x), have a high-resolution version (@2x)
✤ @media(-webkit-min-device-pixel-ratio: 2) { #element { background-image('image-2x.png'); } }
✤ Use sprites
✤ Use fluid images (width in em)
Sunday, 19 August, 12

27. HTML for Mobile
Sunday, 19 August, 12

28. Semantic Web
✤ Always start with semantic code
Sunday, 19 August, 12

29. Targeting Viewport Dimensions
& Orientation
✤ Hardboiled CSS3
Media Queries
(Andy Clarke)
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
Sunday, 19 August, 12

30. Targeting by Device
✤ iOS retina display
@media only screen and (-webkit-min-device-pixel-ratio: 2)
✤ Android high-resolution
@media only screen and (-webkit-device-pixel-ratio:1.5)
✤ Windows 7
<!--[if IEMobile 7]>
✤ <link rel="stylesheet" type="text/css" href="mobile.css"
href="mobile.css" media="screen" />
✤ <![endif]-->
Sunday, 19 August, 12

31. HTML Head
✤ Icon links
✤ Viewport meta tag or 980
pixels?
Sunday, 19 August, 12

32. Accessibility
✤ Pinch to zoom: body {-webkit-
text-size-adjust:100%;}
✤ Disable user zoom:
Accessibility and maximum-
scale=1.0
✤ “auto-zoom when changing
orientation” feature
✤ http://mattgemmell.com/2010/12/19/accessibility-
for-iphone-and-ipad-apps
✤ http://www.456bereastreet.com/archive/201012/
controlling_text_size_in_safari_for_ios_without_disabli
ng_user_zoom/
Sunday, 19 August, 12

33. CSS for Mobile
Sunday, 19 August, 12

34. CSS Reset
Sunday, 19 August, 12

35. Fancy fonts
✤ SVG and fancy fonts
http://www.fontsquirrel.com/
✤ Other font-face generator
tools
✤ Licensing
✤ Google font API
✤ MIME type for SVG to "image/
svg+xml" in the server settings
Sunday, 19 August, 12

36. Bulletproof font-face syntax
http://www.fontspring.com/blog/further-hardening-of-the-
bulletproof-syntax by Ethan Dunham
Sunday, 19 August, 12

37. CSS3 Kerning Pairs & Ligatures
✤ On desktops:
body { text-rendering: optimizeLegibility; }
✤ On mobile:
@media and (max-device-width : 480px) { body { text-
rendering: optimizeSpeed; } }
✤ Beware of overusing processor cycles
Sunday, 19 August, 12

38. Fluid Grids
✤ A Fluid Grid Calculator by CSS Wizardry
✤ Fluid grid frameworks (Golden Grid System, Foldy960, etc.)
Sunday, 19 August, 12

39. Fluid Layout
✤ Width 100%
✤ Float none
✤ Stack elements
✤ Remove elements
Sunday, 19 August, 12

40. Interactive Mobile
Sunday, 19 August, 12

41. Fluid YouTube Videos
✤ http://css-tricks.com/7066-fluid-width-
youtube-videos/
Sunday, 19 August, 12

42. Trouble with Javascripts
✤ Fluid width and
missing tags
Sunday, 19 August, 12

43. Shims, Fallbacks, and Polyfills
✤ What is a polyfill?
✤ Overthrow, FitText, Respond,
✤ Stop solving problems you don’t yet have
by Rachel Andrew
Sunday, 19 August, 12

44. Content for Mobile
Sunday, 19 August, 12

45. Hide Content
✤ Why hide content?
✤ What to hide?
✤ “no-mobile” and “mobile-
only” tags
✤ “display: none;” is bad for
SEO
✤ Another way to hide
content
✤ Skip to content links
Sunday, 19 August, 12

46. Add Content
✤ Clickable Phone Numbers with
class="phone-link"
✤ Special Input Types with HTML5
✤
type="tel"
type="email"
type="url"
type="number"
type="range"
type="search"
type="date"
Sunday, 19 August, 12

47. Alternative Strategies
✤ Mobile first
✤ Mobile boilerplate (Mobile Boilerplate, 320 and Up, Twitter
Bootstrap, etc.)
✤ Roots Theme
✤ Completely fluid design
Sunday, 19 August, 12

48. Additional Reading
✤ Responsive Web Design by Ethan Marcotte
✤ @RWD
✤ WordPress Mobile Tutorials
http://speckyboy.com/2011/03/17/mobile-toollbox-for-wordpress-tutorials-plugins-and-themes/
Sunday, 19 August, 12

49. Slides and Download
✤ Slides:
https://speakerdeck.com/u/cafenoirdesign
✤ Theme download:
http://cafenoirthemes.com
✤ More details:
http://chroni.ca/42/the-future-is-mobile-part-i/
Sunday, 19 August, 12

50. Shannon Smith
Web Developer
Café Noir Design
www.cafenoirdesign.com
www.chroni.ca
@cafenoirdesign
Sunday, 19 August, 12