Slides from Dale Mugford's "Go Mobile With WordPress" WordCamp Toronto 2012 presentation.

1. Go Mobile With WordPress
Dale Mugford :: BraveNewCode Inc.
@bravenewcode | @dalemugford | bravenewcode.com

2. Go Mobile With WordPress

3. Dale Mugford
Co-Founder, BraveNewCode,
WordPress dev, plugin shop
Developing for the web since 1997
(15yrs!!)
Have used WordPress since 1.0
Currently living in Hamilton, ON—
home to a burgeoning tech scene
Live with Roz & Parker, our two pugs,
Chloe & Max

4. BraveNewCode
est. 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, BraveNewCode Logo
WordTwit Pro, Piggy Pro
premium plugins

5. Early Mobile Life
This Sony Clearnet phone was
my first, in 1998. I didn't own Ye olde "iPhone"
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 WAP Site
content

6. Mobile Web Cusp
(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
Android design
In 2008, Google reported over
50% of mobile search it saw was
from iOS, recently said its now
2/3rds

7. E
Mobile Data History
1G - voice
2G - "EDGE" some data, mostly
WAP transmissions (1.6mbps)
2G
3G - up to 14.4mbps
LTE - 21-100mbps 3 G
Today - Pretty much the "full web"
some limitations are device specific
(CSS3, HTML5) or are related to
device performance capabilities
LTE

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

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

10. Mobile Apps for Publishing Content
• Native WordPress apps:
— 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)

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

12. 47% unlikely to
71% expect return to a site they
websites to load have trouble using
quickly on mobile 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

13. Mobile Device Weather Patterns
Tablets
Smartphones

14. Majority of Internet Use:
Mobile vs. Desktop
North America 2012
Both
9%
Mobile
31%
Desktop
60%
Pew Research Report

15. Market Share by Platform
North America, August, 2012
Other
13% Android
20%
iPhone
67%
NetMarketShare.com

16. Market Share by Browser Engine
North America, August, 2012
Other
8%
Webkit
92%
NetMarketShare.com

17. Downloads of WPtouch
WordPress.org ~ Spring 2008 - Fall 2012
3,720,000
2,677,566
1,750,000
1,100,000
300,000
2008 2009 2010 2011 2012

18. Going Mobile:
There are plenty of options and solutions to take your
WordPress website mobile— many are free.

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

20. Solutions for Delivering Mobile
Versions of Your WordPress Website:
Mobile Themes & Plugins

21. Free Tools
Available
• WPtouch (Pro)
• WordPress Mobile Pack
• Wapple Architect Wapple
• WP Mobile Detector
• Mobify
• DotMobi
• Carrington (Mobile Edition)
• Möbius
Mobify WPto uch Pro
• And more...

22. WPtouch Pro
• Pro versionof the 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

23. 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
• High-end clientele— if you
have a large business or
organization website or
client, this is a good option

24. Key Considerations
Choosing a Mobile Theme/Plugin
• 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

25. Alternatives: Desktop Themes +
Responsive Design

26. 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 when screen sizes change.

27. Responsive Design Strengths
— Carries branding from desktop to mobile
— When done right, the results are impressive
— Designed to handle different screen sizes & devices
— Dev community is generally behind this direction, that
all sites should consider the responsive approach
— More and more themes are including responsive
components, most good ones are premium though

28. Responsive Design Weaknesses
— All desktop resources are sent, whether needed or not
(slower)
— Changes to theme require more development time
— Usually no user choice; they're forced in this view
— May not be the best choice for WordPress, specifically,
because WordPress users change plugins, update themes, etc.
— Can be expensive in development, often requires
maintenance contracts

29. Emerging Beliefs With Increasing
Mobile-Only Web Usage
"Don’t build for mobile based on
your website. Build for mobile as
if websites never existed in the
first place. Build for the person
who has never used a desktop
computer."
~ MG Siegler,
TechCrunch Columnist

30. Takeaways...

31. Summary
• Mobile web browsing has exploded in the past 5 years
• Great tools available to publish via mobile
• Most mobile visitors expect tailored content
• Data shows mobile WebKit is still leading the browser pack
• Can use mobile theme/plugins to offer mobile versions quickly
and easily, often for free or a small fee
• Responsive Design is also a viable method, but can be more
expensive, time consuming and difficult to maintain

32. Thank you.
Dale Mugford :: BraveNewCode Inc.
@bravenewcode | @dalemugford | bravenewcode.com