WORDPRESS FOR MOBILE USING WORDPRESS TO BUILD MOBILE-OPTIMISED WEBSITES          Rachel McCollin     WordCamp Portsmouth 2...
IN THIS SESSION• why   go mobile?• considerations• methods   and examples• some   code• resources   and links
BEFORE WE START
WHY MOBILE?source: http://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/
WHY YOUR SITE?
HOW TO APPROACHBandwidth             Objectives                                    Time     Resources     Users           ...
THE OPTIONS@med
MOBILE THEMES• Instant                       • Limitedcontrol over user                                  experience• Very ...
MOBILE THEMES - EXAMPLES                   responsive twenty ten                   theme by Todd                   Halfpen...
MOBILE THEMES - EXAMPLEShttp://wordpress.org/extend/themes/twentyeleven#
MOBILE THEMES - EXAMPLES                     Smooci mobile-only                     themehttp://wordpress.org/extend/theme...
MOBILE THEMES - EXAMPLES    http://carringtontheme.com
MOBILE THEMES - EXAMPLES    http://carringtontheme.com
MOBILE THEMES - EXAMPLEShttp://www.mobilizetoday.com/wordpress-themes/mobius/
MOBILE THEMES - EXAMPLEShttp://www.mobilizetoday.com/wordpress-themes/mobius/
MOBILE THEMES - EXAMPLES      http://jigoshop.com/
MOBILE THEMES - EXAMPLES      http://jigoshop.com/
MOBILE THEMES - EXAMPLES http://leonpaternoster.com/wp-themes/
MOBILE THEMES - EXAMPLES http://leonpaternoster.com/wp-themes/
PLUGINS• Working   in minutes               • One    size fits all• Minimal   configuration             • Less   control• Cr...
PLUGINS - EXAMPLESWP Touch - http://wordpress.org/extend/plugins/wptouch/
PLUGINS - EXAMPLESWP Touch - http://wordpress.org/extend/plugins/wptouch/
PLUGINS - EXAMPLES  WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/
PLUGINS - EXAMPLES  WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/
PLUGINS - EXAMPLES  WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/
PLUGINS - EXAMPLES  WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/ http://www....
PLUGINS - EXAMPLES                WordPress mobile packhttp://wordpress.org/extend/plugins/wordpress-mobile-pack/
PLUGINS - EXAMPLES             BuddyPress mobilehttp://buddypress.org/groups/buddypress-mobile/
OTHER PLUGINSMobilise by mippin - renders your site using their servicehttp://wordpress.org/extend/plugins/mobilize-by-mip...
MEDIA QUERIES• Retain   existing design                                    • Not reliable on all• Can    be templated     ...
MEDIA QUERIES -http://compass-design.co.uk
MEDIA QUERIES -http://compass-design.co.uk
MEDIA QUERIES -http://centenarylounge.com
MEDIA QUERIES -http://centenarylounge.com
MEDIA QUERIES -http://retreats4geeks.com
MEDIA QUERIES -http://retreats4geeks.com
MEDIA QUERIES - CODEin the <head>: <meta name="viewport" content="width=device-width">at the end of the stylesheet:@media ...
MEDIA QUERIES - USEFUL CSSdisplay: none;img {max-width: 100%;}float: none;width: 100%;
BESPOKE MOBILE SITES• Mobile-specific    experience       • Needs   a clear strategy• Make    use of APIs                • ...
BESPOKE MOBILE SITES -WpTap mobile detector - spots mobiles & enables thetheme you choose - http://wordpress.org/extend/pl...
BESPOKE MOBILE SITES -http://www.telegraph.co.uk/comment/blogs
BESPOKE MOBILE SITES -http://www.telegraph.co.uk/comment/blogs
BESPOKE MOBILE SITES -      http://theaa.com
BESPOKE MOBILE SITES -      http://theaa.com
BESPOKE MOBILE SITES -     http://expedia.co.uk
BESPOKE MOBILE SITES -     http://expedia.co.uk
BESPOKE MOBILE SITES -    http://tripadvisor.co.uk
BESPOKE MOBILE SITES -    http://tripadvisor.co.uk
BESPOKE MOBILE SITES -      http://bbc.co.uk
BESPOKE MOBILE SITES -      http://bbc.co.uk
IN CONCLUSIONDefine:• Who    your audience or target audience is• What    platforms and devices they use• What    you want ...
LINKS AND RESOURCEShttp://www.alistapart.com/articles/responsive-web-design/http://coding.smashingmagazine.com/2011/01/12/...
Upcoming SlideShare
Loading in...5
×

