This document provides an overview, design implementation considerations, and other considerations for designing article pages on a website. It discusses goals of article pages such as making them easy to read by minimizing distractions. It recommends design techniques like adding whitespace and hierarchy through formatting text with margins and paragraphs. The document also covers optimizing article pages for search engines, handling comments, and facilitating printing.

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

2. 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?

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

4. Good hierarchy

5. Bad hierarchy

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

7. Macro/micro whitespace
http://www.alistapart.com/articles/whitespace/

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

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

10. 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.

11. But some constraints are good

12. 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.

13. Too many distractions

14. 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

15. Enough distractions

16. 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

17. Adding passive whitespace

18. Adding active whitespace

19. Adding hierarchy

20. 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

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

22. Search optimizing
Use dynamic metadata

23. Search optimizing
Display the article title in the page title

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

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

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

27. 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_better_typography/
http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/
http://www.subtraction.com/2007/03/18/oh-yeeaahh

28. Thanks for listening