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