Slides from Dale Mugford's Mobile WordPress presentation at WordCamp Toronto on November 5th, 2011.

1. Mobile WordPress Dale Mugford
@dalemugford // www.bravenewcode.com
WordCamp Toronto 2011

3. Dale Mugford
Mobile WordPress BraveNewCode Inc.

4. Overview

5. Overview
• Who I am
• Short history of the mobile web
• Tools you can use to publish
• Mobile stats
• Tools & methods for WordPress sites on mobile devices
• Q&A (time pending)

6. Dale Mugford
• Co-Founder, BraveNewCode Inc.
• Developing for the web since
1997
• Have used WordPress since 1.0
• Currently living in the Hammer!
• Two pugs, Chloe & Max

7. Dale Mugford
• Co-Founder, BraveNewCode Inc.
• Developing for the web since
1997
• Have used WordPress since 1.0
• Currently living in the Hammer!
• Two pugs, Chloe & Max

8. BraveNewCode
BraveNewCode.com

9. BraveNewCode
• Officially founded in 2008
• Co-founded with Duane Storey
(@duanestorey), well-known
engineer and sorcerer
• Started as web design & dev studio
• Created WPtouch, WordTwit,
Piggy, Crossroads, BuddyPress
Geo plugins for WordPress
• Currently offer WPtouch Pro,
WordTwit Pro, Piggy Pro premium BraveNewCode.com
plugins

10. Mobile Web History
Ye olde
WAP Site

11. Mobile Web History
• This Sony Clearnet phone was
my first, in 1998. I didn't own Ye olde
another until the iPhone was
released in 2007
• Early 2000's had WAP. (More
like "CRWAP")— limited
XHTML, CSS, well behind
where desktop web was at
• Characterized by slow
connections, minimal content,
poor means of accessing
content WAP Site

12. Mobile Web History

13. E
Mobile Web History
• 1G - voice
G
• 2G "EDGE" some data, mostly WAP
4
transmissions (1.6mbps)
• 3G - up to 14.4mbps
• "4G" around the corner,
3G
21-100mbps
• Offers pretty fast data transmission,
most smartphones have full http
support
• Pretty much the "full web" some
limitations are device specific (i.e
flash on iOS) or are related to device
performance

14. Mobile Web History
(continued)
• Design and style of both Before iPhone
hardware and software for the Android design
iPhone inspired mobile
competitors
• Capabilities of these devices,
coupled with the ease of use
for web browsing led to an
explosion in mobile web
surfing between 2008-2010
After iPhone
• In 2008, Google reported over Android design
50% of mobile search it saw
was from iOS, recently said its
now 2/3rds

15. Publishing Tools
More and more, publishing content for WordPress websites is happening on
mobile devices.

16. WordPress Native App (iPhone/iPad/WebOS)

17. Mobile Applications for Publishing Content
• Native WordPress applications on a variety of platforms
— WordPress for iOS
— WordPress for Android
— WordPress for Windows Phone 7
— WordPress for Blackberry
— WordPress for WebOS
— WordPress for Nokia
• Other options:
— iBlogger, BlogPress (iPhone)
— wpToGo, moBlog (Android)
— Wordmobi, Scribe, Wavelog (Nokia)

18. Mobile Stats
Mobile browsing has exploded, and has been evolving and changing on a
monthly basis.

19. Equation Research 2011 survey

20. 71% expect
websites to load
quickly on mobile
Equation Research 2011 survey

21. 71% expect
websites to load
quickly on mobile
43% said they won't
return to a slow
website on mobile…
Yikes!
Equation Research 2011 survey

22. 47% unlikely to
71% expect return to a site
websites to load they have trouble
using on mobile
quickly on mobile
43% said they won't
return to a slow
website on mobile…
Yikes!
Equation Research 2011 survey

23. 47% unlikely to
71% expect return to a site
websites to load they have trouble
using on mobile
quickly on mobile
43% said they won't
return to a slow
website on mobile…
Yikes!
57% had trouble
with a website via
mobile device
Equation Research 2011 survey

24. 47% unlikely to
71% expect return to a site
websites to load they have trouble
using on mobile
quickly on mobile
43% said they won't
return to a slow
website on mobile…
Yikes!
57% had trouble
34% said they'd
with a website via prefer to use a
mobile device website that has a
mobile version
Equation Research 2011 survey

25. Where People Surf On Mobile
North America 2009
Nielson's Critical Mass

26. Where People Surf On Mobile
North America 2009
Work
12%
Outdoors
7%
Commute
5%
Home
76%
Nielson's Critical Mass

27. Mobile Browsing Share by Platform
North America, October 2011
NetMarketShare.co

28. Mobile Browsing Share by Platform
North America, October 2011
Oth
BB
4%
5%
Android
28%
iPhone
63%
NetMarketShare.co

