Site Optimized for Chrome and Firefox
Site Optimized for Chrome and Firefox
Site Optimized for Chrome and Firefox
Site Optimized for Chrome and Firefox
The MMS API was deprecated on July 29, 2015. Get more information about our supported APIs.
x
/apis/sms-mms /apis/mms/docs
The Device Capabilities API was deprecated on July 29, 2015. Get more information about our supported APIs.
x
/apis/device-capabilities /apis/device-capabilities/docs
/site/website/application-resource-optimizer/docs/best-practices/content-optimization-for-mobile-devices/index.xml

Introduction

Managing content for mobile devices raises some unique issues.

Limitations on wireless bandwidth, mobile device battery life, and the variety in device capabilities and screen sizes, make delivering content more complicated than it is with other types of computers and networks.

As a result, content design and delivery takes additional care and planning.

Background

Today's smart phones are significantly cheaper and much more powerful than the fastest computers in the world during the 1970s. As of July, 2011, 93% of U.S. consumers owned mobile phones, 38% used smartphones, and an average of a half-million Android devices were being activated every day, worldwide.

In 1998 an early smartphone from Nokia was released. The 9110 Communicator had a 640×200 backlit monochrome screen, came with a physical keyboard. It had 6 MB for the operating system, applications, and program execution, and 2 MB for user data storage. Battery life was about 40 hours in standby mode.

In 2011 Apple released the iPhone 4S, with a 3.5-inch (diagonal) widescreen Multi-Touch Retina display, 960-by-640-pixel resolution at 326 ppi, with 16.7 million colors, an 800:1 contrast ratio,p;and 16/32/64 GB storage, 512 MB RAM. Battery life for the iPhone 4s can be up to 200 hours in standby mode, up to 14 hours (2G) or 8 hours (3G) of talk time, and up to 40 hours of music playing.

Obviously devices have come a long way, and networks have kept pace.

In 1998 a user with the Nokia 9110 Communicator smartphone on a 2G network could expect download data transfer times of up to 14.4 Kbps.

In 2012, using that iPhone 4S, a user might download on the AT&T 4G LTE network at speeds up to 13,000 Kbps of data.

Content design and management for mobile devices has long been a challenge due to screen size and network speeds. Even as devices and networks have made amazing improvements, developers still need to carefully manage their content and look for ways to optimize it.

The Issue

There are several issues, like the following, that make optimizing content for mobile devices challenging.

  1. Overall wireless spectrum is a finite resource.

    In this case we are talking about the portion of electromagnetic spectrum that is used by radio frequencies. There are physical limits to electromagnetic spectrum, and the mobile industry is approaching a crunch in the bands of available spectrum, especially in the United States.

    As network traffic keeps growing, demand is threatening to exceed the available spectrum. The iPhone can use 24 times the spectrum of a traditional cell phone, while the iPad uses 122 times as much.

    Users are taking real advantage of the new and powerful devices and faster network speeds. For example, on the AT&T network wireless data traffic has grown 20,000% since the iPhone debuted in 2007. Worldwide, wireless data traffic is nearly doubling every year.

    Demand is inevitably going to exceed the available spectrum.
  2. Radio resources within each cell are finite.

    Mobile networks use both wired and wireless networks to transfer data. The wireless part of the service offers coverage within a range of 10 to 15 miles from the nearest cell site, and there is a limit to the amount of data that can be transferred within each cell.

    So, in addition to the larger limits on radio spectrum, there is a limit to the bandwidth in each cell. The increasing volume of traffic means that there is also a crunch with bandwidth within each cell. Once the traffic limit is reached within a cell, a new cell site must be created to handle the overflow, but there are also financial, legislative, geographic and physical limitations to the introduction of a new cell.
  3. Mobile devices have come a very long way, but there are still limits to the kind of content they can handle due to the physical display.

    With the range of smart phones and tablets now available, there is a wide variety of display sizes and shapes. This means developers need to build flexibility into the design of their content.

    A study written up in the International Journal of Mobile Human Computer Interaction confirmed that users have more difficulty reading content on a mobile screen when compared to the effort it takes to view the same content on a standard computer screen.

    Users tested with a desktop screen had an average comprehension score of 39.18%. *

    Users tested with a mobile screen had an average comprehension score of 18.93%. *

    The comprehension score for mobile users is obviously much lower. The iPhone user comprehension scores from the study were 48% that of the desktop users, or about half the comprehension.

    *(R.I. Singh, M. Sumeeth, and J. Miller: "Evaluating the Readability of Privacy Policies in Mobile Environments," International Journal of Mobile Human Computer Interaction, vol. 3, no. 1 (January-March 2011), pp. 55-78.)
  4. There are additional device limitations beyond the display.

    It's not just display size that can be a challenge. Content must be adapted to a wide range of target devices with different capacities, different resolutions, different applications available onboard, and other limitations.

    Knowing how to reduce excess images, text and media can be the difference between a lean effective design and a layout that can bring a device to a crawl. The availability of powerful phones and super fast networks does not remove the necessity to manage file sizes and optimize content.

