The first and most important step to all of this is thinking. Without it thinking like a writer, engineer or artist is impossible (obviously).
Cook has written this article well enough that he has helped most readers take that first step. Unfortunately, as Gareth “commented”:http://www.alistapart.com/comments/grokwebstandards?page=1#3, not everyone will allow themselves to think and question—that’s their loss.
This is one of the best articles that I have seen on how to approach standards-based design and is my new favorite on ALA.
I consider myself a more traditional graphic designer and work on projects for clients that manifest both in print and online as well as putting together many self-initiated bits and bytes. I really related to this article because, in flipping between the various disciplines, I always have a mixture of dread and excitement having to come back to designing for the online environment.
I believe the reason lies within your article. So often online or web design asks graphic designers to step away from a lot of what they have learnt and hold dear. The things that graphic designers believe make design an inclusive and expressive form of communication. Designing for the web often asks a designer not to design. It takes away many of the creative tools we use to communicate effectively with our distinctly varied audiences.
This article is great in that it goes a long way to helping a more traditional graphic designer get their head around what designing for the online environment entails but it also serves to highlight why so many designers feel excluded. And these are the people that can potentially make the web more attractive, more ‘readable’ and ultimately more accessible for all (or at least tailored to your intended audience).
Regarding the car analogy in the comments: I can see where you’re coming from, but having an idea in your head that you want the car to be red should not have any kind of effect on the engineering side of it.
If I want it to be red, it could still be a car or a truck or a bike of any specification.
On topic: This was a great read. I couldn’t agree more with the article. Hopefully people learn something from this.
the consideration of multiple perspectives in design is a central tenant of a holistic approach to design. nice to see an article advocating what is basically a systemic approach to design…
thanks ala, far more interesting than rattling on about accessible form styling…
My english is very poor.but i’m a web standards advocacy,and designing with web standards had ten month.This article is very good,i want to translate it and write into my blog.Thanks Craig Cook,Thanks ALA.hehe
Just today I had to take a disaster of a page template that was designed by my clients designer and rebuild it with XHTML/CSS. It was a nightmare of tables, font tags, etc. I will be forwarding her this article.
A German translation of this beautyful article is published in my “Weblog”:http://weblog.ononlinework.de/webdesign/webstandards-verinnerlichen-how-to-grok-web-standards/ and on “webkrauts.de”:http://www.webkrauts.de/2007/01/30/webstandards-verinnerlichen/
Eine deutsche Ãœbersetzung des Artikels findet ihr unter den oben angegebenen Links.
Copy & paste the code below to embed this comment.
Peg Marson
I’m an elder, and a visual artist, and have been approaching web technology with great ambivalence. I sense the possibilities and need to develop these skills professionally, and yet experience massive frustration – mostly due to my inability to grok the semantics.
I’m grateful for this inspiring article, which not only suggests the beauty and power of mastery – in language that speaks to my visual process – but also actually gives some context for terms and acronyms that younger folks seem to take for granted.
Most of my conversations with computer-savvy youth, and most of what I have read, assume that I already have the basic vocabulary down, and launch from there. This leaves me with no comprehension, and no chance of formulating meaningful questions. I have so far found very little entry into the land of computer jargon, and forbidding roadblocks on those occasions I have struggled to get in.
Travel to classes is a problem for me. Can any reader suggest a well-written resource that could help me bridge the language gap? I’m thinking of something like “Computer Terms for the Aged” or “Modernizing Your Antiquated Brain.” I need something that assumes no background, takes small steps, and gives examples.
Copy & paste the code below to embed this comment.
Johan van der Meer
I’m trying to create a web page for my own purposes. It should have something to put updates on, a poll, and something to write articles on, and something to add viewers.
After trying mambo, drupal, php-nuke I came to the conclusion that i’d rather build my OWN website without resorting to someone else’s standards. I got discouraged by the immense complexity needed to create a layer for users to do their site-building in. Besides, it’s for those people who rather would have a site really quick-like and not bother with doing any programming. I like my site simple, with so much code as is necessary, and is sufficient.
It is very funny, for when creating my website, I now work in about 5 different files, and each file is about a single aspect of the site. Naming conventions become incredibly important.
I thought i’d learned alot already, but i am really just at the very beginning.
I totally agree with the viewopints. Even the good programmers instinctively understand the union of meaning, structure and artistry Craig is talking about. To a really good programmer maintainable code is, in itself, a work of art and there is an inherent satisfaction in sitting back and saying “I made that”?. I doesn’t matter if, as in Johan’s example, in this particular instance maintainability is perhaps not the most important thing. They find professional satisfaction in a job well done.
Copy & paste the code below to embed this comment.
Ron Evans
I’m currently learning CSS, Web Standards and this whole new way of thinking. I do admit that I still am trying to get my head around all of it.
Maybe after learning it so deeply I’ll ‘see the light’. Having said that it seems we have gone to the other extreme. Seeing the way we use <div>s and <ul>s today looks no different from the way we were using tables before.
If we will be honest with ourselves we must admit that SEMANTICALLY an unordered list was meant for a list of bullets in text, not a NAVBAR. (Admit it!)
Also, that whole line of thinking is flawed, “X element was never meant for design…” with that thinking we should all be writing research papers and military communications since that is what the Internet was built for.
I’m not saying lets go back to all those ridiculous tables within tables, but since when was following all the rules the best policy? In the article artists, writers and engineers are mentioned.
These things (built by artists, writers & engineers) would not exist under the current CSS/Web Standards ascetiscism:
Salvadore Dali
Jackson Pollick
William Faulkner
Stephen King (M-O-O-N, that spells web standards!)
A Clockwork Orange
Jazz Music
Watership Down (Rabbits we’re never meant to talk)
Frank Gehry (Buildings should be boxy!)
Apple Macintosh Computers
Hip Hop Music
Jimi Hendrix (Guitar feedback is NOT music; semantically speaking)
The list could go on and on…
If the goal is cleaner code, accessibility, and all that fine, but by any means necessary. Who knows what type of discoveries we are missing out on by forcing ourselves to only use the web as it was meant to be used. We should embrace finding new uses for old things. Otherwise all of us web designers should find new jobs because semantically the Internet is not meant for the work we do.
Copy & paste the code below to embed this comment.
graham stuart
The original article is without doubt one of the best I have read on the mental shift involved when moving from print based to web based design. With dual skills in copywriting and graphics I was coming to these conclusions but had not expressed them so clearly.
However, the tendency for coders to dismiss graphics as mere “decoration” and therefore ephermeral to content also needs to be challenged head on. Graphics is not about making things “pretty”, it is about visual communication. The medium directly affects the way the message is delivered and whether it is effectively delivered at all. So issues like layout and juxtaposition, the realtionship between text and graphics, as well as detailed styling all affect the way the way something is read and absorbed. Even issues as apparently “decorative” as color choice have solid psychological theory behind them which is used to shape the total experience and target particular personality types. Visual cues actualy “say” things to the human brain which affects the total perception of what is being said.
Don’t flame me about “accessibility”, I know well and accept that not everyone has access to these visual cues, so there are other cues that need to be used too for effective communication. Hence the advantages of separating out content from presentation, at least as a procedural exercise. But the point stands that graphics is not just about slapping a coat of paint on an otherwise finished project.
To use an organic metaphor for a change; writers inject flesh and blood into the project, engineers build the bones of the informational entity, but it is via the skin and the facial expressions that the message is actually delivered. This is where designers come in.
Yes, designers must be flexible and adpatable in their approach, able to get inside different kinds of skin (different user agent types). And yes, the design principles should serve the semantics and the content rather than impede them. But that should be a two way street. The separation of content from presentation is methodologically useful but entails the cognitive danger of thinking that content + sematics IS the message. It isn’t, any more than a living body is jsut a skeleton with muscles and nerves.
Unfortunately not all the currently available code tools are suited to the third partner in the information delivery process. I fully appreciate the desire for “beautiful” code, but coders must understand that elegant code does not automatically create elegant and effective layout.
This lack of understanding on the part of many code developers is probably why, as the prevous poster points out, we are having to bend inadequately constructed tools (floating divs, display: inline for menus, endlessly fiddled margins and padding to overcome unpredicatble “collapsing border” rules…) to do things that should be quick and straightforward and which are truly necessary for effective viusal communication. The web is not just a textual medium. It began as that, but like it or not it is now very firmly a MULTI-media public space and will become even more so, because that is how modern humans communicate.
Just because code rules may seem Platonically perfect does not mean that they are ideally suited to the real world. The synergy between content, semantics and design needs to work in all three directions. I’m gradually getting there from my starting point. Is anyone making the effort to move in the other direction?
If you cannot do the first option, you can consider this another option as well as hiring dedicated live chat operators from outsourcing companies in India. You can try out FREE 90 days “Auto Chat System” from http://www.EmailChatSupport.com
34 Reader Comments
Back to the ArticleBen Spaulding
The first and most important step to all of this is thinking. Without it thinking like a writer, engineer or artist is impossible (obviously).
Cook has written this article well enough that he has helped most readers take that first step. Unfortunately, as Gareth “commented”:http://www.alistapart.com/comments/grokwebstandards?page=1#3, not everyone will allow themselves to think and question—that’s their loss.
This is one of the best articles that I have seen on how to approach standards-based design and is my new favorite on ALA.
Michael Bojkowski
I consider myself a more traditional graphic designer and work on projects for clients that manifest both in print and online as well as putting together many self-initiated bits and bytes. I really related to this article because, in flipping between the various disciplines, I always have a mixture of dread and excitement having to come back to designing for the online environment.
I believe the reason lies within your article. So often online or web design asks graphic designers to step away from a lot of what they have learnt and hold dear. The things that graphic designers believe make design an inclusive and expressive form of communication. Designing for the web often asks a designer not to design. It takes away many of the creative tools we use to communicate effectively with our distinctly varied audiences.
This article is great in that it goes a long way to helping a more traditional graphic designer get their head around what designing for the online environment entails but it also serves to highlight why so many designers feel excluded. And these are the people that can potentially make the web more attractive, more ‘readable’ and ultimately more accessible for all (or at least tailored to your intended audience).
Steve Dennis
Regarding the car analogy in the comments: I can see where you’re coming from, but having an idea in your head that you want the car to be red should not have any kind of effect on the engineering side of it.
If I want it to be red, it could still be a car or a truck or a bike of any specification.
On topic: This was a great read. I couldn’t agree more with the article. Hopefully people learn something from this.
martin ford
the consideration of multiple perspectives in design is a central tenant of a holistic approach to design. nice to see an article advocating what is basically a systemic approach to design…
thanks ala, far more interesting than rattling on about accessible form styling…
yongming zhao
My english is very poor.but i’m a web standards advocacy,and designing with web standards had ten month.This article is very good,i want to translate it and write into my blog.Thanks Craig Cook,Thanks ALA.hehe
Casey Woods
Just today I had to take a disaster of a page template that was designed by my clients designer and rebuild it with XHTML/CSS. It was a nightmare of tables, font tags, etc. I will be forwarding her this article.
Stefan David
A German translation of this beautyful article is published in my “Weblog”:http://weblog.ononlinework.de/webdesign/webstandards-verinnerlichen-how-to-grok-web-standards/ and on “webkrauts.de”:http://www.webkrauts.de/2007/01/30/webstandards-verinnerlichen/
Eine deutsche Ãœbersetzung des Artikels findet ihr unter den oben angegebenen Links.
Peg Marson
I’m an elder, and a visual artist, and have been approaching web technology with great ambivalence. I sense the possibilities and need to develop these skills professionally, and yet experience massive frustration – mostly due to my inability to grok the semantics.
I’m grateful for this inspiring article, which not only suggests the beauty and power of mastery – in language that speaks to my visual process – but also actually gives some context for terms and acronyms that younger folks seem to take for granted.
Most of my conversations with computer-savvy youth, and most of what I have read, assume that I already have the basic vocabulary down, and launch from there. This leaves me with no comprehension, and no chance of formulating meaningful questions. I have so far found very little entry into the land of computer jargon, and forbidding roadblocks on those occasions I have struggled to get in.
Travel to classes is a problem for me. Can any reader suggest a well-written resource that could help me bridge the language gap? I’m thinking of something like “Computer Terms for the Aged” or “Modernizing Your Antiquated Brain.” I need something that assumes no background, takes small steps, and gives examples.
Johan van der Meer
I’m trying to create a web page for my own purposes. It should have something to put updates on, a poll, and something to write articles on, and something to add viewers.
After trying mambo, drupal, php-nuke I came to the conclusion that i’d rather build my OWN website without resorting to someone else’s standards. I got discouraged by the immense complexity needed to create a layer for users to do their site-building in. Besides, it’s for those people who rather would have a site really quick-like and not bother with doing any programming. I like my site simple, with so much code as is necessary, and is sufficient.
It is very funny, for when creating my website, I now work in about 5 different files, and each file is about a single aspect of the site. Naming conventions become incredibly important.
I thought i’d learned alot already, but i am really just at the very beginning.
design development web
I totally agree with the viewopints. Even the good programmers instinctively understand the union of meaning, structure and artistry Craig is talking about. To a really good programmer maintainable code is, in itself, a work of art and there is an inherent satisfaction in sitting back and saying “I made that”?. I doesn’t matter if, as in Johan’s example, in this particular instance maintainability is perhaps not the most important thing. They find professional satisfaction in a job well done.
Ron Evans
I’m currently learning CSS, Web Standards and this whole new way of thinking. I do admit that I still am trying to get my head around all of it.
Maybe after learning it so deeply I’ll ‘see the light’. Having said that it seems we have gone to the other extreme. Seeing the way we use <div>s and <ul>s today looks no different from the way we were using tables before.
If we will be honest with ourselves we must admit that SEMANTICALLY an unordered list was meant for a list of bullets in text, not a NAV BAR. (Admit it!)
Also, that whole line of thinking is flawed, “X element was never meant for design…” with that thinking we should all be writing research papers and military communications since that is what the Internet was built for.
I’m not saying lets go back to all those ridiculous tables within tables, but since when was following all the rules the best policy? In the article artists, writers and engineers are mentioned.
These things (built by artists, writers & engineers) would not exist under the current CSS/Web Standards ascetiscism:
Salvadore Dali
Jackson Pollick
William Faulkner
Stephen King (M-O-O-N, that spells web standards!)
A Clockwork Orange
Jazz Music
Watership Down (Rabbits we’re never meant to talk)
Frank Gehry (Buildings should be boxy!)
Apple Macintosh Computers
Hip Hop Music
Jimi Hendrix (Guitar feedback is NOT music; semantically speaking)
The list could go on and on…
If the goal is cleaner code, accessibility, and all that fine, but by any means necessary. Who knows what type of discoveries we are missing out on by forcing ourselves to only use the web as it was meant to be used. We should embrace finding new uses for old things. Otherwise all of us web designers should find new jobs because semantically the Internet is not meant for the work we do.
graham stuart
The original article is without doubt one of the best I have read on the mental shift involved when moving from print based to web based design. With dual skills in copywriting and graphics I was coming to these conclusions but had not expressed them so clearly.
However, the tendency for coders to dismiss graphics as mere “decoration” and therefore ephermeral to content also needs to be challenged head on. Graphics is not about making things “pretty”, it is about visual communication. The medium directly affects the way the message is delivered and whether it is effectively delivered at all. So issues like layout and juxtaposition, the realtionship between text and graphics, as well as detailed styling all affect the way the way something is read and absorbed. Even issues as apparently “decorative” as color choice have solid psychological theory behind them which is used to shape the total experience and target particular personality types. Visual cues actualy “say” things to the human brain which affects the total perception of what is being said.
Don’t flame me about “accessibility”, I know well and accept that not everyone has access to these visual cues, so there are other cues that need to be used too for effective communication. Hence the advantages of separating out content from presentation, at least as a procedural exercise. But the point stands that graphics is not just about slapping a coat of paint on an otherwise finished project.
To use an organic metaphor for a change; writers inject flesh and blood into the project, engineers build the bones of the informational entity, but it is via the skin and the facial expressions that the message is actually delivered. This is where designers come in.
Yes, designers must be flexible and adpatable in their approach, able to get inside different kinds of skin (different user agent types). And yes, the design principles should serve the semantics and the content rather than impede them. But that should be a two way street. The separation of content from presentation is methodologically useful but entails the cognitive danger of thinking that content + sematics IS the message. It isn’t, any more than a living body is jsut a skeleton with muscles and nerves.
Unfortunately not all the currently available code tools are suited to the third partner in the information delivery process. I fully appreciate the desire for “beautiful” code, but coders must understand that elegant code does not automatically create elegant and effective layout.
This lack of understanding on the part of many code developers is probably why, as the prevous poster points out, we are having to bend inadequately constructed tools (floating divs, display: inline for menus, endlessly fiddled margins and padding to overcome unpredicatble “collapsing border” rules…) to do things that should be quick and straightforward and which are truly necessary for effective viusal communication. The web is not just a textual medium. It began as that, but like it or not it is now very firmly a MULTI-media public space and will become even more so, because that is how modern humans communicate.
Just because code rules may seem Platonically perfect does not mean that they are ideally suited to the real world. The synergy between content, semantics and design needs to work in all three directions. I’m gradually getting there from my starting point. Is anyone making the effort to move in the other direction?
Ankur Patel
We offer you a 90 days trial period for the use of this application. After the trial period it will cost yowill be only $3.99 per month.
Ankur Patel
If you cannot do the first option, you can consider this another option as well as hiring dedicated live chat operators from outsourcing companies in India. You can try out FREE 90 days “Auto Chat System” from http://www.EmailChatSupport.com