Craigslist: It Doesn’t Have to be Ugly

(via Digg) While Ian Lloyd has chronicled the goings on at SXSW 2006 (day 1, day 2, day 3, day 4), those of us at SitePoint HQ have had to jealously read the headlines from here.

One nugget that I particularly enjoyed was the redesign of craigslist that was undertaken by The Design Fab Five Seven. Having produced a slick, accessible new look for craigslist, the popular and lightweight classifieds site, they presented it to the site’s founder, Craig Newmark, live on stage at SXSW.

Before:
The old design

After:
The new design

The new design is certainly a huge improvement in both usability and accessibility for the site, the current design of which is entirely layed out using tables with a smattering of embedded CSS. Additionally, the new design seems to be even lighter than the original, weighing in at 19KB (plus 4KB of CSS and a 2KB image–negligible because they’re shared between pages). In contrast, the current craigslist Austin home page (the object of the redesign) weighs in at a whopping 31KB of HTML.

The redesign would regain a bit of weight upon adding proper URLs for all of the links (which in the mockup are all just href="#"), but this could be offset by stripping unnecessary whitespace (the code is, after all, written so that developers can easily learn from it).

Here’s hoping the site takes notice! By adopting this new design (or one produced by similar techniques), the site could not only reach a wider audience through improved accessibility, but it could also cut its bandwidth bills a little.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Gator99

    Still looking, but can’t seem to locate the “great improvement” in the new design. Aesthetically I like the original design better. The new one looks like “craigslist the wordpress version”.

  • http://www.sitepoint.com/ Kevin Yank

    A matter of taste, I suppose, Gator99. The nice thing about a CSS-based layout is that craigslist could maintain its old look and still get the accessibility/bandwidth benefits if it wanted to.

  • Anonymous

    Funny, I’ve been thinking this for a long time. Maybe next, you can do Drudge Report….

  • http://nedthunkit.blogspot.com/ ikarys

    They used a table for the discussion forums section on the right which is not tabulated data…

    And I dont think the calendar is all that accessible (far from it).

    It seems like a rough “proof of concept” rather than a decent rebuild of the HTML.

    Still, good work.

  • http://www.bn23.com b0rdslide

    Always nice to see more sites going to css but would it really have been that much trouble to make a re-design that also works for 800×600 displays?

  • http://www.revmedia.com dhecker

    Not impressed. Why not use graphics a bit to make it more pleasing? Bandwidth is cheap. I dont understand this minimalist attitude – I think it’s taken too far.

  • http://www.saumendra.com saumendra

    I would Like to suggest a Design Without the use of so many tables, and can use 2-3 images for the redesign.

    Can Keep the Heading of each Category in one page and The detail on the next!

  • simmyfromthebloc

    Hello, I’m Ryan Sims, the guy who designed the not-so-Times-New-Roman craigslist. Just wanted to mention a couple of things about the design:

    1) I spent a great deal of time on the design of this, but very little on the markup side. In a perfect world, I would have put more energy into the css/xhmtl. In that world, the Discussion Forums would not be in tables and a lot of other sloppiness would have been worked out. Unfortunately, there just was not enough time. Maybe over the next couple of days, I might go back in and clean some of this up. Maybe not.

    2) I did go back in and replace all my hrefs that were “#” with the proper urls and it did bump my page up by 8KB making the new version weigh in at roughly 34KB and the old one at 31KB or so. The new version can be found here for those of you who are interested: http://craigslist.thebignoob.com

  • Post Anonymously

    simmyfromthebloc, are you sure about your size estimate? and are you sure about your replacing the #’s? because when I check, the page still doesn’t have proper links and it’s coming in at 39KB. so when you do actually change the links (which will add 8KB by your estimate) it will be a whopping 47KB! not much of an improvement there. i look forward to the updated file being uploaded.

    aesthetically… well, i agree with Gator99, wordpress.graigslist.org. but you can’t please everyone.

    and don’t let these criticisms get you down. nerds are a nitpicky bunch. we try to overcompensate our physical and social shortcomings by being nazi-like when it comes to grammar, spelling, and technical matters.

    cheers :)

  • stickycarrots

    I really like the new look. It seems to be easier to use and much more organized. Good work simmyfromthebloc :)

  • http://www.yukonbiz.com Geof Harries

    Honestly, I’d like to see any of you commentors take this level of re-design on and survive as well as these guys did. The process is highly public, very open to criticism (as seen) and Ryan & Co. should be commended on such an outstanding piece of work.

  • http://www.bn23.com b0rdslide

    I wasn’t dismissing the effort and level of understanding that has to go into doing a redesign like this, however I am curious as to why it was decided to go for a minimum screen width of 1024.

  • any mouse

    simmyfromthebloc -

    I think your design is quite good and should serve as inspiration to the Craig’s List people to do something about their site’s look. Maybe they could even have a contest for the best redesign of their site.

    Don’t let the jerks who posted negatively about your work here get you down. They are obviously jealous of people who do better work than they can and probably are a bunch of Frontpage users anyway. Pay no attention to them is my advice.

    Oh – one more thing, for the comment about “bandwidth is cheap”. Craig’s List serves up Billions of pages each month. Yes, that is Billions with a capital “B”. This means that they have a monster bandwidth fee to run their sites. Since most of their entire system is free, they do have to keep on top of this issue or they could find themselves not making any money at all.

  • James

    This redesign is just boring. No branding. Craigslist will never touch eBay. Make USE of excess bandwidth. We’re not in 1995 and people have cable, not 9.6k modems.

  • http://www.sitepoint.com AlexW

    Great job, Ryan. Sharp, easy to use and professional.

    James, you’re missing the point. It was never a rebranding exercise (or is that just a branding exercise, since CL doesn’t really have a consciously designed brand ATM). The task was simply to prove the current info architecture could be significantly and inexpensively improved by simply getting the basics of layout, color and type right.

    Branding is an expensive question all to itself.

  • Sugar

    ikarys – Tables are not meant to be used only for tabulated data, but calendars too. It’d require a great deal of CSS code and classes to make it look properly otherwise.

    That of course nullifies the CSS advantage over tables : easy and lightweight presentation management.

    Plus, if the table is coded in an accessible way (using summaries, captions, ids for headers etc) is not THAT bad, on the contrary, it serves its initial purpose.

  • http://www.noevalley.com edshuck

    I would be very cautious about making any change to the craigslist format. Even with the reduction in size and recognizing a substantial savings in overhead (not just an arbitrary number).

    The list is very successful. That success began when the web was still in the text only mode and no one can truely define the hit in users that would be incured with a change. There would be a hit. People, users as people, are familiar with the format, know the look, trust the list admins.

    If a change is to be made in craigslist, mover carefully.

  • Tristan Dunn

    I made a Greasemonkey script to replace the homepage with the new design if anyone is intereted.

  • http://nedthunkit.blogspot.com/ ikarys

    Sugar – I think my post wasn’t fully understood.

    Firstly, the section on the right, “Discussion Forums” uses a table for 2 columns… I’m guessing because of lazyness. Who knows.

    Secondly, the calendar (IMHO appropriate as a table) is not coded to be accessible.

    So.. I hope that clears it up my initial post.

    I still stand by my statement that its a rough proof of concept.

    Fix the 2 points I’ve brought up, and it will be much closer to awesome :)

    In my view, if you are willing to go and present something to the masses for accessibility and best practices, you should try to build it as close to 100% awesome as you can. (and tweak it after feedback).

  • ringobob

    I would say it’s a definite improvement, but it doesn’t go far enough. This design just takes the old design and gives it a professional touch here and there… but quite frankly I think both designs are not very usable. Too much text. I know that’s what the craigslist faithful are used to (though there are plenty of ways to accomodate that), but for all of the millions (?) of craigslist users out there, there are millions more who will never spend more than 30 seconds at the site because it’s just a mess, all plopped right there on the page. Neither of these designs will ever reach the audience of an eBay or an amazon.

    Less links, more description, better navigation. Make it intuitive to find what you want without having to just dump it all out immediately when a user gets to the site. Better yet, and craigslist is ideally suited to this, let the user choose how they want it laid out. Clever use of AJAX and CSS would allow for a super-small footprint while meeting the needs of both new and old users. This doesn’t even get into things like adding features for browsing/searching multiple communities at a time, etc. A change like this would facillitate monetizing more services, perhaps building garage sales into a more feature rich area that can offer for pay services.

    You may be able to tell that I think craigslist is a woefully underutilized resource…

  • http://www.hybridnine.com hybridNINE

    I like the old design better, somehow it seems more authentic … more of a classifieds look. The new one seems too sterile and cold..