10 ways the Mobile Web is different

10 ways the Mobile Web is different
3 June 2011 | | Creative Design, Internet

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.

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:

  1. Physically smaller: Typically around 3-4 diagonal inches for a phone, and 9-10 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.
  2. Fewer pixels: Most mobile displays currently have fewer pixels than desktop displays. An iPhone retina display is 960 x 640 pixels, whereas the smallest-screen iMac has a 1920 x 1080 display.

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.

2. Slower processors

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.

3. Less bandwidth

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.

4. Touch input

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:

  • No hover events: Since there’s no mouse pointer, there’s no concept of “hovering” over a page element. This means that navigation menus and other controls that rely on the CSS :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.
  • 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. Fiddly 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 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:

  • 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
  • Pre-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.

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.

7. Websites are not always viewed in browsers

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:

  • 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.

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.

8. Portrait screens

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:

  • Fewer columns of content (a single column being the 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.

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.

9. People use mobile devices differently

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:

  • 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
  • Queueing 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. No, or poor, 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, 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.

More posts from our team

Previous Post:
Next Post:

Back to all news

Five Star
Reviewed Marketing
5 gold stars
google review logofacebook review with 5 stars
"Excellent service from James at Dental Design, thank you very much for your prompt attention whenever I get in touch! Would definitely recommend to a friend" Alison Tarmey View Full Testimonial
Google reviews logo "Would definitely recommend to a friend"
5 gold stars
"As a dental practice manager I cannot recommend Dental Design highly enough. They are just brilliant at what they do. Lucy and her colleagues are just an email or a phone call away...." Emma Smith View Full Testimonial
Google reviews logo "I cannot recommend Dental Design highly enough"
5 gold stars
"Really great company to deal with. They always respond quickly and are truly reliable. I would 100% recommend, the staff are so friendly and helpful." Michelle Molloy View Full Testimonial
Google reviews logo "Really great company to deal with"
5 gold stars
"I got increased traffic and new patients applying to my surgery, once Dental Design upgraded my website. They are very professional, efficient & adaptive to new situations..." Joanna Gallop View Full Testimonial
Google reviews logo "Very professional, efficient & adaptive to new situations"
5 gold stars
"Lucy has been a star, responding to and acting upon our requests in a prompt, efficient and professional manner, as well as the rest of the Dental Design team..." Abhay Shah View Full Testimonial
Google reviews logo "I cannot recommend them highly enough"
5 gold stars
"...Since the website has been up and running Lucy Mander has been our point of contact. She has been invaluable and gone out of her way to help us, especially during COVID-19 lockdown... " Lucy Jones View Full Testimonial
Google reviews logo "Has been invaluable and gone out of her way to help us"
5 gold stars
"Thank you for all your help and support, and the provision of valuable learning aids for our patients and staff alike in these difficult times. We love the look of our practice website. Very professional!" Sandra Luck View Full Testimonial
Google reviews logo "We love the look of our practice website. Very professional!"
5 gold stars
"Dental Design stood out both in their knowledge of the industry and their professionalism and can-do attitude. All of their staff are exceptionally competent and knowledgeable..." Harvey Rook View Full Testimonial
Google reviews logo "Dental Design stood out both in their knowledge of the industry and their professionalism"
5 gold stars
"Having done extensive research into all the dental website companies, the team and package offered at dental design was unrivalled..." Neil Shah View Full Testimonial
Google reviews logo "The team and package offered at dental design was unrivalled"
5 gold stars
"The team at dental design (especially Rosie) are absolutely fantastic and are always on hand to help. They are professional, friendly and extremely efficient. Rosie always gets back..." KiKi Wilmot View Full Testimonial
Google reviews logo "absolutely fantastic and are always on hand to help"
5 gold stars
"Dental Design are fantastic to work with, our website is amazing and the support they provide is second to none. Our account manager Rosie L is a fabulous point..." Luke Lucas View Full Testimonial
Google reviews logo "Dental Design are fantastic to work with"
5 gold stars
"Having worked with the Dental Design team for the last six months, I've found them not only helpful, but friendly and approachable too. I bombard Marcus with regular..." Sophie Harper View Full Testimonial
Google reviews logo "always met with a swift and professional response"
5 gold stars
desk with branded documents