A List Apart Redesigns, Makes Me Weep

A List Apart, the venerable online periodical for web people, has quite possibly just pulled off the perfect redesign.

Everything is great. Nothing is bad. Click here to see the wickedness.

Favorite design touch: The hover underlines which disappear in the middle of the center-stacked text.

Favorite new feature: Adjustable color palettes for different issues.

Congratulations to Jeffrey Zeldman, Jason Santa Maria, Eric Meyer, Dan Benjamin, Kevin Cornell, Erin Kissane, and team on a great piece of work.

Meatspace Stan has more here.

*Prediction: A center-stacked headline mini-boom begins today.

33 Responses:

  1. Mike says:

    A new content management system that uses Ruby on Rails? I thought they were still using the Alvey-designed Blogsmith software?

    *Political murmurs rumble off in the distance*

  2. The headings are a nice touch, but I really have to get used to them…

    It’s nice, though. Good to see a more usable ALA

  3. “*Prediction: A center-stacked headline mini-boom begins today.”

    That’s one of the first things I thought, too.

  4. Christian says:

    I have to disagree, Mike; I was [am] underwhelmed. Months of no content updates, and now a redesign of the site? There really ought to be a joke (perhaps there already is) that the only thing web designers seem to be able to do is constantly redesign their own sites. Don’t get me wrong, I’m not knocking the new design - it’s quite nice. But aren’t you kind of getting to the point where you go, “Oh, [big name web designer] just redid their site … again. Ho hum.”

    Having said that, I will now return to working on my own website, which I am currently in the process of redesigning. *sigh*

  5. Jonathan says:

    I’ve gotta say… I’m just happy for some activity on A List Apart. I was just wondering yesterday when they were going to update the site.

    I had heard somewhere (possibly from alistapart.com) that they were going to do a redesign, so I’m not overly surprised by it, but I think it looks great!

    Hopefully the new redesign sparts more interest in the content of the site and we start seeing new updates soon.

  6. Though I would echo the sentiments above in hoping that ALA once again posts new content, I think the biggest reason why ALA hasn’t been updated is due to the rediculous schedule of Zeldman - His web superstardom has caught up with him. I wonder how he finds time to sleep…?

  7. Chris K says:

    I like the redesign. To have a complete overhaul with everything on it after months of no activity is a bit overwhelming. Right now, its a shock to the system. I predict we’ll continue to rave over it as everyone gets more acclimated to all the new features and layout.

  8. Adrian L. says:

    I dunno… I’m not really impressed.

    Does anyone else thing it looks like ever second “design” blog out there?

    I can see the wheels turning there guys. Of course it looks better than my site, but my site’s not about design.

    I think I agree with Christian. I’m Underwhelmed.

  9. Christian: I totally understand what you mean. I can tell you first hand, the site was originally only suppose to take 1-2 months. Then it snowballed as we got more and more into it. It was a situation where we wanted to wait to publish the new content in the new site.

  10. Jared L. says:

    Favorite design touch: creating a design that has a left-right scroll bar in 800×600 display mode.

    Yes, that was being sarcastic.

    When over a quarter of Internet users still use this resolution (sad but true), wouldn’t one consider this a bit of an accessibility issue? Granted, I’d assume that their audience has a much lower percentage of people at that resolution.

  11. Jared -

    Consider the audience, though. It’s not my mom reading ALA. It’s aimed at web designers who either are on, or wish to be on the forefront of Web 2.0.

    I would venture to guess that a very small percentage of ALA readers have 800×600 setups. I bet the percentage is higher for 1280 or more.

  12. I like the design, the fact that it was rebuilt on Rails (Web 2.0 shows it head again). I agree that most of the visitors of ALA will have a 1028×768 screen size, so the scrolling on an 800×600 doesn’t bother me, but no print.css?? I’m hoping this is just a slight oversight.

  13. Thomas says:

    With the assumption that ALA is a web magazine geared towards the web-designer/web-programmer/project-manager/anyone-else-on-the-web-development-team so they might learn more about XHTML/CSS/Accessability/web-standards-developing-script, I see a clean, open, easily read layout.

    Much like a magazine is geared to be, I don’t see ALA as a “design” sight - one that focuses on being the wicked-worn/rounded-corner/pastel/aqua/over-used-flash-looking-eye-candy. So, I’m not “underwhelmed” by the design. Their form matches their function very well with this re-design and I’m looking forward to reading the new issues. Also, ALA is a “contribution” site, so the look, I’m not surprised, matches the individuals who are involved.

    Finally, the touch of illustration is a fantastic addition - although I have a tendency to being partial to illustrators. I’m also looking forward to wearing the t-shirt designed by Jason.

  14. Stephen says:

    I have two screens, one is 1400×1050 and the other 1680×1050 but consistently browse with a window smaller then 1024.

  15. Adrian L. says:

    Much like a magazine is geared to be, I don’t see ALA as a “design” sight - one that focuses on being the wicked-worn/rounded-corner/pastel/aqua/over-used-flash-looking-eye-candy.

    I don’t consider any of that design either Thomas, I consider it styling - much of it overdone and tired.

    Yes, it’s a “contribution” site. But it long ago established itself as a bastion of xhtml/css technique goodness, promoting the idea that well built sites don’t need to look like poo.

    And the big “innovation” in terms of the site visual? Centered headlines with some admittedly nifty underscoring. The rest looks like every other standards compliant minimalist blog out there.

    Looks like there’s some room to dethrone the reigning lords and ladies of webcraft, if this is their finest.

    Me? I’m just a painter. Ask anyone. They’ll tell you painters never get anything done.

  16. EAW says:

    Re 800×600:
    Jared, you’re missing the fact that they DID design it to work on 800×600, but in a way that makes use of more screen real estate for us with bigger screens.

    On the home page, 800px wide cuts off exactly after the middle column. Yes, you have a horizontal scroll bar, but you could read most of the content without worrying about it. Similarly, on an article page, the article content is exactly wide enough to fit in an 800px wide screen.

    I personally think this is a great solution to this problem (Stylegala does something similar - http://www.stylegala.com). It’s a trade off, of course, but I think it’s a good one (especially considering ALA’s target audience).

  17. I’ve seen so many repeated comments about the design not fitting in 800×600. The word “underwhelmed” has been tossed about like a hot potato, and people are complaining that there’s no print stylesheets (yet). In the words of Mr. T, “Quit yo’ Jibba-Jabba!

    Get down off your high horse and step back for a second. Take a look at the subtle rollover affects. Marvel at the simple and elegant framework these guys have built for a site that is a hallmark of the XHTML revolution. I say Great Job! Bravo!

  18. Joe Clark says:

    Christian, the new site was held up while the CMS was being built. And I’ll thank you not to discount the three new articles published today, one of them mine.

  19. Collin says:

    It doesn’t matter that they didn’t design their site to look perfect at 800×600. Consider their target audience and the percentage of higher resolutions is much greater then that of other web sites. How many people here have 800×600 screens?

    With that said, some people don’t like to have their browsers maximized all the time. For instance, I have my monitor sectioned off into 3 areas. The main area being about 800 pixels wide for browsing while the top right of my screen is playing a video. (Currently Pinky & The Brain) - But, alas, I have the option to maximize across my entire screen to solve the issue so I can live with it.

    Resolution aside, this is a great design. Very clean and subtle colors that won’t be getting in the way of your reading. With so many overpowering designs it is nice to see sites like this keep content as the center of attention.

  20. Adrian L. says:

    Aside from resolution issues, and my opinions on the design, there are technical deficiencies with this redesign. The main navigation options (Articles, Topics, About, etc.) are lost at larger type sizes (two steps up from “normal”) in both Safari and Firefox.

    I haven’t even looked at it using Internet Explorer, because I’d never judge someone’s site by the way IE rendered it.

    Why do those with font sizes set larger than normal lose the main navigation?

  21. Su says:

    Really nice. The subtle details are particularly pleasing, as usual. There are some elements that honestly don’t make sense to me, though. I can’t figure out what the logo tab/box thing is supposed to be, and especially why only the thin black line of the header bar overlaps it. I don’t get the logo, but have to admit that it’s always seemed more of an exercise in styling than particularly representative of anything. (I’m going to get crucified for that, aren’t I?)

    The XHTML t-shirt is…disturbing.

  22. @Adrian L: What are you talking about? I could bump up the text size a dozen times and the main navigation works fine.

  23. Adrian L. says:

    @ Matthew Pennel: Tried that on a 12-inch Apple laptop? The main nav keeps expanding to the right, sans horizontal scrollbars, leaving anyone using “non-standard” type sizes in Safari or Firefox on a 1024×768 screen with incomplete nav.

    That’s what I’m talking about.

  24. I’m very undecided about the re-design. The top navigation bugs me for some reason, I still can’t work out why. And using Opera 8.02 with a resolution of 1680 x 1050 the « Previous page | Next page » links at the bottom overlap the footer. And on page /articles?page=2 I cant use the menu unless I hover over the top of the words, where the colour bar appears. It seems to work OK on the other pages though.

    *shrug* I think I spend too much of my days testing…

  25. Ian says:

    Anyone else find the code too hard to read? Just seems far to small to me.

  26. Nathan says:

    Wow, I must be a dummy cause I thought the new design “shat” all over the old one…

    I can understand people have expectations when it comes to such a high profile redesign, but honestly I think some people are being a little over critical… Is that perhaps because they don’t like seeing people design something that they can’t?

    From ALA:

    We are still working out some bugs. (And yes, darlings, that may even include one or two XHTML validation bugs.) A few things that we will soon do suavely, we currently do a bit crudely. Nevertheless, here we are. (Love it? Hate it? Let us know.)

    I say good on them, they have created something very nice and I for one won’t frown on them for trying!

    Cheers.

  27. Mark says:

    @ Nathan

    “honestly I think some people are being a little over critical”

    Amen.

  28. Adrian L. says:

    “honestly I think some people are being a little over critical”

    No more critical than I expect people to be about my work. I imagine the parties responsible for the redesign are more than happy to hear people’s concerns.

  29. Design-wise I like the look a lot but most of all I’m glad to see new content. The contributors are all definitely web superstars with very busy schedules I’m sure but I’ve been visiting a lot lately wondering when I’d see something new. Mission accomplished…and then some.

  30. Regarding the adjustable color pallette for every issue feature…

    That ’s actually one of the subtle changes that I discovered works well with presenting issue changes, etc.

    On this site that I worked on, we took hints from the print magazine and used the magazine’s colored border to change the site (the color changes according to the issue). That way when a regular viewer goes to the site, they immediately know if a new issue was released.

    Examples of the changes:
    Issue #62 - Dark blue
    Issue #63 - Burgundy
    Issue #67 - Purple love

  31. @ Adrian:
    No more critical than I expect people to be about my work. I imagine the parties responsible for the redesign are more than happy to hear people’s concerns.

    Exactly. If nobody was being critical about the errors and such, they might not get fixed.

    I don’t believe there’s ever a way of being over critical in design.

  32. Steven says:

    I so wish I could invest more time and energy into your ongoing discussion of the finer points of contemporary design. Unfortunately, other, more mundane/ practical, matters bekon for my attention. I will agree, however, with those who simply appreciate the work for what it is, and abhore the endless criticisms it has drawn.

    And, I believe there is, by the way, a thing called being “overly critical” in design — it’s when you’ve fallen into a relativity paradigm so deeply and may have forgotten that the only way out is through commitment.

    That’s when/ where the designer exhibits intellectual maturity; this is in acknowledging the importance of relativity (or of criticism, in general), though realizing that for all practical purposes (and design is, for many out there, a practical endeavor) there’s no need to settle for it’s repetitious, circular, inconclusiveness.

    Anyway, that’s what I think. What do you got?

  33. Ralph Spoilsport says:

    If you separate the design from the markup, there is really not much to talk about here. There are some elements I would question, and others are very nice, but nothing terrible and nothing great.

    The only reason we are talking about this design, is because it is ALA.

Leave a Reply

Shared
PBS Frontline - Breaking the Bank: An entertaining and illuminating hour-long look by PBS into the near collapse of the U.S. banking system. Frontline has done an excellent job of covering the financial crisis over the past year. Lots of good Ken Lewis/John Thain footage in this particular episode.
Long exposure shot of a Roomba cleaning a room — I owned one of these things and found it to be substantially more trouble than it was worth. While this shot makes the coverage area look good, a lot of “stuff” collects near the edges, cords and other impediments often stop the thing, and it just doesn’t pick up enough at the end of the day. Great photo though.
LogoLounge: Trends in 2009 Logo Design
A nice roundup of what's going on in the world of logo design. Looks like we're finally moving away from the whooshes and ovals of the last several years. Good stuff.
Using brain waves to levitate ping pong balls: Amazing implications for biofeedback, video games, and our future as a bunch of sedentary Wall-E characters (via Scott Adams)
Kareem Abdul-Jabbar: The Unstoppable Skyhook - “I don’t recall ever being blocked by someone who was guarding me.” I’ve always wondered why NO ONE in the NBA has made the skyhook their go-to weapon. It is the most unstoppable shot ever invented and yet no one learns it anymore.
The Best Free Photos on the Web (Where to Find Them and What to Do With Them) (via John Nack)
Rands In Repose: A Deep Breath
If reading this doesn't make you feel like an inadequate manager, you must be really really awesome. And people wonder why Apple makes such awesome stuff...
Now you got a crapload of squares (via igotyourcrazy via jimray)
TiltShift Generator - Need to get myself a legit tilt-shift lens. Until then, I am more than happy to roll faux with this slick online tool.
How to create an HDR effect using only Lightroom and Photoshop
Great tutorial by Russell Brown. I really need to get up to speed with editing photos in RAW mode. Then again, I'm sure cameras will automatically take bracketless HDR photos within a few years as well.
Scripts which create interesting effects in Adobe Illustrator CS
... and here I am not even knowing you can run scripts in Illustrator.
Share Your Google Analytics Data With Everyone
Apparently, Google Analytics has a public API now. Pretty cool. Not sure this is enough to get me off of Mint, but maybe I'll start running both for a little while.
Hivelogic's Top 10 Monospaced Fonts for Coding
Will have to try out Consolas and Inconsolata. I've always been a staunch Monaco 9 guy, but hey, might as well get ahead of my eventually failing eyesight.
Overshared
Nice, Hi-Ball just redesigned their bottles so they are easier to open. Thanks, now I won't feel like such a wuss.
@p1bx I want to like it, but to tell you the truth, I need some sort of quick screencast or something to tell me how I *should* be using it.
@jw Great album. The Decemberists are the closest thing we have these days to a rock opera. Their last three records have been epic.
@drewpickard Totally. It's been an hour and I can still smell the mole on my hands.
Pork Mole at Oaxaca equals money.
We're streaming Obama's healthcare townhall live at http://bit.ly/CPKfW ... get your Tweets in using hashtag #WHHCQ
Michael Jackson was unimpressed by apple juice http://bit.ly/11HU4d
Of all the great things about the iPhone, I still think its ability to recognize songs hummed into it (via Midomi) is the most amazing.
@Aine All I know about it is that I can't use it because it's a downloadable .exe and I use a Mac. :)
@davidgeller Ah, I should have hashtagged that, eh? #billymays #shamwow
The king is dead. Long live the king. I'm talking to you, Vince.
@spencerb @sujal Construction on new house is set to start July 6. Still in the 50 year old condo for now.
50 year old pipes just got replaced. BEST SHOWER IN 2.5 YEARS this morning.
Interesting law which can get you your earnest money back on a condo purchase: http://bit.ly/4rWuhR
@mhaubs Yes. When you're as down on the NBA as I have been, you need all sorts of things to go right in order to get interested again.