Going Mobile

Overview

What do we mean by going mobile?

We will be discussing the publishing of content for consumption on handheld devices like web-enabled media players, smartphones and tablet computers that are connected to a mobile or wireless network.

What specific aspects of going mobile will be covered?

We will determine the importance of serving content for mobile devices. We will explore our options (as well as their relative strengths and weaknesses) for publishing mobile content. We will consider the differences between accessing content on desktop and mobile devices as well as special considerations related to providing mobile content.

Benefits

Future-Proof Your Communications Strategy

The mobile market is huge. According to Mobithinking.com, as of February 2012, there are more than 6 billion mobile subscribers worldwide. According to an October 2011 SearchEngineWatch.com article, the number of mobile web capable devices in the United States is greater than the number of people in this country.

Mobile use is growing. According to an Adobe study, tablet traffic grew by more than 300% in 2011 and is on track to exceed 10% of total Internet traffic in 2014. As of January 2012, smartphones account for 8.5% of total web traffic and tablets account for another 4.3%.

Mobile browsing is trending upward at the expense of time spent on desktops. According to GoMoNews, 20% of US Internet users access the Web exclusively through a mobile device.

Customer Convenience

Another benefit of implementing a mobile strategy is customer convenience. Implementing a mobile strategy allows people to access your content wherever they are. Unlike their tethered counterparts, mobile devices allow people to access content from the pickup line at school to the mall and everywhere in between. Implementing a mobile strategy also allows people to access your content whenever they have time. Instead of hours long surfing sessions, mobile visitors are able to hop on and off the Web in the minutes between meetings and classes.

Immediacy

Immediacy is another great benefit. Mobile offers visitors the opportunity to get content when they most need it. For example, they can the time, get directions or decide what to bring on the way to an event.

Customer Perception

Currently, having a mobile presence, enhances visitors' perception of your organization as a savvy leader and early adopter. The best part is that they're right. Eventually, like the phone, fax and traditional website before it, mobile sites will become an expectation.

Key Concepts

What is a handheld device?

A handheld device is any electronic device small and light enough to be operated while being held in a person's hand. They typically include a screen with a diagonal measurement between 3 and 10 inches as well as an on-screen or physical keyboard. Today, most handhelds can also connect to Wi-Fi or cellular networks.

What is a Web-enabled media player?

Web-enabled media players are small, handheld devices capable of playing music and movies as well as running applications and providing access to the Internet. Apple's iPod Touch is probably the most recognizable web-enabled media player on the planet. It has a high-resolution, 3.5-inch screen and can access the Web via WiFi. Other web-enabled media players such as Samsung's Galaxy Player provide similar connectivity with screen sizes ranging from 4 to 5 inches.

What is a smartphone?

Smartphones are small handheld devices similar to web-enabled media players. However, they have the added capabilities of making or receiving phone calls as well as the ability to access cellular data networks. While Apple owns the web-enabled media market, Android currently dominates the smartphone market with a variety of devices ranging in size from 3.2-inch entry-level phones to the massive 5.5-inch HD screen on Samsung's Galaxy Note.  

What is a tablet computer?

While tablet computers have technically been around for more than a decade, Apple's launch of the iPad completely redefined the category. Today, tablets eschew the keyboards, full-sized screens and traditional computer operating systems of yesteryear and share more heritage in common with web-enabled media players and smartphones. Generally, tablets have screens ranging from 7 to 10 inches.

Plan

Now that we've discussed the benefits of going mobile, it's time to choose a mobile strategy.

Native Mobile Applications

Benefits of Native Mobile Applications

  • Native applications have the deepest integration with device capabilities including: GPS, camera and microphone.

