Is Your Website Mobile-Ready?

Written by Mike Hamers, Lightspeed  – with Steve Henry, The Web Fellow 
  Edited by Kate Hamers, Lightspeed and Kris Green, Turn Words 2 Money

Mobile Device connectivity is critical for modern Internet Marketing. Specifically, research shows that more e-commerce happens on mobile devices than on desktop computers, mobile devices are the primary means many consumers use for accessing the internet and in some cases, the only means; and mobile devices are the only way to reach consumers searching for information while they are shopping in stores.

Most business owners accept this, yet many must still move past the mistaken belief that a “responsive website design” is all that is needed for an enjoyable mobile experience. There are tools and mobile specialists who can help website owners identify and fix common mistakes in their mobile site presentation.

The biggest mistake business owners make when considering their mobile site is focusing on functionality rather than ease of use. A site that loads on a mobile device may still be difficult to use. These issues can be devastating to the performance of a mobile site. If features are difficult to use, they won’t be used, and this increases the odds that the user will go a site’s competitor.
   

Mobile is growing at a fantastic pace – in usage, not just in screen size. To stay aware of issues mobile users might be seeing on your website, you can get a Free Mobile Analysis from a mobile consultant – like from my friend and work colleague Steve Henry, owner of The Web Fellow (www.TheWebFellow.com).

Steve recently shared 8 vital areas where common design or coding issues make a site harder to use on mobile devices:

1. Design Philosophy
Many websites are designed as a full-size website and are then converted to a smart phone layout.  A better philosophy begins with the mobile layout and design first, and then expands out to include the entire website for display on a desktop workstation. This philosophy encourages the designer to focus on just the site essentials first and then add embellishments later when more space is available.

2. Responsive design
Some website designs aren’t adaptable to a wide variety of different display sizes, and the variety of these are increasing as more and more small devices are on the market. You want your content to look great no matter what the screen dimensions are on the viewing device. This requires a careful plan for how the graphic elements will shift and change as the available viewing space changes.
Having a site that recognizes the type of device a visitor is using lets each visitor see the version that’s best for them. When using a responsive design, check the site on all types of devices to ensure all design elements work. Remove problematic elements that don’t work properly.

On tablets, consider abandoning elements like ”hover”, since they can be unpredictable at times on a touch-screen environment.

Keep tablet pages small so they load quickly regardless of the connection speed. Remember that while tablets are powerful computers, they are at times connected to slower mobile internet speeds. Research has shown that people will abandon a page on mobile devices if it takes longer than a few seconds to load.

3. Flash Content
Some mobile devices don’t allow for Flash content, which means anything important presented in Flash is lost to those mobile users. Additionally, having Flash not show up makes the mobile site look broken.

If you want to show video, you should use HTML5 and the H.264 video format, because almost all modern devices, whether desktop or mobile, contain hardware chips that decode and play back that video format with minimal power consumption. Major sites containing embedded video, including news sites, Facebook and YouTube, serve video in either H.264 or Flash as needed, often using H.264 as the primary, with Flash as the fallback for older devices and browsers.

4. Tiny Display Size
One strategy to handle different display sizes is to scale the entire website down to fit. As a page is scaled down, the font may be scaled to a point where it is no longer legible. Alternatively, a better approach is to design flexible layout designs that can be used to add legibility at the expense of requiring the user to scroll up and down.

Make sure that the text is large enough to be easily read. Visitors shouldn’t need to use the zoom feature to read the body text. Experts recommend using a 16px font and a 1.6em line height.

5. Search Engine Keyword Challenges
Some designs have a different set of pages displayed for a mobile view verses a full website view. This can cause some problems when you use a smart phone and the search engines direct you to a page that is only available on a full website. It’s generally better to have a common set of web pages that display effectively across the entire spectrum of display sizes.

6. Tap-Target Size, Clickable links too close to each other
Touch-screen accuracy can be spotty on some devices. Therefore, having buttons that are too close to one another makes clicking the right spot difficult. Mobile sites should have large buttons so they’re easy to hit.

