7 Web UI mistakes to avoid for smartphones and tablets

Your website might be gorgeous, but is it really cross-platform? Don't be so sure

Clients say the darnedest things. The other day, one scoffed, "Anyone who's looking at our website on a stupid little phone screen probably isn't our customer anyway."

I was taken aback. "Really?" I replied. "What if they're at a business lunch and they want to show their boss the specs of one of your products?" A pause. "What if they're just trying to find your phone number?"

[ InfoWorld's Dori Smith explains how to develop mobile-savvy websites, and Galen Gruman shares 5 simple rules for creating mobile websites. | Stay up to date on the latest programming news and insights with the Developer World newsletter. ]

Too often, clients underestimate how rapidly smartphones, tablets, and other mobile devices are changing the way customers access the Web. Worse, few Web developers seem willing to educate their clients about these modern realities. Graphic designers still see their Apple Cinema Display monitors as canvases and paint their sites accordingly, disregarding the fact that the end product will often be viewed on considerably smaller screens. And coders implement those designs blindly, even when they, of all people, should understand the intricacies and limitations of HTML and CSS.

As an outcome, too many websites still exhibit commonplace UI mistakes that effectively cripple them for users of smartphones and tablets. Here are just a few examples:

Web UI mistake 1: Using rollovers
Somewhere along the way, Web developers fell in love with the idea of highlighting controls and popping up content when the user mouses over some part of the screen. The problem for smartphones and tablets should be obvious: When there's no mouse cursor, there's no way to mouse over controls.

That doesn't mean you should do away with rollover effects altogether. But for every hover event, there should be an equivalent click event that does essentially the same thing for users with touchscreens. Smartphone users shouldn't be penalized with a page refresh for every level of navigation because you designed your menus for use with only a mouse.

Web UI mistake 2: Using custom widgets and controls
Designers love to lend a unique look and feel to their buttons and other widgets. But UI standards differ from platform to platform, and when controls aren't readily identifiable and accessible on every device, usability suffers.

Custom scrollbars are a particularly egregious example. Occasionally designers will want to override the default controls with JavaScript, replacing them with sleek, skinny, and more visually appealing widgets. The problem for tablet users is twofold: Not only are tiny widgets harder to hit with your finger, but tablet users don't scroll using scrollbars anyway; they swipe the screen. Forcing them to use custom controls only hobbles your UI.

Similarly, don't take any input devices for granted. Pop-up dialog boxes, for example, should always have visually identifiable close controls. Smartphones and tablets might technically have keyboards, but they seldom have Esc keys.

Web UI mistake 3: Having too many scrollable areas
Viewing websites on a small touchscreen often means scrolling around to see the whole page. As I mentioned before, however, remember that tablet users scroll by swiping the screen, not by activating controls. When you divide the page into multiple panes, each of which contains scrollable content, your UI can quickly become an interactivity minefield. One part of the content might scroll with one swipe and another part might scroll with the next, depending on where the user's finger lands on the screen. Best to keep the layout as simple as possible, or at the very least, make sure there are good-sized margins to allow the user to choose whether to scroll one pane or the whole page.

1 2 Page 1
Page 1 of 2
How to choose a low-code development platform