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

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

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,174
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
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. 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 Essentialshttp://bit.ly/mJVyy5
  • 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✤ 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") 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✤ 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 syntaxhttp://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. 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. Shannon SmithCEO of Café Noir Designw: www.chroni.caw: www.cafenoirdesign.come: info@cafenoirdesign.comt: @cafenoirdesign
  • 44. Thank You