SlideShare a Scribd company logo

Make Your WordPress Site Mobile Friendly

D
Dave Zille

This document provides information on making a WordPress site mobile friendly. It discusses three main options: 1) Using a third party mobile service that automatically generates a mobile version, 2) Using a responsive theme with CSS and JavaScript that adapts to different devices, and 3) Having a separate mobile theme that a plugin detects and serves depending on the user's device. It provides details on how each option works and the pros and cons of each approach.

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

More Related Content

PPTX
Content marketing world_mobile and tablet content distribution_8_17_2012
interlinkONE
 
PDF
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Compuware APM
 
PPTX
“Mobile and Tablet Content Distribution”
Content Marketing World
 
PDF
Mobile internet market in china leo wang
Kevin Tung
 
KEY
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
Damian Sullivan
 
PDF
State of the Mobile Browsers
Peter-Paul Koch
 
PDF
The Mobile Web - Fronteers 2009
Peter-Paul Koch
 
PPTX
Internet & Beyond - Rosary College BCA Students Presentation
Vernon Fernandes
 
Content marketing world_mobile and tablet content distribution_8_17_2012
interlinkONE
 
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Compuware APM
 
“Mobile and Tablet Content Distribution”
Content Marketing World
 
Mobile internet market in china leo wang
Kevin Tung
 
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
Damian Sullivan
 
State of the Mobile Browsers
Peter-Paul Koch
 
The Mobile Web - Fronteers 2009
Peter-Paul Koch
 
Internet & Beyond - Rosary College BCA Students Presentation
Vernon Fernandes
 

What's hot (15)

KEY
Tuenti Mobile Development
Tuenti
 
PPTX
Mobile Web Best Practices
Woody Pewitt
 
PDF
The mobile browser world
Peter-Paul Koch
 
PDF
Anglum Group Mobile
The Anglum Group, LLC
 
PPTX
Internet Expansion - Jamie Reece Moore
Jamie Moore
 
PPTX
Disruptive technologies
Jonathan Weber
 
PDF
The iWhat? What is and how you can use the iPad
Emily L Tipton
 
PDF
Going Mobile: Serving the Always On, Always Connected
BusinessOnline
 
PPTX
Embracing the mobile frontier and reaching the digital natives
Ektron
 
PDF
Gaming is on-the-go
Vasco Elvas
 
PDF
Jennifer Wilson Aimia Nokia Developer Day
fndc
 
PDF
Laptop vs Tablet by Fred Greene
Bay Area Consultants Network
 
PDF
Digital trends 2012 and beyond presentation no video
KozlicaBlog
 
PPT
Mobile First - WCJ 2012
Gal Brill
 
PDF
Universal access across devices
Henny Swan
 
Tuenti Mobile Development
Tuenti
 
Mobile Web Best Practices
Woody Pewitt
 
The mobile browser world
Peter-Paul Koch
 
Anglum Group Mobile
The Anglum Group, LLC
 
Internet Expansion - Jamie Reece Moore
Jamie Moore
 
Disruptive technologies
Jonathan Weber
 
The iWhat? What is and how you can use the iPad
Emily L Tipton
 
Going Mobile: Serving the Always On, Always Connected
BusinessOnline
 
Embracing the mobile frontier and reaching the digital natives
Ektron
 
Gaming is on-the-go
Vasco Elvas
 
Jennifer Wilson Aimia Nokia Developer Day
fndc
 
Laptop vs Tablet by Fred Greene
Bay Area Consultants Network
 
Digital trends 2012 and beyond presentation no video
KozlicaBlog
 
Mobile First - WCJ 2012
Gal Brill
 
Universal access across devices
Henny Swan
 
Ad

Similar to Make Your WordPress Site Mobile Friendly (20)

KEY
Designing for mobile devices
Fahd Alhazmi
 
PDF
Lg Web Network Mobile Presentation August 2009
Oliver Weidlich
 
PPTX
01 Mobile Jungle
Arief Gunawan
 
KEY
Capitalizing on the Mobile Web
Brandon Eley
 
PDF
Mobile Web High Performance
Maximiliano Firtman
 
PDF
The mobile ecosystem & technological strategies
Ivano Malavolta
 
KEY
Cathryn allen assignment4
dance314
 
PPTX
Augmented Reality March Webinar
Promet Source
 
KEY
Alexander michael project4
Malexander34
 
PDF
Best practices for delivering quality web experiences
Ben Mantooth
 
PPT
Kotikan Guide to Mobile Development
Kotikan
 
KEY
Social Media and Mobile Event Technology, Tools, and Apps Oh My!
Echelon Design
 
PDF
Web Apps and Responsive Design for Libraries
Matt Machell
 
PPTX
Mobile is the New Black
Duo Consulting
 
PPT
Posternak gabriel presentation_mobile_tablet_deisgn
relaityntatt
 
PPT
Posternak gabriel presentation_mobile_tablet_deisgn
relaityntatt
 
PDF
Mobile internet market in china leo wang
AppLeap Inc.
 
KEY
Exhibitor2011 Session: Social Media and Mobile Event Technology, Tools and Ap...
Lumen Consulting
 
PPTX
Mobile website --- Web is in pocket....
Naga Harish M
 
PDF
Simple mobile Websites
cityofroundrock
 
Designing for mobile devices
Fahd Alhazmi
 
Lg Web Network Mobile Presentation August 2009
Oliver Weidlich
 
01 Mobile Jungle
Arief Gunawan
 
Capitalizing on the Mobile Web
Brandon Eley
 
Mobile Web High Performance
Maximiliano Firtman
 
The mobile ecosystem & technological strategies
Ivano Malavolta
 
Cathryn allen assignment4
dance314
 
Augmented Reality March Webinar
Promet Source
 
Alexander michael project4
Malexander34
 
Best practices for delivering quality web experiences
Ben Mantooth
 
Kotikan Guide to Mobile Development
Kotikan
 
Social Media and Mobile Event Technology, Tools, and Apps Oh My!
Echelon Design
 
Web Apps and Responsive Design for Libraries
Matt Machell
 
Mobile is the New Black
Duo Consulting
 
Posternak gabriel presentation_mobile_tablet_deisgn
relaityntatt
 
Posternak gabriel presentation_mobile_tablet_deisgn
relaityntatt
 
Mobile internet market in china leo wang
AppLeap Inc.
 
Exhibitor2011 Session: Social Media and Mobile Event Technology, Tools and Ap...
Lumen Consulting
 
Mobile website --- Web is in pocket....
Naga Harish M
 
Simple mobile Websites
cityofroundrock
 
Ad

Make Your WordPress Site Mobile Friendly

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

Editor's Notes