Consumerist Launches Design Tweaks

We launched some design tweaks for enhanced readability today. Font size is a bit larger. Titles are bit larger. Inside the post, the font is even larger and the text now goes to 800pixels or so wide. All the tags on a post appear in the read more section. Metadata appears underneath the title inside the post. This should make for easier reading, and things will get to looking even better as we learn how to wrangle the new format. Love it? Leave it? Leave your thoughts in the comments. Found a bug? Leave a note on the Gawker bug report site.

Comments

Edit Your Comment

  1. PsychicPsycho3 says:

    +10 readability

    • blackmage439 says:

      @PsychicPsycho3: For me, -10 FAIL.

      Firefox 3.03
      Mac OS 10.5.5

      The article text is now an unreadable 8pt Times. Blurry as hell. Columns are all fucked up. Site looks like crap.

  2. chrylis says:

    Bug: I can’t leave notes on getsatisfaction (Firefox says it’s submitting and then hangs).

    The AdWords are still blocking article text, and the problem isn’t text zoom as suggested by Gawker’s response.

    The problem is that there are no width constraints on the ads. Even with text zoom set to normal, the ads will often overlap the text because of ridiculously long domain names.

    I suggest either putting the ads in an IFRAME or using CSS to layer them under the article text.

  3. dwasifar says:

    I liked it better the old way. It’s easier to read text in columns that are proportional to the text size, than to spread the lines out longer. This is why newspapers and magazines print in columns instead of all the way across the page. If the lines are too long relative to the text size, then when your eye travels back to the beginning of the next line you are more likely to land on the wrong line.

    I also don’t need big honkin’ titles. I’m sitting right here in front of my screen; I seldom need to read Consumerist from the other side of the room. :)

  4. shepd says:

    I love consumerist, but talking about pixels and point sizes in HTML makes Baby Jesus cry. And yes, I do know the boat of “HTML means you provide suggestions on how text is interpreted” sailed long ago, and the web looks better (at the moment) for it. Still makes Baby Jesus cry, though…

  5. coan_net says:

    Now if we can just get rid of those BIG headers on the top of each page, The Consumerist will be perfect!

    I hate sites which puts tons of crap at the top of the page…… making you have to scroll down just to start reading what you came to read. I love to go to a site and just start reading… not scroll down past things THAT ARE ALREADY ON THE PAGE BELOW!!!!!! (not like it’s anything different)

  6. ogremustcrush says:

    Eh, I perfer small fonts and smaller columns. Makes it so my eyes don’t have to zip back and forth as much. The size of the comment text is perfect for me on a 22in monitor.

    • CupcakeKarate says:

      @ogremustcrush: Oh man I hate the larger font. Hate it a lot.

    • LastVigilante says:

      @ogremustcrush: I agree that smaller column widths are better. All my graphic design schools have taught me that text is easier to read when the lines aren’t too long, especially on a screen. Also, with a column width of 800px (816px is what is actually is showing up as for me) you’re instantly flushing out everyone who may still be viewing this site on an 800×600 monitor, poor lil’ buggers.

    • BigPapaCherry says:

      @ogremustcrush: I liked the old small font/columns better too. Easier to read, and if there was an issue with size, I can zoom in.

      Plus, this is a harder to read on an iPhone with the extra column width.

  7. illtron says:

    This is harder to read.

  8. flairness says:

    I have always found serif fonds harder to read than sans serif. Sans is just easier on the eyes. Didn’t Consumerist used to be sans serif? I can’t remember, but the new font is a no for me, size and style.

    • ElizabethD says:

      @flairness:

      For large blocks of type, serif is usually the way to go. It’s actually easier for the eye to distinguish when reading lots of material quickly. Check out magazines and newspapers; it’s not a random coincidence that most published text is in a serif font.

      Sans-serif is a good choice for display type (heads and subheads, captions, etc.)

    • LastVigilante says:

      @flairness: Its still hotly debated among the web design crowd, but I share the opinion that sans-serif fonts are better screen fonts. Verdana, particularly, was designed with sole purpose to be a screen font. Serifs are good for print material.

      • chrylis says:

        @LastVigilante: Serifs help legibility iff they are rendered smoothly. Most screens just don’t have the resolution to make it work (200dpi or so for me), while print handles it fine. Thus, for a long time to come, sans serif will still be the way do go.

  9. dtmoulton says:

    Is your new target demographic older and suffering from eyestrain?

    Good choice.

  10. 12-Inch Idongivafuck Sandwich says:

    Don’t like how wide the lines are or how big the font is…thanks anyways though.

    • jbl-az says:

      @12-Inch Idongivafuck Sandwich:
      I am unhappy with any site that dictates to me that I must use a really wide page. I mostly read Consumerist from Google via RSS, but when I come here to search or to comment, I find the main article going off the page to the right because I don’t run my browser (FF3) full screen or taking huge amounts of real estate, and the page insists on using tables (or whatever) that allow the content to fix a minimum width instead of allowing my browser to dictate form (the way I believe HTML was originally designed to work).

  11. chrisjames says:

    It looks a lot nicer, but:

    1) Making the lines disproportionately wider makes it harder to read. Try 500 or 600?
    2) Spacing the lines out vertically makes it harder to read. I’d say remove it completely.
    3) Curvy, serif-y font makes it harder to read. But it sure is pretty. :)

    By the way, I hear a lot about #2, vertical spacing, being used for readability. That’s actually just the opposite. Closer line spacing makes reading easier on the eyes, even though it’s easier to lose your place. Wider line spacing is for editing or clever read-between-the-lines pranks.

    • BrianDaBrain says:

      @chrisjames: I am also a fan of sans serif fonts, even if they are less interesting to look at, but I actually prefer the bigger font and line spacing. I spend my days editing technical documents with small font sizes (10pt Times New Roman is the stuff of nightmares!!!) and no space between lines, and this is such a wonderful relief from that. :)

  12. BrianDaBrain says:

    I myself am a fan of the larger text/column size. I prefer not having to scroll as much. This means I prolly shouldn’t like the header at the top of the page, but it’s as convenient as it is annoying, so eh. I hardly even noticed that the titles got bigger, but better use of screen real estate with the new layout is much to my liking.

    On an aside, I truly dislike the Google ads in the middle of the comments, but I click them anyways, because I want more editors (read: Chris and Carey) back.

  13. Zephyr7 says:

    Thanks for working on improved readability. I have to agree with previous commenters though; the main text block seems a little wide for optimal readability. I’ve seen different rules on thumb on the optimum for this… some say 65 characters, other 12 words. Either way, a bit shorter than this.

  14. 44 in a Row says:

    , the font is even larger and the text now goes to 800pixels or so wide

    The problem is that the left-hand bar is still pretty wide, so while this is fine with the window maximized on 1280×1024, anything less than full-screen requires scrolling, which is annoying. Why on earth are we so against having the text width scale with the window width?

    • HogwartsAlum says:

      @44 in a Row:

      I agree! I usually don’t maximize my browser window all the way at work, and now I have to or scroll over. I don’t like that.

      The icons at the top are too big, also.

      Thanks for trying though.

  15. jchabotte says:

    @undefined:

    yeah, this kinda sucks for me, i tried to adjust my browser settings to compensate, not knowing what had been done, and everything got messed up.

    Please switch back.

  16. MissPeacock says:

    I don’t like it, and here is my selfish reason why. I read the Consumerist and other Gawker sites at work. My back faces the hallway and people can see my monitors, so I like to squish my browser to the lower right side of my screen where I can read it and no one can see it because I’m sitting in front of it. Now, with the larger text that spreads out farther on the page, I have to pretty much maximize my browser to read the text. No good! Have some pity on the working (wo)man.

    • eggshelld says:

      @MissPeacock: This is just what I came here to say. The larger font sizes are fine, and I see the reason for them. The width shift? AWFUL. I too read at work and keep my browser window at about half the width of the screen, and suddenly I have to use the horizontal scroll bar to read an article? Nope. This will actually make me less inclined to visit if it doesn’t go back to the way it was.

      • MissPeacock says:

        @eggshelld: @LindsayC: Glad I’m not alone. I definitely won’t be coming back very much if the column width is so large, and this is one of my favorite sites!! PLEASE don’t make me have to do without my Gawker! I’m not sure how I’ll pass the day without you.

        Television Without Pity has a really great Greasemonkey script for Firefox that automatically resizes the text/columns dependent upon how big you’ve got your browser. Maybe someone could come up with that for the Gawker sites. Or just, you know, revert back to the way it was. It wasn’t broken, so why fix it?

    • CupcakeKarate says:

      @MissPeacock: Hah- I was thinking the same thing- nosy passers-by can read my Consumerist from the hall!

    • ShikhaCadimillac says:

      @MissPeacock: My sentiments exactly. The site is now much harder to read.

      If I don’t have my browser in ‘widescreen’ mode then I now have to scroll horizontally to read the articles.

      Please return the site to narrower columns or at least scale the text to window width.

      I second the ‘If it wasn’t broken, then why fix it?’

  17. Riddar says:

    @illtron: The worst part about it is there are two dozen different font styles on the page. Title, tag, byline, text, google ad titles, comments, google ad texts, discussion links, Consumerist home link, GIANT GIANT HUGE GIANT strip on top linking to other stories, display/logout buttons, and comments are all different sizes. In addition, the story text hangs precariously over the comment column, and the layout is very crowded in some areas while stark in others. Maybe if the ‘other story’ links on the top ran vertically down the right side or something rather than on top, it would balance out the page nicely.

    I don’t know. I won’t lie and say “I’m never coming back” or “The Consumerist is going downhill” and so on, design is a minor gripe. But damn, it’s ugly.

  18. "I Like Potatoes" says:

    It’s like reading a large print book. You know the content is the same, but you still know something is just not right…

  19. milrtime83 says:

    I didn’t realize there was anything wrong with the layout. The font size is no big deal since it is easy enough to adjust manually in the browser.

    I’ll add one more vote to reduce the line width.

  20. BeeBoo says:

    Well, your main title “The Consumerist” is really hard to read in red against a black stripe.

    You’ve still got that silly watercolor of a guy in a hat that makes it look like this is a site for fans of film noir.

    Plus that awful smudgy ink spill down the left side of the screen that makes it look like I need to clean my monitor is still there.

    I’m all for the updated look but it seems like fixing some of these more serious problems would have been a more effective use of effort. It might be helpful to get someone from outside who has designed some clean websites to take a look at it. Maybe borrow somebody from a different Gawker site.

    Sorry if I make it sound like I don’t appreciate all of the hard work, I do, or I wouldn’t bother reading or commenting.

  21. Anonymous says:

    This is bad news bears. The Consumerist (and io9, I believe) was one of the last readable Gawker sites. The new design isn’t any more readable than the old, and for those of us who have exceptionally poor eyesight, when I adjust text size in my browser, the new fonts are just as impossible to read in any size … unless you enlarge it to the point where a single word dominates an entire line.

  22. kc2idf says:

    “More top stories” link appears in middle of story text. Using Firefox 3.0.3

  23. bellsandasiren says:

    I have a widescreen monitor, and when I view inside a post, I’m forced to side-scroll.

    That’s ridiculous.

  24. cjones27 says:

    Old way was better. Looks like Gawker and Jezebel – two blogs I avoid like the plague.

    Harder to read, longer to load (I read this a lot on my iPhone).

  25. acrobaticrabbit says:

    yeah, usually it’s easier to read if the columns are narrower, instead of wider. B for effort.

  26. jeebussez says:

    big size is okay, i prefer smaller columns; it barely fits on my laptop screen and i don’t have my windows max-sized anyway.

  27. Whiskey Tango Foxtrot says:

    Its not bad but I prefer sans-serif fonts too, – I just find them easier to read.

  28. CharlesjP says:

    definately don’t like it, entirely too wide on the text.

  29. ribex says:

    >>Font size is a bit larger.

    Okay.

    >>Titles are bit larger.

    Yes, they seem to be very inconsistent on the main consumerist.com page. The big ones are TOOO BIIIIG. One example (currently) is the “Best Buy To Employees: Survive The Meltdown By Making Customer Service A Priority”. I can’t tell if the other titles are larger than they were yesterday, but ones like “Found Your Company with MyCorporation, Free Today Only” seem to be a satisfactory size.

    >>Inside the post, the font is even larger

    …By which I believe you’re still referring to the title font size as well as the text size. I’m okay with these.

    >>and the text now goes to 800pixels or so wide.

    No!

    Too wide, and needs more buffering space on the right. The end of the text on the right side should extend further than the comments, but not that far.

    In fact, I saw some articles on Gawker (I can’t tell if the changes are Gawker-network wide or what) that I had to SCROLL RIGHT to read the whole line. And then scroll left to read the next line, etc., etc., ad nauseum. BAD.

  30. zigziggityzoo says:

    I don’t like the Top stories at the top. But that’s just me. I haven’t liked it since they were first put there. The less I have to scroll, the better.

    I’m having no problems with ads because, well.. I have a hosts file for that.

    As for the font? I like Sans serifs better but I can modify things on a site specific basis with a few javascript hacks, so whatever floats your boat, consumerist.

    • Anonymous says:

      @zigziggityzoo:

      I completely agree with your comment on the ‘top stories’ bar at the top. It’s big, cumbersome, distracting, and the less scrolling, THE BETTER!

      And I think we can all agree that Sans Serifs are a much better choice than whatever it is this is. Does it make me a bad person if I admit that this same ucky font is the reason I stopped reading Gawker and Jezebel?

  31. Traveshamockery says:

    I like it.

  32. SweetBearCub says:

    Ben,

    Do you have any significant say over how Consumerist.com is formatted? If so, may I suggest a small drop down menu our logged in user names with style selections? (Not just color changes). That way, people can choose what works best for them.

    As for the ads – Long live Ad Muncher. (Also known as “Ads? What ads?”)

    I’d love for Consumerist to hire more editors (Or bring back Chris & Carey) but I am not willing to look at ads when I’m not specifically looking to buy stuff.

  33. MrsLopsided says:

    With the news that The Consumerist is for sale… isn’t this akin to rearranging the deck chairs on the Titanic?

  34. NefariousNewt says:

    Instead of farting around with font sizes, I’d prefer to have user customizable settings so I could have the “preview comment” box on by default, as well as the “classic view.”

  35. oregongal says:

    Well I’m older and my eyes do get tired very easy so I appreciate the larger font. I have FF 3.0.3 and AdBlockPlus. Ads are not even part of my world anymore. But I do agree that the icons/story blurbs at top should be smaller. They seem like they are screaming for attention instead of piquing interest.

  36. pschroeter says:

    Is this why suddenly in the last week of so the left banner area that contains “Ads by Google” suddenly overlaps a little bit into the main content in articles? I’ve been trying to figure this out. I use Firefox 3 and Windows XP.

  37. LiC says:

    Annoying. If I wanted a bigger font I’d go into my computer settings and switch it to “visually impaired.”

  38. misslisa says:

    Well I like the changes! A lot! And yes, I am over 40 and have failing eyesight. So thanks for thinking of me, Ben.

  39. techgod says:

    I would pass on the line width myself, not a fan of the larger width. I much preferred the shorter ones, I sometimes have multiple windows open on the same monitor and i have them tiled next to each other, now I have to scroll. :(

  40. kairi2 says:

    Thanks, but no thanks on this bridge to nowhere.

  41. ZukeZuke says:

    Love the new changes!