The future is mobile

1,536 views

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, regular-mobile ready WordPress themes, and more. Presented by Shannon Smith at Web à Québec.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,536
On SlideShare
0
From Embeds
0
Number of Embeds
157
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The future is mobile

  1. 1. The Future is MobileWeb à Québec 2012February 23, 2012
  2. 2. Shannon SmithCEO of Café Noir Designw: www.cafenoirdesign.come: info@cafenoirdesign.comt: @cafenoirdesign
  3. 3. Why Design for Mobile?
  4. 4. Cell Phone Use
  5. 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. 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 Essentialshttp://bit.ly/mJVyy5
  7. 7. Easy Solutions
  8. 8. Online Services for Any Site✤ Via RSS feed: MoFuse and Mippin Mobilizer, WireNode, Mobify, dotMobi✤ Google Mobile Optimizer
  9. 9. Mobile Landing Page✤ http://buildinternet.com/2011/01/add-a-mobile- landing-page-to-your-site/
  10. 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. 11. WPTouch
  12. 12. Custom Mobile Site
  13. 13. Planning & Testing
  14. 14. What are we designing for?✤ OS✤ Browser✤ Screen resolution✤ Screen aspect ratio✤ Special capabilities
  15. 15. Design for iOS✤ iPhone (landscape and portrait)✤ iPad (portrait)
  16. 16. Other OSs?✤ Android: which one?✤ Blackberry: market share? OS?✤ Windows: market share?✤ OS, resolution, screen dimensions
  17. 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. 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. 19. What needs to change✤ Dimensions✤ Bandwidth✤ Font-size✤ Features✤ Floated elements✤ Mouseover states✤ Flash
  20. 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. 21. Images for Mobile
  22. 22. Icons✤ iPhone icon (rel="apple-touch-icon") 114x114 pixels✤ Opera browser icon (rel="icon") 195x195px✤ Precomposed icons
  23. 23. <link rel="apple-touch-icon" href="/apple-touch-icon.png" /><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
  24. 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. 25. HTML for Mobile
  26. 26. Targeting Viewport Dimensions & Orientation ✤ Hardboiled CSS3 Media Queries (Andy Clarke)http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
  27. 27. HTML Head✤ Icon links✤ Viewport meta tag or 980 pixels?
  28. 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. 29. CSS for Mobile
  30. 30. CSS Reset
  31. 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. 32. Bulletproof font-face syntaxhttp://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax by Ethan Dunham
  33. 33. Fluid Layout✤ Width 100%✤ Float none✤ Stack elements✤ Remove elements
  34. 34. Interactive Mobile
  35. 35. Fluid YouTube Videos✤ http://css-tricks.com/7066-fluid-width- youtube-videos/
  36. 36. Trouble with Javascripts✤ Fluid width and missing tags
  37. 37. Content for Mobile
  38. 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. 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. 40. Alternative Strategies✤ Mobile First✤ Mobile Boilerplate✤ Completely fluid design
  41. 41. Additional Reading✤ WordPress Mobile Tutorials http://speckyboy.com/2011/03/17/mobile-toollbox-for-wordpress-tutorials-plugins-and-themes/
  42. 42. Slides and Download✤ Slides: http://www.slideshare.net/cafenoirdesign✤ Theme download: http://cafenoirthemes.com✤ More details: http://chroni.ca/42/the-future-is-mobile-part-i/
  43. 43. Shannon SmithCEO of Café Noir Designw: www.chroni.caw: www.cafenoirdesign.come: info@cafenoirdesign.comt: @cafenoirdesign
  44. 44. Thank You

×