CMSes go mobile - Harness the power of WordPress
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

CMSes go mobile - Harness the power of WordPress

on

  • 1,722 views

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

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

Statistics

Views

Total Views
1,722
Views on SlideShare
1,566
Embed Views
156

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 156

http://compass-design.co.uk 147
http://rachelmccollin.co.uk 9

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

  • 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. 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. Responsive Web Design with WordPress Option 1 - use CSS compass-design.co.uk @rachelmccollin
  • 4. Responsive Web Design with WordPress Option 2 - responsive themes compass-design.co.uk @rachelmccollin
  • 5. Responsive Web Design with WordPress Option 2 - responsive themesTwenty eleven compass-design.co.uk @rachelmccollin
  • 6. Responsive Web Design with WordPress Option 2 - responsive themesTwenty eleven Scherzo compass-design.co.uk @rachelmccollin
  • 7. Responsive Web Design with WordPress Option 2 - responsive themesTwenty eleven Scherzo Codium extend compass-design.co.uk @rachelmccollin
  • 8. Responsive Web Design with WordPress Option 2 - responsive themesTwenty eleven Scherzo Codium extend Ari compass-design.co.uk @rachelmccollin
  • 9. Device experience with WordPress Option 1 - mobile plugins compass-design.co.uk @rachelmccollin
  • 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. 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. 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. Mobile plugins compass-design.co.uk @rachelmccollin
  • 14. Mobile plugins WPTouch • Hugely popular and looks slick • Slow - particularly images • No widgets • Identikit compass-design.co.uk @rachelmccollin
  • 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. 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. Device experience with WordPress Option 2 - switchers compass-design.co.uk @rachelmccollin
  • 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. 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. 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. Device experience with WordPress Option 3 - redirection plugins compass-design.co.uk @rachelmccollin
  • 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. 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. 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. Device experience - possibilities • Mapping and geolocation • Social - BuddyPress etc. • E-commerce - Jigoshop, WP E-commerce • Media • Interactivity • Accelerometer compass-design.co.uk @rachelmccollin
  • 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. Reactive Web Design with WordPress compass-design.co.uk @rachelmccollin
  • 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. 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. 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. 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. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
  • 33. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
  • 34. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
  • 35. Examples of Reactive Design using WordPress compass-design.co.uk @rachelmccollin
  • 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. 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. Slides and links http://compass-design.co.uk/?p=1810 compass-design.co.uk @rachelmccollin