WordPress for mobile

2,873

Published on

Slides on developing WordPress sites for mobile devices, from my presentation to WordCamp Portsmouth on July 16 2011

Published in: Technology, Business
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,873
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n\n
  • \n\n
  • I&apos;m not the expert, just someone who&apos;s interested and has been working on this area for a few clients. \nI know there will be people here who know a lot about this topic - please shout if you&apos;ve got anything to add or I&apos;ve got anything wrong!\nIf you&apos;ve got questions, please ask them during the session if you want - you don&apos;t have to wait until the end. if discussion goes on too long I may ask people to pause until the end so we can get through all the martial I&apos;ve prepared. \n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • WordPress for mobile

    1. 1. WORDPRESS FOR MOBILE USING WORDPRESS TO BUILD MOBILE-OPTIMISED WEBSITES Rachel McCollin WordCamp Portsmouth 2011 rachel@compass-design.co.uk @rachelmccollin http://compass-design.co.uk
    2. 2. IN THIS SESSION• why go mobile?• considerations• methods and examples• some code• resources and links
    3. 3. BEFORE WE START
    4. 4. WHY MOBILE?source: http://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/
    5. 5. WHY YOUR SITE?
    6. 6. HOW TO APPROACHBandwidth Objectives Time Resources Users The site YouPlatform Context Design Budget
    7. 7. THE OPTIONS@med
    8. 8. MOBILE THEMES• Instant • Limitedcontrol over user experience• Very quick and easy • Need to test thoroughly• Consistencybetween desktop and mobile • Less individual design• Browser compatibility • Limited choice at presentGreat for site owners who want to focus on content not code or dont have the necessary time or skills
    9. 9. MOBILE THEMES - EXAMPLES responsive twenty ten theme by Todd Halfpenny http://gingerbreaddesign.co.uk/todd/
    10. 10. MOBILE THEMES - EXAMPLEShttp://wordpress.org/extend/themes/twentyeleven#
    11. 11. MOBILE THEMES - EXAMPLES Smooci mobile-only themehttp://wordpress.org/extend/themes/smooci-2
    12. 12. MOBILE THEMES - EXAMPLES http://carringtontheme.com
    13. 13. MOBILE THEMES - EXAMPLES http://carringtontheme.com
    14. 14. MOBILE THEMES - EXAMPLEShttp://www.mobilizetoday.com/wordpress-themes/mobius/
    15. 15. MOBILE THEMES - EXAMPLEShttp://www.mobilizetoday.com/wordpress-themes/mobius/
    16. 16. MOBILE THEMES - EXAMPLES http://jigoshop.com/
    17. 17. MOBILE THEMES - EXAMPLES http://jigoshop.com/
    18. 18. MOBILE THEMES - EXAMPLES http://leonpaternoster.com/wp-themes/
    19. 19. MOBILE THEMES - EXAMPLES http://leonpaternoster.com/wp-themes/
    20. 20. PLUGINS• Working in minutes • One size fits all• Minimal configuration • Less control• Cross-platform • Problems with widgets & media• No coding required • Lose branding/designGreat for simple text-focused sites and blogs where content is more important than design and budget is limited
    21. 21. PLUGINS - EXAMPLESWP Touch - http://wordpress.org/extend/plugins/wptouch/
    22. 22. PLUGINS - EXAMPLESWP Touch - http://wordpress.org/extend/plugins/wptouch/
    23. 23. PLUGINS - EXAMPLES WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/
    24. 24. PLUGINS - EXAMPLES WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/
    25. 25. PLUGINS - EXAMPLES WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/
    26. 26. PLUGINS - EXAMPLES WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/ http://www.stephenfry.com/
    27. 27. PLUGINS - EXAMPLES WordPress mobile packhttp://wordpress.org/extend/plugins/wordpress-mobile-pack/
    28. 28. PLUGINS - EXAMPLES BuddyPress mobilehttp://buddypress.org/groups/buddypress-mobile/
    29. 29. OTHER PLUGINSMobilise by mippin - renders your site using their servicehttp://wordpress.org/extend/plugins/mobilize-by-mippin-wordpress-plugin/BAAP mobile version - switcher with configurable themeshttp://wordpress.org/extend/plugins/baap-mobile-version/Wapple architect - delivers a version of your theme tomobiles - http://wordpress.org/extend/plugins/wapple-architect/
    30. 30. MEDIA QUERIES• Retain existing design • Not reliable on all• Can be templated platforms (e.g.• Very flexible Blackberry) • More resource-intensive• Canadd or remove content, images, menus etc.Great for sites where the design and brand are important and the user experience is similar to the desktop site.
    31. 31. MEDIA QUERIES -http://compass-design.co.uk
    32. 32. MEDIA QUERIES -http://compass-design.co.uk
    33. 33. MEDIA QUERIES -http://centenarylounge.com
    34. 34. MEDIA QUERIES -http://centenarylounge.com
    35. 35. MEDIA QUERIES -http://retreats4geeks.com
    36. 36. MEDIA QUERIES -http://retreats4geeks.com
    37. 37. MEDIA QUERIES - CODEin the <head>: <meta name="viewport" content="width=device-width">at the end of the stylesheet:@media screen and (max-width: 480px) { [styles] } - iPhone and Android in portrait & landscape@media screen and (max-width: 320px) - iPhone and Android in portrait only@media screen and (min-width: 768px) and (max-width: 1024px) - iPad in portrait and landscape@media screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) - iPad inlandscape@media screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) - iPad in portraitNotes:• iPad queries can also work on small desktop browser screens• style wider screens first unless using (min-width)
    38. 38. MEDIA QUERIES - USEFUL CSSdisplay: none;img {max-width: 100%;}float: none;width: 100%;
    39. 39. BESPOKE MOBILE SITES• Mobile-specific experience • Needs a clear strategy• Make use of APIs • More resource-intensive• Looks great • one site or two?• Plugins can make it easier • one theme or two?Great for sites which will be used very differently by mobile users and have a user base who are big app users
    40. 40. BESPOKE MOBILE SITES -WpTap mobile detector - spots mobiles & enables thetheme you choose - http://wordpress.org/extend/plugins/wptap-mobile-detector/WPTouch Pro - http://www.bravenewcode.com/store/plugins/wptouch-pro/WordPress mobile pack - http://wordpress.org/extend/plugins/wordpress-mobile-pack/
    41. 41. BESPOKE MOBILE SITES -http://www.telegraph.co.uk/comment/blogs
    42. 42. BESPOKE MOBILE SITES -http://www.telegraph.co.uk/comment/blogs
    43. 43. BESPOKE MOBILE SITES - http://theaa.com
    44. 44. BESPOKE MOBILE SITES - http://theaa.com
    45. 45. BESPOKE MOBILE SITES - http://expedia.co.uk
    46. 46. BESPOKE MOBILE SITES - http://expedia.co.uk
    47. 47. BESPOKE MOBILE SITES - http://tripadvisor.co.uk
    48. 48. BESPOKE MOBILE SITES - http://tripadvisor.co.uk
    49. 49. BESPOKE MOBILE SITES - http://bbc.co.uk
    50. 50. BESPOKE MOBILE SITES - http://bbc.co.uk
    51. 51. IN CONCLUSIONDefine:• Who your audience or target audience is• What platforms and devices they use• What you want them to use your site for• How the user expectations will differ on a mobile• What your content is• What budget, resources and time you have• Which method you will use• How you will monitor use and conversions
    52. 52. LINKS AND RESOURCEShttp://www.alistapart.com/articles/responsive-web-design/http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/http://www.smashingmagazine.com/2011/07/11/picking-a-mobile-support-strategy-for-your-website/Responsive Web Design by Ethan MarcotteFlexible Web Design and Stunning CSS3 by Zoe MickleyGillenwaterhttp://compass-design.co.uk/blog/wordpress-for-mobile@rachelmccollin

    ×