Subscribe 
Send me an 
Read more 
Follow 
Shop Other posts that might interest you
Favorites
Even Christians Have Abortions
Easter Fudge
Paint Old Baking Pans for Storage
Vintage Popcorn Boxes
Customizing Big Cartel
Override Inline Styles from the Stylesheet
DIY Fabric Tape + Stickers
Book Cover Tutorial
Chocolate Pancakes Recipe
Tortilla ChipsI was thinking the other day about how to best explain web standards to someone unfamiliar. I’ve heard the podcasts, read the discussion, I’ve read Zeldman’s book a couple of times now, and when I think about it all my head hurts a little for those people who are just finding web standards for themselves. People take way too long explaining what web standards means. It’s about accessibility, useability, semantic markup, blah blah blah… yep, it’s all those things, but in a nutshell, what is it? What’s the starting point, the springboard for beginners? It’s simply separating your content, your design, and your behavioral aspects of your site. So I drew this out…
Version One
DOWNLOAD A PDF to share with clients, friends, etc.
Conditions for use:
- You may not profit from the use of this diagram in any way
- You must leave the image intact, title, photo, credit info, etc.
This means you may not use it on a corporate/commercial website or remove my name from it, change the title, or otherwise imply that it is your creation (a few have asked). Please only use this for educational purposes.
Version Two
At the request of a number of readers, I brought back the second version, which is a little more than you might need, but for some people it was helpful in explaining why the situation in the first diagram is so cool.
I feel like saying “marry me” or something. This is amazing. Just perfect. Can I yoink this and bring it to every client meeting for the rest of my life?
MAJOR props!!
Hey, I’m happily married, but you can print it. :) I actually just posted a PDF for you, so enjoy!
You know, a general question a person could ask themselves… which one does their site look like and which would they like it to look like? On the left is what ALOT of sites look like these days, but the right is what a lot of the great sites look like. You can tell a good designer when you see that clean code.
That’s a brilliant diagram. Yeah, I think that sums it up nicely.
Hehe, yeah, my words were a tad strong up there. But really, this diagram brings me incredible joy. :D
Great diagram. I think it really explains the standards approach. I’d want to follow this up by further explaining why this is a good thing for business clients (I can hear a lot of them saying ‘so what’ without this further explanation). Nice site redesign btw.
Clive, you’re so right about the ‘so what’ – I’ve run into the same thing with marketing agencies who provide web design services. Most I’ve seen tend to concern themselves with how quickly a job can be done and less with the quality of the site altogether, whether in the design or in the code. Many business, whether on the client side or the provider side have a lot to think about when running a business. What I try to get across when talking to people about standards is that it’s really so much simpler than they think, and it can even be much faster than they imagine in the long run to put out the mumbled up messes they were putting out pre-standards.
I also think in the cocoon of web design bloggers we tend to over talk standards to where it becomes this huge and intimidating prospect for mainstream designers, and that’s a shame, because it just shouldn’t be.
i want to send “spam” this to all the webdesign and marketing agencies who have fired me, because they dont understood me.thanks for sharing Fight the Tag soup! greetings from germany tea
I will put it on my t-shirt. Hmm, I’ve got a better idea:I’m gonna tattoo this on my back!!! The chest is already occupied by “I {heart} CSS”! x-)Thank you so much, really.
Oh man… It’s amazing that noone has thought about presenting it like this in the past. If they have, where are they hiding?
It really makes the concept very easy to understand! Perhaps now I can convince the team here that CSS and standards aren’t an evil addition to “something that works and doesn’t need changing”.
Thank you
A great way of explaining why web standards.
You might want to add a couple of extra “pages” to each side, so it is really obvious of the advantages.
I think you’ve explained web standards in one of the easiest ways I’ve ever seen.
Congratulations – this is fantastic! It’s saved me about 5 minutes of my time explaining this to a new junior developer!
Brilliant Natalie – well done!
Cute. But this isn’t really standards – the separation (which you’ve conveyed really nicely) of html, javascript and css can just as easily be non-standards-compliant. (And tends to be.)
Can you come up with an equally compelling illustration for standards?
@xtian: go for it!
Fantastic visualisation! Often a very difficult concept to push (standards), however this approach speaks volumes over any rant/literature.
Look forward to seeing more of your work,
James
Simple, yet vital explanation of what web standards can do. The online world and those making decisions about what goes on to it needs more of this education!
Very well designed form. I’ve had the trouble of explaining it myself and this supercedes it many times over. I have to admit that when coming to this link, I was going to be reading a hefty, long article, but found a simple and brilliant visualization. I think this easily speaks a thousand words.
That’s a very nice diagram, thanks for sharing. I would like to add though, as some others have mentioned as well, that an important question which doesn’t get answered by this diagram alone is: what does using standards mean for your clients?
Of course it will be difficult to come up with a better single picture which would explain everything. But a comparison I like to make is to other standards. Take for example the parts of your car. The battery. How would it be if a battery you bought wouldn’t be according to the standards? It would be hit and miss. You wouldn’t know if it would fit. You wouldn’t know if it would last. If it would work at all.
And it’s the same with webstandards. Nothing complicated.
@Matthijs: Isn’t that your job? The diagram is not meant to be the final explanation of web standards but a supplemental tool to use while YOU explain the benefits further. Clients aren’t going to care how you separate your code, just that their site does what it’s supposed to. The best explanation I think that goes with the diagram is to explain how much they’ll save in maintenance time and costs because they could now change a single line in one CSS file and change the entire website.
Natalie: yes it is :) It was just a general remark, I was not critizising the diagram. You are correct to say that for most people saving maintenance time and costs is the most important thing.
:) I just realized how harsh I was there (sorry). I understood what you meant and I meant my reply to be more tongue in cheek than it came out. Forgive me.
Whoa! This is exactly what was going through my head less than a week ago, when I was thinking about how I could explain to clients the difference between tag soup and standards-oriented design. I had a visual aid in mind that was almost exactly like this.
You’ve done a great job of making this simple and useful. Version 2 is particularly good for having started to hint at why the illustrated separation is important.
I only have a couple of minor suggestions for how this might be improved as an educational tool:
First, you might put the text on the right side of your legend in parentheses, in order to better show that it’s an explanation or clarification of the text on the left side of the legend.
Second, consider trading out the word “Content” for the word “Markup” in your legend. This brings that term much closer to the others in its level of descriptiveness and abstraction. After all, semantic markup is content.
Hi Natalie
Great Job. I am blogging this with a link to your site if you don’t mind.
that that is beauty.
That is beauty times ten. Plus six. To the power of awesome.
Great stuff. Quite often this general level stuff is ignored so hats off for putting this up. You’re right its probably the core first thing to get settled in someone’s head and is often put over in far too complex ways… :)
I can’t see a third of your site because of massive horizontal scroll :( .. Standards? mm. How about some consideration for res/window size? Thanks.
Simply brilliant! I know that feeling when you aren’t even close to explaining the benefits to a client or colleague. This is a great starting point!
Brilliantly simple! I’m printing this as I type, and gonna stick it next to our company webmaster’s desk (he still doesn’t get WHY tables are bad for layout… sheesh).
Ohh and I love when I see “obvious” stuff like this (I’m not saying it’s obvious, it’s inspired!)… there is always someone who was ‘just’ thinking exactly the same thing. What a small world.. so many coincidences… heh.
Thanks for sharing this, very generous of you.
I typed out a long message, and accidentally closed the tab before submitting. I was just sharing how I intended to use the poster. Anyhow, it probably wasn’t worth reading. Thank you very much for your help.
This cannot have been explained simpler, more vibrantly and clearer. I believe, simplicity is “most of the time” an indicator of perfection.
I will take a copy of it and show it to my dumb-headed clients (not all of my clients are dumb, but some still think they are in the era of NS3.x where markup, style and script of any kind must be mixed to create a pixel-perfect and decent look ‘n feel)
Thanks a lot!
I think Edward Tufte would approve of that illustration.
“Good design is clear thinking made visibile.” Indeed.
I see. Web standards is like Tetris.