1. Make your WordPress site
Mobile Friendly
Dave Zille
@davezille dave@dazil.com

2. Dave Zille
• Built first website in 1994
• Owner, dazil Internet Services
• WordPress dev, WordPress
conversions
• Mobile sites and Apps
• Instructor, BCIT
• Project Management for New Media
• Dad and Husband
@davezille dave@dazil.com

3. Smartphone History

4. Smartphone History
• early 1990s
• Handheld cellular
phones

5. Smartphone History
• early 1990s
• Handheld cellular
phones

6. Smartphone History
• early 1990s
• Handheld cellular
phones
• late 1990s
• Digital cellular
phones
• Web Browser

7. Smartphone History
• early 1990s
• Handheld cellular
phones
• late 1990s
• Digital cellular
phones
• Web Browser

8. Smartphone History

9. Smartphone History
• late 1990s
• Messaging
• Blackberry

10. Smartphone History
• late 1990s
• Messaging
• Blackberry

11. Smartphone History
• late 1990s
• Messaging
• Blackberry
• late 1990s
• PDAs
• PalmPilot

12. Smartphone History
• late 1990s
• Messaging
• Blackberry
• late 1990s
• PDAs
• PalmPilot

13. Smartphone History

14. Smartphone History
• early 2000s
• Pocket sized
• SMS (“Texting”)
• Camera, Multimedia

15. Smartphone History
• early 2000s
• Pocket sized
• SMS (“Texting”)
• Camera, Multimedia

16. Smartphone History
• early 2000s
• Pocket sized
• SMS (“Texting”)
• Camera, Multimedia
• mid 2000s
• Integration of Phone and PDA
• Palm Treo

17. Smartphone History
• early 2000s
• Pocket sized
• SMS (“Texting”)
• Camera, Multimedia
• mid 2000s
• Integration of Phone and PDA
• Palm Treo

18. Smartphone History

19. Smartphone History
• 2007 - iPhone
• Full Browser
• Apps
• Camera
• Music Player
• Touch Interface
• First “Smart Phone”

20. Smartphone History
• 2007 - iPhone
• Full Browser
• Apps
• Camera
• Music Player
• Touch Interface
• First “Smart Phone”

21. Smartphone History

22. Smartphone History
• Today

23. Smartphone History
• Today
• Hardware, software and infrastructure:

24. Smartphone History
• Today
• Hardware, software and infrastructure:
• Variety of Smartphone Devices and
Mobile Operating Systems

25. Smartphone History
• Today
• Hardware, software and infrastructure:
• Variety of Smartphone Devices and
Mobile Operating Systems
• iOS, Android, Windows Phone,
Blackberry OS

26. Smartphone History
• Today
• Hardware, software and infrastructure:
• Variety of Smartphone Devices and
Mobile Operating Systems
• iOS, Android, Windows Phone,
Blackberry OS
• Fast digital data networks

27. Smartphone History
• Today
• Hardware, software and infrastructure:
• Variety of Smartphone Devices and
Mobile Operating Systems
• iOS, Android, Windows Phone,
Blackberry OS
• Fast digital data networks
• 3G, LTE

28. Mobile Stats

29. Mobile Stats
• By 2013, more people will use
smartphones than desktop PCs to
get online

30. Mobile Stats
• By 2013, more people will use
smartphones than desktop PCs to
get online
• One mobile device for every human by
2015

31. Mobile Stats
• By 2013, more people will use
smartphones than desktop PCs to
get online
• One mobile device for every human by
2015
• Now seeing users who have never used
the web on a desktop computer, only on a
mobile device

32. Why is Mobile Important?

33. Why is Mobile Important?
• For Your Business:

34. Why is Mobile Important?
• For Your Business:
• 95% of smartphone users have searched for local
information

35. Why is Mobile Important?
• For Your Business:
• 95% of smartphone users have searched for local
information
• 60% of smartphone users will call a business after
searching

36. Why is Mobile Important?
• For Your Business:
• 95% of smartphone users have searched for local
information
• 60% of smartphone users will call a business after
searching
• 40% of users who have a bad mobile experience will go
to a competitor

37. Why is Mobile Important?

38. Why is Mobile Important?
• For Your Personal site or Blog:

39. Why is Mobile Important?
• For Your Personal site or Blog:
• You want to reach as many readers as possible

40. Why is Mobile Important?
• For Your Personal site or Blog:
• You want to reach as many readers as possible
• Will boost engagement

