Dave Zuverink


12 February 2010

Mobile-specific websites can be built with various combinations of HTML, JavaScript, or Adobe Flash Platform technology. This article focuses on exploring some of the design opportunities offered by such websites. I describe what a mobile website is and why you should build one. I then provide several tips for making your mobile website a compelling experience for your users.
The opportunities and limitations of the mobile experience have been in flux for the last several years. At some points it seemed that browsers would become the primary means of delivering content. Then the development of "app stores" came to define what is expected of a mobile experience. Largely, these trends were shaped by the technologies available at the time. This has been especially true when it comes to delivering mobile experiences through browsers. Initially, due to network limitations, only very stripped-down WAP-style versions of websites were possible. Then full-HTML browsers offered the promise of accessing the same desktop websites from mobile devices. However, while desktop websites offer a higher degree of richness, they are more difficult to navigate on a device.
With the proliferation of smartphones, many sites are now offering HTML sites that are specifically designed for mobile devices. While these sites offer an improvement over WAP sites, I believe there is an opportunity to build sites that deliver the richness of immersive desktop experiences that users expect, but are tailored for mobile devices.
Treat your site like a canvas
Traditional websites, both mobile and desktop, use a page metaphor for all content. This requires the user to spend a lot of time navigating from page to page in order to get to the content they want. Flash technology allows designers to think of their site in terms of surfaces. These surfaces may extend beyond the screen, inviting users to interact with them. In this way, a user is able to engage with the content in a more direct way without having to navigate to different pages.
An example of this can be found in the New York Times mobile website. When viewing a story, users are able to scroll down to view more of that story, but are also able to navigate horizontally by swiping in order to see the next or previous story. This creates the impression of the stories being laid out across one big wide surface. Users can then flip through these stories, as they would with traditional print media, resulting in a more engaging experience (see Figure 1).
New York Times mobile website has stories laid out across a horizontal surface
Figure 1. New York Times mobile website has stories laid out across a horizontal surface.
Reinforce spatial relationships with motion
As your site incorporates various surfaces, you can define physical ways in which they interact with each other. The more the motion in your site can reinforce the physical relationships of its elements, the more natural it will feel to the user.
In the New York Times example in Figure 1, the horizontal arrangement of the stories are reinforced by a horizontal slide animation. If the user swipes the screen from right to left, the surface scrolls over to reveal the next story. Left and right buttons are also provided at the bottom for discoverability, but the animation still occurs in the same way. This introduces users to the physical relationship of the stories, inviting them to also interact directly with the interface using gestures.
Fill the screen with the stage
One of the distinguishing characteristics of mobile websites is that the entire area within the browser is taken up with the application. The user still experiences your site in the context of the browser, with the device's status bar and the browser's chrome appearing. Mobile browsers are becoming more and more minimal, with address bars often fading away, so your users will essentially experience your content as a full screen without entering the Flash Player "full-screen" mode. You should be aware that some browsers will still maintain some sort of persistent UI such as zoom-in and zoom-out buttons, which may obscure some of your content. Also, be aware that some platforms may have on-screen keyboards that come up over the bottom of the screen, so you may need to either avoid text entry boxes towards the bottom of the screen or have them scroll up when they are selected.
Content such as lists can be created by having the content extend beyond the visible stage and providing your own affordances and mechanisms to scroll, whether with touch gestures or directional keys. This allows you to create rich lists that behave how you want them to.
Use true full-screen for video and games
For many mobile websites, you'll want to maintain the context of the browser since users will expect to maintain control over their device. However, there are some instances where the user will be better served with a more immersive experience. For these cases, you can use the ability of Flash Player to enter full-screen mode.
The most likely candidates for this kind of experience are playing videos and games. In either case, the user will be required to take some action in order to trigger the full-screen experience; your site cannot automatically load in full screen mode. For videos, you can provide a large play button over the video, which goes straight into full-screen mode. If a device has an accelerometer, rotating the device will also rotate the video. For games, the user can press a "start game" button or something similar. It is good practice also to provide a way for users to get out of full-screen mode, such as with a close ("×") button (see Figure 2).
Video playing full-screen in landscape mode
Figure 2. Video playing full-screen in landscape mode.
Design for touch, but account for five-way
Today's smartphones are becoming predominantly touch-screen devices, especially for the task of browsing the web. Since desktop websites are usually larger than what fits on a smartphone's screen, mobile browsers usually employ a "keyhole" browsing strategy, whereby users zoom in to read text and pan around to view other parts of the page up-close. Since your mobile website will be tailored to a mobile device and the stage will equal the browser's window, your users will have a better experience; but you can still take advantage of the direct tactile experience that touch screens enable. This means that you should first make sure your site will work well for touch interaction. For example, buttons should be at about 7–10mm wide on the screen in order to be adequate targets for fingers. You can get away with smaller buttons, but only if no other buttons are nearby. You should also support basic gestures such as swiping, flicking, and panning. These direct methods work very well for interacting with interfaces that behave as a series of surfaces, each with its own spatial relationships.
While making sure touch interaction works well, you should also account for the fact that many devices are "hybrid," offering both a touch screen and directional keys or a ball. Sometimes it can be quicker for users just to use the hardware input buttons, either so they don't have to move their hand around the screen so much or to facilitate one-handed usage. This is especially true for interactions such as scrolling through a list. Therefore, it is a good idea to support hardware directional button navigation as well. Flash technology lets you use rich visuals to indicate focus on the screen. For example, list items can have the whole background change color and buttons can have a border and glow. This is a vast improvement over traditional web pages, where lists of links show a faint dotted border in order to indicate that they have focus. If you do a good job designing the focus states and navigation for your application, then your design should also be easy to use on non-touch devices such as those with physical keyboards.
Segment your content
When users first arrive at your site, you should present them with a clear layout that allows them to see what's available to them and make simple choices about where they want to go or what they want to do. Two common and effective ways to do this are to divide your site hierarchically or categorically.
Hierarchical organization presents users with a simple list of the main areas or activities that your site offers. This is often seen in mobile applications when a user selects an item and a new screen slides over from right to left. It is essentially a hub-and-spoke arrangement and works very well for mobile apps, since it narrows the focus of the user to a small set of choices at any given time.
To allow users direct access to different parts of your mobile website at any given time, you can use a categorical navigation structure such as tabs. This allows users to switch easily from one area to another. The currently selected tab also serves as a good header label to let users always know where they are.
For example, the New York Times mobile website provides hierarchical navigation, allowing users to drill down from a list of stories to read each one individually. It also has categorical navigation provided by a pull-down menu showing the different types of stories available (see Figure 3).
Categorical navigation provided with a pull-down menu
Figure 3. Categorical navigation provided with a pull-down menu.
Provide your own app structure and navigation
If you choose a hierarchical navigation strategy, you should also provide an easy way for users to navigate back up through the hierarchy. If your mobile website has a deep hierarchy, you may consider also having a home button, especially if your users are likely to want to start over from the top of the hierarchy to do something else.
For example, with the New York Times mobile website, once users navigate down a level to read a story, they are presented with the option to navigate back.
If your site has categorical navigation, you may consider leaving these UI elements on the screen while other content scrolls under it. Separating the navigational elements as their own surface allows the user to always know which section is selected, and to navigate directly to any other part of your site without scrolling. The stories in the New York Times mobile website scroll under the top navigation element, enabling users to switch to a different category at any time (see Figure 4).
Back navigation appears once a story is selected; the navigation bar stays at the top of the screen while content scrolls under it
Figure 4. Back navigation appears once a story is selected; the navigation bar stays at the top of the screen while content scrolls under it.
Progressively disclose
As with mobile application design, displaying the right amount of information at the right time is critical for mobile websites. Another way of segmenting content, but presenting more details when they are requested by the user, is to use a progressive disclosure strategy such as accordions.
Reinforcing the opening of an accordion with motion can be a very effective way of expanding the surface available while maintaining context for the user. The area within an open accordion can also be used creatively by incorporating its own vertical scrolling or even horizontal scrolling.
In addition to direct UI elements such as accordions, there are many other ways to display content on demand and in context. For example, icons can reveal additional menu options, help bubbles can be displayed when info icons are selected, and small menus with contextually specific choices can be displayed when a button is pressed. The New York Times mobile website displays a menu of options when the user chooses to change the font size (see Figure 5).
A menu displaying font size options appears in context
Figure 5. A menu displaying font size options appears in context.
Design for latency
You hear a lot about the limitations of mobile devices, such as limited screen size, processing power, and network speed. One major factor determining how a user perceives a wireless connection is latency. To oversimplify things a bit, it takes longer for a network request to be passed along to the tower, then on to the server, and back to the user's device. The result is that there is a significant amount of delay involved each time new data is fetched, even though the actual download speed for data can be quite fast on many of today's smartphones and networks. Since each network request creates a certain amount of overhead, you may as well download more data at one time, especially if this means that you can prevent a future request. This makes mobile a great match for websites.
By downloading slightly more data for the initial application, you can make use of already-downloaded content to support several interactions by the user. In a traditional mobile web page, each of these interactions would have to make a network connection in order to download a new page. Consider a mobile website with several tabs. Each tab can respond immediately when the user selects it. If the download size is too large, content can be loaded in place when the tab is selected. Since the tab contents are preloaded and cached, the user's perception will be that the application is more responsive because the tab responds right away. If enough of your application is cached, the user may even be able to use it without an Internet connection.
Consider pixel density and screen size
It might seem a bit counterintuitive but pixel density, also called pitch and usually measured in pixels per inch (ppi), can have a more dramatic impact on your UI than the size of the screen alone. Pixel density is the combination of screen resolution with the screen's physical size. Most mobile devices are going to have a higher pixel density than computer monitors, so everything will look different when viewed on the device. This is why it's critical to test your designs by looking at them on a real device. This can be as simple as making comps that are the same screen dimensions as a test device and viewing those images in the device's photo gallery at full-screen size.
Not only will the pixel density vary between your computer and a device, pixel density between devices can vary even more. For example, the Palm Pre has a resolution of 320 × 480 with a screen measuring 3.1 inches diagonally. To get the ppi, you first need to find out how many pixels there are diagonally. This is the square root of each side squared, added together (from a2 + b2 = c2). So the square root of 3202 + 4802 = 576.89. Divide this number of pixels by the diagonal screen dimension (3.1) to arrive at a ppi of about 186. Compare that to the Google Nexus One whose resolution is 480 × 800 with a screen size of 3.7 inches; that's 252 ppi!
You may initially think that with a larger screen, content would show up bigger, but the same assets will actually appear 35% smaller compared to the Palm Pre. For reference, the Nokia n900 and Motorola Droid have very similar screen sizes to the Nexus One, with 267 ppi and 265 ppi, respectively. Look up the ppi of your target devices and adapt the UI accordingly so you can display things at an appropriate size (see Figure 6).
Diagram illustrating how different screen sizes and resolutions relate to one another
Figure 6. Diagram illustrating how different screen sizes and resolutions relate to one another.
Take advantage of screen orientation opportunities
Screen orientation changes will trigger an automatic switch to landscape mode on accelerometer-equipped smartphones. There are also APIs to change the layout of content upon reorientation, which can be triggered automatically or manually. This can be a challenge to design for, but also presents some opportunities. The good thing is that more UI can fit horizontally. If your tabs were cramped in portrait mode, you can stretch them out in landscape mode to make them easier to touch. For lists, you may want to consider opportunities beyond simply extending the width of your items. For example, you may now have room for a thumbnail or icon next to the text, given the extra width.
Build an immersive brand experience
One of the strengths of mobile websites is the ability to immerse your users in your brand. With more control over visual elements, you can tie the look of your mobile website in with your other websites or applications. Branding elements such as colors, logos, and typefaces can be embedded into the experience, creating a cohesive brand identity.
Build a multiscreen ecosystem
For services that tie into back-end systems, consider how your mobile website can integrate with desktop websites, installed applications, televisions, or other devices. Moving the hub of content into the cloud enables your mobile website to function as one piece of an integrated system.
For example, consider a note-taking application that stores notes and other content in an online repository. The mobile website can be used to access or modify any of that content for later use, or to generate new content. Or think of an RSS reader that allows users to access content through a mobile website or as an installed desktop application. Users may manage their subscriptions on their desktops but create customized lists of favorite feeds to view from their mobile websites.
For more information on contextual applications, please refer to the following Adobe white paper:
Customize and personalize
Another way to make your mobile website more compelling and useful is to give users options that let them tailor the experience to fit their needs. These may range from preferences that allow them to filter information to the ability to create custom characters in a game. Preferences such as these can be stored as local shared objects in the Flash Player so that the next time the user returns to the site, their selections will be preserved. This can also be used as a way to return users to a particular state in an application the next time they return. It is possible for users to delete stored data or block new data from being written, so be sure to have a backup plan dealing with these possibilities.
In the New York Times mobile website, users are given the ability to customize the font size used to display stories. This is also helpful in case users are on a device with a high pixel density.

Where to go from here

As you can see, mobile websites offer a wide array of opportunities to build expressive, compelling experiences. Mobile-specific websites can offer advantages over desktop websites, and mobile websites can build on this concept to deliver even richer experiences. Building mobile websites can pave the way for creating both installed applications and experiences for other emerging hardware and form-factors. Finally, I've offered you some tips on how to think about designing mobile websites using the Adobe Flash Platform. I hope you find these suggestions helpful as you build your own engaging mobile websites.