The “touchy” subject of mobile web design

It’s a common scenario for an increasing number of people. Instead of firing up the PC first thing in the morning, you take a quick check of your iPad or Nexus 7 or Kindle Fire to view overnight “incoming” email and look at what’s going on in the world. But frustration sets in as web sites take their time loading…and when they do, the order in which elements appear seems all over the place. Adding insult to injury are blurry pictures and links that are difficult to access by finger.

The fact of the matter is that much of what appears on the Web is overload for tablet display; as such, the call to action is quick-loading and clean-looking mobile web design specific to tablets.

The first consideration when designing for tablets is the human finger, for it is not nearly as precise as a cursor controlled by a mouse or trackpad. There’s little more aggravating than trying to connect to a link and repeatedly clicking on to one you have no interest in. The imperative of designers is to achieve reliable usability with both mouse and touch by making links large enough to open and elements easy to navigate by finger, but not so large as to appear massive when viewed with a mouse or PC.

Tablet design technology should stick to the basics, leaving Flash browser plugins and surplus software behind. HTML5 is the best way to go as it works well across various platforms.

Design should be with resolutions around 1024px in mind, since the grid system of most web sites is roughly 960px. A large deviation from 1024px will result in the scaling down of a site to fit the width of a tablet browser. As a result, the user must zoom in, making for a potentially annoying experience. The growing number of tablets has produced a new kind of “fold.” When a tablet switches orientation, the webpage view can become distorted, so it is essential that key information is visible without swiping when viewed in both landscape and portrait frames. It’s important to test the visibility in both orientations to ensure that users are able to see the entire site design and content.

Testing is crucial to the design of tablet-based web site. If it fails the touch test, you’ve got a problem. Load your design on as many tablets that are accessible – beg or borrow if necessary – and make certain that resolution and orientation are consistent.

The ultimate goal of a well-designed web site for tablets is one that meets the challenge of consistent touch screen success, requires minimal scrolling and zooming and has the appropriate amount of technological “bells and whistles” users have come to rely on.