Designing Special
Feature Pages
College Web Design Camp 2009
Session Six
By Jackie Hai
July 9, 2009

Examples
http://www.amherstwire.com/features/13th-hour-reprieve

Examples
http://www.smh.com.au/interactive/2009/congo/index.html

Examples
http://www.lasvegassun.com/news/topics/water/

Examples
http://www.boston.com/news/specials/kennedy/

Common design elements
Wall-to-wall graphical content, no ads
Bold typography
Rich colors and textures
Multimedia in A1 section
Print-style page design and layout
Attention-grabbing intro
Content organized in chapters

Why make feature pages?
Break down a complex story into navigable parts
Present multimedia-rich content in a unified package
Create an "evergreen" resource
• (e.g. AmherstWire.com's Economic Stimulus 101:
http://www.amherstwire.com/features/economic-stimulus-101)
Pull together related stories in a topical page
• (e.g. Matt Thompson's "Newsless" concept: http://newsless.org/
blogtest/sample.html)

What not to do
Cookie-cutter template →
Multimedia buried → ← Ad
Ad →
← Unrelated content
← Long, unformatted text
http://www.washingtonpost.com/wp-dyn/content/article/2009/05/31/AR2009053102510.html

Step 1
Organizing story elements
1. List all multimedia and text pieces to be used
2. Choose a lead multimedia and/or text piece
3. Rank remaining content by relevance/importance
4. Break long text into chapters

Step 2
Page layout/wireframing
Give each element its
own layer in Photoshop
to speed conversion
from mock-up to code.
Story elements are building blocks of the feature
Keep hierarchy in mind when arranging elements: give
the most compelling content the most screen real estate

Step 3
Adding graphics and color
Use the eyedropper tool
to pull colors from photos
for use in the page
design.
Colors should be bold but complement, not overwhelm, content
Avoid stock/clip art; use images originating from the story

Step 4
Typography and white space
Uncluttered feel improves retention of focus
Guide the user's eye by drawing attention to the right places
Limit to 2-3 fonts for simplicity and unified design

Step 5
Converting mock-up to code
Use the "float" property
to line up divs side by
side.
Assign each major block to a CSS div
Smaller blocks are nested inside larger ones

Step 6
Testing and accessibility
Don't let this happen to you!
Perform cross-platform checks early and often
Test on all major browsers, on Windows and Mac
Design pages to fail gracefully

Inline CSS styles
One-shot design on the fly
The "style" attribute can be
placed in any HTML tag to
override pre-existing CSS
definitions
Pros:
Simple solution for customizing CMS pages
Don't have to mess with site templates
Cons:
Time-consuming to make page-wide style changes

Useful tools and plugins
Expanding Text:
http://www.dagondesign.com/articles/expanding-text-plugin-for-wordpress/
Shadowbox JS:
http://sivel.net/wordpress/shadowbox-js/
WordPress Gallery Slideshow:
http://wordpress.org/extend/plugins/wordpress-gallery-slideshow/

Takeaways
Great design can't fix weak content, but bad design can
ruin great content
Compelling presentation adds value and raises news above
mere commodity level
Lead with your most sensory-engaging elements
Break down information into chapters to form a narrative
Use inline CSS styles to rapidly deploy one-time designs
Test thoroughly before launch; even the best laid out
feature page is useless if it breaks for half your audience