Mobile Web Options

Your options and resources

Your mobile-aware web considerations fall into these categories:

As Is:

Your current website is "one size fits all." The content and its appearance remains the same whether it's accessed from a desktop, laptop, or mobile device. The site may appear in miniature and some of its features might not work on a mobile device (for example, Flash content).

This website looks beautiful on a desktop but is not yet optimized for mobile browsers.

Flexible (responsive) websites:

You have one website or one URL for each page, but it's designed to appear or function differently on a mobile device than it does on a desktop or laptop computer. This "one web" solution might require some simplification of your content, but it allows you to create one site for multiple uses. If you use Stanford-supplied templates, your additional resource needs might be minimal. If you prefer to create a customized responsive site, you need some knowledge of CSS and HTML.

Compared to the option of creating native apps, a web-based solution offers more flexibility. This article in "The Chronicle of Higher Education" discusses how some campuses have stopped creating native apps in favor of mobile web sites, instead.

Use this solution when you:

• Want to make your site accessible to a variety of mobile devices and people who use assistive technologies
• Can architect your site from the ground up for both mobile and desktop uses
• Have a site that's already well-organized
• Cater to markets with good bandwidth (Wi-Fi or 3G/4G markets)

Cautions:

• Beware of sacrificing the desktop experience by focusing too much on the mobile one
• Don't hide components of your sites (such as images) but still download them to mobile devices

This is a responsive website. It's optimized so that the same content in the desktop browser can adapt for easy viewing on a mobile browser.

Separate mobile version:

With this solution, you have more than one URL and design for your website—one version might be for a computer, and the other is a mobile version.

Building a separate mobile site requires knowledge of HTML, CSS, and JavaScript. It's not simply a flexible website —it often has a different functionality and appearance from its full-sized desktop relatives. Sometimes these mobile sites are referred to as "web apps," but they shouldn't be confused with native apps, even if users can access the mobile website through an icon (called a "web clip") on the device's Home screen. They are indeed websites--not applications. To get familiar with the intricacies of building a mobile site, look at online resources such as jQuery Mobile.

Use this solution when:

• You don't need a completely mobile-aware site
• Your two sites will do different things, depending on who uses them
• You can offer a better overall experience with a dedicated mobile version
• Your mobile site would be too expensive or complicated to make through the responsive approach

Cautions:

• Don't make device-based assumptions about the content your users might want to see. Instead, provide links to the full site.
• Avoid redirects from one version to the other, which is expensive. Provide redirection behind the scenes, preferably at the server level.
• Don't redirect users to nonexistent pages or causing users to navigate backwards if they arrive on pages other than the mobile home page to your site.

On the left is the Stanford.edu home page as seen on a desktop computer. On the right is the mobile version of the site (m.stanford.edu).