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.
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
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
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
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
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
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