Good Design for Mobile Websites

More and more organizations are contemplating having a mobile version of their website. Creating one may seem like an overwhelming task, which it certainly could be, but when you break it down into phases it can be much more palatable.

A phased approach might be:

• Create a one page mobile site. This can allow users easy access to specific links, which already exist on the full site. Since they're directed to the existing site it will most likely not be optimized for their device, but users are currently fairly patient with viewing existing sites on their phone. As more and more organizations and businesses optimize their sites for mobile devices that patience will wear thinner and thinner.


• Create a condensed version of your current site. Note what your visitors most likely will want on the go. Are they "browsers," those that like to kill time on your site while hanging out, or "searchers," looking for something specific such an event location or article? Your mobile site can be stripped down to include access to only the most valuable information, which can save big dollars while improving your relationship with members.


• Create a full-blown version of your current site. This means translating every single piece of information on your site to work well on a mobile device, allowing users full access to resources, events, etc. on the go. If you have a database driven site, setting up a separate, mobile version of the pages to pull from the database. How large is such an undertaking? About the size of a website redesign, if not larger. There is a thought process involved that's quite different from traditional websites, and that may be hard to get used to at first. For example, there's not an easy way to test how the site will look on every single device so there will be a lot of trial and error. There are some overall best practices we will touch on to promote acceptance across most devices.

DESIGN GUIDELINES

Nielsen Norman Group's recent "Usability of Mobile Websites" study reveals 85 design guidelines for improving website access through mobile devices. Some of the highlights are:

• Detect if users are coming to your site on a mobile phone and direct them to your mobile site.
• Include a link to your mobile site on your full site and vice versa.
• Include the company location or name in a salient location at the top of the mobile homepage. Include the logo on every page of the site and make it link to your homepage.
• Clickable area should be at least 1cm x 1cm for touch phones
• Include a link to the navigation on every page of your mobile site.

The entire report can be purchased by visiting
http://www.nngroup.com/reports/mobile

HOW TO BUILD ONE

Coding-wise, mobile sites are built in the same manner as a regular site. HTML, CSS, PHP, etc. are all acceptable. Mobile sites can be viewed in a web browser; they just look strange. Try visiting http://www.bendingdesign.mobi from your web browser as well as your mobile device. Can you tell which one this site was optimized for?

Depending on your situation, easing into a mobile site may be the way to go. Start small but with a big vision, and you will find yourself moving down the right path. From there it will get easier and easier. And remember, by starting down the path you stand to gain an advantage—most organizations have nothing. Your audience will appreciate it.

Contact me to discuss integrating QR codes within your marketing.