Your SlideShare is downloading. ×
Make Your WordPress Site Mobile Friendly
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Make Your WordPress Site Mobile Friendly

652
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
652
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 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 Mobile1. Fast to Load
    • 43. Best Practices for Mobile1. Fast to Load • Prioritize content and features which mobile users will want to access
    • 44. Best Practices for Mobile1. 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 Mobile1. Fast to Load • Prioritize content and features which mobile users will want to access • If possible, optimize image sizes for mobile devices2. Visible
    • 46. Best Practices for Mobile1. Fast to Load • Prioritize content and features which mobile users will want to access • If possible, optimize image sizes for mobile devices2. Visible • high contrast between background and text
    • 47. Best Practices for Mobile1. Fast to Load • Prioritize content and features which mobile users will want to access • If possible, optimize image sizes for mobile devices2. 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 Mobile3. Simple to Navigate
    • 50. Best Practices for Mobile3. Simple to Navigate • minimize scrolling, and only have vertical
    • 51. Best Practices for Mobile3. 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 Mobile3. Simple to Navigate • minimize scrolling, and only have vertical • use link/button colour, size and position to emphasize priority for navigation4. Accessible
    • 53. Best Practices for Mobile3. Simple to Navigate • minimize scrolling, and only have vertical • use link/button colour, size and position to emphasize priority for navigation4. Accessible • support vertical and horizontal orientations
    • 54. Best Practices for Mobile3. Simple to Navigate • minimize scrolling, and only have vertical • use link/button colour, size and position to emphasize priority for navigation4. Accessible • support vertical and horizontal orientations • avoid use of proprietary technologies (eg. Flash)
    • 55. Making WordPress Mobile
    • 56. Making WordPress Mobile3 Options to make yourWordPress site mobilefriendly:
    • 57. Making WordPress Mobile3 Options to make yourWordPress site mobilefriendly: 1. Use a third party mobile service
    • 58. Making WordPress Mobile3 Options to make yourWordPress site mobilefriendly: 1. Use a third party mobile service 2. Use a responsive theme
    • 59. Making WordPress Mobile3 Options to make yourWordPress site mobilefriendly: 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 ServicesHow they work:
    • 62. Option1: Third Party ServicesHow they work: • Automatically generate mobile based on your html/css/images
    • 63. Option1: Third Party ServicesHow 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 ServicesHow 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 ServicesHow 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 ThemeHow they work:
    • 81. Option 2: A Responsive ThemeHow they work: • Use CSS and Javascript to adapt the theme/layout to the user’s device (Responsive design)
    • 82. Option 2: A Responsive ThemeHow 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 ThemeHow 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 ThemeHow 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 ThemePros
    • 87. Option 2: A Responsive ThemePros• One theme for all
    • 88. Option 2: A Responsive ThemePros• One theme for all• Some beautiful options
    • 89. Option 2: A Responsive ThemePros• One theme for all• Some beautiful options• Support many devices
    • 90. Option 2: A Responsive ThemePros• One theme for all• Some beautiful options• Support many devices• Can be very impressive if done right
    • 91. Option 2: A Responsive ThemePros Cons• One theme for all• Some beautiful options• Support many devices• Can be very impressive if done right
    • 92. Option 2: A Responsive ThemePros 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 ThemePros 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 ThemePros 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 ThemePros 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 ThemePros 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 ThemeWordPress Mobile Pack & WP MobileDetector
    • 111. Option 3: A Separate Mobile ThemeWordPress Mobile Pack & WP MobileDetector • Detect mobile devices and serve alternate theme
    • 112. Option 3: A Separate Mobile ThemeWordPress Mobile Pack & WP MobileDetector • Detect mobile devices and serve alternate theme • Are both bundled with default themes
    • 113. Option 3: A Separate Mobile ThemeWordPress Mobile Pack & WP MobileDetector • Detect mobile devices and serve alternate theme • Are both bundled with default themes • Themes can be customized
    • 114. Option 3: A Separate Mobile ThemeWordPress Mobile Pack & WP MobileDetector • 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 ThemeWordPress Mobile Pack & WP MobileDetector • 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 ThemeWPTouch
    • 118. Option 3: A Separate Mobile ThemeWPTouch • Plugin that creates ‘app-like’ theme for mobile devices
    • 119. Option 3: A Separate Mobile ThemeWPTouch • Plugin that creates ‘app-like’ theme for mobile devices • Settings are customizable using a settings panel
    • 120. Option 3: A Separate Mobile ThemeWPTouch • 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 ThemeWPTouch • 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 ThemeWPTouch • 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 ThemeWPTouch • 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 ThemeWPTouch Pro
    • 127. Option 3: A Separate Mobile ThemeWPTouch Pro• Premium version of WPTouch
    • 128. Option 3: A Separate Mobile ThemeWPTouch Pro• Premium version of WPTouch• Advanced customization options
    • 129. Option 3: A Separate Mobile ThemeWPTouch Pro• Premium version of WPTouch• Advanced customization options• Themes (and child themes)
    • 130. Option 3: A Separate Mobile ThemeWPTouch Pro• Premium version of WPTouch• Advanced customization options• Themes (and child themes)• Advertising options, App Mode
    • 131. Option 3: A Separate Mobile ThemeWPTouch 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 ThemeWPTouch 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 ThemePros
    • 135. Option 3: A Separate Mobile ThemePros• Will work with existing desktop theme (any WordPress site)
    • 136. Option 3: A Separate Mobile ThemePros• Will work with existing desktop theme (any WordPress site)• Can be quick to implement
    • 137. Option 3: A Separate Mobile ThemePros• 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 ThemePros• 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 ThemePros 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 ThemePros 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 ThemePros 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 ThemePros 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