There are many things you should do to create usable and useful mobile websites and one of the first things you should consider is reducing and removing the amount of content that the mobile site displays. In reality, this is a rule for good design for your desktop sites as well, you should have only the amount of content (text, images, multimedia) and extras (navigation, advertisements, sidebars) as are required to get the job done for a page, and nothing more. With mobile browsers this brevity needs to be pared down even more.
But a common complaint of mobile users is that they can’t see all the information and data on a website, because the mobile site has been pared down to just a few things—leaving out large chunks of the main website.
Space Is Limited
The amount of space that is available for website content on a mobile device is often significantly smaller than the space available on a desktop browser. The screens are smaller, it’s harder to scroll, and impossible on many devices to scroll horizontally. So a mobile site that is going to be effective is one that takes this into account and makes sure that the most important content displays in the top few pixels of the page.
So when you’re setting out to convert your website to mobile, you should consider a few things:
- Don’t put your navigation first, even if that’s where it is on your main page. If you make the navigation too small it won’t be usable, and if it’s too large that will be all some mobile users see when they first download the page.
- Instead, move the primary content for that page to be first, setting aside even your logo and site name if necessary. Make it easy for your mobile readers to find what they are looking for without a lot of clicks or scrolling.
- Don’t break your articles up into multiple pages. While it can be difficult to scroll on a phone, scrolling is typically easier than clicking.
- Get rid of everything that isn’t absolutely required for that page. The more things that are on your mobile page, the longer it will take to download, and the more there will be to distract your readers. And distracted readers leave.
But Don’t Get Rid of Everything
As I mentioned above, one common feature of mobile website versions is to have only a few of the articles that are found on the main site. The premise being that mobile readers will only want five or six articles at any given time. For example, the US Postal Service website used to have a mobile version of their site that only had a few options. Things like: track a package, postage prices, and locate a post office. When I came there and wanted to buy stamps, I wasn’t able to because that option was not part of the mobile site. It was incredibly frustrating.
The reality is that while most of your mobile users are going to use the mobile site for a limited number of things, not all of them will. And when you limit their options to the point that they can’t do what they want to do, they will leave and most likely not return on their desktop. (Unless, of course, like the USPS you are the only source to get what they want online. In my example, I ended up visiting a local post office to buy my stamps.)
There are many ways you can handle this problem from ignoring mobile users and just serving everyone the same site to ignoring the mobile users who want more than you provide and forcing them to use their desktop browser if they want something else. But there is a middle ground. One thing you can do is provide a link to the main site from the mobile site (and back). But this can be problematic because your desktop site isn’t optimized for mobile—that’s why you have a mobile site.
A better solution is to use CSS3 media queries to redesign your desktop site pages (whether they are part of your mobile site or not) to change the design so that it works better for mobile users. You can also use programs like the WordPress Mobile Pack to convert all your pages to a mobile-friendly design without removing the content.
Tablets are Mobile, But They Aren’t Mobile
Another thing you should remember when limiting the content on your pages for mobile is that tablets are different, especially the 10-inch tablets. These tablets are large enough and have a high enough resolution to view most web designs as they are. In fact, many mobile users get annoyed if they are forced to view a website in the mobile version simply because they are on a tablet. If your program for moving mobile users to the mobile site uses browser or OS sniffing to determine which version of the site, mobile or desktop, to deliver, then you are going to annoy tablet users because they use the same operating systems as their smartphone relatives. iPad and iPhone both use iOS. And Android smartphones and tablets both use the Android OS.
CSS3 media queries work well here too. You can deliver a slightly tighter design for tablets that have smaller screens, but you don’t need to limit the content as much as you might on a smartphone and can deliver nearly as much as you would to a desktop.
Limiting the Content is Good, Just Don’t Go Overboard
It’s important to limit the content on your web pages, whether for mobile or desktop, but it’s a matter of degree. Help your readers find what they want no matter how they are browsing your site, and you’ll have happier customers overall.
