WHY YOUR SITE SUCKS
and some ideas to fix it
MORE IS NOT BETTER
558 links   17 “links”
Number of links on
                   homepage
600
         558

450
                     427   425

300                  ...
Every story
                         needs at least
                         one image

                         Make it b...
Get rid of
                                             flash

                                             (Except for
   ...
TYPOGRAPHY:
Variation in scale?


 18 pt
 13 pt
TYPOGRAPHY:
Variation in scale!
  34 pt

  10 pt
Web Type Tips

•   No more than 2.5 typefaces
•   Web-safe fonts are ugly
•   More leading
•   Have a type repertoire
1. Courier (or similar)   3. Agency (or similar)   5. Verdana   7. Helvetica
2. Arial                  4. Times New Roman ...
Big links for big sections
whitespace is nice space
Make search suck less

• Recent content first
• Use faceting
• Highlight search terms
• Auto-complete
Performance:
                           File Requests per page


300

240

180

120

60

 0
      Star Tribune   NYT     M...
Performance:
                               Page Size (kb)

                                        HTML        Stylesheet...
CLIENT PERFORMANCE:

• Does it scroll ok on an old
  computer?
• Does it have lots of scripts?
Good Design
     =
Good Business
Justin Heideman
http://co-opmedia.org
justin@co-opmedia.org
@justinph
Why your news site design sucks and how to fix it
Why your news site design sucks and how to fix it
Why your news site design sucks and how to fix it
Why your news site design sucks and how to fix it
Upcoming SlideShare
Loading in...5
×

Why your news site design sucks and how to fix it

3,619

Published on

A short presentation on what is wrong with design for news-based websites.

2 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,619
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
227
Comments
2
Likes
26
Embeds 0
No embeds

No notes for slide
  • Name, what I do, etc.
  • There is a tendency to cram too much crap on a page. No set of priorities. Editing needed. Makes it hard to tell at a glance what is actually news.
  • Crazy! No hierarchy, either.
  • Not sure if there’s a “right” number, but surely there is an upper limit.
  • Duh. Don’t care if it’s a file photo. Help me remember who / what you’re writing about.
    Infographics are neat, too. Big picture sets the standard.
  • Sucks for performance. Not accessible for disabled users. Isn’t open like the web is.
  • Pretty small variation. Jan Jancourt 600pt.
  • Much better! lets me read shit at a glance.
  • We have ways to use better typefaces (sIFR, cufon, @font-face).
  • Don’t use too many typefaces! This doesn’t count Ads or the weight/italic variants
  • Not tiny little links. Big ones. Make sure your sections are logical and make sense. Stuff that makes sense as a newspaper section doesn’t necessarily on the web.
  • Space around “stuff”. Enhances readability. Is a symptom of being willing to edit. Has good ratios & margins.
  • White space! Heiarchy! Good Typefaces. Not too many of them. Not too many ads. Good use of color.
  • Nice use of type. Good scale. Good at a glance to see what’s new. Good use of color. Big navigation.
  • Big section links. Whitespace! Not cramming too much shit on the page. Type size variations are adequate.
  • 4 files at a time. Slow.
  • 2MB! Fuckin’ a. Even on a fast connection this sucks. Sucks to download, and that’s a lot of shit for the browser to have to sort out.
  • Grandma test. Does it slow the computer to a crawl. It’s a webpage. Not a video editor. Not a web app.
  • Good design tends to come from organiztations that have good priorities and are well organized. But there is opportunity to differientiate a site, at least locally.
  • Hatemail and job offers.
  • Why your news site design sucks and how to fix it

    1. 1. WHY YOUR SITE SUCKS and some ideas to fix it
    2. 2. MORE IS NOT BETTER
    3. 3. 558 links 17 “links”
    4. 4. Number of links on homepage 600 558 450 427 425 300 323 225 220 199 186 150 151 0 Star Tribune NYT WaPo CNN Slate Google News MPR MnIndy Bring.mn Sites accessed 10 PM, December 7, 2009
    5. 5. Every story needs at least one image Make it big! Hey look, a rooster! flickr photo by lucanrt
    6. 6. Get rid of flash (Except for video) A big flash flickr photo by Gentry's Daguerreian Studio
    7. 7. TYPOGRAPHY: Variation in scale? 18 pt 13 pt
    8. 8. TYPOGRAPHY: Variation in scale! 34 pt 10 pt
    9. 9. Web Type Tips • No more than 2.5 typefaces • Web-safe fonts are ugly • More leading • Have a type repertoire
    10. 10. 1. Courier (or similar) 3. Agency (or similar) 5. Verdana 7. Helvetica 2. Arial 4. Times New Roman 6. Times
    11. 11. Big links for big sections
    12. 12. whitespace is nice space
    13. 13. Make search suck less • Recent content first • Use faceting • Highlight search terms • Auto-complete
    14. 14. Performance: File Requests per page 300 240 180 120 60 0 Star Tribune NYT MinnPost Bring.mn MnIndy MPR News Q Google News
    15. 15. Performance: Page Size (kb) HTML Stylesheets Javascript Images Flash / Other 2,500 2,000 1,500 1,000 500 0 NYT Star Tribune MinnPost Bring.mn MnIndy MPR News Q Google News
    16. 16. CLIENT PERFORMANCE: • Does it scroll ok on an old computer? • Does it have lots of scripts?
    17. 17. Good Design = Good Business
    18. 18. Justin Heideman http://co-opmedia.org justin@co-opmedia.org @justinph
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×