Have you ever bought shower curtain rings and wondered if there were enough in the package to fit your shower curtain? Probably not.

Why is that?

Its because the shower curtain industry has standards, just like the standards we’re trying to implement on the Web. At some point in the process of creating shower curtains, an industry leader made a decision as to how many holes would be in that shower curtain. It filtered through the industry and became a standard so you, the consumer, didn’t have to worry if there were enough rings to hold up your curtain. There are. And it’s because of standards.

Barriers to Entry

Think of the millions of different industries out there that would be in a constant state of confusion if there were no standards set. Every time a new player would come into the business, they would be reinventing the wheel for their product (sound familiar?).

Unfortunately, the cost of entry to the Web is very low. It’s available to everyone, whether you’re aware of Web Standards or not, you can get in and do whatever you want, go to blogger, WordPress, Google sites, etc. There’s no real governing body saying No, you can’t put up a Web site with invalid code. Honestly, nothing happens if you use crappy code, you can still get a nice looking site that’s all decked out in tables and font elements.

The barriers to entry are so low for the Web that no one needs to be aware of the standards. This is a culture that needs to change.

Accountability

Up until, maybe a month or two ago, I was a huge pusher of education for the client, cram as much knowledge as you can into their heads. But I’m starting to lean the other way. Where does the education need to stop and where does the industry take over in enforcing standards?

User-centric design is such a big deal right now, but we’re not bringing it into our business model. We design our sites with the user in mind. What does the user want? What will they being thinking? Where do we want to guide the eye?

We all know that the user average doesn’t care about paragraph tags, blockquotes and divs. But guess what? 95% of the time, the client doesn’t care either. And you can say that caring about that is the cost of having a web site, but it’s really not. Not with barriers to entry being so low. A small company doesn’t need to know this to be successful.

I just had a very educational back-and-forth with some system administrators (server guys) where I truly felt like a client with the attitude of: I don’t care about the innards of the server, I just want it to work. And it was finally pretty clear to me about how a client, who is not Internet savvy, and just wants a Web site to work. They truly don’t care, they just want it to work.

The Ideal Client

The ideal client, wants to learn about the XHTML code we’re using to build the site. They’re curious as to why it’s best practice to separate out a presentation layer. This is great when they actually want to be educated, I love these clients; unfortunately, they’re few and far between.

Don’t get me wrong, I’m not saying the education is a bad thing, I think it’s great and I’d love it if clients cared about semantics and proper document structure. But the reality of the situation is that we need to pick our battles and move some of the burden off the client and back onto us (the developer).

The CMS

Content management system and the developers need to take on most of the burden. This is where the code is produced, this is the output, and this is where the choke point is. Most content management systems I’ve come across are still outputting multiple line breaks instead of paragraph elements (they’re elements, not tags). With how far we’ve come in Web Standards, its not acceptable anymore to just be proud that you’re not using tables for layout. The best one I’ve seen, so far, has been WordPress (my CMS of choice). But the vast majority of “easy” CMSs are still outputting awful code.

A client should not be asked to do any more coding than they have to do in a Word document, unless they want to or there’s an error in the CMS.

The Problem with Themes

The problem I have with WordPress/MovableType themes and default templates is all the extra code included to make things flexible. Code inserted completely for presentation purposes.

The first 5 lines of code in the body of a default MovableType Blog:

<div id="container">
<div id="container-inner">
<div id="header">
<div id="header-inner">
<div id="header-content">

What I cut it down to before I start coding

<div id="branding">

If we’re going to make the barriers to entry so low that anyone can use these open source CMSs, we need to build them better out of the box. The same amount of theming can be done with half the amount of code.

What clients should know

There are certain things that a client needs to be responsible for when managing a Web site. Anything having to do with the content, properly floating images left and right, bold & italics (if there’s no WYSIWYG editor), maybe some light positioning, things like that. They need to be educated on accessibility and how necessary alt text is when they’re inputting an image into content. They need to be educated on relevant topics that they’ll deal with on a day-to-day basis, not the importance of a DOCTYPE and making fewer HTTP requests (these are burdens of the developer).

The point of this

What am I ranting about? Shower curtains? The point I’m trying to make here is that there are certain standards that we, the Web team should share with the client, but they don’t need to be experts. If they were, they wouldn’t need us. Inform your clients about Web standards, let them know they exists, answer any and all questions they have, and correct any misconceptions, educate them as much as they need. The Opera Web Standards Curriculum is a great resource for any client to have, maybe giving them that should be our newest standard.

You’re the client, you don’t need to think about how many rings there are in your shower curtain, it just works (ok, maybe you’re the user, but you get the point).

P.S. There’s a big learning curve with the Internet and it’s even harder since it constantly changes; you’re clients are not stupid, they’re just confused.

