Four Strategies for Supporting the Mobile Web

iPhone

iPhone

The number of people accessing the Web via mobile devices has more than tripled since 2009.  With this explosion of mobile Web users, marketers must pay increasing attention to the user experience their Web sites deliver to mobile devices.

There are many ways to support this tsunami of mobile Web visitors, including:

  • Tweak your existing Web site
  • Rely on responsive layout with media queries
  • Build a dedicated mobile Web site
  • Design a native mobile app

Tweak Your Existing Site

Tweaking your existing site so that it displays and functions properly on mobile devices is the most basic, quickest option.  While not ideal, this approach at least ensures that your visitors can access the information they need.

To implement this approach, you can add a mobile style sheet to adjust the viewport and text size to affect the way your Web site displays on a mobile device:

  • Add a mobile style sheet
    <link rel="stylesheet" href="…" media="handheld, only screen and (max-device width: 480px)" />
  • Adjust the viewport
    <meta name="viewport" content="width=device-width" />
  • Adjust the text size
    html { -webkit-text-size-adjust: auto; -ms-text-size-adjust: auto; }

Be careful when making any CSS adjustments:  be sure you target the adjustments strictly to mobile visitors.

This approach is quick to implement and requires minimal work to replicate your desktop design.  However, its minimal tailoring for mobile users may result in a poor experience, since the content and navigation paths are not optimized for mobile devices.

Rely on Responsive Layout with Media Queries

Now that many browsers support the W3C CSS3 “Media Queries” specification, you can query width, height, device width, device height, orientation, and more, and use this information to adapt your Web site to mobile users.

To implement this approach, you develop style sheets that target specific resolutions and device sizes. For example, for devices with a maximum width of 480 pixels—for example the iPhone—use the following:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />

Responsive layouts need to work with the content already on your site, so the HTML mark-up can play a vital role in providing a logical order to content when linearized for narrow layouts. You also need to remember that images need to scale as their containing elements adapt to different layouts. One way to achieve this is to specify a maximum image width:

img { max-width: 100%; }
The pros and cons of relying on a responsive layout with media queries are as follows:

Pros Cons
Quick to develop Older mobile and desktop browsers, including Internet Explorer 8, do not natively support media queries
Requires minimal additional design If you alter your site’s navigation and layout, returning visitors can face a steep learning curve
Provides improved readability and a better experience for mobile visitors Rendering can be slower as images and non-critical content are downloaded

Build a Dedicated Mobile Website

A Web site dedicated to mobile users delivers an optimized experience to visitors, but that experience may be very different than that found on your desktop site. Because screen space and file sizes are at a premium, mobile websites often have a very different strategy than their desktop equivalents.

To build a dedicated mobile Web site, you specify a domain or sub-domain for your mobile-only Web site—for example, mobile.YourSite.com—and redirect mobile traffic to it. In your development:

  • Be sure to provide a link to allow visitors to access to the full version of your site
  • Make sure that mobile users are redirected to the correct page when deep linking from another source
  • Keep graphical assets to a minimum
  • Be sure to highlight popular content, common tasks, and key navigation paths to allow mobile users to quickly find what they need

Despite the extra work, a dedicated mobile site can be faster and more streamlined, putting the most important features and content at your user’s fingertips.
The pros and cons of building a dedicated mobile Web site are as follows:

Pros Cons
Greatly improved performance Relatively expensive to build and maintain
Optimized workflow makes it easy and fast for users Assets must be optimized
Enhances your support of, and appeal to, growing mobile market Higher learning curve for returning visitors, if the layout and content are very different from the desktop versions

Design a Native Mobile App

A native app provides the best possible experience for users on the go, while taking full advantage of device-specific features and controls, prioritizing the user’s goals over the content or features of your existing Web site.
To implement a custom native mobile app, you can use a SDK—PhoneGap or Appcelerator, for example—that enables you to create applications using native APIs that are not always available in the browser.

The pros and cons of designing a native mobile app are as follows:

Pros Cons
Provides streamlined workflow for the user Requires custom development
Device controls are native and optimized for platform Creating and maintaining apps for a range of devices is time-consuming
Incredibly lightweight, so uses minimal bandwidth and provides speedy response time for users Third-party approval is required before the app is available in stores

Which Approach Is Right For Your Company?

Tweaking your existing Web site and relying on responsive layout with media queries both can provide a “quick win,” allowing you to improve your mobile users’ experience and optimize readability at minimal cost. Building a dedicated mobile Web site requires considerably more time to develop and maintain, but results in a faster, more streamlined Web site for mobile users. Designing a native mobile app requires significantly more time to develop and approval from third-party app stores. However, if you have many mobile users that expect a flawless experience, it might be ideal.

Whether you tweak your existing site, rely on responsive layout with media queries, build a dedicated mobile Web site, or design a native mobile app, your approach should be guided by your content, objectives, and visitors. If your Web site analytics show that a large proportion of your visitors are on mobile devices, the extra time spent improving their experience may be worth the extra cost.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>