Demystifying HTML and CSS for Designers

There has been a standing debate in the Web community for the last few years: Should Designers Code? Rather than pose an argument and throw gasoline on the fire, I want to share my perspective. This is subjective. I don’t expect to win you over, but I do want you to reconsider how you think of code and the Web.

First of all, I want to clarify a couple of things. We work in an industry chock full of terminologies and understanding them is important. So, from this point forward, when I say “code”, I am explicitly referring to HTML and CSS. And when I say “designer”, I am referring to the person who makes the visual decisions for the interface of a website or application. Good? Good.

What is HTML? HTML stands for HyperText Markup Language. Wow, that’s a mouthful! What does that even mean!? Well, it basically means you take a document and “mark it up” with descriptive labels—tags—that give structure and meaning to the content. So, if a section of text is a paragraph, you mark that section of text with a paragraph tag. If another bit of text is intended as a heading, you mark it with a heading tag. And so on. The first thing that any designer must do on any project is understand the hierarchy of information. HTML is just an extension of that. So if you can analyze a document and determine its hierarchy of information, you can write HTML.

Now that we’ve got that cleared up, what about CSS? CSS stands for Cascading Style Sheets. Wait, what? I’ve heard of Style Sheets, you say? That’s because the term is borrowed from word processing and desktop publishing programs. If you’ve worked with QuarkXPress, InDesign, or even Microsoft Word, chances are you’ve used them. Style Sheets are where we determine the look and formatting of a document. What font size should a paragraph be? What font weight should a heading be? These questions are answered in the Style Sheet. That’s what CSS does. And the document that it formats is an HTML document.

Now, I will confess that HTML and CSS can be frustrating and confusing. Most things are at first. And like most things, if you start with the basics, they’re not so bad. What’s more, you’re already thinking about this stuff when you design. Think about the last time you created a poster or a flyer or a magazine spread. What was your process? You had to think about the information on the page and how to show its importance, right? HTML and CSS are tools for translating those ideas onto the Web.

I know what you’re thinking, Great! More tools to learn. And I understand. We also griped when we first had to learn how to design on a computer. Photoshop, Illustrator, InDesign—those all took time to learn. But they are just tools. Do you remember what it was like before we had those tools? Mockups were literal cutting and pasting, passing comps through a photomechanical transfer, doing color separations by hand. Would you work that way now? Probably not.

Our profession is ever evolving. Always has been. Technologies change, so our tools change. Sometimes our medium changes and the tools we use change with it. Think about a painter. What is his medium? What are the tools that he uses? Can you imagine a painter without brushes or a canvas? Now think about a sculptor. What is her medium? What are her tools?

This is the same for the Web. The Web isn’t the technology, it’s the medium. HTML and CSS are the tools to shape and form that medium. And the Web browser provides the canvas. In fact, we even call it that—the Canvas! And just like a painter, the size and shape of that canvas may vary. But unlike a painter, we designers have no control over that canvas—the viewer does.

And that’s what makes designing for the Web a challenge. That’s what makes the tools we use so important. Without the proper tools, without knowing how to code, we are stuck using tools from a different medium. And without the proper tools, we aren’t exploring the medium to its fullest. We aren’t pushing the medium, experimenting, challenging its limitations.

I’m not going to tell you should code—that’s for you to decide. But you should at the very least understand the medium. And that may be possible without knowing how to code, but I can’t tell you how to get there. Because at the end of the day, all of your mockups in Photoshop, all of your prototypes in InVision App or Balsamiq or whatever tool you use, are just sketches. A description of a solution, but not the solution itself.

And it’s okay to sketch. Most painters and sculptors don’t just dive into the medium whenever they get a new idea. They sketch it out first. Several times. But when they’ve found a solution that works, they put their sketchbook aside, change their tools, and address the medium. If they get lost along the way, they have their sketch to remind them of where they’re going. But the sketch isn’t the destination, the medium is. And the best way to get there is with the proper tools.

For further reading, I highly recommend these three pivotal articles:

• A Dao of Web Design by John Allsopp
• The Web Aesthetic by Paul Robert Lloyd
• What Screens Want by Frank Chimero

If you want to get started with code, but are a little gun-shy, Jessica Hische & Russ Maschmeyer have created a humorous way to learn with:

Don’t Fear The Internet

As well as helpful resources such as:

• HTML5 Rocks by Paul Irish, Addy Osmani, and team
• HTML5 Doctor by Bruce Lawson, Oli Studholme, and team
• CSS-Tricks by Chris Coyier
• Getting Started With CSS by Mozilla Developer Network
• The HTML and CSS Book by Jon Duckett
• Coding for Designers Course by Patrick McNeil and How Design University

¡Viva la Web!