How to Grok Web Standards

by Craig Cook

34 Reader Comments

Back to the Article
  1. Since I have an engineering background I must say that some (not all) engineers do think like artists. But it’s not the visual beauty, but the beauty of the code they are interested in. And that’s a bit missing in this article. Your HTML and CSS code of course should be structured and standards compliant. And of course the visual representation has to look good and comply to usability standards.

    But to accomplish maintainable code you also have to find the right names for your CSS classes, you have to use the right indentation, find the right mixture of minimizing code and keeping it simple. That’s the beauty of code.

    Copy & paste the code below to embed this comment.
  2. Klaus, many web sites do not need maintainability. Yeah, you need some kind of content management system for big websites. But if you write an individual article it’s more “fire and forget”. You are not doing software engineering.

    Copy & paste the code below to embed this comment.
  3. This is a great article, but I think that a lot of ALA readers (if they’re like me) will overestimate their proficiency at web design.

    When you’ve got an article like this one, it’s worth reading it a few times, and even if you *know* you already do think like a writer, engineer and artist, see if you can justify that to yourself with this article.

    More importantly, see if this article suggests anything you don’t do, and try to justify to yourself that you don’t need to do those things.

    From my experience at least, not enough people are prepared to question the way they approach problems, and end up a bit stale

    Copy & paste the code below to embed this comment.
  4. Absolutely wonderful article. Argues subtly for the power of web standards whilst giving encouraging advice for how to do it in a personally rewarding way. Wonderfully written, thank you.

    Copy & paste the code below to embed this comment.
  5. …was my first thought reading this. This is probably the article I’ve enjoyed most on ALA for a while. It brilliantly captures both the challenge of web standards in the right-brain + left-brain thinking it requires, and the immense satisfaction which mastering this can bring over older, clunky, “ugly” ways of doing things.

    Klaus is spot on about the ‘beauty’ of code. Good programmers – like good designers – 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.

    I don’t think it is likely to inspire the 9-5er whose main job satisfaction derives from having an easy life to mend their WYSIWYG table layout ways. But hopefully it will encourage those new to web standards, who are inspired by the desire to do their work better, to persevere, knowing the ultimate rewards will be worth it.

    Copy & paste the code below to embed this comment.
  6. A very good read. I have read other articles discussing the same subject but this is certainly one of the better one’s. Sadly I’ve never seen an article that tries to explains the reverse: teaching proper design to someone from an engineering background. All the great articles seem focussed on webdesigners coming from a graphic design background.

    Copy & paste the code below to embed this comment.
  7. Sophie (5) – You read my mind with your message title, and in fact the words used in your comments too. Couldn’t agree more.

    This truly is an incredible read. I am fairly new to web standards and I can tell you that I am most certainly encouraged by this article.

    I was inspired enough by web standards before reading this article, but I’m even more so now. Absolutely superb. Thank you Craig and A List Apart.

    Copy & paste the code below to embed this comment.
  8. “Artists craft transformative experiences through the interpretation of beauty”?. Hmm, what century are we talking about?

    Copy & paste the code below to embed this comment.
  9. I’ve tried several times in conversation to encapsulate all the different roles we as web designers must fulfill, and you have absolutely hit the nail on the head. Excellent article, very well written.

    Copy & paste the code below to embed this comment.
  10. I’ve been juggling the three roles of writer, engineer, and artist in my web development. I’ve still not “grokked” the balance of the three, but this article explains exactly what I’ve been trying to achieve.

    An excellent read—typical of ALA’s superb content. Thanks Klaus!

    Copy & paste the code below to embed this comment.
  11. Beautiful article. Not only the ideas expressed, which demonstrate the unique synthesis of roles a web designer plays, but artfully written as well. Thank you for the lovely contribution to a sometimes overly sterile industry.

    Copy & paste the code below to embed this comment.
  12. I think, your article show one way, but I miss two things:

    - Think like an visitor (also persons with disabilities)
    – Different browsers, screen resoultion (96dpi/120dpi) and operating systems

    If I add these two things to your thinking “writing, engineering and artistry”, so I get a new sight about Web Standards. Many things can be done on a site, if all work together. But most site owner don’t think so, they don’t have the brain, time and the money.

    Aside from that, really good article.

    Copy & paste the code below to embed this comment.
  13. Beautifully written, I think you’ve done a marvelous job of expressing how a truly good designer really works.  I’m not quite there yet myself but it’s certainly something to aspire to, and I hope your article and others like inspire others to walk the same path I’m currently travelling to end up as excellent designers.

    Matthias:
    I’d say that’s something that the engineer in us should ideally already be considering.  An engineer designs a tool to not only be sturdy, extensible and up to the task at hand, but also to be usable.

    Copy & paste the code below to embed this comment.
  14. Enjoyed reading.. great writing, clear, concise, just wonderful.

    “Those rounded corners and drop-shadows are easy to render in Photoshop, but if you’re not sure how to accomplish them with clean markup and CSS, you may want to rethink them.”

    I kind of struggle with this notion, personally. I hit a long dry-spell recently where I could not tap into my creative side. Stress had a lot to do with it, but I think an equal amount had to do with the looming task of coding the particular designs hindering my ability to think freely.

    I do think I have reached a point where I can forget about the CSS/XHTML when I’m in Photoshop/buried in sketches, while still maintaining a reasonable understanding of the code required beneath.

    Sometimes I just throw it out the window and come up with some great stuff. I guess it just comes down to practice and trial-and-error.

    Copy & paste the code below to embed this comment.
  15. This goes right along with Andy Clarke’s book, Transcending CSS. I feel somewhat liberated as a designer, but we still have to get our clients to cooperate. We are WAY ahead of them with all of this.

    Copy & paste the code below to embed this comment.
  16. My favorite personal analogy for a web site it the car. The first order of business is to decide what kind of car you’re gonna build (writer), then engineer the frame and engine to match that spec (engineer). Only then do you decide what color to paint the body (artist).  Starting with the look of a web site is like starting to build a car by saying “It’s gonna be red”.

    Copy & paste the code below to embed this comment.
  17. This is the best article on ALA in quite a while. Not only accurate and helpful, but also very well written. Thanks Craig!

    Copy & paste the code below to embed this comment.
  18. I like it – but I’d start first with what kind of eyeballs you want to attract in your new car (strategic marketing), then pick the car and options (writer and optimizer), then the inner bits to spec (with the engineer). The artist has to be there early imo so s/he can beautify the ins and outs of your new wheels, and not just add on flames after it’s basically finished. Speaking of, I’ve a feeling this site had lots of design influence… and excellent usability indicates a commingling of disciplines.

    Just to echo others, great article btw.

    Copy & paste the code below to embed this comment.
  19. wow, this and the whitespace article too? i love it…

    Copy & paste the code below to embed this comment.
  20. I also agree with Fantastic Read. One of the best articles I have read on here. Havent read them all yet but getting close. :)

    Copy & paste the code below to embed this comment.
  21. 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.

    Copy & paste the code below to embed this comment.
  22. 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).

    Copy & paste the code below to embed this comment.
  23. 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.

    Copy & paste the code below to embed this comment.
  24. 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…

    Copy & paste the code below to embed this comment.
  25. 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

    Copy & paste the code below to embed this comment.
  26. 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.

    Copy & paste the code below to embed this comment.
  27. 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.
  28. 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.
  29. 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.

    Copy & paste the code below to embed this comment.
  30. 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.
  31. 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.

    Copy & paste the code below to embed this comment.
  32. 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?

    Copy & paste the code below to embed this comment.
  33. 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.

    Copy & paste the code below to embed this comment.
  34. 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

    Copy & paste the code below to embed this comment.