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

1. Making CMSes go mobile
Harnessing 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 plugins
Device-based design mobile experience
mobile devices Mobile switchers
or for speed
Gives consistent
Plugins
design with UX
Reactive 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 themes
Twenty eleven
compass-design.co.uk
@rachelmccollin

6. Responsive Web Design with WordPress
Option 2 - responsive themes
Twenty eleven Scherzo
compass-design.co.uk
@rachelmccollin

7. Responsive Web Design with WordPress
Option 2 - responsive themes
Twenty eleven Scherzo Codium extend
compass-design.co.uk
@rachelmccollin

8. Responsive Web Design with WordPress
Option 2 - responsive themes
Twenty 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 users
Useful 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 resources
http://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 Marcotte
Mobile First by Luke Wroblewski
Flexible Web Design and Stunning CSS3 by Zoe Mickley Gillenwater
Mobile 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