Buttons that are too small or too close together make for a very frustrating experience for users. Try making buttons that are at least 44px by 44px large. Be sure to use padding rather than a margin between buttons to prevent accidental clicks.7. Ecommerce Friendly
Retailers who want to see their sales from tablets increase need to do everything they can to make the site easier for customers to use.

Allowing customers to save their payment information so they can check out quickly encourages people to come back to the site to use the faster checkout process.

The flip side is that a speedy checkout must have trustworthy payment protocols. A recent study found that 43% of consumers prefer to use a mobile wallet by their respective financial institutions. But after that, PayPal was the 2nd most popular choice with 34% of respondents and has the highest gains in consumer perceptions over the past year. Other options include MasterCard MasterPass with 25% and Google Wallet, which was selected by 24%.

8. Remove Auto-Capitalize and Auto-Correct from Forms
There are times when features that are normally helpful work against users. This is especially the case when trying to use mobile devices like tablets for form entries. Trying to enter information like usernames, passwords, addresses, etc. can be extremely annoying for users if the auto-capitalize and autocorrect features are active.

It’s very easy to turn OFF the auto-correct feature for forms and doing so will make it easier for consumers to use a tablet-compatible site. Alternatively, consider using auto-populating data from Google Services or others to make the process even faster..

Fixing these issues is vital for business owners who want their customers to use their mobile site for shopping and on-the-go research.  An expert knowledgeable in mobile design can quickly pinpoint areas where you can improve your mobile site. Remember, it’s counterproductive to pour resources into a fancy desktop site that is unusable by mobile users.

If a business has a feature-heavy site that only works on desktop, consider creating a separate site just for mobile devices that follows the basic design guidelines for mobile sites. The mobile audience is an important part of ecommerce these days. To mobile users out by default severely handicaps a business. Some even believe that mobile usability may be added into the Google as a ranking factor in the future.

Fixing the issues covered above will undoubtedly help a business see more conversion from their mobile site. But there are other factors for good mobile design that business owners should be checking as well, including load times. Mobile devices, like smartphones and tablets, are quickly replacing computers as the way most people access the internet and web services. For people who use their computer for work (e.g., web designers, photographers, writers, etc.) a tablet or smartphone can't fully replace the functions of a keyboard, mouse, and programs they need. But for everyday consumers who just want to read a website, check their email or shop, a mobile device is the preferable option. Since most marketers are trying to reach everyday consumers, they need to dedicate part of their advertising budget toward a medium they know the target audience uses—mobile devices. – MJH

So what is your logo saying about your brand?
Is the color you are using sending the message you want sent?
Consider and, if necessary, rethink your identity, brand, and values, and then select colors to convey those attributes. With a color palette that evokes your brand's true DNA, your marketing can achieve greater success.

Call Now to Schedule Your...

FREE 30-Minute "Coffee Critique" of your current logo and branding

Comprehensive Brand Audit – Written analysis with recommendations

Price Quote on logo redesign and/or upgrade of your brand consistency

To Your Success – Mike Hamers

© 2014 Copyright, Good Design IS Good Business, Mike Hamers, Boulder, CO

ABOUT MIKE HAMERS Mike Hamers is an award-winning graphic designer, illustrator and author who lives and works in Niwot (Boulder), CO. He has been the owner of Lightspeed Design for 23 years. During that time he has won over 20 national and international awards for this logo design, stationery, packaging and font designs. Mike has had his illustrations in Wired magazine and brochure design work in "The Little Book of Layouts: Good Design and Why It Works".  Mike enjoys working with all size companies – from solopreneur's startups to large national companies. His broad experience crosses most industries including bio- and nano-science, biomedical devices, technology and manufacturing, software, foodservice, and more. Mike's comprehensive design and illustration portfolio is viewable at http://www.Lightspeedca.net.

     To Read Past Issues of the Newsletter – Link to Index

Read what others are saying > Testimonials

More Award-Winning Logos (pdf) > click here  

More Business Cards (pdf) > click here  

 Online Portfolio >