January 2013 | Collaboration
Going Mobile: Tips for Capturing Traffic on the Go
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
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
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.
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
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
Keep File Size Small
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
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.
Greg Fredette is managing partner with Saturno Design LLC. He can be reached at 503.478.1830.
LAW PRACTICE TODAY
Micah U Buchdahl, HTMLawyers, Inc
Richard W Goldstein, Goldstein Patent Law
Andrea Malone, White and Williams LLP
BOARD OF EDITORS
John D. Bowers, Fox Rothschild LLP
Margaret M. DiBianca, Young Conaway Stargatt & Taylor, LLP
Nicholas Gaffney, Infinite Public Relations, LLC
Nancy L Gimbol, Eastburn & Gray
Richard W Goldstein, Goldstein Patent Law
Katy M. Goshtasbi, Puris Image
William D Henslee, Florida A&M Univ College of Law
Allison C. Shields, Legal Ease Consulting, Inc.
Gregory H. Siskind, Siskind Susser, P.C.
Send us your feedback here.