Drawbacks of Native Mobile Applications

  • Mobile applications are expensive to create. Though there are some cookie-cutter mobile applications, a typical custom mobile app costs tens of thousands of dollars to produce.
  • Free, content-based mobile applications have a low return on investment. According to Localytics, 26% of mobile apps are discarded after a single use.
  • Mobile applications are complex to implement. Unless all of the application's data is static, another system must be built to supply real-time information to the application.
  • In many cases, existing content must be re-entered into a separate database incurring not only additional work, but also introducing additional monthly data storage expenses.
  • Updating the structure or user interface is difficult, time consuming and expensive (Have to contact developer and pay). Applications destined for Apple devices must pass through Apple's approval process each time.
  • The time to market is typically several months.
  • Since applications are only available in manufacturers' application stores, it is more difficult for potential visitors to find applications organically.
  • There is a higher barrier to entry because users must be convinced to spend the time to download and give up space on their device to install your application.
  • ABI Research expects application downloads to peak in 2013 and slowly decline as subscribers migrate to mobile web sites.
  • Varied platforms (Android, iOS, Windows Phone, etc.) increase the expense and time to market, and complicate the update process.
  • Varied device capabilities increase the expense and time to market as well. New capabilities are not always available on older devices.
  • It is somewhat difficult to ascertain which parts and how often how people are actually using your application.

Mobile Web Applications

Benefits of Mobile Web Applications

  • Mobile web applications have a lower cost of entry because they don't require the highly specialized skills required to build native apps. (% above standards-based web site).
  • While implementing a mobile web application isn't necessarily trivial, the return on investment for content-based applications is significantly higher than for their native counterparts.
  • Mobile apps are easier to implement using standard HTML, CSS and Javascript.
  • You can avoid duplicating content by making your existing web presence mobile friendly.
  • Updating the structure or user interface is relatively simple, less time consuming and less expensive. In addition, application updates do not have to pass through an app approval process every time.
  • The time to market is generally shorter than for native applications.
  • Web applications are easy to find via traditional search engines like Google, Bing and !Yahoo.
  • They have a lower barrier to entry because there is no download or install required.
  • According to an Adobe survey, more people prefer browser than apps for mobile web activity.
  • According to comScore, more people use browser than use apps.
  • Mobile web applications can live on mobile devices' home screen like a native app without taking up space on the visitor's device.
  • Web apps eliminate the headaches and expense related to OS and platform variability.
  • You can analyze and respond to how and when people are using your application using a standard web analytics package like Google analytics.

Drawbacks of Mobile Web Applications

  • Today, mobile web apps do not have access to all device capabilities like: GPS, camera and microphone. However, the W3C is currently working ways to access device components without compromising security.
  • Unless care is taken to design the user interface web apps may not be as easy to use as native applications.

Which Mobile Strategy Is Best for Me?

Ultimately, it depends on your needs. If it's important to access device capabilities like GPS, cameras and microphones, a native application is the only choice right now. However, if you are primarily publishing content, you'll save a lot of time, money and energy by building a web application instead. Global Intelligence Alliance reports that companies who primarily publish information like news, weather, communications, financial services, retail and shopping typically choose to develop web apps.

Build

Now that you're convinced that going mobile is a good idea, how do you get started? Based on the cost/benefits analysis in the planning stage, when the primary purpose is collecting and disseminating information, we generally recommend building a mobile web application over building a native mobile application. In this section, we'll show you how.

Use the Viewport Meta Tag

Use the viewport meta tag in the head of your document to ensure that mobile devices report the correct device width and height. We recommend setting the width to the device-width and the initial-scale to 1. Unless there is a good reason, we do not recommend setting the maximum scale or minimum scale. Here is an example: (<meta name="viewport" content="width=device-width, initial-scale=1.0" /> )

Choose Mobile-Friendly Web Technologies

While implementing a web application is significantly easier than implementing a native application, it isn't as simple as slapping together a web site and getting a mobile domain name. You'll want to take care in choosing and implementing technologies that will maximize your visitors' experience with your application and enhance your ability to continually improve your application as the technologies mature.

Use Standards-Compliant Document Markup Language

Structure your content with a standardized markup language. We recommend HTML5 because it includes tags for native audio and video support as well as mobile-friendly input types like email, phone and dates.

Use Standards-Compliant CSS

Style your content with a standardized presentation language. We recommend CSS3 because it includes the ability to make your application look like a native application without resorting to images that increase download time and decrease flexibility and responsiveness.

Use Standards-Based Scripting Languages

Add interactivity using a standardized scripting language. We recommend Javascript because it is understood by all modern and mobile browsers and has 98% market penetration.

