WordPress for mobile

  • 2,700 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,700
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
5

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
  • \n\n
  • \n\n
  • I'm not the expert, just someone who'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've got anything to add or I've got anything wrong!\nIf you've got questions, please ask them during the session if you want - you don'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'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

Transcript

  • 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. IN THIS SESSION• why go mobile?• considerations• methods and examples• some code• resources and links
  • 3. BEFORE WE START
  • 4. WHY MOBILE?source: http://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/
  • 5. WHY YOUR SITE?
  • 6. HOW TO APPROACHBandwidth Objectives Time Resources Users The site YouPlatform Context Design Budget
  • 7. THE OPTIONS@med
  • 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. MOBILE THEMES - EXAMPLES responsive twenty ten theme by Todd Halfpenny http://gingerbreaddesign.co.uk/todd/
  • 10. MOBILE THEMES - EXAMPLEShttp://wordpress.org/extend/themes/twentyeleven#
  • 11. MOBILE THEMES - EXAMPLES Smooci mobile-only themehttp://wordpress.org/extend/themes/smooci-2
  • 12. MOBILE THEMES - EXAMPLES http://carringtontheme.com
  • 13. MOBILE THEMES - EXAMPLES http://carringtontheme.com
  • 14. MOBILE THEMES - EXAMPLEShttp://www.mobilizetoday.com/wordpress-themes/mobius/
  • 15. MOBILE THEMES - EXAMPLEShttp://www.mobilizetoday.com/wordpress-themes/mobius/
  • 16. MOBILE THEMES - EXAMPLES http://jigoshop.com/
  • 17. MOBILE THEMES - EXAMPLES http://jigoshop.com/
  • 18. MOBILE THEMES - EXAMPLES http://leonpaternoster.com/wp-themes/
  • 19. MOBILE THEMES - EXAMPLES http://leonpaternoster.com/wp-themes/
  • 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. PLUGINS - EXAMPLESWP Touch - http://wordpress.org/extend/plugins/wptouch/
  • 22. PLUGINS - EXAMPLESWP Touch - http://wordpress.org/extend/plugins/wptouch/
  • 23. PLUGINS - EXAMPLES WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/
  • 24. PLUGINS - EXAMPLES WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/
  • 25. PLUGINS - EXAMPLES WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/
  • 26. PLUGINS - EXAMPLES WP Touch - http://wordpress.org/extend/plugins/wptouch/http://www.socialmediaexaminer.com/ http://www.stephenfry.com/
  • 27. PLUGINS - EXAMPLES WordPress mobile packhttp://wordpress.org/extend/plugins/wordpress-mobile-pack/
  • 28. PLUGINS - EXAMPLES BuddyPress mobilehttp://buddypress.org/groups/buddypress-mobile/
  • 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. 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. MEDIA QUERIES -http://compass-design.co.uk
  • 32. MEDIA QUERIES -http://compass-design.co.uk
  • 33. MEDIA QUERIES -http://centenarylounge.com
  • 34. MEDIA QUERIES -http://centenarylounge.com
  • 35. MEDIA QUERIES -http://retreats4geeks.com
  • 36. MEDIA QUERIES -http://retreats4geeks.com
  • 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. MEDIA QUERIES - USEFUL CSSdisplay: none;img {max-width: 100%;}float: none;width: 100%;
  • 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. 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. BESPOKE MOBILE SITES -http://www.telegraph.co.uk/comment/blogs
  • 42. BESPOKE MOBILE SITES -http://www.telegraph.co.uk/comment/blogs
  • 43. BESPOKE MOBILE SITES - http://theaa.com
  • 44. BESPOKE MOBILE SITES - http://theaa.com
  • 45. BESPOKE MOBILE SITES - http://expedia.co.uk
  • 46. BESPOKE MOBILE SITES - http://expedia.co.uk
  • 47. BESPOKE MOBILE SITES - http://tripadvisor.co.uk
  • 48. BESPOKE MOBILE SITES - http://tripadvisor.co.uk
  • 49. BESPOKE MOBILE SITES - http://bbc.co.uk
  • 50. BESPOKE MOBILE SITES - http://bbc.co.uk
  • 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. 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