41. Best Practices for Mobile

42. Best Practices for Mobile
1. Fast to Load

43. Best Practices for Mobile
1. Fast to Load
• Prioritize content and features which mobile users
will want to access

44. Best Practices for Mobile
1. Fast to Load
• Prioritize content and features which mobile users
will want to access
• If possible, optimize image sizes for mobile devices

45. Best Practices for Mobile
1. Fast to Load
• Prioritize content and features which mobile users
will want to access
• If possible, optimize image sizes for mobile devices
2. Visible

46. Best Practices for Mobile
1. Fast to Load
• Prioritize content and features which mobile users
will want to access
• If possible, optimize image sizes for mobile devices
2. Visible
• high contrast between background and text

47. Best Practices for Mobile
1. Fast to Load
• Prioritize content and features which mobile users
will want to access
• If possible, optimize image sizes for mobile devices
2. Visible
• high contrast between background and text
• ensure content fits and can be read without
zooming/pinching

48. Best Practices for Mobile

49. Best Practices for Mobile
3. Simple to Navigate

50. Best Practices for Mobile
3. Simple to Navigate
• minimize scrolling, and only have vertical

51. Best Practices for Mobile
3. Simple to Navigate
• minimize scrolling, and only have vertical
• use link/button colour, size and position to
emphasize priority for navigation

52. Best Practices for Mobile
3. Simple to Navigate
• minimize scrolling, and only have vertical
• use link/button colour, size and position to
emphasize priority for navigation
4. Accessible

53. Best Practices for Mobile
3. Simple to Navigate
• minimize scrolling, and only have vertical
• use link/button colour, size and position to
emphasize priority for navigation
4. Accessible
• support vertical and horizontal orientations

54. Best Practices for Mobile
3. Simple to Navigate
• minimize scrolling, and only have vertical
• use link/button colour, size and position to
emphasize priority for navigation
4. Accessible
• support vertical and horizontal orientations
• avoid use of proprietary technologies (eg. Flash)

55. Making WordPress Mobile

56. Making WordPress Mobile
3 Options to make your
WordPress site mobile
friendly:

57. Making WordPress Mobile
3 Options to make your
WordPress site mobile
friendly:
1. Use a third party mobile
service

58. Making WordPress Mobile
3 Options to make your
WordPress site mobile
friendly:
1. Use a third party mobile
service
2. Use a responsive theme

59. Making WordPress Mobile
3 Options to make your
WordPress site mobile
friendly:
1. Use a third party mobile
service
2. Use a responsive theme
3. Have a separate mobile theme

60. Option1: Third Party Services

61. Option1: Third Party Services
How they work:

62. Option1: Third Party Services
How they work:
• Automatically generate mobile
based on your html/css/images

63. Option1: Third Party Services
How they work:
• Automatically generate mobile
based on your html/css/images
• Let you to take bits of content
and position on mobile canvas

64. Option1: Third Party Services
How they work:
• Automatically generate mobile
based on your html/css/images
• Let you to take bits of content
and position on mobile canvas
• Provide tools to let you visually
customize elements

65. Option1: Third Party Services
How they work:
• Automatically generate mobile Example Services:
based on your html/css/images
• Mobify
• Let you to take bits of content
and position on mobile canvas • bMobilized
• Provide tools to let you visually • MobisiteGalore
customize elements

66. Option1: Third Party Services
• Services that provide a mobile adaptation
of your website

67. Option1: Third Party Services
• Services that provide a mobile adaptation
of your website
Pros

68. Option1: Third Party Services
• Services that provide a mobile adaptation
of your website
Pros
• Can take just minutes to
preview your site

69. Option1: Third Party Services
• Services that provide a mobile adaptation
of your website
Pros
• Can take just minutes to
preview your site
• Up and running quickly

70. Option1: Third Party Services
• Services that provide a mobile adaptation
of your website
Pros
• Can take just minutes to
preview your site
• Up and running quickly
• If done right, can be a great
mobile experience

71. Option1: Third Party Services
• Services that provide a mobile adaptation
of your website
Pros Cons
• Can take just minutes to
preview your site
• Up and running quickly
• If done right, can be a great
mobile experience

72. Option1: Third Party Services
• Services that provide a mobile adaptation
of your website
Pros Cons
• Can take just minutes to • Will usually require some
customization
preview your site
• Up and running quickly
• If done right, can be a great
mobile experience

