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
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
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
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
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
