Mn-Tech Solutions Logo

 

Mobile Web Design - Effective, Readable & Usable

MN-Tech Solutions follows these recommendations from Google.

Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

Surprising though it may seem, some businesses are still slow to realize the importance of effective mobile web site design.

People with cell phones are everywhere--in restaurants and theaters, on buses, in schools, walking down the street--yet consideration of how these multitudes access a web site is sometimes an afterthought. A site owner may never know how many readers, or how much business, they have lost by not having a well-optimized mobile site. Smart site owners, with well designed mobile sites, have positioned themselves to take up the slack. So, for businesses thinking of upgrading their sites--what factors into a good mobile web site design?

Usability

One of the most important considerations when designing a mobile web site is usability. Is it easy for people accessing the site from a variety of mobile devices to click the links that they want? Is navigation simple, quick and intuitive? Mobile web sites are not always the most attractive--but, then, they don't need to be. Graphics don't show up well on all mobile devices, and sometimes they take up far too much of the screen space.

Readability

Mobile device screens are generally small, which makes it doubly difficult to read small text. Larger text that utilizes a good color on a readable background color makes it easier for people to read on their mobile phones. If, as a general practice, part of the information on the main site is contained in PDF files, it should all be transferred to text for the mobile site. People who are accessing a site from their cell phones are generally either seeking information, trying to place an order, or conducting business. Make it easy for them to do all that and more on the mobile version of the site.

Accessibility

There is little more annoying than finding a phone number on a mobile site--and having to type it in manually to make the call. A mobile web site design that makes sure that all phone numbers are clickable will get more calls. If the site is for an offline location that people will want to visit, display the address and other contact information prominently, so that it can be entered into GPS or other applications. Test out the site design on a few different cell phones; visit the areas you'd most like your visitors to see, and test the easy of accessing them. Then get people completely unfamiliar with your site to do the same and work with their input.

Images

Just because it is a mobile website, it doesn't mean that it can't have pretty things. Images add a lot to a person's visual experience of a site--but in mobile web site design they need to be handled differently. One of the most important things is to make sure that the images are resized correctly. The display screens on some mobile devices do not handle images mixed with text well. In your tests, make sure the image does not take up too much space on the screen, and that the accompanying text is still readable.

Other Design Issues

There is really no reason to use tables when designing a mobile website--and sometimes a lot of reason to regret it when they are used. Good design will give the site a good display without the use of tables or other tricks. onMouseOver events--where part of the design changes color or images when a computer mouse is hovered over it, or clicks on it--are pretty cool on a computer. Less so--sometimes much less so--on a mobile device. Some handle these events well, but many do not and it winds up confusing and annoying mobile visitors. It is best to avoid them completely when designing a mobile version of the site.

 

Show, don't tell works as well in visual design as it does in literature. Take a look at some of the better designed mobile sites. See how easy it is to access information, read an article, read a menu, make a call, find directions and actually use the site. Then look at others. It's easy to tell which mobile sites were designed with the customer in mind--and in which the customers were afterthoughts. A decision to implement good, effective, accessible mobile web site design is the best one a business can make.

Look the the images - It's not hard to tell what the issues are with bad mobile web design.

It is easy to decide while looking at the test mobile websites above which companies are thinking about and which companies are not thinking about how people use their mobile phones. Hell's Kitchen is clearly thinking about customers.