73. Option1: Third Party Services
• Services that provide a mobile adaptation
of your website
Pros Cons
• Can take just minutes to • Will usually require some
customization
preview your site
• Up and running quickly • Restricted to the tools
offered by the provider
• If done right, can be a great
mobile experience

74. Option1: Third Party Services
• Services that provide a mobile adaptation
of your website
Pros Cons
• Can take just minutes to • Will usually require some
customization
preview your site
• Up and running quickly • Restricted to the tools
offered by the provider
• If done right, can be a great
mobile experience • Are often dependent on the
design of your current site

75. Option1: Third Party Services
• Services that provide a mobile adaptation
of your website
Pros Cons
• Can take just minutes to • Will usually require some
customization
preview your site
• Up and running quickly • Restricted to the tools
offered by the provider
• If done right, can be a great
mobile experience • Are often dependent on the
design of your current site
• Can be expensive

76. Option 2: Use a Responsive Theme

77. Option 2: Use a Responsive Theme
• What is responsive web
design?

78. Option 2: Use a Responsive Theme
• What is responsive web
design?
• A single layout which
adapts automatically for
the device

79. Option 2: A Responsive Theme

80. Option 2: A Responsive Theme
How they work:

81. Option 2: A Responsive Theme
How they work:
• Use CSS and Javascript to
adapt the theme/layout to the
user’s device (Responsive
design)

82. Option 2: A Responsive Theme
How they work:
• Use CSS and Javascript to
adapt the theme/layout to the
user’s device (Responsive
design)
• Single theme, no additional
plugins or software

83. Option 2: A Responsive Theme
How they work:
• Use CSS and Javascript to
adapt the theme/layout to the
user’s device (Responsive
design)
• Single theme, no additional
plugins or software
• Install like a regular theme

84. Option 2: A Responsive Theme
How they work:
Sample Themes:
• Use CSS and Javascript to
adapt the theme/layout to the • Twenty Eleven
user’s device (Responsive
design) • Responsive WordPress
theme Framework
• Single theme, no additional • WooThemes Canvas
plugins or software
• Install like a regular theme • SmartStart

85. Option 2: A Responsive Theme

86. Option 2: A Responsive Theme
Pros

87. Option 2: A Responsive Theme
Pros
• One theme for all

88. Option 2: A Responsive Theme
Pros
• One theme for all
• Some beautiful
options

89. Option 2: A Responsive Theme
Pros
• One theme for all
• Some beautiful
options
• Support many devices

90. Option 2: A Responsive Theme
Pros
• One theme for all
• Some beautiful
options
• Support many devices
• Can be very
impressive if done
right

91. Option 2: A Responsive Theme
Pros Cons
• One theme for all
• Some beautiful
options
• Support many devices
• Can be very
impressive if done
right

92. Option 2: A Responsive Theme
Pros Cons
• One theme for all • Can be difficult to maintain/
customize
• Some beautiful
options
• Support many devices
• Can be very
impressive if done
right

93. Option 2: A Responsive Theme
Pros Cons
• One theme for all • Can be difficult to maintain/
customize
• Some beautiful
options • Serves all assets to the device
(images, etc)
• Support many devices
• Can be very
impressive if done
right

94. Option 2: A Responsive Theme
Pros Cons
• One theme for all • Can be difficult to maintain/
customize
• Some beautiful
options • Serves all assets to the device
(images, etc)
• Support many devices
• More expensive to build from
scratch
• Can be very
impressive if done
right

95. Option 2: A Responsive Theme
Pros Cons
• One theme for all • Can be difficult to maintain/
customize
• Some beautiful
options • Serves all assets to the device
(images, etc)
• Support many devices
• More expensive to build from
scratch
• Can be very
impressive if done
right
• Limited device-specific control

96. Option 2: A Responsive Theme
Pros Cons
• One theme for all • Can be difficult to maintain/
customize
• Some beautiful
options • Serves all assets to the device
(images, etc)
• Support many devices
• More expensive to build from
scratch
• Can be very
impressive if done
right
• Limited device-specific control
• Can’t keep your existing
desktop theme

97. Option 3: A Separate Mobile Theme

98. Option 3: A Separate Mobile Theme

99. Option 3: A Separate Mobile Theme
How it works:

100. Option 3: A Separate Mobile Theme
How it works:
• A plugin detects the user’s
device and serves either the
desktop or mobile theme

