Homework I Gave Web Designers

From 2008 through 2010 I taught Internet Typography and Web Standards courses part-time at a local art school. One of my goals was to balance students’ understanding of the web’s constraints with its potential. Too much focus on the former and the work loses its uniqueness, its personality, its voice. But too much of the latter and the work feels janky, unwieldy, counter-intuitive.

I don’t know if I succeeded, but one assignment was my favorite. It began very simply:

1. Find three magazines of your choosing. (This sounded less old-fashioned at the time.)
2. In each magazine, select one article that includes a heading, a subheading, a byline, body content, and optionally a sidebar or other piece of adjacent content.
3. Scan the articles and bring them with you to next week’s class.

When students arrived, I gave them the rest of their exercise: They were to convert all three articles to web pages, using only semantic HTML. No CSS, no presentational attributes. You could include images via <img> elements (cropping them from the scan), but only for visual content like photographs, diagrams, etc.

This usually elicited a groan or two and at least a few puzzled looks. But as I made my way around the classroom, reviewing progress and answering questions, some patterns began to emerge:

• Many students chose markup that was closest to the appearance of the original article. Even those who understood the separation of content and presentation in theory might slip in a heading, <blockquote> or <table> where it wasn’t appropriate, their minds excited to “solve” the visual puzzle above all else.
• Some had difficulty distinguishing between images that were content and images that were presentational. Is that text critical to the meaning of the article, or is it just a stylistic element within the supporting imagery? And what the heck do I write for the alt attribute?
• This was often the first time students had seen default browser styles as anything more than something to reset. A few were surprised by how functional their pages were without any styles at all.

When everyone finished translating articles to semantic, accessible HTML, I let them in on a secret: This was still design. While we hadn’t yet incorporated color, typography or composition, we had made decisions about prioritization, hierarchy, information architecture and user experience. And those decisions would be the most resilient… accessible to virtually any visitor, not just those blessed few with perfect vision, hearing and mobility. The web was the only medium that offered designers the chance to craft one work for such a varied landscape with so few gatekeepers.

I don’t know if that message reached everyone. But one student (who was majoring in Graphic Design) told me after class that it had reached them. They’d previously found web design frustrating, a reductive process of chipping away at their design intent to satisfy the arcane needs of browsers. This assignment had reversed their thinking. Their designs now built up from that fundamental understanding of how and why the web worked as it did.

All designers (and their users) benefit from a deep knowledge of their materials. Print designers consider paper stock and available colors. Industrial designers should know what aluminum or plastic or concrete can or cannot do. Web design is no exception! We’ve everything to gain from knowing the web’s grain.