Web Design 101: Time to head back to school

As a front page designer at The Washington Post, I have seen the landscape of newspapers change dramatically over the past few years. Circulation numbers and ad revenue are falling at staggering rates, newsprint prices are rising, and the economy is in turmoil. But my biggest worry faced me this weekend and it’s common amongst most of my print design peers: Learning web design and coding.

So I went to Nashville for the SND Web Design Boot Camp at the Freedom Forum, which is an amazing facility on the campus of Vanderbilt University. There were 30 participants at the two-day workshop, most with similar backgrounds and skill levels as me. Luckily for us there were two excellent instructors — Tyson Evans of The New York Times and Dave Wright Jr. of NPR.

Day 1: Getting started and HTML

The two-day course started with a presentation on the history of the internet, at the end of which we learned the three essential principles to being good at code:

Technology evolves incredibly fast: To become good, you must keep up. To keep up, you must be interested.

Passion is essential: There are those who learn by hand holding, and those who learn by “view source.”

Rely on networks: Networks (real people and virtual ones) help keep you sharp and in the know. Don’t be shy to geek out with them.

We finished the afternoon brainstorming a breaking news page and writing basic HTML code and tags in Coda (PC folks used Dreamweaver). We were provided with an HTML coding cheat sheet and shown the basics by Tyson and Dave. All of a sudden, web design wasn’t as hard as I originally expected. HTML coding reminded me of my agate days in high school and college, or similar to CodeFixer in CCI. Although the crossover between web and print isn’t as exact as we print designers would like, the correlations between the two design forms are apparent — tags are like style sheets, there is a grid system, visual hierarchy, typography and more. I left Friday afternoon excited to learn more, wanting to be pushed further

Day 2: Time to get our hands dirty

Saturday started with background on how web design is continually evolving and how we as fledging coders can get started. Tyson and Dave, who were both very knowledgeable of the subject matter and patient with us newbies, talked about seven basic strategies:

Identify the right projects: Smaller, the better. Start low-risk to guarantee the most autonomy. Success reverberates.

Reduce. Reuse. Recycle: Look for common interactive storytelling methods. Maybe you can adopt maps, or searchable lists, or user forms into multiple projects.

Build first. Ask for permission later: Ideas are cheap. Execution matters. Find a project you can do with minimal time and resources, and go rogue. Bring a publish-ready solution to the table and you’ll find that barriers disappear.

Simple semantics: Create a sandbox at projects.newspaper.com or beta.newspaper.com. Words change expectations.

Avoid premature optimization: Don’t be distracted by issues of scalability and maintenance. Launch it, see if it’s successful, then sort out the logistics of sustaining/growing.

Experiment: Responding to change is more valuable than following a plan.

Collaborate with the right people: (And realize sometimes that means no one).

Now it was time to get our hands dirty. We dove right into CSS coding and, of course, Tyson and Dave had made a CSS cheat sheet, went through all the ins and outs of basic CSS code writing, explained the 960 grid system, and how typography, resolution, widgets and color values work on the web.

After lunch it was time to show off our skills and build a web page with a story, photo, widgets and links on a 12-column grid. After we finished that task, the instructors walked us through the steps of publishing our projects. Mine can be viewed here.

The instructors recommend we read Designing with Web Standards by Jeffrey Zeldman and CSS: The Definitive Guide by Eric Meyer to learn more.

In closing

This session was outstanding and whetted my appetite for web design and coding. Tyson and Dave were as well-prepared as any instructors I have witnessed, the quick course was run seamlessly by Denise Reagan and Stephen Komives, and all the participants bonded together over code. Hopefully there will be a future quick course on the same topic with the same instructors. I cannot recommend enough to everyone how valuable this training session was and that if another one happens, you should register for it.

And, lastly, for the first time ever I just updated the Update home page by myself and written code for a public Web site. Tyson and Dave were right: my inner geek is coming out, and I couldn’t be happier about it.

Jon Wile is SND’s East Coast Metro regional director and a news designer at The Washington Post.