29. Mobile Browsing Share by Engine
North America, October 2011
NetMarketShare.co

30. Mobile Browsing Share by Engine
North America, October 2011
Other
7%
Webkit
93%
NetMarketShare.co

31. Downloads of WPtouch
WordPress.org
Spring 2008 - Fall 2011

32. Downloads of WPtouch
WordPress.org
Spring 2008 - Fall 2011
2,677,566
1,750,000
1,100,000
108,000
2008 2009 2010 2011

33. Solutions for Mobile Presentation
"It is increasingly difficult to talk about the Internet, or media and marketing
without the conversation quickly turning to mobile phones."
~ Nielson's Critical Mass Report

34. Key Considerations For WordPress Sites on Mobile

35. Key Considerations For WordPress Sites on Mobile
• Who comprises your audience? (geographically)
• Focus on your important content to offer on mobile
• Remove clutter, simplify, (when in doubt, leave it out)
• Consider desktop plugins and how they'll work (or won't)
• What is your budget?

36. Free Mobile Themes
& Plugins Available
Obox Mobile
ch Pro
W Ptou
Mobify

37. Free Mobile Themes
& Plugins Available
• WPtouch
• WordPress Mobile Pack
• Wapple Architect
• WP Mobile Detector Obox Mobile
• Mobify
• 1st Giant Leap
• DotMobi
ch Pro
Ptou
• Video Elements
W
• Carrington (Mobile Edition)
• Möbius
Mobify
• Mobility

38. Popular WordPress Mobile Plugins
WordPress.org, October 2011

39. Popular WordPress Mobile Plugins
WordPress.org, October 2011
WPtouch 2,677,566
WP Mobile Pack 238,727
WP Mobile Edition 228,559
Wapple 53,965
WP Mobile Detector 48,545
WPtap 18,529
0 750000 1500000 2250000 3000000

40. Key Considerations When Choosing a Mobile
Option for your WordPress Website

41. Key Considerations When Choosing a Mobile
Option for your WordPress Website
• Type of website (blog, company, video, audio, photo, etc)
• Device support
• Speed
• Customization & control
• Ease of use, intuitive design
• Content, theme curation and maintenance
• Web-app, native app capabilities

42. WPtouch (Pro)

43. WPtouch (Pro)
• Most popular free mobile plugin for
WordPress
• Not particularly designed for any one
type of site, generally handles most
very well
• Easy to setup and use (even just
activating it is a good start!)
• Works by detecting devices, and
serving its mobile theme
• Pro version offers significantly more
control, customization, good for client
sites
• Pro version supports iPad and serves
another theme

44. WordPress Mobile
Pack
• Toolkit for a mobile
WordPress site
• Good Nokia device support
(WPtouch does not support
Nokia)
• Generally easy to use, users
rated it 4/5 stars
• Can be used with WPtouch
to handle lower end devices
• Not updated since 2010, so
not known if still in active dev

45. WordPress Mobile
Pack
• Toolkit for a mobile
WordPress site
• Good Nokia device support
(WPtouch does not support
Nokia)
• Generally easy to use, users
rated it 4/5 stars
• Can be used with WPtouch
to handle lower end devices
• Not updated since 2010, so
not known if still in active dev

46. Mobify

47. Mobify
• Works by proxy server—
requests get sent to Mobify's
servers and it handles the
serving of the mobile views on
your site automatically
• Limited free plugin for
WordPress paid service is
pricey, but very good
• Very high-end clientele— if you
have a large business or
organization website or client,
this is a good option

48. What Is Responsive Design?

49. What Is Responsive Design?
A method of designing websites so that content flexibly adapts to different
screen sizes.
Includes re-organizing content on webpages and/or removing or adding
elements as necessary.

50. Responsive Design Example
hicksdesign.co.uk

51. Responsive Design Example
hicksdesign.co.uk

52. Responsive Design Strengths

53. Responsive Design Strengths
— Carries branding from desktop to mobile
— Designed to handle different screen sizes & devices
— Some believe this is the new direction of web design,
that all sites should consider the responsive approach

54. Responsive Design Weaknesses

55. Responsive Design Weaknesses
— All desktop resources are downloaded to the mobile device,
whether needed or not (speed issue)
— Changes to desktop theme require additional consideration
(more development time)
— If not designed well, visitors may think site is 'broken', or
missing elements
— No way to switch to full desktop theme, may frustrate
visitors

56. Takeaways

57. Summary

58. Summary
• Mobile web browsing has exploded in the past 4 years
• Great tools available to publish via mobile
• Most mobile visitors expect tailored content
• Data shows mobile WebKit is leading the browser pack
• Lots of themes and plugins to offer mobile versions
• Responsive Design is also emerging as a viable tool to craft
websites with mobile + tablets in mind

59. www.bravenewcode.com/

60. Thank you. www.bravenewcode.com/
@dalemugford // www.bravenewcode.com