From desktops to smartphones to an expanding galaxy of different connected screens and devices, we can safely say that access to the world’s information on-demand is part of our lives now, and for the foreseeable future. We’re at the end of the beginning and companies must evolve. People now expect connectivity wherever they are and on whatever device they choose — this is the new norm. It’s time for businesses to catch up and understand their connected customer.
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 good on Android and iOS devices, 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. The best way to understand this is to understand 10 important factors that make the mobile web different. Once you understand the differences, you can use those factors to influence your mobile site design decisions.
1. Smaller screens
Let’s start with one of the most obvious differences: Mobile browser displays are smaller than their desktop counterparts. “Smaller” here means two things:
- Physically smaller: Typically around 3-5 diagonal inches for a phone, although some larger phones can be up to 6, and 9-12 diagonal inches for a tablet. This compares to a typical notebook screen size of 13-17 inches, and a desktop screen size of 20-30 inches.
- Fewer pixels: Most mobile displays currently have fewer pixels than desktop displays. An iPhone 6s retina display is 1334 x 750 pixels, whereas the smallest-screen MacBook has a 2304 x 1440 display.
You don’t have to guess!
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 they want to read the text in your page.
A smaller display also pushes more of your page content “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 on the page. In addition, the page layout needs to be usable and it needs to look good in a small browser window too. This usually implies a simpler page layout than you might see on a regular website.
2. Slower processors
Although they are catching up, mobile devices generally have much 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.
3. Less bandwidth
While cellular network speeds are improving all the time, a typical 4G mobile device gets a 5-12 Mbps download rate, compared to an average of over 50 Mbps for broadband internet users.
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, they won’t be coming 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. This is even more important when designing for the mobile web. According to Google, more than half of users will abandon a page if it takes longer than 3 seconds to load.
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 responsive, 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.
4. Touch input
One important aspect of many mobile devices is touch-based input. Rather than using a mouse, the vast majority of mobile users work with their devices using their fingers (some desktops do as well). This has several implications for mobile site designers, including:
- No hover events:
There is no mouse pointer, so there is no concept of “hovering” over a page element. Navigation menus and other controls that rely on the CSS hover pseudo-class or JavaScript mouse-over/mouse-out 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. However, it’s best not to rely on hover events for your mobile site’s functionality. - Less precision:
Clicking a 12-pixel-high text link with a mouse is no problem. Tapping the same link with big sausage fingers is a different story! Users can compensate for this by zooming in, but it’s still awkward. This is one of the best arguments for creating a separate site just for mobile users, since you can then replace those fiddly text links with nice, large, touch-friendly buttons and other controls. - Gestures:
Most modern touch devices allow the user to perform gestures using one or more fingers, such as swiping, pinching, and so on. You can use gestures to enhance the experience for your mobile users. For example, you can let your users swipe left and right to move between images in a gallery. Many JavaScript frameworks such as jQuery Mobile can generate events for various touch gestures, making it easier to add gesture support to your mobile sites.
5. Tricky keyboards
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 tricky 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 pleasant experience. This means that mobile users hate typing long reams of text. Your mobile site can make life easier for them by:
- Using shorter URLs
- Adding an autocomplete function to text fields and search fields
- Providing an easy way to browse popular pages or products, rather than having to search
- Preemptively filling as much information as possible in web forms
6. No, or limited, multitasking
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.
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.
7. Websites are not always viewed in browsers
On the desktop, users nearly always surf the web in a browser. However, 86% of online smartphone time is spent in apps and only 14% is spent in web browsers.
This fact can have various subtle consequences for your mobile site designs:
- Often there’s no URL bar – This means users can’t glean any information or context by looking at your page URL, copy and paste the URL, or type in a new URL.
- Reduced screen real estate – Mobile browser viewports are small at the best of times, but websites viewed in apps are often crammed into even smaller spaces thanks to app toolbars, buttons, and other widgets surrounding the page.
- Limited functionality – Typically, browser features such as bookmarking, opening links in new windows, or printing are not available when viewing web pages within apps.
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 to help users orient themselves.
8. Portrait screens
Most desktop displays have a landscape orientation; however, the opposite is true of mobile devices- most users hold their device in a portrait orientation.
This is fueling a trend toward mobile sites that are well-suited to a vertical orientation, resulting in design decisions, such as:
- Fewer columns of content (a single column is ideal)
- No overly-wide elements: This includes large multi-column tables, as well as extra-wide images, slideshows, Flash movies, and iframes
- Navigation along the top rather than down the side
9. People use mobile devices differently
This is perhaps one of the most important overall differences between the mobile and desktop web experience. Much of the time, people use their mobile device in a different way than their computer, and for different types of tasks.
At their computers, users are:
- Sitting at a desk
- Frequently in an office environment
- Often working
- Sometimes randomly surfing the web
- Often creating content
- Focused on the computer, not so much on their environment
On a mobile device, however, users tend to be:
- Sitting on the couch at home
- Walking around, inside or outside
- Queuing for something
- Waiting for a bus, train, or plane, or travelling
- Looking for a specific piece of information
- Mostly consuming content
- Easily distracted by their environment
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.
10. Failing Flash support
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, a website relying on Flash is not going to be popular on mobile devices. 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.
When designing any website that will be viewed on mobile devices, it’s important to keep these differences in mind. By accommodating both desktop and mobile in your website strategy, you can provide a great experience for both of these audiences.
[“source=paradoxlabs”]
