Wayward websites

There's often a lag between the time something new comes along and the time it is fully incorporated into our lives or work. When websites first came online, in the mid-'90s, they had obvious potential but companies weren't sure what to do with them. As I recall, many of them focused on the history of the company, stocks and market activity, and various other things useless to most visitors. The content was what the company owner thought was interesting; it was not what the prospective customers needed.

At the time, there wasn't much in the way of instruction for web designers and there were few rules about how to make a website work or what it should be. An architecture firm in my area had a beautiful website, graced by one the firm's most impressive projects. The problem was, it took forever to load. I analyzed the code and the files, and discovered they were using a huge image file. They apparently didn't know that there usually is no discernible difference between an image file of a few kilobytes and the same image in a two-megabyte file.

Eventually, website designers grew familiar with HTML and the way web pages should be formatted, companies learned what users wanted, and users learned how to search websites to find what they wanted. Even though most websites weren't perfect and many had serious problems, websites became much better and continued to evolve.

And then, along came mobile devices. At first there were few problems, but in typical fashion, the more people used their smartphones, the more they expected from them, and the more they became like miniature computers, able to do most of what their larger cousins were able to do. Unfortunately, their size - the very thing that made them so useful and contributed to their rapid growth - limited the amount of information they displayed. Monitors had been growing in size for many years, and software was written to take advantage of the available space. Despite the obvious limitations of a small screen, users demanded that websites be fully functional on a smart phone, and website designers did what they could to make everything available to this new market.

All that makes sense, but instead of making everything work, computer and software designers merely moved the problem from one machine to another. The first image in this article is a screen capture from my iPhone. It's close to actual size, so you can imagine that it isn't easy to work with. The picture can be resized, though, making it easy to access the various options. The same image on my desk monitor fills the screen from top to bottom. All of the twenty-one links to other information are large enough to read, and all are visible at the same time.

I've been using multiple monitors for a few years, and I've found that I have not yet reached the point where I have enough of them. I used two (the notebook monitor plus one external monitor) for a few years, and acquired a third this summer. It's so much easier to work when several documents or programs can be displayed at once, rather than having to continually pull one on top of the others!

The result of these changing technologies is that I finally have about as much monitor area as I want, but because of the drive toward miniaturization, that space is poorly used by today's software. Here's a picture of my monitors:

Both are 24-inch monitors, with a viewing area 20-1/2 inches wide by 16 inches tall. That's 164 square inches, or 1.14 square feet per monitor. Total: 2.28 square feet. My iPhone has a screen that is 2-1/2 inches wide by 4 inches tall, total area 10 square inches, or 0.07 square feet.

Now look at the websites on my monitors. Notice the inefficient use of more than two square feet to show two nearly full-screen images and a handful of words. That may work on my iPhone, assuming I wanted to try to use it to read large quantities of information, but it makes no sense on a standard monitor.

You might be inclined to dismiss this problem, knowing that it's easy to scroll down or choose a menu option. That would be fine, but the same format typically is used throughout the website. So, instead of being able to read a reasonable amount of text on that big monitor, the user is forced to scroll through huge graphics and choose options presented in oversized icons. Here are two more examples that show how something designed for a tiny screen makes no sense on a monitor.

 

I can easily display two Word files on a single screen with a font size even I can read without my glasses, a total of about 1,000 words. With websites like those illustrated here, I might see as only much as 100 words plus a few icons on the entire screen!

Other irritating features of many sites are the pop-up and drop-down screens that often conceal much of the information that was present. Some of these suddenly appear or disappear as the cursor is moved, while others hang on until the cursor is moved to another place.

The crazy thing is that many of these probably are award-winning websites. They can be beautiful, and the bells and whistles can be interesting, but instead of helping the user, they present more obstacles to finding useful information. In a way, they're like magazine architecture. Lots of wow factor, with function as an afterthought.

There are ways that websites can detect what device you're using and modify the website content to fit. In fact, the Clarus and Deko websites use this technology. If you visit those sites, you'll see that the arrangement and size of the things you see will change as you shrink or expand the browser window. Unfortunately, the font size appears to be fixed, and while some images will change size, there seems to be a lower limit, and the sizes of many icons are fixed. So, despite the flexibility, the information density is high only on mobile devices, and what is seen on a large monitor is mostly empty space.

For an interesting discussion of current website layout, see http://blog.teamtreehouse.com/which-page-layout.

What has your experience been? Do you find yourself doing a lot more scrolling and searching now? How often do you look for product information with a smartphone instead of a computer? Do you write or read specifications on a smartphone?