Mobile Best Practices and Web Flows

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

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  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">  <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  <a href="tel:5555555555">Call Us Now</a>  <input type="tel" name="telephone" />  <input type="email" name="telephone" />  <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 aMobile Solution

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.

ResponsiveAdvantage:• Less work• Works for all DevicesDisadvantage:• Limited ability in design• Not all items work for all devices (ie flash, javascript)

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…

Who has a mobile site?

Handling the Web Flow for Mobile Sites

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 automatic redirects?

Who uses manual redirects?

Who uses manual redirects?Remember, users have to find thelink to use the mobile site.Microsoft, however, doesn’t evenlink to their mobile site from theirdesktop site!

Who uses splash screens?

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?

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.

To Recap…

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.

Make it Global!Remember there are a vastarray of devices, and they don’tall have the same capabilities.Know your target audience whenmaking design decisions to meettheir device capabilities (such asJavaScript and HTML5 features).

THE END… THANK YOU!@mikegstowe

Mobile Best Practices and Web Flows

by Michael Stowe

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 30

Statistics

Mobile Best Practices and Web Flows Presentation Transcript

http://www.mikestowe.com	29
http://www.linkedin.com	1