Your SlideShare is downloading. ×

Responsive design for WordPress

975

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
975
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 <!--[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 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

×