51 designs LLC :: web design blog

One of the things I still see some web designers using is <table> based layouts.  It’s been at least 5 or 6 years since I abandoned table layouts completely… and that was only because some previous sites I designed were encased in <table>’s and <td>’s, and I wasn’t secure enough in CSS to transition them over.   Well, 6 years later, I haven’t touched a <table> except for actual tabular data, and I figured any current designer who’s actually successful had abandoned them as well.  I was wrong.

So, I’m browsing through some source code, and I see some <table>’s and  code with either no DOCTYPE or just doesn’t validate – and I vocalize my distaste. My wife then says, “But it looks nice, so why does it matter?”  Honestly, I didn’t have an answer. I just knew it did.  So I did some research, trying to figure out WHY businesses should care about web standards…

What ARE Web Standards?

I’ll pull a quote from Wikipedia:

In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

Generally, it’s following the standards created by the W3C, so that your code is seen as “valid” by their handy validation service. The specifics get more technical and probably don’t interest the average business owner.  So here are some reasons I came up with for “Why web standards are important”:

#1 Accessibility – More customers having the same experience with the site

Web browsers are a finicky bunch, and each one works just a little bit different in regards to how they displays web pages.  However, most modern browsers follow most of the W3C’s recommendations, and thus display a properly validated page in a similar matter.  You may notice that I say most browsers and most of the recommendation… because even now, many popular browsers don’t score 100% when tested for standards compliance.

With a standards-based web page, you can be sure that the customer will see a very similar page to the business owner, even if they’re on different browsers.  In fact, you may have a potential customer with special needs, like a text-to-speech browser or even one that renders in Braille – and they’d probably be excluded if the site is non-standard.

#2 Futureproof

Browsers are releasing new versions all the time, and it seems like they tend to be MORE inline with web standards as time goes on.  If a business decides to spend $20K on a website, they should be secure in the notion that 5 years down the road, the site is still going to look good.

Also, standard practice separates the design from the content… meaning, you have all the information about the business in one file (ie, the .html file) and a separate file containing the instructions for how the information is displayed (the .css file).  Again, 5 years down the road, more than likely the web aesthetics will be different… and it will save some money if all the designer has to do is change the .css file.

#3 Better Search Engine Placement

When Google goes to your site and decides where it gets placed in search results, they absolutely don’t care about the design of the site.  By taking all the design aspects out of the page and making the code clean and standardized, you make Google’s job easier and help them place your page better.

#4 Speed / Faster Loading Time

With more and more broadband, this isn’t as huge of an issue as it once was, but it IS an issue. Standard markup is concise and compact, and almost forces the designer to strip away any unneeded code.  This results is a smaller file size for the page, and thus it downloads and displays quicker.  With first impressions being so important, a business sh0uld make sure that customer doesn’t have to wait any longer than needed to view the product or page.

#5 It’s Just the Right Way to do Things

Think about your household plumbing: If you have a leaky pipe, it’s possible to fix it with duct tape and it could hold for a good long while. But is that the right thing to do? No, you’d probably call a professional plumber. And would it be okay for the plumber to fix it with duct tape (even if they have the excellent, professional grade duct tape)?  Of course not.  You call a professional because they should have the tools and experience to do the job right.

A professional web designer is called for the same reason. They should be up on the current trends and techniques, and more importantly the right way to do things.  And if a designer doesn’t care about standards, what does that say about how they will approach YOUR site?

When I first started learning CSS years back, there were a few… let’s say… “quirks”, that I had to get used to.  I soon found out these “quirks” are called “standards”.  One of the first quirks was the idea of “clearing floats”.

Let’s say you have a container or wrapper div on your page.  Inside that div, you have two more divs, one sidebar (floated left) and one content area (floated right) .  This is a pretty standard web layout.  However, if you were to think, “I’ll put a background color on the container div”, you’d notice that it would NOT expand to the sidebar or content divs (at least in standards compliant browsers).  This seems odd, because they are INSIDE the container… so why doesn’t the container surround them? BrainJar explains why, and I’ve heard and read other explanations, but it’s still VERY counter-intuitive to me.  But whatever – it is what it is.

The other issue I had is actually two issues, both regarding the header image: offsetting the h1 tag, and css sprites.  A List Apart covers sprites in glorious detail. As for the h1 tag, it’s fairly common knowledge now that two of the most important factors in relevant SEO are the <title> and <h1> tags on a page… especially using relevant keywords in your top <h1> tag. A simple demonstration can be seen at CSS-tricks, and as far as I can tell, Google doesn’t penalize you for doing it.  Though, it has to be relevant text, and there can’t be hundreds of hidden keywords on your site.

free css web template

So with that in mind, I decided to create a simple (really SUPER simple) web template that addresses those issues. I call it “51 designs template 1″ — pretty original, don’t you think?  This is essentially the framework I used when I started designing the main 51 designs site, and it’s easy to customize. The navigation bar can be aligned to the left, just by changing the float – and the content and sidebar can switch sides just by changing their floats.

You’ll notice I’ve got borders around the divs. I personally find these useful when doing the initial design of a site.  It helps put all the element into perspective, and gives a great visual representation of the box model and how things are truly positioned.

Finally, I’ve included a slight hack that makes the scrolls bars stay visible in Firefox, even if the content doesn’t extend beyond the page.  That way, if you navigate between pages that have different page heights, the site doesn’t “jump” to the left or right.

Check out the demo here, or download the source files here.  It’s totally free to use and abuse, for any purpose whatsoever, with no restrictions.