For those of you not familiar with logical symbols in programming, the title of this post reads in plain English as “Interactive Does Not Equal Web”.

Say it with me. Interactive. Does. Not. Equal. Web.

Phew. That felt good. Why?

All rectangles are not squares…

In the world of math and logic, we often hear this phrase. “All rectangles are not squares, but all squares are rectangles.” This is logically true because of the definition of the two. A rectangle, as defined by our friends over at wikipedia, is a “quadrilateral with four right angles.” A square (again from Wikipedia) “has four equal sides and four equal angles.”

So, understandably, not all interactive media refers to websites, but websites are technically interactive, right?

Definitions, definitions…

In its most basic version, a completely static website with absolutely no links, buttons, or other interactive elements is technically interactive in its nature. You interacted with it by requesting it from the server, and you still have the option of viewing the site, or leaving it. Add at least one link, and you’ve already increased your interactivity by an order of magnitude, because the page linked there is just as interactive. Once you’ve created a fully developed website, with inter-related pages and a meaningful relationship between them, you have easily created at least a hundred potential points of interaction.

So what’s the point?

So few designers are completely aware of exactly how many points of interaction they are presenting to their users. Eco-content is a great example of a beautiful/useful design that is created using a fundamentally interactive media method (Flash)… but the user is bombarded with a million things they can do. How do they interact with this site? What did the designer expect people to click? Most of this site is not presented in a plain and clear English version, so it’s understandable that as an American user I had a great deal of difficulty interacting with this site. I enjoyed it, I remembered the experience, but I learned nothing. I gained nothing. I got lost multiple times, and I was never sure if clicking on something would move me to a new page or change the visual layout of the page. Being a flash site, using the back button only brought me back to the loading screen. I was baffled and angered, but this was after a few minutes of peaceful music and imagery, so it more or less comes out a wash. Maybe this was their strategy: we don’t know how to make a design that doesn’t infuriate the user, so let’s make up for it with pretty images and sounds.

What can we do?

I hate to be the kind of guy who devoutly professes love of any one platform, but we’re doing an increasing number of WordPress themes these days, so I feel confident giving an example of Usable wordpress designs. The first example here that shows great explanation of my concept is the design “Nameless” which is a perfect example of simplicity.

This design showcases the individual elements that you are most in need of showcasing, and doesn’t dramatize the various other “effects” and “flourishes” of a design. This is a useful method of web design, but the fact of the matter is that all sites don’t need to be by necessity this simplified.

Not that a more complex site cannot be usable. You can see on the site below that there are examples of basic interactive flourishes, such as mouseover effects on the navigation and images that are essentially “no-risk”. In the first example, the flash site with moving buttons, the issue became the fact that the user could easily end up on the wrong page. Here, links are clearly and sufficiently labeled, so there is very little risk of a user becoming lost.  The mouseovers actually help the user to determine the clicking boundaries of a link, which is the reason for the hover effect on links. You know that if you click with your mouse in its current position, that’s the link that will direct you.

So what should I walk away with on this topic?

You must realize what your audience can potentially do on your website, for better or worse. Unless your website is supposed to be a video game or an exhibition of the latest web technology, you should make sure that your primary focus is the content. What is your site about? How do you get your users to use it? Once these questions are answered, you can move on to the design, including all flourishes or “bonuses” to your users.

Simply put, we’re not all getting the same internet. As argued by the anonymous and yet ingenious Do Websites Need to Look Exactly the Same in Every Brower.com, different browsers will provide a different appearance of the same overall content and presentation. So we have essentially three choices.

1. Screw the new features and stick with what we know will work across the board.
2. Use the new features and ignore the old browsers, people on IE will just have to deal.
3. Make a site that works on both new and old browsers, but provides a different experience for each

So where does that leave us?

A majority of the web is moving towards option number 3. This honestly makes a lot of sense, as CSS 3.0 may be delayed even further, and IE9 may just decide to only support a small margin of the features. HTML5, for that matter, might take another decade to be fully supported by any one browser, let alone all of the market share. So now the question becomes the following: do we design for older browsers and then add neat features that are supported by the newer browsers, or do we design for newer browsers and then let an “acceptable” level of compatibility fall to the older browsers?

