Responsive Design for WordPress

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. Follow @cafenoirdesign on twitter.

Transcript

1. August 19, 2012 Responsive Design for WordPress WordCamp Montréal 2012
2. Shannon Smith Web Developer Café Noir Design www.cafenoirdesign.com @cafenoirdesign
3. Why Design for Mobile?
4. Cell Phone Use
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)
6. iPod Touch 15% Android Phone 8% iPhone 35% iPad 34% iPad Android Tablet Other tablet iPhone Android Phone Other Smart Phone Feature Phone iPod Touch Other Share of Canadian Non-Computer Device Traffic - May 2011 Source: comScore Device Essentials http://bit.ly/mJVyy5
7. Easy Solutions
8. Online Services for Any Site ✤ Via RSS feed: MoFuse and Mippin Mobilizer, WireNode, Mobify, dotMobi ✤ Google Mobile Optimizer
9. Mobile Landing Page ✤ http://buildinternet.com/2011/01/add-a- mobile-landing-page-to-your-site/
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)
11. WPTouch
12. Custom Mobile Site
13. Planning & Testing
14. What are we designing for? ✤ OS ✤ Browser ✤ Screen resolution ✤ Screen aspect ratio ✤ Special capabilities
15. Design for iOS First ✤ iPhone (landscape and portrait) ✤ iPad (portrait)
16. Other OSs? ✤ Android: which one? ✤ Blackberry: market share? ✤ Windows: market share? ✤ OS, resolution, screen dimensions
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/
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 } ?>
19. What needs to change ✤ Dimensions ✤ Bandwidth ✤ Font-size ✤ Features ✤ Floated elements ✤ Mouseover states ✤ Flash
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
21. Responsive Wireframing ✤ Style Tiles (http://styletil.es)
22. Images for Mobile
23. Icons ✤ iPhone icon (rel="apple-touch-icon") 114x114 pixels ✤ Opera browser icon (rel="icon") 195x195px ✤ Precomposed icons ✤ Retina display icons (Append @2x) 144x144px
24. <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
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/
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)
27. HTML for Mobile
28. Semantic Web ✤ Always start with semantic code
29. Targeting Viewport Dimensions & Orientation ✤ Hardboiled CSS3 Media Queries (Andy Clarke) http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
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]-->
31. HTML Head ✤ Icon links ✤ Viewport meta tag or 980 pixels?
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/
33. CSS for Mobile
34. CSS Reset
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
36. Bulletproof font-face syntax http://www.fontspring.com/blog/further-hardening-of-the- bulletproof-syntax by Ethan Dunham
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
38. Fluid Grids ✤ A Fluid Grid Calculator by CSS Wizardry ✤ Fluid grid frameworks (Golden Grid System, Foldy960, etc.)
39. Fluid Layout ✤ Width 100% ✤ Float none ✤ Stack elements ✤ Remove elements
40. Interactive Mobile
41. Fluid YouTube Videos ✤ http://css-tricks.com/7066-fluid-width- youtube-videos/
42. Trouble with Javascripts ✤ Fluid width and missing tags
43. Shims, Fallbacks, and Polyfills ✤ What is a polyfill? ✤ Overthrow, FitText, Respond, ✤ Stop solving problems you don’t yet have by Rachel Andrew
44. Content for Mobile
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
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"
47. Alternative Strategies ✤ Mobile first ✤ Mobile boilerplate (Mobile Boilerplate, 320 and Up, Twitter Bootstrap, etc.) ✤ Roots Theme ✤ Completely fluid design
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/
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/
50. Shannon Smith Web Developer Café Noir Design www.cafenoirdesign.com www.chroni.ca @cafenoirdesign