101. Option 3: A Separate Mobile Theme
How it works:
• A plugin detects the user’s
device and serves either the
desktop or mobile theme
• Plugins are bundled with
mobile themes which can be
customized

102. Option 3: A Separate Mobile Theme

103. Option 3: A Separate Mobile Theme

104. Option 3: A Separate Mobile Theme
Some options:

105. Option 3: A Separate Mobile Theme
Some options:
• WordPress Mobile Pack

106. Option 3: A Separate Mobile Theme
Some options:
• WordPress Mobile Pack
• WP Mobile Detector

107. Option 3: A Separate Mobile Theme
Some options:
• WordPress Mobile Pack
• WP Mobile Detector
• WPTouch

108. Option 3: A Separate Mobile Theme
Some options:
• WordPress Mobile Pack
• WP Mobile Detector
• WPTouch
• WPTouch Pro

109. Option 3: A Separate Mobile Theme

110. Option 3: A Separate Mobile Theme
WordPress Mobile Pack & WP Mobile
Detector

111. Option 3: A Separate Mobile Theme
WordPress Mobile Pack & WP Mobile
Detector
• Detect mobile devices and serve alternate theme

112. Option 3: A Separate Mobile Theme
WordPress Mobile Pack & WP Mobile
Detector
• Detect mobile devices and serve alternate theme
• Are both bundled with default themes

113. Option 3: A Separate Mobile Theme
WordPress Mobile Pack & WP Mobile
Detector
• Detect mobile devices and serve alternate theme
• Are both bundled with default themes
• Themes can be customized

114. Option 3: A Separate Mobile Theme
WordPress Mobile Pack & WP Mobile
Detector
• Detect mobile devices and serve alternate theme
• Are both bundled with default themes
• Themes can be customized
• Both free (WP Mobile Detector has premium/paid upgrade)

115. Option 3: A Separate Mobile Theme
WordPress Mobile Pack & WP Mobile
Detector
• Detect mobile devices and serve alternate theme
• Are both bundled with default themes
• Themes can be customized
• Both free (WP Mobile Detector has premium/paid upgrade)
• Demo

116. Option 3: A Separate Mobile Theme

117. Option 3: A Separate Mobile Theme
WPTouch

118. Option 3: A Separate Mobile Theme
WPTouch
• Plugin that creates ‘app-like’ theme for mobile devices

119. Option 3: A Separate Mobile Theme
WPTouch
• Plugin that creates ‘app-like’ theme for mobile devices
• Settings are customizable using a settings panel

120. Option 3: A Separate Mobile Theme
WPTouch
• Plugin that creates ‘app-like’ theme for mobile devices
• Settings are customizable using a settings panel
• No coding required

121. Option 3: A Separate Mobile Theme
WPTouch
• Plugin that creates ‘app-like’ theme for mobile devices
• Settings are customizable using a settings panel
• No coding required
• Up and running quickly

122. Option 3: A Separate Mobile Theme
WPTouch
• Plugin that creates ‘app-like’ theme for mobile devices
• Settings are customizable using a settings panel
• No coding required
• Up and running quickly
• Free

123. Option 3: A Separate Mobile Theme
WPTouch
• Plugin that creates ‘app-like’ theme for mobile devices
• Settings are customizable using a settings panel
• No coding required
• Up and running quickly
• Free
• Demo

124. Option 3: A Separate Mobile Theme

125. Option 3: A Separate Mobile Theme

126. Option 3: A Separate Mobile Theme
WPTouch Pro

127. Option 3: A Separate Mobile Theme
WPTouch Pro
• Premium version of WPTouch

128. Option 3: A Separate Mobile Theme
WPTouch Pro
• Premium version of WPTouch
• Advanced customization options

129. Option 3: A Separate Mobile Theme
WPTouch Pro
• Premium version of WPTouch
• Advanced customization options
• Themes (and child themes)

130. Option 3: A Separate Mobile Theme
WPTouch Pro
• Premium version of WPTouch
• Advanced customization options
• Themes (and child themes)
• Advertising options, App Mode

131. Option 3: A Separate Mobile Theme
WPTouch Pro
• Premium version of WPTouch
• Advanced customization options
• Themes (and child themes)
• Advertising options, App Mode
• About $40/site

