Ok, for all of us CSS/XHTML/Unobtrusive DOM/Ajax heads out there, standards compliance is not just an easy way of creating websites. Standards compliance is not just about creating a badge and shoving it on your homepage. Standards compliance is not about saying you are a standards advocate just to make a buck.
I don’t know how everybody else out there looks at this, but its almost a morality issue. You know, when you do the right thing just because it is right, even though it is harder on you to do it? Yeah, thats what its like. I do standards compliant web sites because I believe it makes this thing called the web better. Its a moral argument.
So, as this standards compliance thing becomes a bit of a fad and technologies like Ajax, Unobtrusive DOM Scripting, CSS, RSS, XHTML and all that jazz become ohh so popular, lets keep in mind what this is all about. Web design is not about using these buzz words liberally and not sticking to them. It is about adhering to them all the time. I have really become frustrated with new websites that come out with these technologies that miss the point. Here is a few things I have seen on the interweb that frustrate the standards out of me:
- Ajax that cripples a site without it. Recently I was using Riffs.com and thinking it was kind of cool. I was looking through a list of paged results and it apparently used Ajax. So, I’m thinking when I turn off JavaScript that it will work, but it will just submit to the server and reload the whole page. Nope. The paged results were crippled without Javascript. Here’s my message: If you are going to use Ajax and your site is not an admistrative type site where you know the user will always have JavaScript, then make it work without it.
- Resizing text cripples your site. Check out http://webworkers.excargot.net/. Now resize the text. Notice how the boxes seem absolutely positioned and dont grow with the text? Also, the boxes are fixed width and height. Now, I don’t think absolute or relative positioning is bad, but just use common sense. If the text grows, try to anticipate the needs of your audience. Will they still be able to use your site? Will they be frustrated by that? Do them a favor and make your site friendly.
- Obtrusive DOM Scripting. My site is a prime example of what NOT to do. I have these fun little fiddly boxes on the right side. Aren’t they so cute? Sure, but what happens when the user doesn’t have JavaScript? In my case, the boxes are unusable and I hate that about my site, which of course I plan to change with the spring CSS Reboot. I get the reasoning behind it because I did it. I wanted my site to be different. I wanted my site to have a different scrolling mechanism than win/mac default. But in my efforts to be so different, I ended up creating a hard to use, obtrusive DOM scripted widget from you know where. Don’t do this. Here’s some advice: You can make an elegant or striking design that is original without causing your users to suffer from unaccessible-itis.
- Over-Trendiness. Understandable that your clients probably are affected by trends just like I am when I go buy my new Volcom hat. They see a cool looking trend on a site and they want that from you. All my advice to you is: be balanced. Don’t go too far with it. First of all, come up with something original. If you have to incorporate trendy design, do it in a elegant and minor way. If you want diagonal lines, do it on some items and make them subtle. Don’t plaster it all over your site with diagonal lines in your logo, headers, backgrounds, etc. Whoa fella. Just take it easy.
- Tag-itis. This self-made term comes from the word DIVitis. DIVitis is a plague that struck websites with the CSS boom. It refers to overuse of unsemantic markup. Case in point: the DIV tag. One thing that seems to happen is Tag-itis. Designers get so stuck on creating a design that they over tag their markup. Whether its DIVs, or SPANs or paragraph tags, websites are recreating the table-based unsemantic markup phenomenon just to pull off a design. Now, don’t get me wrong. I am not saying let technology drive design, but what I am saying is this. If you are finding that you have to insert tags for no reason at all, especially this kind of scenario:
<div id=”box-header”></div>
, then you oughtta ask yourself why. Why do I have a tag that has nothing in it? Why is it just hanging there? Then, if there is no good reason for doing so, creatively think your way out of that situation.
Ohh, and by the way, feel free to add to this list. I’d love to hear what you think.
yeah… i suffer from the-ITIS sometimes :( peace out HLM!
I agree with everything your saying, I’m just not good/smart enough yet to do anything about it or do with out it.
personally, i think everything you’re complaining about is ok… :)
What kind of scenario? There’s not text between the : and the ,.
At the risk of humiliating myself, I’m going to post a page I made in order to suggest a counter-argument to your #5:
On my Cumberland Oceanfront Hideaway website, I have this line of code:
That element contains the masthead and nothing more. I put it in the CSS in attempt to separate design from content; it’s part of the layout, it appears on every page, and I don’t want anything else in there.
Do you have a suggestion as to how to avoid tag-itis in that case?
Oh, my line of code is gone from my earlier post. Anyway, it’s basically the empty div you posted. You get the idea…
Mike,
I suggest you use some semantic markup such as:
Then use a CSS image replacement technique such as FIR or LIR. Just search on “CSS Image replacement” in google. Basically, the idea is to apply a background image to the h1 element and then push the text off the screen.
Give it a go.
Ah yes. I’ve read about that.
Apparently there are many different versions: display:hidden, overflow, text-indent, etc.
Do you recommend a particular one? Seems to me the text-indent is best, since it requires the least amount of markup in both the CSS and the HTML.
There is some regard to images off, css on mode. If your images are turned off in your browser, but css remains, the text-indent method will end up showing a blank block of nothing, because the text will be moved off the screen with no image to replace it.
That being said, I use that method. It’s the easiest and I use alot of text replacement, so it makes my life better. However, there are other methods if you are concerned with images off, css on mode :)
I am a great fan of Ajax, but ya you are right rogie, there needs to be a backup machanism in case javascripts are turned of. I am myself building a Ajax based website and will keep all those things in mind…Keep up the good work going…