MobileWeb Flows and Best Practicesmichael stowe APRIL 7, 2012
MIKESTOWE .com• 10+ years experience hacking PHP• Developed multiple mobile websites ranging from informational to secure applications• Open Source Contributor (3 WordPress plugins, multiple scripts)• Software Engineer at CaringBridge.org (half a million visitors every day)• Zend Certified PHP 5.3 Software Engineer@mikegstowe
Why Worry about Mobile • By the end of 2012, there will be more mobile devices than people in the world! • In 2011 there were over 4 billion mobile phones, of those 1.08 were smart phones • By 2014, mobile internet usage will overtake desktop internet usagehttp://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/
Why Worry about Mobile • 50% of American cell phone owners have a smart phone • 66% of Americans between the ages of 24-35 own a smart phone • 52% of Adult cell phone owners rely on their device when making purchasing decisionshttp://www.digby.com/mobile-industry-resources/mobile-industry-statistics/
Why Worry about Mobile • More than half of all local searches are performed on mobile devices • 86% of mobile device users are using their mobile device when watching TV • On average, Americans spend 2.7 hours socializing on their mobile devicehttp://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/
Why Worry about Mobile • 10% of All Website Traffic comes from mobile devices. • 55% of Twitters traffic comes from mobile devices. • 60% of Pandoras traffic comes from mobile devices.http://www.lukew.com/ff/entry.asp?1450
Why Worry about Mobile • 54% of the Weather Channel’s traffic in October came from mobile devices • 40% of Fandango’s traffic comes from mobile devices. • 33% of Facebook’s traffic comes from mobile devices.http://www.lukew.com/ff/entry.asp?1450
Why Worry about Mobile And… • 34% of smart phone users make at least $100K a year. • Mobile sales increased 86% from 2011 to 2012 • It was predicted that mobile shopping sales would total $9 billion in 2011. In 2015 that number is expected to reach $163 billion.http://www.digby.com/mobile-industry-resources/mobile-industry-statistics/
However…Mobile users don’t want to see this… What’s wrong with this layout?
So Do You Need a Mobile Site?Ask yourself…• Is your site convenient to browse on a mobile device?• Does it take a long time to load?• Does it use dropdown menus?• Does it require you to zoom in and out?• Does it contain flash?• Does it contain a lot of ads?
RememberMobile capabilities are different!• Smaller Displays• Less fluent typing• Gestures – No Mouse• May not Support Flash• Slower Connection• Special Link Types
Smaller DisplaysScreen sizes are not onlysmaller, but vary by device,ranging from 1.5” to 10” in size.Keep in mind that many devicesoften scale webpages to fit thescreen.
Small DisplaysOne way to help with scaling on mobile devicesis to use the viewport meta tag. This allows youto set the initial scale, and how much the usercan zoom in.examples <!-- SCALE 100%, NO ZOOM --> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <!-- SCALE 100%, ALLOW ZOOM TO 200% --> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.0;">
Less Fluent TypingDevices may or maynot have a keyboardwhich the user may ormay not beaccustomed to. Assuch, having longforms or asking forparagraphs ofinformation can beextremelyinconvenient andfrustrating for mobileusers.
GesturesDevices utilize touch based gestures, simplisticarrows, or a scrolling wheel.This means your navigation needs to besimplistic, accessible, and quickly available.Also keep in mind that people have differentsized fingers. As such, your menus, buttons,and links need to be large enough and spacedout enough that they caneasily be pressed by eventhe largest of fingers.
May Not Support FlashDifferent mobile devices have differentcapabilities. Some devices, such as Androidsupport flash, while others such as the everpopular iPhone and Windows 7 Phone do not.This means that flash videos, music, games, oranimations will not show up on these phones,and you should use the appropriatealternatives such as 3GP + MPEG-4 orH.264 + MP4 for smart phones.
Slower ConnectionAnd slower processing…A mobile device often does not have all theprocessing power of a modern computer, andruns on a slower connection. On top of this,many users have data usage restrictions,meaning that downloading large amounts ofdata not only takes longer, but costs themmoney.Avoid sending unnecessary code, images,videos, etc. Optimize your site to get thecontent to the user as quickly as possible,which means using as little data as possible.
Special FeaturesDifferent phones make use of different HTML5anchors (links) and inputs, such as phone andemail.The “tel:” link tells the application what to dowith the link (for example “Call Us Now” dials aspecific number). This is used just like“email:”While the phone input may open a numerickeypad, and the email input may open akeyboard optimized for emails. Not all phonessupport all HTML5 link/ input types.
Special Featuresexamples <!-- PHONE LINK --> <a href="tel:5555555555">Call Us Now</a> <!-- PHONE INPUT --> <input type="tel" name="telephone" /> <!-- EMAIL INPUT --> <input type="email" name="telephone" /> <!-- URL INPUT --> <input type="url" name="telephone" />Keep in mind that not all file input types are supported.For example, on the iPhone the “file” input type is notrendered. However, it can be useful on Android phonesfor uploading photos or other files.
Choosing a SolutionYour Options:• Ignore Mobile Users – Standard site for everyone• Responsive Design – Standard site for everyone• Mobile Site – special site for mobile• Mobile App – special for device
Ignore Mobile UsersAdvantage:• Less workDisadvantage:• Not good for mobile users in most cases. If you have a complex site, you will lose visitors and revenue.
Mobile Site(s)Advantage:• Extremely easy to use for Mobile Users• Increased sales and revenues• Works across multiple platformsDisadvantage:• More work/ more costs
Native Mobile App(s)Advantage:• Extremely easy to use for Mobile Users and takes advantage of device capabilities.• Increased sales and revenuesDisadvantage:• More work/ more costs• Only works on limited devices• Requires users to download
Best Practice:Providing a mobile site alternativeis the most convenient solution foryour users, assuming it providesthem with similar service.Users want simplistic, easy tonavigate sites with the samecapabilities as the desktop site.Imagine if you couldn’t interact onFacebook’s mobile site…
Choosing a FlowYour Options:• Auto-Redirect – users are automatically taken to the mobile site• Splash Screen – users are taken to a “please choose” screen• Manual Redirect – users have to enter the mobile url or click a link• Application Only – users can only use an application
Auto-RedirectAdvantages:• Loads faster• Uses less data• Formatted for device• Many users prefer mobile sitesDisadvantage:• Users aren’t given an option
Splash ScreenAdvantage:• Loads the fastest• Users get a choiceDisadvantage:• Adds one more step and requires users to take action to visit your site• If not remembered, becomes annoying very quickly.
Manual RedirectAdvantage:• Users are provided the full site• Users choose to access mobile versionDisadvantage:• Takes longer to load• Uses more data• Not formatted for device• Users must know to look for and find a link to the mobile site
Application OnlyAdvantage:• Extremely accessible and always on user’s phoneDisadvantage:• Requires users to download• Not available on all devices• May be forgotten (they will just go to your site instead of using the application)
Best Practice:For well designed mobile sites thatoffer similar functionality, it isrecommended to redirect the userautomatically to the site that bestfits their device.Users should be provided with theoption of returning back to the mainsite or using a mobile site (ie afooter link) and this preferenceshould be remembered (ie in acookie)
Best Practice:By redirecting users to a subdomainsuch as m.yourdomain.com usersknow they are being sent to a mobilefriendly version.However, avoid sending usersthrough multiple redirects (one is agood number).This redirection should be doneserver side instead of browser side asit requires less data to be transferred.
Who uses splash screens?The National HockeyLeague uses a splashscreen to bring attentionto their mobile applications.Users can choose to downloadan app, or go to the site.However, this prevents users fromhaving immediate access to scores,news, and other information they aretrying to view.
Who uses only apps?Keep in mind, unless users go lookingfor, and find their apps, users will notbe able to have a convenientexperience optimized for their mobiledevice. They are required to eitherfind the app in an “app store” ornavigate the full site on their deviceto find a link to the mobile app.
Make it Assessible!Users should be able to quicklyaccess your site in a devicefriendly format.Avoid making your users searchfor links or download applicationsto access your site in aconvenient manner.
Make it Fast!Mobile sites should be quickto load, using as little dataand avoiding any unnecessaryextras.
Make it Convenient!Mobile devices are becomingmore and more popular, and assuch sites need to be easilyAccessible and convenient forusers on these devices.