132. Option 3: A Separate Mobile Theme
WPTouch Pro
• Premium version of WPTouch
• Advanced customization options
• Themes (and child themes)
• Advertising options, App Mode
• About $40/site
• Demo

133. Option 3: A Separate Mobile Theme

134. Option 3: A Separate Mobile Theme
Pros

135. Option 3: A Separate Mobile Theme
Pros
• Will work with existing
desktop theme (any
WordPress site)

136. Option 3: A Separate Mobile Theme
Pros
• Will work with existing
desktop theme (any
WordPress site)
• Can be quick to implement

137. Option 3: A Separate Mobile Theme
Pros
• Will work with existing
desktop theme (any
WordPress site)
• Can be quick to implement
• Most allow user to toggle to
desktop site

138. Option 3: A Separate Mobile Theme
Pros
• Will work with existing
desktop theme (any
WordPress site)
• Can be quick to implement
• Most allow user to toggle to
desktop site
• Most are customizable and
highly usable

139. Option 3: A Separate Mobile Theme
Pros Cons
• Will work with existing
desktop theme (any
WordPress site)
• Can be quick to implement
• Most allow user to toggle to
desktop site
• Most are customizable and
highly usable

140. Option 3: A Separate Mobile Theme
Pros Cons
• Will work with existing
desktop theme (any
• Separate theme to maintain
WordPress site)
• Can be quick to implement
• Most allow user to toggle to
desktop site
• Most are customizable and
highly usable

141. Option 3: A Separate Mobile Theme
Pros Cons
• Will work with existing
desktop theme (any
• Separate theme to maintain
WordPress site) • Customization may be
required/desired
• Can be quick to implement
• Most allow user to toggle to
desktop site
• Most are customizable and
highly usable

142. Option 3: A Separate Mobile Theme
Pros Cons
• Will work with existing
desktop theme (any
• Separate theme to maintain
WordPress site) • Customization may be
required/desired
• Can be quick to implement
• Some cost money
• Most allow user to toggle to
desktop site
• Most are customizable and
highly usable

143. Considerations

144. Considerations
• Your budget

145. Considerations
• Your budget
• Options range from free to expensive

146. Considerations
• Your budget
• Options range from free to expensive
• Your skillset

147. Considerations
• Your budget
• Options range from free to expensive
• Your skillset
• Responsive design, PHP

148. Considerations
• Your budget
• Options range from free to expensive
• Your skillset
• Responsive design, PHP
• Future plans

149. Considerations
• Your budget
• Options range from free to expensive
• Your skillset
• Responsive design, PHP
• Future plans
• Do you have a redesign planned?

150. Considerations
• Your budget
• Options range from free to expensive
• Your skillset
• Responsive design, PHP
• Future plans
• Do you have a redesign planned?
• User experience

151. Considerations
• Your budget
• Options range from free to expensive
• Your skillset
• Responsive design, PHP
• Future plans
• Do you have a redesign planned?
• User experience
• Usability, Load times, image sizes, etc

152. The Great Debate

153. The Great Debate
• Dedicated Mobile site
vs. ‘One site for all Devices’

154. The Great Debate
• Dedicated Mobile site
vs. ‘One site for all Devices’
• One site for all means less control over content delivery

155. The Great Debate
• Dedicated Mobile site
vs. ‘One site for all Devices’
• One site for all means less control over content delivery
• Dedicated site means more control

156. The Great Debate
• Dedicated Mobile site
vs. ‘One site for all Devices’
• One site for all means less control over content delivery
• Dedicated site means more control
• Seperate Mobile vs Reponsive Website Presidential
Smackdown

157. Summary

158. Summary
• Mobile web usage is skyrocketing

159. Summary
• Mobile web usage is skyrocketing
• Users expect a good mobile experience

160. Summary
• Mobile web usage is skyrocketing
• Users expect a good mobile experience
• Many solutions exist for providing a mobile
experience to your users

161. Summary
• Mobile web usage is skyrocketing
• Users expect a good mobile experience
• Many solutions exist for providing a mobile
experience to your users
• Low barriers to entry (eg. low cost)

162. Summary
• Mobile web usage is skyrocketing
• Users expect a good mobile experience
• Many solutions exist for providing a mobile
experience to your users
• Low barriers to entry (eg. low cost)
• Now is the time to support mobile users!

163. Resources
• Slides and resources available at:
• http://www.dazil.com/wordcampyvr2012

164. Thank You!
Dave Zille
@davezille dave@dazil.com