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
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
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
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
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.About the Author
Craig Cook has been designing and building websites since 1998, though he still silently harbors the aspiration to draw comic books. He has an affinity for science fiction novels, zombie movies and black t-shirts. Craig lives and works near San Francisco.
http://alistapart.com/articles/grokwebstandards
