Professional Web design techniques

We’re seeing more journalism sites trying out customized article designs, like this:

WaPo cycling story - February 2013

The design for this article is responsive — try it out on your phone. Change the size of your browser window too, and see how the images and text both respond to the new width. We talked about this in class on Feb. 18.

Source code for cycling article

Naturally, you will not understand all of the code if you view source on this Web page. But you should try it. You WILL understand some of the code very well. It’s important to learn how to look at other people’s HTML and see how they use CSS and JavaScript to create their page layouts — especially an innovative layout such as this one.

I wrote a two-page document (Google Doc) to help you think about how to look at this code. Open it up and have a look.

If you are feeling ambitious, look up some of the techniques used in the cycling article design, and try them yourself!