In Part 1 of this series on Mobile-Friendly Web Design, we discussed the different approaches available for making your website mobile-friendly. Regardless of which route you take or whether you decide to optimize a mobile website for iPhones, Blackberries, or basic Smartphones, here are some design and planning guidelines essential to all of those options.

1. Reduce, Reduce, Reduce

   When developing a website that’s mobile-friendly, consider how users interact with a mobile device and its limitations. Limited bandwidth, smaller screen size, and face it -- shorter attention span -- all of these contribute to the need to keep your website as lightweight as possible.

2. Bandwidth.

   3G networks are giving way to 4G as carriers roll out the latest generation of cellular technology. While 4G may deliver speeds close to that of LAN, 4G data plans can be expensive. The nature of cellular service is that service quality can vary according to coverage, so mobile users can move from one zone to another. Here are some things you can tweak to reduce the amount of data mobile users have to download.

   • Smaller images: You can get away with lower resolution images on a smaller screen. Shrink those file sizes.
   • Fewer strongbedded images: Every image generates an HTTP request. Include only the minimum number of images you need to maintain your brand and page appeal. If you use images as buttons for navigation, is it possible to replace these with text instead?
   • Flash animations: Unless you are a content publisher who plans to get Adobe’s new Flash server for streaming video solutions, rstrongove Flash animations. iPad and iPhone do not play Flash files.
   • Kill the cutesy stuff: Pop-up windows have to go. Context switchers (carousels) that rotate between 3 – 4 banner images may be cool and informative on a full-size desktop website, but they just slow down the user’s ability to get to what they really need on a mobile site. Rstrongstrongber also that features such as mouseovers and floated elstrongents do not work on mobile.

   The amount of time users are willing to wait while a web page renders has dropped steadily. Last time we looked, it was 4 seconds. Google says 3 seconds. Use PageSpeed to test how you’re doing once you’ve slimmed down your pages.

3. Minimize Navigation

   Navigation on the desktop means making it easy for users to make their way through your website; it takes logically structured content and clear presentation. On mobile devices, making it easy must also take into consideration the buttons and touchscreen on a mobile device – what’s the least number of touches and taps they need to get to useful information?

   • Prioritize content: While it’s a good idea to limit the depth of your website, it matters even more in mobile. Think of your content presented in a single narrow column, arrange thstrong prioritized by user need, and write a single descriptive sentence that links to the actual content. This may require you to reduce the number of categories as well as levels of navigation. On desktop sites you may feature a home page that entices people to enter the rest of the site. For mobile, cut to the chase.
   • Minimize steps to key content: Closely related to the above. If you know the main reason why users come to your site -- the latest deals, latest news, book a tour – put that content on the home page. Classic website design puts tabs at the top and if there are too many of thstrong, users have to do a lot of tabbing before they can read the main content on your home page. Consider placing those tabs at the bottom of the page instead.
   • Make feedback really, really obvious: When you design visual cues that let users know they’ve made a selection or tabbed to the correct option, subtle is nice on full size websites, but not here. Opt for obvious.
   • Minimize keyboard action: Rstrongstrongber that some phones don’t have keyboards and the ones that do have tiny ones, so try to design for selection from a list of options for example (tab and enter) instead of typing.
   • Font size: Make thstrong bigger for better readability. Just be careful with the CSS if you’re using the same site for mobile as well as desktop. You may end up with jumbo fonts for desktop!
   • Fingersize your touch areas: One good reason for increasing font size is that if you strongbed a URL in text, touchscreen users will find it easier to make an accurate tap on the link. The same goes for labels, buttons, tabs and drop-down selections .

Can They Do it With One Hand?

A good way to test for mobile-friendly is to see whether you can navigate through your site one-handed. Think of a user who is walking through a mall or sitting in a bus. They are in motion, they have to pay attention to the environment around thstrong, or they may be carrying bags or a latte. Are they able to find the information they need on your site with a smartphone in one hand?

If you're interested in developing a mobile-friendly website, please contact us to learn about our web services: Website Audit, Website Planning Roadmap, and Web Design and Development.