This defines the current argument of the web community, and there are official terms for each side. A degradable design is one that has fallback features for older browsers, but is truly optimized for newer and more standards compliant ones. A progressively enhanced design is one that is built with the less standards-compliant browsers in mind, and then steadily adds non-essential components for newer browsers.

In my opinion, the argument is perhaps a bit premature.

As a musician and sound engineer of some years of experience, I was constantly asked to “mix for headphones” or “master this so it sounds good in the car.” Just like most musicians who have pulled a majority of their hair out in the vain attempt for the “perfect mix,” I can tell you with some level of authority (and with a hairline to prove it) that this holy grail does not exist.

That’s not to say we can’t strive to achieve it, but one way or the other, our product is going to inevitably be slightly different on some viewing platforms. Is this the end of the world? To quote my earlier resource… NO!

So what do we do?

For now, the internet is creeping towards a new standard, and it has (widely accepted) old standards upon which to fall back. I say that as of today (February 22, 2010), if your target audience is the majority of the internet (something like 62% of the market share), design your sites to be html 4.01 and xhtml 1.0 compliant, and use as much CSS Level 2 as possible. This doesn’t mean be lazy, or slack on the layout and semantic value of your content. it means simply do your best to make a decent, accessible website. Then, you can add text shadows, gradients, rgba colors, whatever you like to your stylesheets so that more technically savvy users are rewarded with a slightly “improved” look. Think of it as making your site accessible to people who haven’t upgraded. Treat IE6 like a screen-reader. If people can see it, and it makes sense, it’s good enough.

That being said, if you’re someone who only plans to impress the users who are on the latest version of their Gecko, Webkit, or Opera-powered browser, go full hog as soon as possible with the new features. The sooner we push the browser manufacturers and users, the sooner they’ll be forced to adopt the latest technology. Besides that, if you end up learning all of the advanced functionality of the new web technology a month late, you’ll be a year behind the curve in developing it.

So wait, you’re saying both sides of the argument are right?

Like anything else, I think this argument needs a healthy dose of perspective. Who are your clients? Who is their target audience? Who are you trying to impress?

If you don’t know the answers to these questions, find out as soon as possible! This is your due diligence as a digital marketer. If you’re hiring an interactive agency to do this for you, get this information to them as soon as possible. Give them your branding guides, your technical requirements, and any documentation that you have lying around immediately. Then, you can decide together whether your site should degrade gracefully across the spectrum of technology, or whether it should be enhanced progressively in order to provide the highest level of accessibility.

Simply put: we are about doing the right thing.

Yellow Butte is the setting of Louis L’amor’s Showdown at Yellow Butte. In this epic masterpiece, Tom Kedrick is hired to drive a pack of outlaws and renegades from the property of an investor. During his journey, it is made clear to him that he has been sent to kill innocents. Even though he is a battle-hardened mercenary and hard up for the money, he does the right thing.

Our industry is a dangerous place. Not because of thieves and charlatans, but because of unrealistic expectations and loose accountability. We don’t promise you something we can’t deliver. We don’t tell you that things are impossible simply because we don’t know how to do it yet.

Sound refreshing? Maybe it is. But it just seems like doing the right thing to us.

Twinty Photography was built for an Austin, TX area photographer.  With a user friendly content management system and a fully customizable photo gallery she can easily add new photos and edit the text through out the site.

Terrell Hospital was split from the Renaissance healthcare system, and as a result it was decided that the individual hospitals would need their own sites. This site was built on a very short timeline and slim budget, and included new functionality that scaled on the fly.

Cephas is a small shop in Austin that provides a variety of services in the realm of carpentry, including home furnishing and both indoor/outdoor structural creation.  With an easy to use content management system, their new site allows them to easily showcase their work and reach out to prospective clients.   The proceeds of this project were donated to area charities.

iTutoring.com is a educational website created to assist students in their understanding of mathematical concepts. Students have complete access to an online educational catalog of video lessons 24 hours a day, 7 days a week.

Video lessons include topics such as slope of a line, graphing quadratics, geometrical proofs, volume, surface area and much more.

visit <a href=”http://www.itutoring.com/” target=”_blank”>iTutoring.com</a>