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

Page 2 of 2

Web UI mistake 4: Having an inflexible text layout
I can't tell you how many graphic designers have explained their website layouts to me in terms of precise pixel measurements and the rules of Swiss typography. While this has never been good practice for the Web -- where users can adjust the browser window and even font sizes at will -- it's an especially bad idea if you want your site to be viewable on smartphones.

The Android browser, for example, defaults to a mode where it will attempt to compress the width of a column of text to fit the width of the device's screen, regardless of the page's CSS specifications. If you fail to take that into account and expect all the design elements to line up exactly the way they do on a desktop browser, you can end up leaving smartphone users with big areas of whitespace that can effectively hide controls and obscure the UI.

Web UI mistake 5: Making assumptions about screen format
One Web designer gloated to me that he likes to stay on the forefront of technology, which is why he designs his sites to look best on modern, widescreen LCDs. But even if you disregard folks who have older monitors, you can't stay on the forefront of technology if you ignore mobile device users.

Most smartphones can automatically pivot between portrait (vertical) and landscape (horizontal) modes, depending on how the user is holding the device. What's more, some users hate the autopivot function and disable it -- in which case, you'd better hope they picked the same mode your site is designed for. Making assumptions about the page format works fine in the print world, but it's a lousy idea on the Web, where you don't know the size of the paper.

Web UI mistake 6: Preloading too many images
Pity the poor smartphone users: Not only is their Internet access not as fast as terrestrial connectivity, but increasingly cellular carriers are putting caps on data usage and imposing overage fees. Smartphones might have limited RAM, too. While it might make sense to use JavaScript to preload a sequence of slideshow images for desktop browsers, it's a little rude to users of mobile devices, even more so if the images are designed to appear when the user mouses over a certain control -- which, of course, tablet users can't do anyway.

Web UI mistake 7: Using Flash
I hate to say it, but Adobe Flash still has no place on mobile devices. Famously, Apple's iOS devices don't support Flash content at all, but even those Android handsets that do support Flash offer only lackluster performance. Worse, Flash applications exhibit the UI issues I've outlined above even more frequently than ordinary HTML sites. Sorry, Adobe fans: With the advent of HTML5, the days of Flash on the Web are numbered.

Of course, there are other ways around these UI problems. You could build a separate, custom version of your site specifically for mobile devices. You could even build a custom app. But these alternatives have their problems: They're too device-specific, and they're hardly future-proof. Don't discount the power of HTML for building truly cross-platform, cross-device online applications. Just be sure you know what you're doing.

This article, "7 Web UI mistakes to avoid for smartphones and tablets," originally appeared at InfoWorld.com. Read more of Neil McAllister's Fatal Exception blog and follow the latest news in programming at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.

To comment on this article and other InfoWorld content, visit InfoWorld's LinkedIn page, Facebook page and Twitter stream.
| 1 2 Page 2
From CIO: 8 Free Online Courses to Grow Your Tech Skills
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.