• Save
Mobile WordPress: Dale Mugford of BraveNewCode
Upcoming SlideShare
Loading in...5
×
 

Mobile WordPress: Dale Mugford of BraveNewCode

on

  • 728 views

Slides from Dale Mugford's Mobile WordPress presentation at WordCamp Toronto on November 5th, 2011.

Slides from Dale Mugford's Mobile WordPress presentation at WordCamp Toronto on November 5th, 2011.

Statistics

Views

Total Views
728
Views on SlideShare
728
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n\n
  • \n\n
  • \n\n
  • \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
  • Tell the story of "if apple makes a phone"\n\nWorking with WAP anecdotes, Rogers, etc\n\nPainful development, restrictions and limitations\n\nMobile Safari offered "full web", though EDGE and even WiFi was pretty slow b/c of device, but it was miles ahead of where we were\n
  • Tell the story of "if apple makes a phone"\n\nWorking with WAP anecdotes, Rogers, etc\n\nPainful development, restrictions and limitations\n\nMobile Safari offered "full web", though EDGE and even WiFi was pretty slow b/c of device, but it was miles ahead of where we were\n
  • Tell the story of "if apple makes a phone"\n\nWorking with WAP anecdotes, Rogers, etc\n\nPainful development, restrictions and limitations\n\nMobile Safari offered "full web", though EDGE and even WiFi was pretty slow b/c of device, but it was miles ahead of where we were\n
  • Tell the story of "if apple makes a phone"\n\nWorking with WAP anecdotes, Rogers, etc\n\nPainful development, restrictions and limitations\n\nMobile Safari offered "full web", though EDGE and even WiFi was pretty slow b/c of device, but it was miles ahead of where we were\n
  • Tell the story of "if apple makes a phone"\n\nWorking with WAP anecdotes, Rogers, etc\n\nPainful development, restrictions and limitations\n\nMobile Safari offered "full web", though EDGE and even WiFi was pretty slow b/c of device, but it was miles ahead of where we were\n
  • Tell the story of "if apple makes a phone"\n\nWorking with WAP anecdotes, Rogers, etc\n\nPainful development, restrictions and limitations\n\nMobile Safari offered "full web", though EDGE and even WiFi was pretty slow b/c of device, but it was miles ahead of where we were\n
  • Tell the story of "if apple makes a phone"\n\nWorking with WAP anecdotes, Rogers, etc\n\nPainful development, restrictions and limitations\n\nMobile Safari offered "full web", though EDGE and even WiFi was pretty slow b/c of device, but it was miles ahead of where we were\n
  • Not about "copying" with Android, competitors would have to develop similar approaches anyways\n\nThose that didn't adopt the full screen, touch approach have been relatively left in the dust\n\nInteresting to see where Microsoft is going, Windows Phone 7.5 (Mango) looks very compelling\n
  • \n\n
  • Offers pretty full-featured publishing...\n\nOffers comment moderation\n\nNot an access to admin panel settings\n\nCan add photos\n
  • These apps help you publish on the go, manage content, and moderate discussion\n\nReally useful for:\nshorter entries\nphotoblogs\nediting entries\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
  • 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
  • \n\n
  • \n\n
  • \n\n
  • \n\n

