A summary of all the ways you can get your WordPress site ready for the mobile Web. I’ll cover online services that create a mobile version of your site, special WordPress themes and plugins, regular-mobile ready WordPress themes, and more. I’ll talk about how to target specific devices, what to avoid and what’s best for SEO. I’ll also show you how to build a mobile-ready style sheet, with full code and a free business-card theme download. The first part of the talk will cover easy options for everyone, but the second part is best suited to those with knowledge of HTML/CSS, and WordPress themes. About Shannon Shannon Smith is the founder of Café Noir Design a boutique Montreal web design company specializing in bilingual web design. She supports web standards, semantic markup, microformats, open source products, and sustainable business practices. Shannon works with a number of PHP/MySQL content management systems to create clean, minimalist designs, that adhere to W3C standards. She holds graduate degrees in journalism and psychology. Also a foodie and mother of three. Follow @cafenoirdesign on Twitter.

1. The Future is Mobile
WordCamp Montréal 2011
July 10, 2011

2. Shannon Smith
CEO of Café Noir Design
w: www.cafenoirdesign.com
e: info@cafenoirdesign.com
t: @cafenoirdesign

3. Why Design for Mobile?

4. Cell Phone Use

5. Mobile Browsing
✤ 5% of all Web browsing from smartphones and tablets.
✤ In the U.S. 8.2% of all browsing takes place on mobile devices.
✤ 2.9% of U.S. Web browsing comes on the iPhone, 2.6% on Android
devices, and 2.1% on the iPad with BlackBerry next at 0.57%.
✤ (Net Application)

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

7. Easy Solutions

8. Online Services for Any Site
✤ Vis 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
✤ iPhone (landscape and portrait)
✤ iPad (portrait)

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

17. How are we serving this?
✤ Server-side methods & the UA 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)

21. Images for Mobile

22. Icons
✤ iPhone icon (rel="apple-touch-icon")
✤ Opera browser icon (rel="icon")
✤ 114x114 pixels
✤ Precomposed icons

23. <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />

24. 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
✤ Total component caching: Android and iOS 4 set limit at 2MB
✤ gzip has no effect on cache-ability on any device
✤ http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

25. HTML for Mobile

26. Targeting Viewport Dimensions &
Orientation
✤ Hardboiled CSS3
Media Queries
(Andy Clarke)
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

27. HTML Head
✤ Icon links
✤ Viewport meta tag or 980
pixels?

28. 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_disablin
g_user_zoom/

29. CSS for Mobile

30. CSS Reset

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

32. Bulletproof font-face syntax
http://www.fontspring.com/blog/further-hardening-
of-the-bulletproof-syntax by Ethan Dunham

33. Fluid Layout
✤ Width 100%
✤ Float none
✤ Stack elements
✤ Remove elements

34. Interactive Mobile

35. Fluid YouTube Videos
✤ http://css-tricks.com/7066-fluid-width-
youtube-videos/

36. Trouble with Javascripts
✤ Fluid width and
missing tags

37. Content for Mobile

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

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

40. Alternative Strategies
✤ Mobile First
✤ Mobile Boilerplate
✤ Completely fluid design

41. Additional Reading
✤ WordPress Mobile Tutorials
http://speckyboy.com/2011/03/17/mobile-toollbox-for-wordpress-tutorials-plugins-and-themes/

42. Shannon Smith
CEO of Café Noir Design
http://slideshare.net/cafenoirdesign
w: www.cafenoirdesign.com
e: info@cafenoirdesign.com
t: @cafenoirdesign

43. Thank You