APRIL 7, 2012

Mobile Web Flows and Best Practices

michael stowe

• 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

.com

@mikegstowe

MIKESTOWE

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 usage

Why Worry about Mobile

http://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/

• 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 decisions

Why Worry about Mobile

http://www.digby.com/mobile-industry-resources/mobile-industry-statistics/

• 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 device

Why Worry about Mobile

http://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/

• 10% of All Website Traffic comes from mobile devices.

• 55% of Twitter's traffic comes from mobile devices.

• 60% of Pandora's traffic comes from mobile devices.

Why Worry about Mobile

http://www.lukew.com/ff/entry.asp?1450

• 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.

Why Worry about Mobile

http://www.lukew.com/ff/entry.asp?1450

• 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.

Why Worry about Mobile And…

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?

Remember Mobile capabilities are different!

• Smaller Displays

• Less fluent typing

• Gestures – No Mouse

• May not Support Flash

• Slower Connection

• Special Link Types

Smaller Displays Screen sizes are not only smaller, but vary by device, ranging from 1.5” to 10” in size. Keep in mind that many devices often scale webpages to fit the screen.

Small Displays

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;">

One way to help with scaling on mobile devices

is to use the viewport meta tag. This allows you

to set the initial scale, and how much the user can zoom in.

Less Fluent Typing Devices may or may not have a keyboard which the user may or may not be accustomed to. As such, having long forms or asking for paragraphs of information can be extremely inconvenient and frustrating for mobile users.

Gestures Devices utilize touch based gestures, simplistic arrows, or a scrolling wheel. This means your navigation needs to be simplistic, accessible, and quickly available. Also keep in mind that people have different sized fingers. As such, your menus, buttons, and links need to be large enough and spaced out enough that they can easily be pressed by even the largest of fingers.

May Not Support Flash Different mobile devices have different capabilities. Some devices, such as Android support flash, while others such as the ever popular iPhone and Windows 7 Phone do not. This means that flash videos, music, games, or animations will not show up on these phones, and you should use the appropriate

alternatives such as 3GP + MPEG-4 or H.264 + MP4 for smart phones.

Slower Connection And slower processing…

A mobile device often does not have all the processing power of a modern computer, and runs on a slower connection. On top of this, many users have data usage restrictions, meaning that downloading large amounts of data not only takes longer, but costs them money. Avoid sending unnecessary code, images, videos, etc. Optimize your site to get the content to the user as quickly as possible, which means using as little data as possible.

Special Features

Different phones make use of different HTML5 anchors (links) and inputs, such as phone and email. The “tel:” link tells the application what to do with the link (for example “Call Us Now” dials a specific number). This is used just like “email:” While the phone input may open a numeric keypad, and the email input may open a keyboard optimized for emails. Not all phones support all HTML5 link/ input types.

Special Features examples

<!-- 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 not rendered. However, it can be useful on Android phones for uploading photos or other files.

Choosing a Mobile Solution

Choosing a Solution Your 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 Users

Advantage:

• Less work

Disadvantage:

• Not good for mobile users in most cases. If you have a complex site, you will lose visitors and revenue.

Responsive

Advantage:

• Less work

• Works for all Devices

Disadvantage:

• 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 platforms

Disadvantage:

• 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 revenues

Disadvantage:

• More work/ more costs

• Only works on limited devices

• Requires users to download

Best Practice: Providing a mobile site alternative is the most convenient solution for your users, assuming it provides them with similar service.

Users want simplistic, easy to navigate sites with the same capabilities as the desktop site. Imagine if you couldn’t interact on Facebook’s mobile site…

Who has a mobile site?

Who has a mobile site?

Handling the Web Flow for Mobile Sites

Choosing a Flow Your 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-Redirect

Advantages:

• Loads faster

• Uses less data

• Formatted for device

• Many users prefer mobile sites

Disadvantage:

• Users aren’t given an option

Splash Screen

Advantage:

• Loads the fastest

• Users get a choice

Disadvantage:

• Adds one more step and requires users to take action to visit your site

• If not remembered, becomes annoying very quickly.

Manual Redirect

Advantage:

• Users are provided the full site

• Users choose to access mobile version

Disadvantage:

• 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 Only

Advantage:

• Extremely accessible and always on user’s phone

Disadvantage:

• 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 that offer similar functionality, it is recommended to redirect the user automatically to the site that best fits their device. Users should be provided with the option of returning back to the main site or using a mobile site (ie a footer link) and this preference should be remembered (ie in a cookie)

Best Practice: By redirecting users to a subdomain such as m.yourdomain.com users know they are being sent to a mobile friendly version. However, avoid sending users through multiple redirects (one is a good number). This redirection should be done server side instead of browser side as it requires less data to be transferred.

Who uses automatic redirects?

Who uses automatic redirects?

Who uses manual redirects?

Who uses manual redirects?

Remember, users have to find the link to use the mobile site. Microsoft, however, doesn’t even link to their mobile site from their desktop site!

Who uses splash screens?

Who uses splash screens?

The National Hockey League uses a splash screen to bring attention to their mobile applications. Users can choose to download an app, or go to the site. However, this prevents users from having immediate access to scores, news, and other information they are trying to view.

Who uses only apps?

Who uses only apps?

Keep in mind, unless users go looking for, and find their apps, users will not be able to have a convenient experience optimized for their mobile device. They are required to either find the app in an “app store” or navigate the full site on their device to find a link to the mobile app.

To Recap…

Make it Assessible!

Users should be able to quickly

access your site in a device

friendly format.

Avoid making your users search

for links or download applications

to access your site in a

convenient manner.

Make it Fast!

Mobile sites should be quick

to load, using as little data

and avoiding any unnecessary

extras.

Make it Convenient!

Mobile devices are becoming

more and more popular, and as

such sites need to be easily

Accessible and convenient for

users on these devices.

Make it Global!

Remember there are a vast

array of devices, and they don’t

all have the same capabilities.

Know your target audience when

making design decisions to meet

their device capabilities (such as

JavaScript and HTML5 features).

THE END… THANK YOU!

@mikegstowe