Mobile WordPress: Dale Mugford of BraveNewCode Mobile WordPress: Dale Mugford of BraveNewCode Presentation Transcript

  • Mobile WordPress Dale Mugford@dalemugford // www.bravenewcode.comWordCamp Toronto 2011
  • Dale MugfordMobile WordPress BraveNewCode Inc.
  • Overview
  • Overview• Who I am• Short history of the mobile web• Tools you can use to publish• Mobile stats• Tools & methods for WordPress sites on mobile devices• Q&A (time pending)
  • Dale Mugford• Co-Founder, BraveNewCode Inc.• Developing for the web since 1997• Have used WordPress since 1.0• Currently living in the Hammer!• Two pugs, Chloe & Max
  • Dale Mugford• Co-Founder, BraveNewCode Inc.• Developing for the web since 1997• Have used WordPress since 1.0• Currently living in the Hammer!• Two pugs, Chloe & Max
  • BraveNewCode BraveNewCode.com
  • 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, WordTwit Pro, Piggy Pro premium BraveNewCode.com plugins
  • Mobile Web History Ye olde WAP Site
  • Mobile Web History• This Sony Clearnet phone was my first, in 1998. I didnt own Ye olde another until the iPhone was released in 2007• Early 2000s had WAP. (More like "CRWAP")— limited XHTML, CSS, well behind where desktop web was at• Characterized by slow connections, minimal content, poor means of accessing content WAP Site
  • Mobile Web History
  • EMobile Web History• 1G - voice G• 2G "EDGE" some data, mostly WAP 4 transmissions (1.6mbps)• 3G - up to 14.4mbps• "4G" around the corner, 3G 21-100mbps• Offers pretty fast data transmission, most smartphones have full http support• Pretty much the "full web" some limitations are device specific (i.e flash on iOS) or are related to device performance
  • Mobile Web History(continued)• Design and style of both Before iPhone hardware and software for the Android design iPhone inspired mobile competitors• Capabilities of these devices, coupled with the ease of use for web browsing led to an explosion in mobile web surfing between 2008-2010 After iPhone• In 2008, Google reported over Android design 50% of mobile search it saw was from iOS, recently said its now 2/3rds
  • Publishing ToolsMore and more, publishing content for WordPress websites is happening onmobile devices.
  • WordPress Native App (iPhone/iPad/WebOS)
  • Mobile Applications for Publishing Content• Native WordPress applications on a variety of platforms — WordPress for iOS — WordPress for Android — WordPress for Windows Phone 7 — WordPress for Blackberry — WordPress for WebOS — WordPress for Nokia• Other options: — iBlogger, BlogPress (iPhone) — wpToGo, moBlog (Android) — Wordmobi, Scribe, Wavelog (Nokia)
  • 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 return to a slow website on mobile… Yikes!Equation Research 2011 survey
  • 47% unlikely to 71% expect 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… Yikes!Equation Research 2011 survey
  • 47% unlikely to 71% expect 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… Yikes! 57% had trouble with a website via mobile deviceEquation Research 2011 survey
  • 47% unlikely to 71% expect 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… Yikes! 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
  • Where People Surf On Mobile North America 2009 Nielsons Critical Mass
  • Where People Surf On Mobile North America 2009 Work 12% Outdoors 7% Commute 5% Home 76% Nielsons Critical Mass
  • Mobile Browsing Share by Platform North America, October 2011 NetMarketShare.co
  • Mobile Browsing Share by Platform North America, October 2011 Oth BB 4% 5% Android 28% iPhone 63% NetMarketShare.co
  • Mobile Browsing Share by Engine North America, October 2011 NetMarketShare.co
  • Mobile Browsing Share by Engine North America, October 2011 Other 7% Webkit 93% NetMarketShare.co
  • Downloads of WPtouch WordPress.org Spring 2008 - Fall 2011
  • Downloads of WPtouch WordPress.org Spring 2008 - Fall 2011 2,677,566 1,750,000 1,100,000108,000 2008 2009 2010 2011
  • Solutions for Mobile Presentation"It is increasingly difficult to talk about the Internet, or media and marketingwithout the conversation quickly turning to mobile phones."~ Nielsons Critical Mass Report
  • Key Considerations For WordPress Sites on Mobile
  • Key Considerations For WordPress Sites on Mobile• Who comprises your audience? (geographically)• Focus on your 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 your budget?
  • Free Mobile Themes& Plugins Available Obox Mobile ch Pro W Ptou Mobify
  • Free Mobile Themes& Plugins Available• WPtouch• WordPress Mobile Pack• Wapple Architect• WP Mobile Detector Obox Mobile• Mobify• 1st Giant Leap• DotMobi ch Pro Ptou• Video Elements W• Carrington (Mobile Edition)• Möbius Mobify• Mobility
  • Popular WordPress Mobile Plugins WordPress.org, October 2011
  • Popular WordPress Mobile Plugins WordPress.org, October 2011 WPtouch 2,677,566 WP Mobile Pack 238,727 WP Mobile Edition 228,559 Wapple 53,965WP Mobile Detector 48,545 WPtap 18,529 0 750000 1500000 2250000 3000000
  • 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, photo, etc)• Device support• Speed• Customization & control• Ease of use, intuitive design• Content, theme curation and maintenance• Web-app, native app capabilities
  • WPtouch (Pro)
  • 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
  • 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
  • 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
  • Mobify
  • 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
  • What Is Responsive Design?
  • 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 addingelements as necessary.
  • Responsive Design Example hicksdesign.co.uk
  • Responsive Design Example hicksdesign.co.uk
  • Responsive Design Strengths
  • 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
  • Responsive Design Weaknesses
  • Responsive Design Weaknesses— 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 frustratevisitors
  • Takeaways
  • Summary
  • Summary• Mobile web browsing has exploded in the past 4 years• Great tools available to publish via mobile• Most mobile visitors expect tailored content• Data shows mobile WebKit is leading the browser pack• Lots of themes and plugins to offer mobile versions• Responsive Design is also emerging as a viable tool to craft websites with mobile + tablets in mind
  • www.bravenewcode.com/
  • Thank you. www.bravenewcode.com/@dalemugford // www.bravenewcode.com