CMSes go mobile - Harness the power of WordPress

1,984 views

Published on

From standards.next on 3 March 2012 - a slideshow demonstrating how WordPress can make it easier to develop mobile websites

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

  • Be the first to like this

No Downloads
Views
Total views
1,984
On SlideShare
0
From Embeds
0
Number of Embeds
275
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \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
  • CMSes go mobile - Harness the power of WordPress

    1. 1. Making CMSes go mobileHarnessing WordPress for mobile development standards next, 3 March 2012 Rachel McCollin compass-design.co.uk rachel@compass-design.co.uk @rachelmccollin
    2. 2. Mobile development - the power of WordPress How WordPress Option What it involves Uses can help Combination of fluid layout and For a consistent Responsive web Responsive themes media queries to define design across design Media queries breakpoints devices For a different Different site or theme for Mobile pluginsDevice-based design mobile experience mobile devices Mobile switchers or for speed Gives consistent Plugins design with UXReactive Web Design Combination of the two Conditional tags and speed Images enhancements compass-design.co.uk @rachelmccollin
    3. 3. Responsive Web Design with WordPress Option 1 - use CSS compass-design.co.uk @rachelmccollin
    4. 4. Responsive Web Design with WordPress Option 2 - responsive themes compass-design.co.uk @rachelmccollin
    5. 5. Responsive Web Design with WordPress Option 2 - responsive themesTwenty eleven compass-design.co.uk @rachelmccollin
    6. 6. Responsive Web Design with WordPress Option 2 - responsive themesTwenty eleven Scherzo compass-design.co.uk @rachelmccollin
    7. 7. Responsive Web Design with WordPress Option 2 - responsive themesTwenty eleven Scherzo Codium extend compass-design.co.uk @rachelmccollin
    8. 8. Responsive Web Design with WordPress Option 2 - responsive themesTwenty eleven Scherzo Codium extend Ari compass-design.co.uk @rachelmccollin
    9. 9. Device experience with WordPress Option 1 - mobile plugins compass-design.co.uk @rachelmccollin
    10. 10. Device experience with WordPress Option 1 - mobile plugins• Working in minutes• Minimal configuration• Cross-platform• No coding required compass-design.co.uk @rachelmccollin
    11. 11. Device experience with WordPress Option 1 - mobile plugins • One size fits all• Working in minutes • Less control• Minimal configuration • Problems with widgets &• Cross-platform media• No coding required • Lose branding/design compass-design.co.uk @rachelmccollin
    12. 12. Device experience with WordPress Option 1 - mobile plugins • One size fits all• Working in minutes • Less control• Minimal configuration • Problems with widgets &• Cross-platform media• No coding required • Lose branding/design Great for simple text-focused sites and blogs where content is more important than design and budget is limited compass-design.co.uk @rachelmccollin
    13. 13. Mobile plugins compass-design.co.uk @rachelmccollin
    14. 14. Mobile plugins WPTouch • Hugely popular and looks slick • Slow - particularly images • No widgets • Identikit compass-design.co.uk @rachelmccollin
    15. 15. Mobile plugins WPTouch • Hugely popular and looks slick • Slow - particularly images • No widgets • Identikit WordPress Mobile Pack • More options, resizes image files • Displays widgets • No logo or branding compass-design.co.uk @rachelmccollin
    16. 16. Mobile plugins WPTouch • Hugely popular and looks slick • Slow - particularly images • No widgets • Identikit WordPress Mobile Pack • More options, resizes image files • Displays widgets • No logo or branding MobilePosty • Very fast • No home page content • Takes work to get it looking good compass-design.co.uk @rachelmccollin
    17. 17. Device experience with WordPress Option 2 - switchers compass-design.co.uk @rachelmccollin
    18. 18. Device experience with WordPress Option 2 - switchers• Mobile-specific experience• Code mobile theme from scratch• Option of combining with RWD compass-design.co.uk @rachelmccollin
    19. 19. Device experience with WordPress Option 2 - switchers• Mobile-specific experience• Code mobile theme from • Needs a clear strategy scratch • More resource-intensive• Option of combining with RWD compass-design.co.uk @rachelmccollin
    20. 20. Device experience with WordPress Option 2 - switchers• Mobile-specific experience• Code mobile theme from • Needs a clear strategy scratch • More resource-intensive• Option of combining with RWD Great for sites which will be used very differently by mobile users compass-design.co.uk @rachelmccollin
    21. 21. Device experience with WordPress Option 3 - redirection plugins compass-design.co.uk @rachelmccollin
    22. 22. Device experience with WordPress Option 3 - redirection plugins• VERY mobile-specific experience• Add extra functionality not needed on desktop• Can be much faster compass-design.co.uk @rachelmccollin
    23. 23. Device experience with WordPress Option 3 - redirection plugins • Two sites to maintain• VERY mobile-specific • theme files experience • content• Add extra functionality not • Expensive needed on desktop • SEO / links issues• Can be much faster • Confusing for users compass-design.co.uk @rachelmccollin
    24. 24. Device experience with WordPress Option 3 - redirection plugins • Two sites to maintain• VERY mobile-specific • theme files experience • content• Add extra functionality not • Expensive needed on desktop • SEO / links issues• Can be much faster • Confusing for usersUseful for sites with a COMPLETELY different mobile interface, content etc. (e.g. web apps) compass-design.co.uk @rachelmccollin
    25. 25. Device experience - possibilities • Mapping and geolocation • Social - BuddyPress etc. • E-commerce - Jigoshop, WP E-commerce • Media • Interactivity • Accelerometer compass-design.co.uk @rachelmccollin
    26. 26. Device experience - plugins / themes • Theme switchers • WordPress Mobile Pack • WPtap • Mobile Smart • Redirection • WordPress Mobile Re-direct • Mobile detector (with an edit to functions.php) • UX • Geolocation plugin • BuddyPress Mobile theme • Jigoshop - plugin with premium responsive themes • Media - WordPress apps, i-Dump (limited right now) • Offline - WP Cache Manifest, Cache Manifest for WordPress themes • Accelerometer, Drag & drop, Canvas - yet to come • Or if you’re clever, use HTML5 and Javascript! compass-design.co.uk @rachelmccollin
    27. 27. Reactive Web Design with WordPress compass-design.co.uk @rachelmccollin
    28. 28. Reactive Web Design with WordPress• Consistent design / brand• Speeds up mobile site• Responds to context (although beware assumptions) compass-design.co.uk @rachelmccollin
    29. 29. Reactive Web Design with WordPress• Consistent design / brand • Can take longer to• Speeds up mobile site develop• Responds to context • Requires familiarity with (although beware CSS and PHP assumptions) compass-design.co.uk @rachelmccollin
    30. 30. Reactive Web Design with WordPress• Consistent design / brand • Can take longer to• Speeds up mobile site develop• Responds to context • Requires familiarity with (although beware CSS and PHP assumptions) Great for sites where the design is important and the mobile experience is different but not too different from the desktop compass-design.co.uk @rachelmccollin
    31. 31. Reactive techniques • Responsive design using media queries PLUS server-side processing to send some different content • Plugins: • mobble, Mobile detector • Dropdown Menus • Mobile First Content Images • Conditional tags • Featured images • WordPress custom menus compass-design.co.uk @rachelmccollin
    32. 32. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
    33. 33. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
    34. 34. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
    35. 35. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
    36. 36. Summary • There are options for making your site mobile • Responsive Web Design • Device experiences • Reactive Web Design • WordPress can help with them all • plugins • themes • inbuilt functionality • How you do it depends on the site, the budget and the skills of the development team compass-design.co.uk @rachelmccollin
    37. 37. Links and resourceshttp://www.alistapart.com/articles/responsive-web-design/http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/http://www.smashingmagazine.com/2011/07/11/picking-a-mobile-support-strategy-for-your-website/http://dev.opera.com/articles/view/wordpress-goes-mobile-responsive-design-comes-to-cmses/Responsive Web Design by Ethan MarcotteMobile First by Luke WroblewskiFlexible Web Design and Stunning CSS3 by Zoe Mickley GillenwaterMobile WordPress Development by Rachel McCollin (out in the autumn!) compass-design.co.uk @rachelmccollin
    38. 38. Slides and links http://compass-design.co.uk/?p=1810 compass-design.co.uk @rachelmccollin

    ×