W3C Concepts and Fixes: Separating Design from Content and Ensuring Standards Compliance
Filed Under (Uncategorized) by Mike Wilton on 03-10-2009
Tagged Under : html, W3C
(The following is a guest post from Brian Harnish)
One of the biggest obstacles to overcome in the quest for nearly perfect SEO is correct coding practices. From making sure your site works on the latest web browsers on the market, to making sure that your site is viewable on as many resolutions as possible, correct coding practice is the root skill necessary to make sure that all of the above issues are resolved. So, then, the question arises. What, exactly, is correct coding and how should you use it to achieve the desired effect: higher rankings and even better usability?
HTML, or Hyper Text Markup Language, is the language used to build web sites. CSS, or Cascading Style Sheets language, is the language that’s used to actually STYLE the HTML tags within a web page. The W3C, or World Wide Web Consortium, mandates that design should be a separate component of each HTML document. This means that HTML tags should be used ONLY for markup and determining the layout of a web page, and CSS should be used to apply all style instructions to a specific document.
Back in the early days of the web when Yahoo! ruled the search engine world, tables would be used to design the layouts of web pages. Many web designers would create graphics intensive websites created with Photoshop. These graphics would be sliced, and tables would be used to put them together as a website. Many times, depending on the complexities of these interfaces, using tables could result in as many as 60 rows and 100 columns in order to put them together. Needless to say, this resulted in a lot of useless code that could have otherwise been used to include content on the site instead.
Then Cascading Style Sheets came along, and the W3C concept of separating design from content. No longer did designers have to be frustrated with what table design would look good in IE, but crap on Netscape, and have to add several extra tags in order to ensure a correct layout. No longer did designers have to be frustrated with changing a single image in table column 132, row 136, and having to scroll through pages of text in notepad or their favorite text editor. Instead, all style instructions could be housed within a separate style sheet document that contained one line of code in the actual HTML document. And, if a site has 100 pages, then style instructions could simply be changed in the external style sheet, saving a huge amount of time in updating the web site.
Now, there are several coding practices that you should be familiar with when writing your code. First and foremost: indent your code, please. It makes things so much easier to read and understand, and you don’t have to spend time hunting and hunting for a particular code element in order to make a very small change. Next, use very MINIMAL markup. This means that if you can use one paragraph tag to separate a paragraph and style it, then do so instead of using a paragraph tag, font tag, and a whole bunch of other ones in between. This practice of minimization will help search engines read your content better, and results in a much lower code to text ratio. As a result of this practice, you’ll get even better optimized pages, which will make it much easier for search engines to crawl your site. Next, use all lower case or upper case letters for your HTML tags. Don’t go from <P> to <p> or <table><tr><TD><TBODY> for your tags. From a professional standpoint, it makes your code look much less sloppy.
Let’s face it. Using notepad is all well and good, but there are other text editors on the market that will make your life easier. For example, editors like Crimson Editor, Edit Pad, and PSPad, all feature highlighted and indented code to make life easier. For those with a ton of cash on hand, Dreamweaver is the best that money can buy. For those on a mac, BBedit will be a great choice. For those who are just starting out with learning correct coding practices, you may want to check out the book Build Your Own Web Site the Right Way Using HTML & CSS by Ian Lloyd.
SEO’s without a good knowledge of behind the scenes practices will not be as successful as those that know how to code like the pros. Good coding practices are a major foundation to building a web site that will perform well in the engines. If you’re not familiar with how to create a standards-compliant web site using HTML and CSS, then you need to start there first. You don’t build a house without first building the foundation, so why would you approach building an optimized web site the same way? After all, it’s the foundation of a project that will determine its success or eventual failure.
About Brian Harnish
Brian is an in-house SEO and former colleague with an extensive knowledge of W3C and coding compliance. Dabbling in a mix of both search and social you can view more of Brian’s SEO writing on his blog Prolific SEO. For the social side of things you can catch him on Twitter via @BrianHarnish. A huge thanks to Brian for this post. He was the first of a handful of writers to get back to me in regards to guest posts here on the blog.
Good tips for people who are minimally savvy about code, but what do you suggest for the new generation of bloggers and site owners who have Content management systems to do their work for them? If your platform isn’t 100% W3c valid do you have to worry?
Jeremy – Well, with platforms where you don’t have access to the code, there’s not much you can do unless you want to become a CMS developer on whatever language it uses (ASP, PHP, etc.). And, that’s assuming you have access to the code in order to change the output. If the CMS provides a way for you to write HTML/CSS along with the content, the best you can do is ensure that the code you DO have access to is written correctly. In answer to your question, yes, you do have to worry about a CMS not being W3C friendly. Quite frequently, non-W3C friendly CMSes (depending on how they were developed) can include a lot of extra code you don’t need. This is often referred to as code bloat. That can result in inaccurate renderings of the page in a web browser, very slow download times on slower modems, and a not-so-search engine-friendly page. While not many of us are concerned with backwards compatibility (older generation platforms and browsers being able to access the newer web sites), following W3C standards ensures that previous and future generations will be able to view your site as you develop it today. They don’t have to stick with a certain browser or computer platform just to view their favorite web site.
Brian,
I personally think that compliance is a little blown out of the water when someone argues the search engine optimization values. Sure good clean code is probably one of the 200 or so factors Google considers but let’s be honest, in the particular industry and company you and I work in our websites aren’t all that compliant and yet every day we get new clients because they’ve seen our client websites everywhere when they do Google searches.
Apparently 100% compliance isn’t the goal for savvy web designers or not so savvy coders who can’t or won’t touch their CMS. I have a few examples for you…
http://www.sphinn.com – 141 errors – 27 warnings
http://www.google.com – 65 errors – 8 warnings
http://www.amazon.com – 1578 errors – 154 warnings
http://www.prolificseo.com – 11 errors
http://www.musingsforadarkenedroom.com – 12 errors – 6 warnings
http://www.weeklyseo.com – 19 errors – 1 warning
Not every site is going to be standards compliant and not every developer will subscribe to W3C compliance (unfortunately). You can argue to the high heavens (as I have done for the past several years here at AA), and there are people that will still code the wrong way regardless of the benefits that correct coding provides. It’s like using incorrect speeling (intentional) and grammar. You wouldn’t turn in an essay to your professor that was riddled with errors would you? Also, don’t forget the legal ramifications. If you remember, a couple years ago Target themselves were sued because their site was not W3C compliant. Why? Because alt. text wasn’t used. Alt. text (mandated for images by W3C standards – however, the title attribute is what’s W3C valid) would have provided the essential code that would have activated special readers that are used by the blind. If the W3C standards and accessibility guidelines were followed, Target would NOT have been in this mess in the first place.
@John I think Brian makes a point in the fact that while Google may not slam your site for not being 100% compliant, that doesn’t mean that when possible you shouldn’t keep these things in mind.
Accessibility opens you and your business up to those who in many cases are alienated because of disabilities. The more you can do to expose your site the better it is for your business. The same applies to things like mobile usability and the like.
I wonder if tests have been done on a site that mixes SEO and compliance vs a site with just compliance…Anyone up to the challenge? Build two similar sites, target the same term and see which comes out on top. Brian? John? Any takers?
Yeah I remember the Target ordeal. To me that was nothing more than someone looking for a quick $$. I don’t mean to be cruel or mean and certainly understand the advantages of having a website that can be viewed regardless the browser, OS, platform etc. I do however strongly feel that law suits like that are not any better than those people who go around LOOKING for small flaws in public places and then suing due to non compliance.
Getting back to the point in hand though… I myself have specific habits that Brian probably doesn’t agree with. For example I’ve seen better results with keeping my H1 WITHIN the same table that the content is in as opposed to keeping it outside of the table. Of course let’s not get ahead of ourselves, Tables should NOT be used in the way they are used most the time to begin with so what does one more non compliance matter?
@Mike that challenge would actually have to be him against someone else or even him against me. Honestly I couldn’t build a 100% compliant page for the life of me and nor do I strive to do so. The problem with that though is that I’m a strong SEOer and while his site might be compliant for the term, I can pretty much say that my strong SEO capabilities would dominate… Just being honest!
@Mike,
So I slept on the idea of a little challenge between Brian and I wherein Brian would create a 100% w3 compliant website with maybe even some SEO done on the site to be fair. I would then create a website that isn’t 100% compliant but with a fair amount of SEO done to the site itself.
I was talking to him about this last night… ok more like trash talking and getting him pumped to challenge me again… and we both thought that it might be a good idea to have a few judges to pick the keyword(s), timeline & terms though.
Interested Mike? Maybe a panel of three judges to set the rules and monitor the progress?
All browsers don’t follow w3c, and so by default you have to add extra code for IE 6 to render properly. W3c is an unattainable goal, because it’s NOT user friendly, because the users are all on browsers that interpret code differently!
John – I would certainly be up to the challenge sir! What do you think Mike?
Jeremy – You could be a judge for this as well. What do you think?
Jeremy – Yup…which is why I, and many designers/developers abhor having to write specialty code FOR IE6 because of its lameness when it comes to rendering code. Argh. BTW, by default W3C IS supposed to be user friendly. It’s designed to be a standard that works across all user agents and promotes user friendliness/usability for web sites across all platforms, not just a few.
I’d also like to provide an example, if you will. It is, however, a table-based layout, but uses very minimal markup and still passes W3C validation in their validator. The homepage for worldofwebdesign.info. I still haven’t gotten to the rest of the interior pages to correct some coding errors and SEOing them. Argh.
@Brian I’ve definitely had dealings with multiple web designers and even programmers who have to output data from databases. I almost always hear the, “IE6? Oh yeah, I’ll fix that. Though you should really update to IE 7 or better yet use Firefox.”
My response to that would be, “When everyone else uses the exact same browsers with the exact same settings then I might consider it but until then this needs to work on as much as possible.”
I’m not against W3C compliance, I’m simply not a perfectionist when it comes to it and certain things that might show up as an issue with their validator may not have the slightest affect to anyone on any platform.
I’d definitely be up for a challenge by the way. Mike, Jeremy and maybe Audrey can set the rules, timeline & keyword(s).
Oh how much joy and amusement this has brought to me since yesterday both at home and in the office. Fun times!
@John – True. However, there IS the issue of alt vs. title text. The title tag is W3C valid, AND it shows up on all browsers. Alt text doesn’t…and you can forget about it showing up on Firefox. I wouldn’t call that a slight affect as a result of non compliance.
Just had to throw that out there. Hehe.
@Brian,
Frankly I use Alt with my websites because the majority of web surfers out their still use one version of IE or another. Additionally I frequently utilize one editor or another and even they are still built to use ‘Alt’.
You might call this laziness, stubbornness or maybe a little of both and I’d probably agree with you but just like it is your prerogative to obsess over compliance issues, it is my prerogative to be as compliant as possible without obsessing and spend more of my time on things that matter most to me like the other 200 or so factors for good rankings.
@Mike are you enjoying this banter back and fourth? How’s the traffic for this post? Planning on disabling comments on this post yet?
Great post Brian! I’m interested to see how your little experiment plays out!
P.S. Mikey, you need to make me some of those cookies in the pic. Yummy.
@Shirley Tipsy
Cookies? I thought those were cakes! Either way, I agree, they look tasty.
@ShirleyTipsy- Thank you!
@Mike – Yup…those cookies sure look good. You should make some and bring them by for all us marketing people!
[...] research world into a media used for a wide sets of purposes including marketing and advertising W3C Concepts and Fixes: Separating Design from Content and Ensuring Standards Compliance Filed Under… – musingsforadarkenedroom.com 03/10/2009 (The following is a guest post from Brian Harnish)One of [...]