Responsive design for WordPress

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

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

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

4. Cell Phone UseSunday, 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/mJVyy5Sunday, 19 August, 12

7. Easy SolutionsSunday, 19 August, 12

8. Online Services for Any Site ✤ Via RSS feed: MoFuse and Mippin Mobilizer, WireNode, Mobify, dotMobi ✤ Google Mobile OptimizerSunday, 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. WPTouchSunday, 19 August, 12

12. Custom Mobile SiteSunday, 19 August, 12

13. Planning & TestingSunday, 19 August, 12

14. What are we designing for? ✤ OS ✤ Browser ✤ Screen resolution ✤ Screen aspect ratio ✤ Special capabilitiesSunday, 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 dimensionsSunday, 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 ✤ FlashSunday, 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 ShadowSunday, 19 August, 12

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

22. Images for MobileSunday, 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) 144x144pxSunday, 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 MobileSunday, 19 August, 12

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

29. Targeting Viewport Dimensions & Orientation ✤ Hardboiled CSS3 Media Queries (Andy Clarke) http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queriesSunday, 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 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 MobileSunday, 19 August, 12

34. CSS ResetSunday, 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 settingsSunday, 19 August, 12

36. Bulletproof font-face syntax http://www.fontspring.com/blog/further-hardening-of-the- bulletproof-syntax by Ethan DunhamSunday, 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 cyclesSunday, 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 elementsSunday, 19 August, 12

40. Interactive MobileSunday, 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 tagsSunday, 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 AndrewSunday, 19 August, 12

44. Content for MobileSunday, 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 linksSunday, 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 designSunday, 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 @cafenoirdesignSunday, 19 August, 12