donuts
Skip Navigation

Understanding the User Experience The web is a fluid medium.

Get the latest web news, tips & tricks in your inbox. We promise never to spam you or sell your email address.

Posted by SysAdmin on - Read

The web is a fluid medium. What I mean by that is, your website changes to fit the size and shape of whatever device it is being displayed on. As technology advances and our screens get smaller (and larger) and our toasters get smarter, it’s no longer safe to assume your visitors are seeing your website exactly as you are.

As designers and developers for the web, we have little to no control over the end product. It’s not like the print world, where we get to choose our paper, spot check the colors and approve the press check.

A visitor to your website may be at the office where the I.T. department has disabled JavaScript, or their toddler pushed all the buttons on their monitor and now the colors are too dark (or bright) and no matter how much you fiddle you can’t seem to get it back exactly how it was. Or they’re in line at the D.M.V. on their iPhone or Blackberry. Or they’re using the web browser on the Nintendo Wii or Playstation 3. Or…

But you see my point.

Understanding and being aware of these possible scenarios is important because if your user can’t find what she’s looking for, she’ll just hop over to Google and go somewhere else. Have you ever been to a website and been told “You must have [whatever] to view this site”? And all you were looking for was an address or who played Booger in Revenge of the Nerds? (it was Curtis Armstrong)

Frustrating wasn’t it?  But lucky for us, modern web design has advanced to the point where we can build your website with all these situations in mind. The web isn’t like a PowerPoint presentation, where we can dictate what pages are shown in what order, on our computer, with the lights turned down just right and an impressive knowledge of 80s movie trivia.

Amazon websites on different devices

Amazon.com does this, as you can see in the image above. On the left is the Amazon we all know and love as viewed in Firefox on my desktop computer. But check out how it looks on the right when I go there on my iPhone. It’s still Amazon, still has all the familiar elements of Amazon (logo, search, recommendations); but adjusts to the device instead of the other way around.

OK, pretty neat, but what about companies that don’t have the budget of Amazon, right? Let’s take a look at a the site we built for the North Coast Challenge race. Using a bit of advanced CSS, there’s a cool effect hidden in the design of the site. If you’re using Firefox, Safari, Chrome, or Internet Explorer 7, resize the browser window (go on, I’ll wait) and you’ll see the runners at the top almost appear to be racing. But if you’re using Internet Explorer 6 or below, the technique used is not supported and you can’t see it. 

But everything else is still there.

Instead of disabling the site for IE6 users, or trying to force them to upgrade their browser, the website seamlessly adjusts itself to the limits of its environment, is still completely usable. You can still see the race results, learn about the race, see the photos. And you’d never know you were missing anything if you are using IE6 (and I didn’t just tell you). The content is still there.

Through proper planning and anticipation it’s possible to make sure that your user can always get the information they’re looking for, even if it’s not in the ideal way you’d like them to. Because even if we do build and test for every conceivable scenario possible, tomorrow your new customer could be checking out your site at breakfast from their toaster.

Search this site