As mobile web browsing becomes more common, it’s increasingly important to design websites for mobile use as well as for desktop browsing. This can mean anything from tweaking your regular site so it looks OK on Android and iOS devices, through to CSS media queries, responsive layouts, and even completely separate websites for mobile users.
The question is: How do you make a website work well on a mobile browser? It helps to start out by thinking about how the mobile browsing experience differs from desktop browsing. There are 10 important factors that make the mobile web different, and show how you can use those factors to influence your mobile site.
Let’s start with one of the most obvious differences: Mobile browser displays are smaller than their desktop counterparts. “Smaller” here means two things:
A smaller display means that the user can see a lot less information at once. Most modern mobile browsers compensate for this by allowing the user to zoom in and out easily, as well as adapting font sizes to make text more readable. Typically, though, the user will need to zoom in if the want to read the text in your page.
Another consequence of a smaller display is that more of your page content will be “below the fold”, requiring users to scroll through your page content more often.
So for your site to work well on a mobile browser, it needs to present important information near the top of the page; use an easy-to-read font; and not overwhelm the user with too much content in the page. In addition, the page layout not only needs to look good in a small browser window, but be usable too. This usually implies a simpler page layout than you might see on a regular website.
Although they are catching up, mobile devices generally have a lot less processing power than desktop computers. This is for various reasons, including cost and battery life. Therefore, mobile browsers take longer to render pages, and JavaScript-intensive pages can run very slowly.
Consider creating a simpler page layout for mobile browsers that uses less markup and CSS. If your site uses a lot of JavaScript for things like slideshows, interactive forms and the like, you might want to optimize or minimize your JavaScript so it runs smoothly on mobile browsers.
While cellular network speeds are improving all the time, a typical 3G mobile device will be lucky to get more than a 1 Mb/s download rate, compared to between 1.5 Mb/s and 20 Mb/s for a typical home ADSL link. (Of course, if the device has Wi-Fi access then downloads will be faster.)
What’s more, most mobile plans aggressively limit the amount of data that can be downloaded each month. If your users find that your site sucks up a large chunk of their download allowance then they’re unlikely to be back!
It’s always a good idea to make your site as bandwidth-efficient as possible, since every second that your users have to wait for your pages to load will increase their frustration. However, this is even more important when designing for the mobile web.
If your site contains large graphics or embedded videos that take up a lot of bandwidth, then you definitely want to look at creating a separate mobile-friendly site with smaller images and lower bit-rate video (or no video at all).
Also, if you’re providing downloadable PDFs or other content for your visitors, make sure the content isn’t too big to download comfortably on a mobile device.
One important aspect of many mobile devices is touch-based input. Rather than using a mouse or trackpad, the vast majority of mobile users work with their devices using a stylus or — more commonly these days — their fingers. This has several implications for mobile site designers, including:
:hover
pseudo-class or JavaScript mouseover
/mouseout
events won’t work well on touch devices. Some mobile browsers use various tricks to compensate for this, such as firing a hover event when the user taps the element once, and a click event if they tap again. On the whole, though, it’s best not to rely on hover events for your mobile site’s functionality.Unless you happen to be using an add-on full-size keyboard with your mobile device, the chances are that you’re typing on a fiddly little plastic keyboard or tapping a minuscule on-screen keyboard. While these keyboards are much better than they used to be, typing on them is still far from being a quick, pleasant experience.
This means that mobile users hate typing long reams of text. Your mobile site can make life easier for them by:
Multitasking — in the sense of being able to run more than one app at once — is finally starting to take off on mobile devices. That said, many devices still can’t multitask, and even those that can don’t offer the power or flexibility of desktop multitasking.
For example, on the iPhone 4 and iPad you can swap between running apps fairly easily by double-clicking the Home button, swiping and tapping, but it’s not as quick as just clicking an app icon or background window on a desktop computer. Furthermore, desktops allow you to see several app windows at the same time — a feat not yet possible on mobile devices.
This poor multitasking support can affect the way you design your mobile websites. For example, consider including Twitter/Facebook sharing buttons on every page of your site, so that users don’t have to copy and paste your page’s URL to a different window or app in order to share the page.
On the desktop, users nearly always surf the web in a browser. However, on mobile devices a large proportion of users view web pages within mobile apps, such as Facebook and Twitter apps.
This fact can have various subtle consequences for your mobile site designs. For example:
Again, including sharing buttons within your pages can make it easier for users to share your content while inside another app. Also, don’t force people to rely on your page URLs for context. Include useful information such as article dates and breadcrumbs in the page to help users orient themselves.
The vast majority of desktop displays have a landscape orientation (they’re wider than they are tall). However, the opposite is true of mobile devices, since most users hold their device in a portrait orientation, so that their screen is much narrower than it is tall.
This is fuelling a trend toward mobile sites that are well suited to a vertical orientation, resulting in design decisions such as:
Of course, most mobile devices let you switch to landscape format by rotating the device. Even so, users tend to browse in portrait mode most of the time, since it’s easier to hold the device with one hand that way.
This is perhaps one of the most important overall differences between the mobile web and the desktop web. Much of the time, people use their mobile device in a different way to their computer, and for different types of tasks.
At their computers, users are:
On a mobile device, however, users tend to be:
These differences affect the types of sites that work well on mobile devices. For example, websites and web apps that are designed to help people create content will generally be more popular on desktop computers, while sites that let users consume content easily, or find a specific piece of information while they’re on the move, will attract mobile users more.
On the desktop, Flash is almost ubiquitous, with over 90% of browsers having the Flash player installed. With the mobile web, however, it’s a different story.
No iOS devices run Flash. Android devices using version 2.2 or later can run Flash, although many users choose to turn it off since it can cause performance and stability problems. In all, well under half of the world’s mobile devices are Flash-capable, and even when a device can run Flash, it’s usually not a pleasant experience.
Therefore, it goes without saying that a website relying on Flash is not going to be popular on mobiles. Fortunately there are now ways that you can create a Flash-like experience for both mobile and desktop users without needing to use Flash itself. Modern web standards like HTML5, CSS3 and SVG allow you to create vectors, animations, games, interactive elements, and embedded videos that will run well on all modern mobile devices, Flash-enabled or not.