Your SlideShare is downloading. ×
The future is mobile
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

The future is mobile


Published on

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, …

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. Presented by Shannon Smith at Web à Québec.

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. The Future is MobileWeb à Québec 2012February 23, 2012
  • 2. Shannon SmithCEO of Café Noir Designw: www.cafenoirdesign.come: info@cafenoirdesign.comt: @cafenoirdesign
  • 3. Why Design for Mobile?
  • 4. Cell Phone Use
  • 5. Mobile Browsing✤ 8.5% of all Web browsing from smartphones and tablets, up from 4.9% last year. 8.9% in the U.S. (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)✤ The share of U.S. online retail dollars attributable to mobile devices has doubled from 1.87 percent in April of 2011 to 3.74 percent in December 2011 (RichRelevance)
  • 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
  • 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✤ 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✤ PHP function to detect mobile user agents & browsers
  • 18. Serving with WordPress✤ Theme Switch plugin 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") 114x114 pixels✤ Opera browser icon (rel="icon") 195x195px✤ 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✤
  • 25. HTML for Mobile
  • 26. Targeting Viewport Dimensions & Orientation ✤ Hardboiled CSS3 Media Queries (Andy Clarke)
  • 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✤ iphone-and-ipad-apps✤ 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✤ 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 by Ethan Dunham
  • 33. Fluid Layout✤ Width 100%✤ Float none✤ Stack elements✤ Remove elements
  • 34. Interactive Mobile
  • 35. Fluid YouTube Videos✤ 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
  • 42. Slides and Download✤ Slides:✤ Theme download:✤ More details:
  • 43. Shannon SmithCEO of Café Noir Designw: www.chroni.caw: www.cafenoirdesign.come: info@cafenoirdesign.comt: @cafenoirdesign
  • 44. Thank You