Many web designers, myself included, come to the web with a background in the graphic arts. We think in pictures, not in code. When we first begin designing for the web, we’ll use HTML and CSS crudely, as a means to an end—a method of arranging pretty boxes in space—without grasping the true nature of the box itself or what it contains. Altering that strictly visual mentality is the highest hurdle to overcome when a graphic designer first dives into semantics and web standards. For the visual designer, really understanding web standards means you’ll have to change the way you think about design.
The word grok comes from Robert A. Heinlein’s Zen-hippie science fiction opus Stranger in a Strange Land. It’s a verb from the Martian language that means something along the lines of “to understand completely.” To grok something is to achieve a deep, intuitive comprehension of it. To truly “get” web standards, you have to understand them as more than a means to an end, more than simply an alternative method of producing a visual design.
To grok web standards, a visual designer has to modify the way his or her brain works and remap those imaginative neurons along new pathways. You can’t channel your creative energy solely into the appearance of your web pages without thinking about their underlying structure. Presentational thinking leads to presentational web design, to the detriment of your content. Instead, you must also learn structural thinking to support that content and let it live unfettered. As a standards-savvy web designer, you must diversify your approach to design problems, becoming equal parts writer, engineer, and artist.
Think like a writer#section2
Writers trade in ideas, using words as tools to lend those intangible thoughts just enough mass that they can be transported into the mind of the reader. The substance of a word is woven from layers of meaning: definitive, connotative, contextual, and subjective. A writer must understand what words mean on multiple levels and choose the words that will best communicate the idea.
Semantics is the study of meaning in language. Web standards advocates have borrowed the term from human linguistics and applied it to computer markup languages. Every element in HTML carries an inherent meaning and purpose, which it passes along to the content within it. The semantic value of your markup should align with the semantic value of your content.
To understand semantics in web design, think like a writer. Discern the meaning and purpose of your content, the gist of the concept you’re trying to get across. Then use markup tags as you would use words, choosing the right ones to communicate your ideas.
For example, a heading acts as a title to introduce a section of content. HTML provides us with elements designed specifically for this purpose, so headings should be marked up as headings. It’s just that simple. Consider the importance of that heading in the context of the document and assign it the appropriate rank: h1 for the most important heading, h2 for a slightly less important heading, and so on. Don’t worry about what it looks like or how large the type is—that’s presentational thinking. Think like a writer and concentrate on meaning.
If a writer chooses the wrong words their ideas become incomprehensible to the reader. Similarly, when the meaning inherent in a portion of web content and the meaning inherent in the tags wrapped around it don’t match up, it’s the idea that suffers. Tables are wrong for page layout not only because they’re code-heavy and hard to maintain, but also because a table doesn’t semantically fit that concept. It’s a poor choice of words. When you understand that, using a table to lay out your page isn’t really a viable option.
Writing semantic markup requires an understanding of both the content and the markup that delineates it. You’re reading real words, not looking at pictures of word-like objects. Give content the respect it deserves by wrapping it in meaningful markup. Paragraphs should be paragraphs, lists should be lists, and tables should be tables. When you think like a writer, authoring semantic markup is elementary.
Think like an engineer#section3
Engineers create structures and devices that have to meet certain criteria, perform certain functions, and serve certain purposes. Seams must stay together, walls must remain upright, gears must mesh and turn. An engineer will explore the problem and devise an efficient solution, then select the parts and materials that will hold up under the strain of use. They will consider consequences and anticipate potential difficulties, taking steps to prevent disastrous failure.
When you construct a web document, think like an engineer. Your inner writer has selected an element because it has a certain meaning, while your inner engineer must consider the mechanics of that element and the structural integrity of the document it resides in. Markup gives content added meaning, but it also braces that content for use, gives it a supporting structure so it can do real work.
Imagine HTML elements as component parts, each with its own built-in function, which can be assembled and connected to form a greater functional device. The parts must fit together properly, with a place for every tag and every tag in its place, or else the thing won’t perform the way it’s supposed to, if it performs at all. Standardized specifications are the instructions for assembling web documents. Adhere to the standards, validate your markup and CSS, and fix serious errors before the whole thing collapses.
Understand markup as a framework to support your content. Know what each part does and how they work together. When your document is properly assembled you can lay a decorative coating of style on top of it without damaging its inner workings. CSS lets you modify the placement and appearance of elements while their intrinsic meaning and structure remain intact. Think like an engineer and assemble your web documents like a solid working machine.
Think like an artist#section4
Artists craft transformative experiences through the interpretation of beauty. They are inspired by the world around them and want to spread that inspiration to others. The design of a website is a vital facet of its usefulness, communicating ideas and relaying information in an attractive and intuitive way.
Visual designers already have the artsy thing down. Thinking in pictures comes naturally to us; it’s not something we force ourselves to learn. But the web is not strictly a visual medium, it’s a textual one, something meant to be read and used, not only looked at.
When you design for the web, first think like a writer and an engineer and then begin thinking like an artist. Appeal to the senses of your sighted viewers with color, typography, spatial arrangement, and imagery, but leave the content structure unsoiled and the markup undamaged. Separating presentation from content and structure allows your inner artist to do his thing without stepping on the toes of the writer and engineer.
If at first you find CSS restricting your creativity then you probably just need to learn more about CSS. Designing with CSS is no more difficult than designing with the presentational markup you may be used to; it’s merely a different set of tools. It’s a much better set of tools, in fact, specifically designed for the task. Learn CSS, figure out how it works and what it can do, read books and ask questions. Above all, experiment. In time you’ll be comfortable with the CSS tool kit and intuitively know which property to reach for when you want to achieve a particular effect.
You’ll also learn what can’t be accomplished easily with CSS and, like an engineer, you’ll spot those obstacles early on and adjust your design accordingly. Every medium has its limits and any artist learns to embrace those constraints, using the medium itself as yet another outlet for creativity. Thinking like an artist will help you find creative solutions to visual problems.
Merging mentalities#section5
These three disciplines—writing, engineering, and artistry —are not so different from one another. Each demands creative problem solving, and though each suggests a slightly different angle of attack, the target remains the same. Cultivate these aspects of your personality, giving each one independent attention. When you’re able to think easily in all three modes one by one, you will soon find yourself thinking in all three simultaneously. The writer, engineer and artist overlap and merge, Voltron-style, to form The Designer.
Making the mental shift from presentational thinking to structural thinking will likely trigger some changes to your creative process. To think like a writer, try starting with an outline of your content before you even doodle your first thumbnail. List everything that will eventually be displayed on the page, from logo to copyright notice, and group related things together in meaningful portions. Take the time to understand your content, even if that means actually reading it. Understand the ideas you’re communicating and you’ll be better prepared when you start drawing it out.
As you’re arranging those chunks of information into a visually appealing design, think like an engineer and plan the sequence of elements in your markup and which CSS properties you’ll be using to affect their presentation. 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. Plan your construction as you’re planning the experience and you’ll be better prepared to translate a picture of a web page into a real working web page.
When you’re intimately familiar with the languages we use to build websites, your inner artist will be free to create. When your engineer knows how to construct boxes with rounded corners without trampling over your writer’s meaningful words, your artist can depict them when needed with nary a twitch of trepidation. You’ll draw pretty things and know by instinct how to execute them and imbue them with semantic fortitude. The three mentalities collaborate internally to produce something eloquent, sturdy, and beautiful.
When you hack your brain to grok web standards, you will enfold their essential spirit into your world-view. You can still think like a designer—thinking in pictures instead of code—but your pictures will become more practical. You’ll envision your page design as more than an aesthetic arrangement of decorated boxes, you’ll see it as a poetic mechanism built from meaningful components.
Molding the web experience through pristinely valid, semantically rich markup and elegant CSS will come to you as easily as breathing. The old presentational methods will feel awkward and distasteful, primitive in their crude brutality. You’ll view the source of a site you built a year ago and cringe in embarrassment, wondering how you could ever think such sloppy, unintuitive spaghetti code was remotely acceptable.
When you understand that content and code really do matter at least as much as design, you will become a better designer in the end. You will grok web standards, and there’s no going back.
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.
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.
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
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.
…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.
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.
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.
“Artists craft transformative experiences through the interpretation of beauty”?. Hmm, what century are we talking about?
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.
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!
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.
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.
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.
Enjoyed reading.. great writing, clear, concise, just wonderful.
bq. “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.
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.
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”.
This is the best article on ALA in quite a while. Not only accurate and helpful, but also very well written. Thanks Craig!
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.
wow, this and the whitespace article too? i love it…
I also agree with Fantastic Read. One of the best articles I have read on here. Havent read them all yet but getting close. 🙂
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.
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.
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.
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
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.
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?
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.
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