Mobile Development With WordPress Dale Mugford
Mobile Development With WordPress Dale Mugford@dalemugford // @bravenewcodeBraveNewCode.com
Overview
Overview• Who I am• About BraveNewCode• Mobile Development experience• Changes in dev landscape• Tools & methods for makin...
Dale Mugford• Co-Founder, BraveNewCode Inc.• Developing for the web since 1997• Have used WordPress since 1.0• Currently l...
Dale Mugford• Co-Founder, BraveNewCode Inc.• Developing for the web since 1997• Have used WordPress since 1.0• Currently l...
BraveNewCode               BraveNewCode.com
BraveNewCode• Officially founded in 2008• Co-founded with Duane Storey  (@duanestorey), well-known  engineer and sorcerer• ...
Mobile StatsMobile browsing has exploded, and has been evolving and changing on amonthly basis.
Equation Research 2011 survey
71% expect    websites to load    quickly on mobileEquation Research 2011 survey
71% expect    websites to load    quickly on mobile                                43% said they wont                     ...
47% unlikely      71% expect                                      to return to a site    websites to load                 ...
47% unlikely      71% expect                                      to return to a site    websites to load                 ...
47% unlikely      71% expect                                       to return to a site    websites to load                ...
Where People Surf On Mobile       North America 2009           (kinda stale, but still)      Nielsons Critical Mass Report
Where People Surf On Mobile        North America 2009            (kinda stale, but still)            Work            12%  ...
Mobile Browsing Share by Platform    North America, January 2012            StatCounter.com
Mobile Browsing Share by Platform    North America, January 2012                 Opera              BB                  3%...
Mobile Browsing Share by Engine   North America, January 2012           StatCounter.com
Mobile Browsing Share by Engine   North America, January 2012           Other           12%                    Webkit     ...
Downloads of WPtouch (Free)           WordPress.org     Spring 2008 - Spring 2012
Downloads of WPtouch (Free)                             WordPress.org                       Spring 2008 - Spring 2012     ...
Key Considerations For WordPress Sites on Mobile
Key Considerations For WordPress Sites on Mobile• Who comprises the audience? (geographically)• Focus on important content...
Solutions for Mobile PresentationNo one solution is inherently, philosophically better than another; solutionsneed to be c...
What Is Responsive Design?
What Is Responsive Design?A method of designing websites so that content flexibly adapts to differentscreen sizes.Includes ...
Responsive Design Example                 hicksdesign.co.uk
Responsive Design Example                 hicksdesign.co.uk
Responsive Quotes from Peter-Paul Kochof quirksmode.org• Right now responsive design is graceful degradation: design  some...
Code Snippets(collected from Dave Calhouns work)
Code Snippets(collected from Dave Calhouns work)
Code Snippets(collected from Dave Calhouns work)
Responsive Design Strengths
Responsive Design Strengths— Carries branding from desktop to mobile— Designed to handle different screen sizes & devices—...
Responsive Design Snafus
Responsive Design Snafus— All desktop resources are downloaded to the mobile device,whether needed or not (speed issue)— C...
Free Mobile Themes& Plugins Available                      Obo x Mobile                          WPtouch Pro
Free Mobile Themes& Plugins Available• WPtouch• WordPress Mobile Pack                                Obo x Mobile• Wapple ...
Key Considerations When Choosing a MobileOption for your WordPress Website
Key Considerations When Choosing a MobileOption for your WordPress Website• Type of website (blog, company, video, audio, ...
WordPress MobilePack• Toolkit for a mobile WordPress  site• Good Nokia device support  (WPtouch does not support  Nokia)• ...
WordPress MobilePack• Toolkit for a mobile WordPress  site• Good Nokia device support  (WPtouch does not support  Nokia)• ...
WPtouch (Pro)
WPtouch (Pro)• Most popular free mobile plugin for  WordPress• Not particularly designed for any one  type of site, genera...
Mobify
Mobify• Works by proxy server—  requests get sent to Mobifys  servers and it handles the  serving of the mobile views on  ...
Appifier & App Services• Create native iPhone/  Android apps from  WordPress websites• Not a replacement for mobile  sites;...
Summary
Summary• Mobile web browsing has exploded in the past 4 years• Most mobile visitors expect/want tailored content• Data sho...
bravenewcode.com/wpdevto
Thank you.                      bravenewcode.com/wpdevto@dalemugford // @bravenewcodeBraveNewCode.com
Upcoming SlideShare
Loading in …5
×

Mobile Development with WordPress

1,096
-1

Published on

Slides from Dale Mugford's talk to the WordPress Developers meet up in Toronto on February 28th, 2012.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,096
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n\n
  • \n\n
  • my focuses (design, UX UI)\n
  • my focuses (design, UX UI)\n
  • how i met duane\nwe have over 10,000 customers\n100% GPL products\nWe've made our business on WordPress, and are so happy about it\n
  • \n\n
  • 57% had trouble... this is where we focus things on. If you're going to do things differently on mobile they should be things that improve the experience\n\nThat means thinking about:\n- what's truly necessary\n- what can you live without\n- navigation\n- speed\n- how are they accessing the content? Most access points are though other mobile apps like Twitter and Facebook, rss readers etc.\n\n\n
  • 57% had trouble... this is where we focus things on. If you're going to do things differently on mobile they should be things that improve the experience\n\nThat means thinking about:\n- what's truly necessary\n- what can you live without\n- navigation\n- speed\n- how are they accessing the content? Most access points are though other mobile apps like Twitter and Facebook, rss readers etc.\n\n\n
  • 57% had trouble... this is where we focus things on. If you're going to do things differently on mobile they should be things that improve the experience\n\nThat means thinking about:\n- what's truly necessary\n- what can you live without\n- navigation\n- speed\n- how are they accessing the content? Most access points are though other mobile apps like Twitter and Facebook, rss readers etc.\n\n\n
  • 57% had trouble... this is where we focus things on. If you're going to do things differently on mobile they should be things that improve the experience\n\nThat means thinking about:\n- what's truly necessary\n- what can you live without\n- navigation\n- speed\n- how are they accessing the content? Most access points are though other mobile apps like Twitter and Facebook, rss readers etc.\n\n\n
  • 57% had trouble... this is where we focus things on. If you're going to do things differently on mobile they should be things that improve the experience\n\nThat means thinking about:\n- what's truly necessary\n- what can you live without\n- navigation\n- speed\n- how are they accessing the content? Most access points are though other mobile apps like Twitter and Facebook, rss readers etc.\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
  • some websites are really deserving of a mobile version, especially if they've got a lot going on\n\ndoes the mobile option offer a switch to your desktop theme? some users are more savvy on their mobile devices and are ok with panning and zooming\n\nif using responsive design (or a responsive theme) watch for changes and updates to your desktop theme, as they will affect mobile\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
  • Mobile Development with WordPress

    1. 1. Mobile Development With WordPress Dale Mugford
    2. 2. Mobile Development With WordPress Dale Mugford@dalemugford // @bravenewcodeBraveNewCode.com
    3. 3. Overview
    4. 4. Overview• Who I am• About BraveNewCode• Mobile Development experience• Changes in dev landscape• Tools & methods for making mobile/tablet WordPress sites• Q&A / discussion
    5. 5. Dale Mugford• Co-Founder, BraveNewCode Inc.• Developing for the web since 1997• Have used WordPress since 1.0• Currently living in Hamilton• Two pugs, Chloe & Max, very poor employees.
    6. 6. Dale Mugford• Co-Founder, BraveNewCode Inc.• Developing for the web since 1997• Have used WordPress since 1.0• Currently living in Hamilton• Two pugs, Chloe & Max, very poor employees.
    7. 7. BraveNewCode BraveNewCode.com
    8. 8. BraveNewCode• Officially founded in 2008• Co-founded with Duane Storey (@duanestorey), well-known engineer and sorcerer• Started as web design & dev studio• Created WPtouch, WordTwit, Piggy, Crossroads, BuddyPress Geo plugins for WordPress• Currently offer WPtouch Pro, BraveNewCode.com WordTwit Pro, Piggy Pro premium plugins as well
    9. 9. Mobile StatsMobile browsing has exploded, and has been evolving and changing on amonthly basis.
    10. 10. Equation Research 2011 survey
    11. 11. 71% expect websites to load quickly on mobileEquation Research 2011 survey
    12. 12. 71% expect websites to load quickly on mobile 43% said they wont return to a slow website on mobile…Equation Research 2011 survey
    13. 13. 47% unlikely 71% expect to return to a site websites to load they have trouble using on mobile quickly on mobile 43% said they wont return to a slow website on mobile…Equation Research 2011 survey
    14. 14. 47% unlikely 71% expect to return to a site websites to load they have trouble using on mobile quickly on mobile 43% said they wont return to a slow website on mobile… 57% had trouble with a website via mobile deviceEquation Research 2011 survey
    15. 15. 47% unlikely 71% expect to return to a site websites to load they have trouble using on mobile quickly on mobile 43% said they wont return to a slow website on mobile… 57% had trouble 34% said theyd with a website via prefer to use a mobile device website that has a mobile versionEquation Research 2011 survey
    16. 16. Where People Surf On Mobile North America 2009 (kinda stale, but still) Nielsons Critical Mass Report
    17. 17. Where People Surf On Mobile North America 2009 (kinda stale, but still) Work 12% Outdoors 7% Commute 5% Home 76% Nielsons Critical Mass Report
    18. 18. Mobile Browsing Share by Platform North America, January 2012 StatCounter.com
    19. 19. Mobile Browsing Share by Platform North America, January 2012 Opera BB 3% 7% Oth 9% iPhone 44% Android 37% StatCounter.com
    20. 20. Mobile Browsing Share by Engine North America, January 2012 StatCounter.com
    21. 21. Mobile Browsing Share by Engine North America, January 2012 Other 12% Webkit 88% StatCounter.com
    22. 22. Downloads of WPtouch (Free) WordPress.org Spring 2008 - Spring 2012
    23. 23. Downloads of WPtouch (Free) WordPress.org Spring 2008 - Spring 2012 3,124,000 2,677,566 1,750,000 1,100,000108,000 2008 2009 2010 2011 Feb 12
    24. 24. Key Considerations For WordPress Sites on Mobile
    25. 25. Key Considerations For WordPress Sites on Mobile• Who comprises the audience? (geographically)• Focus on important content to offer on mobile• Remove clutter, simplify, (when in doubt, leave it out)• Consider desktop plugins and how theyll work (or wont)• What is the budget?
    26. 26. Solutions for Mobile PresentationNo one solution is inherently, philosophically better than another; solutionsneed to be chosen based on project type.More than one solution in use may be best for some projects
    27. 27. What Is Responsive Design?
    28. 28. What Is Responsive Design?A method of designing websites so that content flexibly adapts to differentscreen sizes.Includes re-organizing content on webpages and/or removing or adding pageelements elements as necessary.
    29. 29. Responsive Design Example hicksdesign.co.uk
    30. 30. Responsive Design Example hicksdesign.co.uk
    31. 31. Responsive Quotes from Peter-Paul Kochof quirksmode.org• Right now responsive design is graceful degradation: design something for desktop and tablet, and remove stuff for mobile. That means that even the most brilliant responsive design will let mobile browsers download assets they don’t need.• In the future responsive design will become progressive enhancement: design the mobile site first, and add stuff for desktop and tablet.• Images are commonly resized in responsive designs, but the mobile browser has to download the desktop version; potentially over a slow, expensive mobile connection.
    32. 32. Code Snippets(collected from Dave Calhouns work)
    33. 33. Code Snippets(collected from Dave Calhouns work)
    34. 34. Code Snippets(collected from Dave Calhouns work)
    35. 35. Responsive Design Strengths
    36. 36. Responsive Design Strengths— Carries branding from desktop to mobile— Designed to handle different screen sizes & devices— Some believe this is the new direction of web design,that all sites should consider the responsive approach
    37. 37. Responsive Design Snafus
    38. 38. Responsive Design Snafus— All desktop resources are downloaded to the mobile device,whether needed or not (speed issue)— Changes to desktop theme require additional consideration(more development time)— If not designed well, visitors may think site is broken, ormissing elements— No way to switch to full desktop theme, may frustrate visitors
    39. 39. Free Mobile Themes& Plugins Available Obo x Mobile WPtouch Pro
    40. 40. Free Mobile Themes& Plugins Available• WPtouch• WordPress Mobile Pack Obo x Mobile• Wapple Architect• WP Mobile Detector• 1st Giant Leap• DotMobi• Video Elements• Carrington (Mobile Edition)• Möbius• Mobility WPtouch Pro
    41. 41. Key Considerations When Choosing a MobileOption for your WordPress Website
    42. 42. Key Considerations When Choosing a MobileOption for your WordPress Website• Type of website (blog, company, video, audio, photo, etc)• Device support• Customization & control• Ease of use, overall product design• Content, theme curation & maintenance• Web-app, native app capabilities
    43. 43. WordPress MobilePack• Toolkit for a mobile WordPress site• Good Nokia device support (WPtouch does not support Nokia)• Generally easy to use, users rated it 4/5 stars• Can be used with WPtouch to handle lower end devices• Not updated since 2010, so not known if still in active dev
    44. 44. WordPress MobilePack• Toolkit for a mobile WordPress site• Good Nokia device support (WPtouch does not support Nokia)• Generally easy to use, users rated it 4/5 stars• Can be used with WPtouch to handle lower end devices• Not updated since 2010, so not known if still in active dev
    45. 45. WPtouch (Pro)
    46. 46. WPtouch (Pro)• Most popular free mobile plugin for WordPress• Not particularly designed for any one type of site, generally handles most very well• Easy to setup and use (even just activating it is a good start!)• Works by detecting devices, and serving its mobile theme• Pro version offers significantly more control, customization, good for client sites• Pro version supports iPad and serves another theme
    47. 47. Mobify
    48. 48. Mobify• Works by proxy server— requests get sent to Mobifys servers and it handles the serving of the mobile views on your site automatically• Limited free plugin for WordPress paid service is pricey, but very good• Very high-end clientele— if you have a large business or organization website or client, this is a good option
    49. 49. Appifier & App Services• Create native iPhone/ Android apps from WordPress websites• Not a replacement for mobile sites; more supplementary• Not ideal for non-niche, non- service sites theappifier.com• Remember, no mobile commerce in AppStore
    50. 50. Summary
    51. 51. Summary• Mobile web browsing has exploded in the past 4 years• Most mobile visitors expect/want tailored content• Data shows mobile WebKit is dominating mobile browser engines• Lots of themes and plugins to offer mobile versions• Responsive Design emerging to craft websites w/ mobile + tablets in mind, can be used alongside mobile themes / plugins• New services emerging to offer native apps easily with WordPress
    52. 52. bravenewcode.com/wpdevto
    53. 53. Thank you. bravenewcode.com/wpdevto@dalemugford // @bravenewcodeBraveNewCode.com

    ×