Layout

Aligning Stars and Herding Cats

HTML has given us a full set of bones. CSS has given us physical details. We're all set to go, right? Only if you think it's ok for your head to be in the center of your chest. Layout occupies a strange niche in web design, because it can make use of both HTML and CSS, but is slightly separate in purpose from other design elements. Rather than deciding what the elements look like, now it's time to decide where they go.

Rhetorical Questions

The language and images you choose will have a direct impact on the message you send and the perlocutionary impulses you generate in the visitors to your site.

As a piece of communication, a web page engages a rhetorical situation. An exigence, be it information you wish to share with the world, or the grade you'll get for completing a project, has motivated you to create this piece of communication. Every communicative product has an audience, and thoughtful communicators consider that audience at every stage of producing the communication. Finally, the constraints on the situation exist both in the audience and in the technical limitations of your communicative medium, to say nothing of the communicator's own technical skill in web design.

One of the places this comes up in layout is thinking about your web page as a symbol, or a set of symbols. Different colors represent different things to different interpretive communities. The language and images you choose will have a direct impact on the message you send and the perlocutionary impulses you generate in the visitors to your site. This goes all the way back to the strategy plane in your user-centered design plan. A good rhetorician, online or on a podium, has to think not only of what he or she needs to say, but what his or her audience needs to hear.

960 reasons not to sweat layout

One of the advantages of a robust development community is that sometimes the best tools already exist for you. You'll spend some time in class learning how to float items and how to clear images from text, so that they don't overlap. However, I'm going to tell you about a pre-designed layout system called the 960 grid system. It imagines your webpage as a 960-pixel wide screen, divided into a number of columns. That number can vary depending on which style sheet you use. This webpage was designed using the 12-column layout sheet.

The headers and primary columns are called "grid_12," meaning they use all 12 columns and stretch across the entire page. The links are designated "grid_4," so they each take up 1/3rd of the page and sit comfortably next to each other. Your mileage may vary, of course, but I find the grid to be simple and intutitive. The developers of 960 grid have a new, more fluid structure, called Unsemantic, which promises the same simplicity, but broader application across different screen sizes.

You Want Links? We Got Links!

Color Matters takes something we see so much of that we take it for granted, and forces us to reconsider its meaning - color. Breaking down each color in terms of its symbolism around the world, it is a fantastic resource for considering what messages you might be sending without realizing that your sending them. Check them out here: Color Matters.

The 960 Grid resource page has everything you need to get familiar with the grid layout system, as well as a variety of column rule pages to choose from. Also, how can you not love a page with a big ol' download button? Take a gander here: 960 Grid.

One of the very real constraints on your design choices is the fact that many images are under copyright that limits their use. The Creative Commons search tool allows you to crawl through the internet, pulling out hundreds of images that are available for use by anyone. Always make sure to verify the terms of the CC license before using a product, but begin your search here: CC Search.