Going Mobile: Tips for Capturing Traffic on the Go

January 2013 | Collaboration

HOME

MARKETING

Going Mobile: Tips for Capturing Traffic on the Go

By Greg Fredette

How people access the internet and digest information continues to rapidly change, with multiple studies indicating mobile devices will soon take over desktops (if they have not already) as the common tool for using the web. The ever-increasing mobile crowd includes your clients and potential clients, of course, so it’s more important than ever to design your web presence to meet their needs. Here are some best practices to consider in redesigning your websites for a mobile world.

Make Things Bigger
You might think optimizing design for mobile devices would mean making things smaller, since the screens are smaller. While web pages for a mobile site do need to be smaller, not everything should be smaller on those pages. In fact, small objects on mobile sites can create significant problems for the visitor. Objects often need to be larger to ensure usability and the best experience for the visitor.

People navigate mobile websites using their finger or thumb, instead of a mouse pointer. Touch interfaces are used differently than other computer interfaces, and have a different set of best practices to consider when designing them.

Small things are hard to click on, select, or otherwise manipulate when you are using your big fat thumb. Nothing is more annoying than trying to touch a small button or text link on a mobile website and ending up touching the link above or below it by mistake.

Make links bigger when possible. Ensure that links in navigation are spaced far enough apart that visitors won’t accidentally select the wrong link.

You should also ensure that your text size results in copy that is easy to read on a small backlit screen. It’s much easier to read a larger 14 pixel font on a small screen than it is a smaller 12 pixel font. Larger font sizes, and a bit of extra line height, makes reading even long articles fairly easy on a phone.

Strip It Down
Big graphics are not helpful to mobile visitors. You should not eliminate graphics altogether but, instead, use graphics sparingly. A good rule of thumb is to only include graphics that are content specific - that is, only if the graphic has a direct relationship with the content being viewed and is required to enhance the viewer’s understanding of the ideas being discussed.

A picture of businesspeople shaking hands doesn’t help the visitor to understand content about the firm’s experience in litigation, real estate, or some other practice area. While an attorney bio should still have a picture of the attorney, maybe leave off the large badges or award logos.

The Fisher Phillips mobile website effectively balances graphics and content to provide a usable interface.

Include Everything
A mobile screen is small, so you may be tempted to include only a small amount of information on mobile website pages in an attempt to minimize scrolling. Don’t be tempted. People are used to scrolling on a phone screen, as they are on a computer screen, and it will not bother them (within reason) but excluding important content that they want to see will absolutely bother them.

Don’t make a watered-down version of your website. If you already have a website database that holds and serves all of your content, then there is no reason you should not provide your entire website, with all available content, to mobile visitors.

Use Color Contrast
Colors used on large screens may have a different impact when viewed on a small screen. Many sites use gray text on computer screens because it’s easier on the eyes. But on a small screen light colored text can be difficult to read. A darker font can make text and navigation more readable. The color of text, or any element on the screen, should be balanced with design, of course.

Emulate What Users Already Know

Both of the major mobile operating system interfaces (Android and iPhone) are similar in functionality. Menus, when touched, expand down or right. Links and options have a certain spacing and appearance.

Mobile websites are most easily understood when these same conventions are used because visitors are already accustomed to the functionality. Using expanding and contracting menus on your mobile website will provide a familiar navigational technique to the visitor. Providing large clickable areas on the screen, in the style of a phone operating system, will help the visitor to understand what they can touch on the screen to navigate.

Responsive Design versus Mobile Website

If you are considering a mobile web project and have started talking to different designers about it then you have probably heard some talk about responsive design versus a separate mobile website. Don’t know what it means? Here it is in a nutshell.

In responsive web design you create a single website. Its layout and other elements can change to accommodate the screen size or device that is accessing the site.

When developing a separate mobile website you are doing just that – developing a separate mobile website with its own set of code and its own design optimized for a mobile viewing experience.

Which is better? Some will swear by one approach, some the other, and some are in the middle. My opinion is that each approach has pros and cons, with neither approach being the right approach all of the time. Instead of choosing one over the other in every situation, developers should help clients understand the differences between them, as those differences relate to the client’s unique needs. In some cases, responsive design will work fine for the client, but in other cases it may be limiting. It may save time and money, or it may cost more and take longer. It could make content management easier, or it could make it more difficult.

When making a decision about which approach to take, look at your immediate goals, long term goals, and return on investment. Technology and methods are neither right nor wrong - they are only means to an end.

Optimize More Than Just the Design
Tools and utility navigation also need consideration. For example, a vCard download on an attorney biography won’t work on all mobile devices. Different phone and tablet operating systems, and different versions of those operating systems, support different formats of electronic contact cards. But by providing a way for the visitor to send the contact card to their own email address this issue can usually be solved, as contact cards typically come through fine if received in an email instead of the phone web browser.

Short Forms
People hate filling out forms on any kind of computer but even more so on mobile devices. Forms can be challenging on a small touchscreen. Keeping forms short and simple will make it easier for the visitor (don’t ask them to fill out information that you don’t absolutely need.) Form elements also should be large enough to easily touch and spaced out far enough that the visitor won’t accidentally touch the wrong form field.

Keep File Size Small
Think back to dial-up modems. Remember waiting 45 seconds for a page to load? Well, mobile connections are sometimes really slow like that. It depends on the location of the user and how close they are to a communications tower, the strength of the signal, and how busy the network might be at that moment.

Mobile pages should be small so they download as quickly as possible and still load when the user has a weak signal. Stripping out graphics (see previous) helps, but you also should ensure that pages are coded so that the HTML file size is as small as possible.

In the examples below, the mobile version of the Fisher Phillips LLP website is 70k, which is much smaller than the primary website’s page file size. The mobile pages load relatively fast even when the connection speed is low.

It’s also important to think about external resources that need to load from other website services and how those resources are accessed by your page. Various types of metrics or plug-ins can be slow to load even over fast connections, so they are particularly problematic for mobile users with weak signals. Do these services need to load on the mobile version of your website? Could they be loaded using a different method that would result in faster page downloads and rendering?

Keep it Simple, Simple, Simple
The word simple gets overused in web design. Simple is a major differentiator though. It’s the difference between a user filling out a form or abandoning it, clicking a link on a page or hitting the back button, reading an article or not.

In some ways, touchscreens and mobile devices are simpler and easier to use than desktop or laptop computers. One reason for that perceived ease of use is that mobile devices do less than traditional computers and, with fewer options and features, they are less complex. Keep this in mind when developing a mobile web presence. Mobile devices and their interfaces are limiting. Plan for those limitations and design appropriately to ensure a good experience for your visitors.

Law Practice Today on Facebook

About the Author

Greg Fredette is managing partner with Saturno Design LLC. He can be reached at 503.478.1830.

Download Article | Table of Contents

TELECONFERENCES & MEETINGS

ABA/LPM MIDYEAR MEETING 2013
Dallas, TX
February 7-9, 2013

ABA TECHSHOW 2013
Chicago, IL
April 4-6, 2013

LPM eBOOK SPOTLIGHT

Microsoft OneNote in One Hour for Lawyers

The Lawyer's Guide to Collaboration Tools and Technologies: Smart Ways to Work Together

PODCAST

THE DIGITAL EDGE: LAWYERS AND TECHNOLOGY
63rd Edition - Windows 8 for Solos and Small Firms: Should You Upgrade?

By Jim Calloway and Sharon Nelson

LAW PRACTICE MAGAZINE

Law Practice is the leading magazine on the business of practicing law. Published six times per year, it offers insightful advice and practical tips on marketing, management, technology and finance.