The future is mobile | WordCamp Montreal 2011

3,423 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. 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.

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
3,423
On SlideShare
0
From Embeds
0
Number of Embeds
762
Actions
Shares
0
Downloads
60
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • http://www.instantshift.com/2011/01/07/22-high-quality-mobile-friendly-wordpress-themes/\nhttp://www.sitepoint.com/10-attractive-mobile-wordpress-themes/\nhttp://speckyboy.com/2011/03/17/mobile-toollbox-for-wordpress-tutorials-plugins-and-themes/\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • the is_iphone conditional seems to only return true for iPhone and Android users. Palm and BlackBerry users appear to be left in the dark. \n
  • Links to fb and twitter\n
  • http://www.opera.com/mobile/demo/\n
  • \n
  • \n
  • \n
  • The component cache, or object cache, stores individual files. HTML, CSS, JavaScript, and images all go into the component cache. Whenever it needs one of these components, the browser first checks the cache before making a network request.\nThe page cache, also known as the back/forward cache, stores an entire page and all of its components, as well as their current state. When you use the back or forward button, the browser will load the page from the page cache if possible.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Hide social\nHide sidebars\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The future is mobile | WordCamp Montreal 2011

    1. 1. The Future is MobileWordCamp Montréal 2011July 10, 2011
    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✤ 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. 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✤ Vis 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")✤ Opera browser icon (rel="icon")✤ 114x114 pixels✤ 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. Shannon SmithCEO of Café Noir Designhttp://slideshare.net/cafenoirdesignw: www.cafenoirdesign.come: info@cafenoirdesign.comt: @cafenoirdesign
    43. 43. Thank You

    ×