Choose Mobile-Friendly Media Formats

Audio content should be encoded in MP3 format because most modern browsers can play the format natively or have a plugin that will allow them to play MP3 files. Video content should be encoded in H.264 format because most modern browsers can play the format natively or have a plugin that will allow them to play H.264 files.

Avoid Desktop-Only Technologies

Avoid popular desktop technologies like Flash and Java applets because support among mobile devices is severely limited.

Keep Mobile Device Limitations In Mind

Limited Screen Size

While high-end smartphones routinely sport 1280-pixel-by-720-pixel "HD" screens, most modern smartphones still report their screen size in terms of 480 pixel or 320 pixel equivalents. Imagine trying to read the average Web site's 11-point body text on a 320-pixel-per-inch screen!
Reduce the Need for Horizontal Scrolling
While vertical scrolling is a relatively natural motion while holding a phone or tablet, horizontal scrolling tends to be less natural and introduces the added difficulty for the visitor of maintaining his or her position on two axes. Make sure images and embedded objects fit inside the screen area by setting a maximum width of 100%. Reposition side-by-side columns into a single column.
Reduce the Need for Zooming
Like horizontal scrolling, zooming in and out increases the difficult of maintaining one's position on the screen.
  • Ensure that your content font size is large enough to read at the initial scale.
  • Increase the size of selectable items so that they are touch friendly.
  • Optimize content for small screens.
  • Be sure your introduction includes a short summary of the page contents.
  • Make liberal use of headings.
  • Break content into bite-size pieces.
  • Use progressive discovery to make content easy to access without initially taking up screen real estate.

Lack of Modal Windows

Remember that mobile devices don't have of modal windows.

Lack of Support for Hover Actions

Do not rely on mouse hover state to convey important information to visitors. Most touch devices lack solid support for the hover state that many web sites have come to rely on for dynamic menus. Instead, switch to touch events.

Lack of Support for Tool Tips

Do not rely on browser tool tips to provide visitors with additional information. Most touch devices lack solid support for tool tips. Instead, add captions where necessary.

Don't Be a Bandwidth Hog

The connection speed of cellular networks is typically much slower than that of their landline counterparts like DSL and cable. Desktop users will only wait 4 seconds for a page to load. How long do you think mobile users will wait? 

As cellular service providers migrate to tiered data plans that limit the amount of bandwidth customers can use without paying extra or having their bandwidth speed throttled visitors connecting via cellular networks are becoming more aware and less appreciative of bandwidth hungry pages.
Reduce File Use
Each file requested from your server adds overhead to your page. Consider eliminating images where text will suffice. Remove large background images that only peek out from behind your mobile application's content area.
Reduce File Size
  • Consider replacing large background images with repeating patterns.
  • For photographic images, choose jpegs instead of pngs.
  • Don't be afraid to test lower quality settings on jpegs--visitors won't be comparing the lower quality image side-by-side with the original. You can get away with a lot more than you think you can.
  • For illustrative images like logos, when possible reduce pngs from 24-bits to 8-bits or use gif files.

Reduced Processing Power

Be cognizant of the reduced processing power of most mobile devices. While today's dual and quad-core processors are significantly more capable than yesterday's single-core devices, mobile computing power is still a fraction of that available on even the most basic laptop or desktop.

Don't Be a Battery Hog

Be mindful of battery draining features like animation and automatic playing of audio and video that increase the power footprint of your pages and drain visitors' batteries faster.

Measure

Test on Mobile Devices

Test your mobile web application on a variety of popular mobile devices like Apple's iPod, iPhone and iPad as well as Android devices like Barnes and Noble's Nook, Amazon's Kindle Fire or tablets like the Motorola Zoom or Samsung Galaxy Tab to see if they look like they should, operate correctly and are easy to navigate. If you don't have actual devices available, use a mobile emulator to at least ensure that the content is available.

Use a Comprehensive Analytics Package

Be sure you are using a comprehensive analytics package like Google's free Analytics on your web application domain. Review your analytics reports regularly to see if your site is being visited by people using mobile devices. Be on the lookout for pages with high bounce rates among users on mobile devices. It may indicate a problem with display on mobile devices.