Now if we can only agree on spelling it “Web site” vs. “website” we’ll be in business!

One Click, The Importance of UI

Many times my link lists back up a few weeks and I have to revisit an article to really remember what it was about. When I did that to this one, I moved it up to the top of the list. It’s a very interesting article on user interface and the importance of the click. A must-read in my opinion.

Pixel Precision with Diagnostic CSS

A technique for mocking up a design.

Mint Analytics

Analytics software I found while muddling through the An Event Apart web site.

How HTML5 is Already Changing the Web

Generally, I’m not a fan of all the hoop-la over HTML5 since it won’t be released and in use for a long time. But I was very interested in reading this article from webmonkey

FV Code Highlighter

A handy wordpress plugin for code hightlighting, very cool and useful, definitely check this out if you have time. This will be the next plugin I install.

Hacking JavaScript for Fun and Profit

SitePoint is always a great place to find good tutorials. This one especially caught my eye in the past week.

LiveBar

The concept of LiveBar is very interesting to me. It’s like portable social networking for your web site. It will display related social content in a small bar stuck to the bottom of the screen.

Paper background graphics

I’m usually against most design fads because they pass so quickly. But if you choose to venture into the grunge fad, this is a very good resource to find those large images of crumpled up paper.

Most people I ask about inspiration will say something like "Inspiration is everywhere!" Which is true (like telling a sprinter to run faster… thanks coach), but not very helpful when you sitting in a cubical or office and you need to build a comp. And I know, when I’m sitting in a coffee shop relaxing, that last thing I want to do is look around for inspiration or wait for it to hit me.

For many years I’ve taken inspiration and creativity for granted, but when you go through a time where the ideas aren’t firing at you as fast as you’d like, you have to seek them out. Recently I’ve have to do that; so I thought I’d share my sources.

EDU Style

EDU Style is a new source I found. University sites usually have a pretty distinct style, as they convey a different message than most blogs or corporate sites. This is a great source for ideas.

Design Meltdown

Design Meltdown is a neat gallery run by Patrick McNeil. Thousands of sites to look through. Patrick McNeil gave a real good talk at FOWD08 about finding inspiration, you can view his presentation slides on SlideShare.

Daily Design Workout

Daily Design Workout is a very interesting project. Jonas Buntenbruch posts a new design every day, mostly images, but a very good source of daily inspiration.

Flickr 7days

Flickr 7days shows a random assortment of images that have been uploaded to Flickr in the last 7 days. It’s neat to look through, and every once in a while you’ll run into a cool picture you can grab some ideas from.

Twitter public timeline

Millions of people all over the world use Twitter every day, and a lot of them post links. Just go through the public timeline and click some of the links people post, check out the design; you never know what’ll be there.

OpenID site directory

The OpenID site directory is a fairly comprehensive list of all sites that integrate OpenID. It’s a massive list of web sites, why not click around?

Doing a Google search for "CSS Gallery" will turn up some good sites too (like cssmania and css beauty), but I think most us know about those, so I opted to leave most of them out of my list.

A neat source for typography inspiration is any magazine you can get your hands on. Magazines use so many different typographical styles that by just looking through a few different ones you can a ton of ideas to apply to your site(s).

Those are just a few things I’ve done to try and get out of a design slump, hopefully they’ll be helpful for you.

Where do you get YOUR inspiration?

Since CSS layouts have exploded into the mainstream of web design there have been few designer/developer types who can say they haven’t seen id="wrap" or id="container"; in fact, most of have been using it for years and it’s a bit of a standard now. Meanwhile we all seem to forget that there’s a lovely element we rarely use… html, the proud parent of body. All parents like to see their children succeed, but html has been depressed for some time now. Why? Because it’s child isn’t being put in in the 4th quarter, it’s being taken out in the 8th inning, not being used to it’s fullest potential because of this smug little punk on the block called "container" (or "wrap", for short).

No one forgets that body and html are there, they just forget they’re a stylable elements, everything can be manipulated with CSS, (remember?). So rather than doing something like this:

#container{
width:60em;
margin:0 auto;
}

Try filling out your body like this:

body{
text-align:left;
width:60em;
margin:0 auto;
background:#fff;
}

And then style that proud parent html (at the top of the style sheet)

html{
background:#ccc;
text-align:center;
}

There you go, you cut just down on an extra div you didn’t need. This technique will work in 95% of the web sites out there. The only case it wouldn’t fly is if you need to put content spanning the whole top of the browser window (with a center aligned page). With 95% of page load time happening on the front end, every character you can shave off counts. Since there’s very little semantic benefit to a having html body div#wrap, it’s usually an easy choice to cut out.

Not only is it an easy choice the drop, but it’s a seemless integration. You essentially move all the layout properties up a level (move #wrap to body and body to html). There’s usually little to no change for the user and few things to fix.