It's not just display size that can be a challenge. Content must be adapted to a wide range of target devices with different capacities, different resolutions, different applications available onboard, and other limitations.

Knowing how to reduce excess images, text and media can be the difference between a lean effective design and a layout that can bring a device to a crawl.

The availability of powerful phones and super fast networks does not remove the necessity to manage file sizes and optimize content.

Best Practice Recommendation

The Best Practice Recommendation is to devise a strategy for managing content that fits mobile devices, wireless networks, meets the specific needs of your app, and provides the best experience for your users.

The following questions, design principles, and suggestions can help you develop your mobile content management strategy.

Questions to ask when designing your mobile content:

Why are my users accessing this content on a mobile device?

What are the common use cases for my app?

What are the critical pieces of information I can provide quickly and cleanly?

Am I delivering the most appropriate content for the app, for the users, for mobile devices, and for wireless networks?

Some basic design principles for mobile content:

  • Simplify and shrink content file sizes. Smaller file sizes that deliver the same quality from a mobile perspective are always better.
  • Make sure your content is a good fit for the mobile environment. Very often developers repurpose content designed for the web or desktop applications for mobile apps without any review or modification.
  • Make sure your type is large enough and clean enough to be easily read.
  • Look toward flexible designs. Is your content acceptable to be viewed on iPhone, Android, Windows Mobile and Blackberry devices? Can it be adequately viewed on the smallest smartphone as well as the largest tablet?
  • Deliver content that respects your users' changing circumstances and points of reference when they are using a mobile device.
  • Consider scenario-based content planning. Consider various ways that users will be using your content, and then plan accordingly.
  • Focus on solutions that fit inside an overall mobile content plan and platform.

Here are a few ways that the design of the mobile site can be adapted from a layout designed for a web site or desktop application:

  • Use fewer graphics with smaller file sizes to save screen space and load time.
  • Use a simple layout. Consider using a one-column layout.
  • Use simpler navigation to provide more room for larger buttons.
  • Include an option for your mobile device users to view the desktop website.

Additional suggestions for optimizing mobile content:

  • Reducing the resolution and dimensions of your images can make a serious difference in response time.
  • Mobile images should stick to the JPEG .GIF and .PNG formats.
  • Make clickable elements big enough for a fingertip. Apple has determined that the average finger tap on an iPhone is 44px by 44px.
  • Remember that people using mobile devices are often on the go, so design content accordingly.
  • When possible, try to size your images so the user does not need to zoom in to see them properly.
  • Give some space between clickable links. Fingers tend to be too thick to hit a small link accurately, and if there are 2 or more links close together then it's easy to accidentally tap the wrong one.
  • When presenting a web layout designed for mobile devices, consider allowing access to the full desktop site. Some people would rather have access to the full desktop site.