18 June 2009College Web Design Camp 2009: Session 4

Designing Article PagesJake Pauljakepaul.com

OverviewGoals of Article PagesWhat design concepts will be useful? What do you want an article page to do?

Design ImplementationHow do we make this happen on the web? What CSS rules should we use?

Other ConsiderationsHow should we optimize for search, handle comments, and facilitate printing?

HierarchyAn arrangement or classification of things according to relative importance.

Good hierarchy

Bad hierarchy

WhitespaceThe space between elements in a composition. Also called “negative space,” but not because it’s bad.

Macro/micro whitespace

http://www.alistapart.com/articles/whitespace/

Passive whitespace

http://www.alistapart.com/articles/whitespace/

Active whitespace

http://www.alistapart.com/articles/whitespace/

Design is not mathNumbers will only get you so far. What looks good is a subjective judgement, and in design you have to trust yourself to make it.

But some constraints are good

Creative briefThe real purpose of article pages is reading. So make them easy to read.

The most significant changes you can make involve minimizing distractions.

Too many distractions

Minimizing distractionsPut everything that’s not the primary text up top or at the very end

The middle of the page should be exclusively article text

Avoid paginating articles

Enough distractions

Default stylesExact numbers will be unique to each design, but strong default styles help

Put margins on header and paragraph elements, not on divs

Adding passive whitespace

Adding active whitespace

Adding hierarchy

Minimize distractionsPut related media at the top of the page with the headline and photo

Put related reading links and everything else at the bottom of the pageBut, if you have multiple photos, spread them out throughout the article

Other considerationsArticle pages show up in searches a lot because they have fairly static content

Search optimizingUse dynamic metadata

Search optimizingDisplay the article title in the page title

Search optimizingDirect readers who arrive on your site via search with a brief note in the footer

CommentsPlace comments below whatever related article links

It might be useful to paginate comments to avoid having really long pages (nytimes.com)

PrintingDon’t put a print link on your article page

This is not at all definitivehttp://bit.ly/thinkingwithtype

http://www.alistapart.com/articles/indefenseofreaders

http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

http://www.alistapart.com/articles/whitespace/

http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_bette

r_typography/

http://www.markboulton.co.uk/arti

cles/detail/five_simple_steps_to_designing_grid_systems/

http://www.subtraction.com/2007/03/18/oh-yeeaahh

Thanks for listening

Grid Systems

http://www.960.gs

http://www.blueprintcss.org/

Advertising

An example of keeping it simpleFusion Ads

The old Daily Penn

The new Daily Penn

Editorial Abstracts

Use a couple sentences to pull the readerinto the story

Social buttons and different approaches

The Daily penn

GeodataWhat article types would it be useful for?

•Restaurant reviews•Sports events and tournaments•Articles from students studying abroad

Find more information at:http://www.copress.org/category/blog