Designing Article Pages

18 June 2009 College Web Design Camp 2009: Session 4 College Web Design Camp 2009: Session 4 Designing Article Pages Jake Paul jakepaul.com

Overview Goals of Article Pages What design concepts will be useful? What do you want an article page to do? Design Implementation How do we make this happen on the web? What CSS rules should we use? Other Considerations How should we optimize for search, handle comments, and facilitate printing?

Hierarchy An arrangement or classification of things according to relative importance.

Good hierarchy

Bad hierarchy

Whitespace The 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 math Numbers 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 brief The 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 distractions Put 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 styles Exact 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 distractions Put 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 page But, if you have multiple photos, spread them out throughout the article

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

Search optimizing Use dynamic metadata

Search optimizing Display the article title in the page title

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

Comments Place comments below whatever related article links It might be useful to paginate comments to avoid having really long pages (nytimes.com)

Printing Don’t put a print link on your article page

This is not at all definitive http://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/2 007/03/18/oh-yeeaahh

Thanks for listening

Grid Systems http://www.960.gs http://www.blueprintcss.org /

Advertising An example of keeping it simple Fusion Ads

The old Daily Penn The new Daily Penn

Editorial Abstracts Use a couple sentences to pull the reader into the story

Social buttons and different approaches The Daily penn

Geodata What 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

http://www.copress.org	48
https://www.mturk.com	1
http://www.slideshare.net	1

Designing Article Pages

by Andrew Spittle on Jun 22, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 50

Statistics

Designing Article Pages — Webinar Transcript