Make Your WordPress Site Mobile Friendly

1,005 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
1,005
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

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
  • Make Your WordPress Site Mobile Friendly

    1. 1. Make your WordPress site Mobile Friendly Dave Zille @davezille dave@dazil.com
    2. 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. 3. Smartphone History
    4. 4. Smartphone History • early 1990s • Handheld cellular phones
    5. 5. Smartphone History • early 1990s • Handheld cellular phones
    6. 6. Smartphone History • early 1990s • Handheld cellular phones • late 1990s • Digital cellular phones • Web Browser
    7. 7. Smartphone History • early 1990s • Handheld cellular phones • late 1990s • Digital cellular phones • Web Browser
    8. 8. Smartphone History
    9. 9. Smartphone History • late 1990s • Messaging • Blackberry
    10. 10. Smartphone History • late 1990s • Messaging • Blackberry
    11. 11. Smartphone History • late 1990s • Messaging • Blackberry • late 1990s • PDAs • PalmPilot
    12. 12. Smartphone History • late 1990s • Messaging • Blackberry • late 1990s • PDAs • PalmPilot
    13. 13. Smartphone History
    14. 14. Smartphone History • early 2000s • Pocket sized • SMS (“Texting”) • Camera, Multimedia
    15. 15. Smartphone History • early 2000s • Pocket sized • SMS (“Texting”) • Camera, Multimedia
    16. 16. Smartphone History • early 2000s • Pocket sized • SMS (“Texting”) • Camera, Multimedia • mid 2000s • Integration of Phone and PDA • Palm Treo
    17. 17. Smartphone History • early 2000s • Pocket sized • SMS (“Texting”) • Camera, Multimedia • mid 2000s • Integration of Phone and PDA • Palm Treo
    18. 18. Smartphone History
    19. 19. Smartphone History • 2007 - iPhone • Full Browser • Apps • Camera • Music Player • Touch Interface • First “Smart Phone”
    20. 20. Smartphone History • 2007 - iPhone • Full Browser • Apps • Camera • Music Player • Touch Interface • First “Smart Phone”
    21. 21. Smartphone History
    22. 22. Smartphone History• Today
    23. 23. Smartphone History• Today • Hardware, software and infrastructure:
    24. 24. Smartphone History• Today • Hardware, software and infrastructure: • Variety of Smartphone Devices and Mobile Operating Systems
    25. 25. Smartphone History• Today • Hardware, software and infrastructure: • Variety of Smartphone Devices and Mobile Operating Systems • iOS, Android, Windows Phone, Blackberry OS
    26. 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. 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. 28. Mobile Stats
    29. 29. Mobile Stats• By 2013, more people will use smartphones than desktop PCs to get online
    30. 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. 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. 32. Why is Mobile Important?
    33. 33. Why is Mobile Important?• For Your Business:
    34. 34. Why is Mobile Important?• For Your Business: • 95% of smartphone users have searched for local information
    35. 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. 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. 37. Why is Mobile Important?
    38. 38. Why is Mobile Important?• For Your Personal site or Blog:
    39. 39. Why is Mobile Important?• For Your Personal site or Blog: • You want to reach as many readers as possible
    40. 40. Why is Mobile Important?• For Your Personal site or Blog: • You want to reach as many readers as possible • Will boost engagement
    41. 41. Best Practices for Mobile
    42. 42. Best Practices for Mobile1. Fast to Load
    43. 43. Best Practices for Mobile1. Fast to Load • Prioritize content and features which mobile users will want to access
    44. 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. 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. 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. 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. 48. Best Practices for Mobile
    49. 49. Best Practices for Mobile3. Simple to Navigate
    50. 50. Best Practices for Mobile3. Simple to Navigate • minimize scrolling, and only have vertical
    51. 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. 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. 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. 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. 55. Making WordPress Mobile
    56. 56. Making WordPress Mobile3 Options to make yourWordPress site mobilefriendly:
    57. 57. Making WordPress Mobile3 Options to make yourWordPress site mobilefriendly: 1. Use a third party mobile service
    58. 58. Making WordPress Mobile3 Options to make yourWordPress site mobilefriendly: 1. Use a third party mobile service 2. Use a responsive theme
    59. 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. 60. Option1: Third Party Services
    61. 61. Option1: Third Party ServicesHow they work:
    62. 62. Option1: Third Party ServicesHow they work: • Automatically generate mobile based on your html/css/images
    63. 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. 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. 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. 66. Option1: Third Party Services• Services that provide a mobile adaptation of your website
    67. 67. Option1: Third Party Services• Services that provide a mobile adaptation of your website Pros
    68. 68. Option1: Third Party Services• Services that provide a mobile adaptation of your website Pros • Can take just minutes to preview your site
    69. 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. 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. 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. 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. 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. 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. 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. 76. Option 2: Use a Responsive Theme
    77. 77. Option 2: Use a Responsive Theme• What is responsive web design?
    78. 78. Option 2: Use a Responsive Theme• What is responsive web design? • A single layout which adapts automatically for the device
    79. 79. Option 2: A Responsive Theme
    80. 80. Option 2: A Responsive ThemeHow they work:
    81. 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. 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. 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. 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. 85. Option 2: A Responsive Theme
    86. 86. Option 2: A Responsive ThemePros
    87. 87. Option 2: A Responsive ThemePros• One theme for all
    88. 88. Option 2: A Responsive ThemePros• One theme for all• Some beautiful options
    89. 89. Option 2: A Responsive ThemePros• One theme for all• Some beautiful options• Support many devices
    90. 90. Option 2: A Responsive ThemePros• One theme for all• Some beautiful options• Support many devices• Can be very impressive if done right
    91. 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. 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. 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. 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. 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. 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. 97. Option 3: A Separate Mobile Theme
    98. 98. Option 3: A Separate Mobile Theme
    99. 99. Option 3: A Separate Mobile Theme How it works:
    100. 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. 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. 102. Option 3: A Separate Mobile Theme
    103. 103. Option 3: A Separate Mobile Theme
    104. 104. Option 3: A Separate Mobile Theme Some options:
    105. 105. Option 3: A Separate Mobile Theme Some options: • WordPress Mobile Pack
    106. 106. Option 3: A Separate Mobile Theme Some options: • WordPress Mobile Pack • WP Mobile Detector
    107. 107. Option 3: A Separate Mobile Theme Some options: • WordPress Mobile Pack • WP Mobile Detector • WPTouch
    108. 108. Option 3: A Separate Mobile Theme Some options: • WordPress Mobile Pack • WP Mobile Detector • WPTouch • WPTouch Pro
    109. 109. Option 3: A Separate Mobile Theme
    110. 110. Option 3: A Separate Mobile ThemeWordPress Mobile Pack & WP MobileDetector
    111. 111. Option 3: A Separate Mobile ThemeWordPress Mobile Pack & WP MobileDetector • Detect mobile devices and serve alternate theme
    112. 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. 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. 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. 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. 116. Option 3: A Separate Mobile Theme
    117. 117. Option 3: A Separate Mobile ThemeWPTouch
    118. 118. Option 3: A Separate Mobile ThemeWPTouch • Plugin that creates ‘app-like’ theme for mobile devices
    119. 119. Option 3: A Separate Mobile ThemeWPTouch • Plugin that creates ‘app-like’ theme for mobile devices • Settings are customizable using a settings panel
    120. 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. 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. 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. 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. 124. Option 3: A Separate Mobile Theme
    125. 125. Option 3: A Separate Mobile Theme
    126. 126. Option 3: A Separate Mobile ThemeWPTouch Pro
    127. 127. Option 3: A Separate Mobile ThemeWPTouch Pro• Premium version of WPTouch
    128. 128. Option 3: A Separate Mobile ThemeWPTouch Pro• Premium version of WPTouch• Advanced customization options
    129. 129. Option 3: A Separate Mobile ThemeWPTouch Pro• Premium version of WPTouch• Advanced customization options• Themes (and child themes)
    130. 130. Option 3: A Separate Mobile ThemeWPTouch Pro• Premium version of WPTouch• Advanced customization options• Themes (and child themes)• Advertising options, App Mode
    131. 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. 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. 133. Option 3: A Separate Mobile Theme
    134. 134. Option 3: A Separate Mobile ThemePros
    135. 135. Option 3: A Separate Mobile ThemePros• Will work with existing desktop theme (any WordPress site)
    136. 136. Option 3: A Separate Mobile ThemePros• Will work with existing desktop theme (any WordPress site)• Can be quick to implement
    137. 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. 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. 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. 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. 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. 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. 143. Considerations
    144. 144. Considerations• Your budget
    145. 145. Considerations• Your budget • Options range from free to expensive
    146. 146. Considerations• Your budget • Options range from free to expensive• Your skillset
    147. 147. Considerations• Your budget • Options range from free to expensive• Your skillset • Responsive design, PHP
    148. 148. Considerations• Your budget • Options range from free to expensive• Your skillset • Responsive design, PHP• Future plans
    149. 149. Considerations• Your budget • Options range from free to expensive• Your skillset • Responsive design, PHP• Future plans • Do you have a redesign planned?
    150. 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. 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. 152. The Great Debate
    153. 153. The Great Debate• Dedicated Mobile site vs. ‘One site for all Devices’
    154. 154. The Great Debate• Dedicated Mobile site vs. ‘One site for all Devices’ • One site for all means less control over content delivery
    155. 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. 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. 157. Summary
    158. 158. Summary• Mobile web usage is skyrocketing
    159. 159. Summary• Mobile web usage is skyrocketing• Users expect a good mobile experience
    160. 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. 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. 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. 163. Resources• Slides and resources available at: • http://www.dazil.com/wordcampyvr2012
    164. 164. Thank You! Dave Zille@davezille dave@dazil.com

    ×