August 23, 2005

A List Apart Redesign

A List Apart

Well, the headline says it all. In the past few months I’ve had the pleasure of taking part in the latest redesign of A List Apart. It was a tremendous undertaking, and months in the making, but it’s finally live!

I am responsible for the new design, but this was most certainly a group effort: Eric Meyer on CSS, Dan Benjamin on the new CMS, Damon Clinkscales on legacy content migration, and last but not least Erin Kissane and Jeffrey Zeldman on writing and direction.

The new design is a big departure from the ALA of old. We wanted to imbue the site with a distinguished feel, both professional and scholarly. This started directly with the new logo. After lots of permutations, I ended up with a trusty old friend, Garamond, sitting on a laurel wreath. The overall look takes some cues from traditional letterpress printing and is fixed on a strong (and wider) grid with some healthy whitespace to make reading fun for all ages. ALA now features a numeric bug (not the problematic kind; I’m referring to a small branding element) for each issue stamped right next to the logo. This makes the current issue immediately available from all the major site pages. The base color palette is neutral and warm, but each following issue will sport it’s own color palette (as hinted by all the legacy articles in grey). This will give ALA a brand new face with each issue.

When creating the new design for A List Apart, we also tried to foster a look and feel that would carry over into the new brand extensions like the long-awaited An Event Apart and the upcoming A Book Apart. All the websites and associated entities will feel like a big happy family.

There two last things I want to mention. First, Kevin (who is now ALA’s staff illustrator) and I had time to whip up some t-shirts to celebrate the launch (with the printing expertise of Threadless). We think ALA is great and we want to share the fun. Second, A List Apart now has RSS feeds for a individual articles’ comments. This is perfect for a site like ALA that usually generates dozen of comments per article, and especially useful for someone who needs to follow the comments in the hopes of getting help with a particular problem.

A List Apart is now happily lounging around its new home on TextDrive’s spacious servers. A lot goes into migrating a site like this. The site is truly immense, and it takes time to get everything right. With that said, we are still tidying up the code on some pages (especially the older ones). We didn’t want that to delay the launch, and should hopefully have the place squeaky clean soon enough. For know, enjoy two big launch articles: When You Are Your Own Client, Who Are You Going To Make Fun Of At The Bar? by Jim Coudal and Facts and Opinions About PDF Accessibility by Joe Clark.

OK, I won’t keep you here any longer, since Zeldman wrote a launch article that will give you the full skinny. I hope you like it. Enjoy, the new A List Apart!

Commentary (126):

1. Terrence Ryan says… aug 23, 2005 | 3:14 am

Dude, the new ALA site looks incredible. So elegant/classical. congrats, you should be proud of it.

2. Mark says… aug 23, 2005 | 3:19 am

Awesome. Well done.

3. Miko says… aug 23, 2005 | 3:46 am

Wow, the logo really nails it. Great stuff.
(I see now the Safari navigation column bug has been fixed ;)

4. Mike D. says… aug 23, 2005 | 4:03 am

Love, love, love it. You are the Vincent Van Gogh of the liquid crystal screen.

Get drunk tonight.

5. Aleksandar says… aug 23, 2005 | 4:30 am

Jason, this is a work of love. After many designs and web sites I saw, this is the first one in months that ignited the “I need to design web site” spark in me.

Excellent, just excellent.

6. Faruk Ateş says… aug 23, 2005 | 4:31 am

Amazing, I love it, very elegant, very pretty, very smooth. Yum!

Only thing I’m not too excited about is it being hosted on TextDrive. They have seriously messed up recently so I just can’t be supportive on that move right now…

7. Atle says… aug 23, 2005 | 4:38 am

Finally! Been a long time since i visited ala, now it’s back in my daily “must-read”-folder. Doesn’t matter if new articles are posted, I’ll just sit back and look at it! Great, great, great work!

8. Veerle Pieters says… aug 23, 2005 | 4:55 am

I love the overall look and colors. It’s very light and inviting to explore and read. It has the right balance, not too ‘fancy’ but certainly far from boring, not easy for a site that has a large amount of text. It’s those little details that make this site stand out, such as the nice rollover effects on the article titles, simple and effective ;-) Super job Jason!

9. Colly says… aug 23, 2005 | 5:23 am

Lovely job. Really spanking gorgeous.

It has that delicious newspaper-feel, and feels very authoratative, which will be great for those coming to the site who are ALA virgins. If only I could roll it up and read it on the train.

10. Tony B says… aug 23, 2005 | 5:24 am

The design is great, the articles are greater..the t-shirts..the book..

sorry, I’ve just come…ahem..

11. Tony B says… aug 23, 2005 | 5:25 am

Now we know what Jeffrey meant when he said “ala is regrouping..we have our reasons”..

12. Gerard McGarry says… aug 23, 2005 | 5:36 am

Good to see ALA is back! Was shocked this morning when I saw three new items in the long-defunct RSS feed.

The redesign is a vast improvement, fully realised site design. Well done!

13. Hercules Papatheodorou says… aug 23, 2005 | 6:53 am

It’s just great! But it really needs a print mdeia stylesheet, doesn’t it?

14. Baglan says… aug 23, 2005 | 7:01 am

Absolutely great to have ALA back. I suspected that they undergo some changes (or just went to a long vacation) but was honestly afraid that the project could be abandoned.

15. Markus says… aug 23, 2005 | 8:05 am

That’s so cool! I will go through the old articles too, just to see the design working…

16. Sascha Ebach says… aug 23, 2005 | 8:08 am

Very nice, but there is no print style sheet

17. Calrion says… aug 23, 2005 | 8:09 am

Wow, that rocks! Just came from the ALA site (even though I’m a regular reader — go figure) and I love the new design.

Zeldman’s right, the old design was a little uninspired; yours has just the right amount of brand, with a little bit of punch — the focus is still the well-set content.

Congratulations!

18. Björn says… aug 23, 2005 | 8:34 am

Well, printer stylesheet or not, it looks fantastic! But it’s another nail in the coffin for non-fixed layouts…

19. Jens Meiert says… aug 23, 2005 | 8:39 am

Nice work. (But missing the print style sheet, too…)

20. M.e. says… aug 23, 2005 | 8:48 am

I saw the new design before I read this and knew it was you. Bravo. I love it all. Your flair for typography makes reading more fun than beer. Okay, almost though.

21. Asela says… aug 23, 2005 | 9:05 am

Great design! Nice colours! Love it!

22. Ian says… aug 23, 2005 | 9:08 am

So what happened to yesterdays page structures? Was any of it able to be salvaged and restructured? Or was Zeldman like, ‘Get it out of my site, Stan!’? It looks really good. I can’t wait ’til there’s a rainbow of articles to nav through. Great job, dude.

23. Greg Hoy says… aug 23, 2005 | 9:15 am

Great design Stan. I was awaiting this with bated breath. I’m a bit surprised at how subdued it is, but that’s what makes it work. I’m seeing more and more examples of larger text sizes for nav and button treatments out there, and I couldn’t be happier. Really defines the hierarchy and prioritizes information.

Simplicity is class. Nicely done.

24. Chris K says… aug 23, 2005 | 9:18 am

Definitely the talk of the community this morning. Pat yourself on the back, you outdid yourself.

25. juque says… aug 23, 2005 | 9:21 am

Jason: Absolutely lovely!, awesome work, congratulations for you and the team.

26. Jason Santa Maria says… aug 23, 2005 | 9:25 am

Thanks so much everyone! I just woke up to a deluge of email.

To squash a bit of the css for print bits going around, I can only say again, this was a huge site. We are still working out bugs and polishing rough spots. We didn’t want it to delay the launch because so many other things already had. So, the rest of the work will be done live.

Thanks again, you are all very kind.

27. Matt Thomas says… aug 23, 2005 | 9:38 am

Here you go, raising the bar again…

Great work, Jason. Sites like this help dig the grave for the too-often-relied-upon cop-out that you can’t have great typography on the web. Not only we can, but we must.

28. Dave Simon says… aug 23, 2005 | 9:49 am

Well done, Jason. A tip of the hat to you and the rest of the crew.

I’m very glad to have ALA back, it seemed to be dying on the vine lately. Now I know why.

Great content this issue, too. As always!

29. Jason Dowdell says… aug 23, 2005 | 9:55 am

I’m sorry but I think it looks pretty bad and I can’t believe 27 people all had raving reviews of how glorious the new layout looks. I find it hard to read and the layout is unbalanced. These are just my opinions and I call em like I see em. No ill will or anything, it’s just not my favorite site, that’s all.

Something that drives me nuts though is how everyone has said how awesome the layout is. What happened to constructive criticism? All of you expect Jason to be perfect all the time? That’s unrealistic and naive and an injustice to him as a designer. I personally like the comments that tell me what I did wrong, ones that just tell me how great I am [while nice] are far less important.

Come on guys, take off the rose colored glasses.

30. Jason Santa Maria says… aug 23, 2005 | 10:05 am

Jason: Please do criticize! You are exactly right, constructive criticism is a great thing. But, in that same breath, just as you don’t like the design and want to speak up about it, don’t be harsh to those that do like the design and want to offer criticism in that way. Criticism is a two way street. I appreciate you honesty, and respect your opinions :D

31. Trevor says… aug 23, 2005 | 10:13 am

I agree 100% with Jason, it seems it was unsure if you wanted to center it or left justify the layout, it looks messy just lingering about. The markup could of been better too, Aren’t these guys the best of the best? Unless its still in development? Or am I just being too picky and expect to much from the best. We don’t develop for people with 800x600 anymore?

Don’t get me wrong, its a nice site, I just would of expected 100x better than this from these guys.

32. Jason Santa Maria says… aug 23, 2005 | 10:18 am

Like I said in the post Trevor, we are still cleaning things up. We didn’t want to wait to squash every last bug and quirk. We had already delayed the launch enough.

33. Trevor says… aug 23, 2005 | 10:29 am

Jason,

Yea I know, I am just being a critic, I know his site is all very very useful, probably one of my favourite and it’s nice to see a change but I just would of expected something different.

34. Dan Mall says… aug 23, 2005 | 10:29 am

Van Gogh’s got nothing on you. It seems that some people can’t appreciate the subtleties of the way that the code works with the design, but they just need to dig deeper.

Very inspiring; you’re the wind beneath my wings. Or something like that.

35. Tony B says… aug 23, 2005 | 10:30 am

Well I hope you (or Mr Meyer) fix the css print styles soon, personally I think the site is great and the print stylesheet on the old site was great - maybe because I am long in the tooth I can’t read these articles on line, I have to print them out. An article like Joe Clarks on PDF accessibility is something I really need to read :)

36. Mike D. says… aug 23, 2005 | 10:52 am

Jason Dowdell and Trevor: Sure, there is nothing wrong with some criticism, but I do think this new design is an A+. A 4.0 if you will… and even if you won’t.

The two valid criticisms I’ve heard so far is the lack of a print stylesheet (simple soon-to-be-fixed oversight I’m sure) and the leap to 1024x768 resolution (arguably an ok thing to do for a site like this).

Jason D., you mentioned it was “hard to read” and “unbalanced”. Those are kind of a little vague, no? How about drilling down a little? What about the site is hard to read? 11px dark-on-light Verdana with loose leading was just about the easiest type combination to read the last time I checked… but perhaps you’re talking about another aspect of the design. I don’t know… let’s hear it.

Trevor, you said you expect 100x better. 100x? Two orders of magnitude? It’s that bad? 100x better than this would involve ALA making toast for me in the morning, pressing my shirts, and then taking the trash out. Not sure anyone’s figured out how to get a website to do that yet.

37. Malarkey says… aug 23, 2005 | 10:54 am

Sometimes you buy a new CD and it has instant impact. Other times you might be unsure on a first listen and it takes a few listens in the car to fix itself in your brain. When that happens it’s usually your absolute fave (until the next one).

Oh yes, I remember why I came here. ALA… I’m still playing it in the car.

38. Trevor says… aug 23, 2005 | 11:02 am

Mike,

I dont see how the target is using all 1024x768, I mean a large majority of ala is accessibilty, so people with bad eye site who use 800x600 with a default font-size can’t view the site without the annoyance of scrolling horizontally, s a bit contradicting. Why is the navigation before the header, and the images in the markup, I was always told to seperate the two, in this case you would need to edit the markup and the styles to change the look and feel.

And yes 100x better is what I would of expected, I am not saying I hate it or anything along those lines, I am giving my two cents from being a daily visitor who refers this site to a lot of co-workers, teachers, education facilities who are still in need of quick articles, I can’t see myself doing that when it’s meant for certain audience as you say it is, I don’t see how a site this popular could be made for one audience.

39. Mike D. says… aug 23, 2005 | 11:26 am

Okay, Trevor. Thanks for explaining. I better understand where you’re coming from now.

With regards to the 1024 layout, I just have this to say about it: Although the site is partially about accessibility, as you state, I do think the main audience for it is practitioners… most of which probably do have 1024 or greater resolution. Your point stands though, and upon glancing again at the design, I wonder if a JS-based rejiggering solution is in order (ala Cameron Adams). If you’re at 800x600, perhaps the *left* column could go away and the logo miniaturized on top. That sounds like a fine solution to me.

I still think we are talking about minor details here, all of which can be worked out in fairly short order. 100x better seems like a harsh assessment to me.

40. Trevor says… aug 23, 2005 | 11:41 am

Mike,

When i say 100x better I dont mean overall design. I was just shocked to see the bad points on a site built by the pro’s, people we buy books from, people we refer everyone looking to move forward with standards. I am not basing my judgement on just the site alone, i am thinking in broad in terms of the mentioned above. I’ve managed to move a local college to web standards, mainly because of ALA last year. ALA is about learning, and they still teach the “design for the lowest common resolution” I can’t really sport such an awesome resource thats contradicting.

But yeah, maybe 100x is harsh, I think it was the shock. I won’t judge, just trying to help.

41. Eric Meyer says… aug 23, 2005 | 11:47 am

Trevor,

You keep saying that the site could be 100x better, that its markup is awful, that it has aspects bad enough to make it not worthy of being an example of standards-oriented design— but you never actually say what is bad. For all we know from your comments to date, you just really hate h4 elements.

So how about some specific examples of what’s so terrible? That would be the most constructive criticism of all, and I’m really interested in hearing it.

42. Jason Beaird says… aug 23, 2005 | 11:50 am

All sniveling, nit-picky comments aside, the design looks GREAT! Excellent use of typography, nice subtle hover affects, inspiringly different layout. Bravo! Makes me proud to be a Jason.

43. Rob Weychert says… aug 23, 2005 | 11:54 am

Congrats on a job well done, Stan! Clear and simple, but still distinct and classy, perfectly befitting the highly respected industry landmark that is ALA. I’m shedding a tear. Of joy.

44. Cameron Moll says… aug 23, 2005 | 11:59 am

Beauty, Jason. I’m struggling to find issue with any of it. Supremely well done.

45. Smallest Photo says… aug 23, 2005 | 12:08 pm

Just spectacular.

46. Jason Dowdell says… aug 23, 2005 | 12:26 pm

Sometimes you have to be the oil in the water to get the desired effect. I can be like that and don’t mind being a catalyst every now and then. Here are the explanations of my original comments.

1. Hard to read: I’m using a powerbook 15” and [I recognize the powerbook monitors are not the best in the business because they have poor backlighting] it’s hard to distinguish the key areas of the site because the colors are so close together. The maroon post titles blend in with the small border on top of the top navbar and the fonts on the post titles are a bit blurry on my monitor. The 3 graphics in the 2nd vertical column don’t have enough contrast to draw any attention to them and the font on them is so light it’s hard to get what each graphic represents at a glance. The top navigation looks too templated, and the rollovers on each main nav item in the top navbar seem out of place.

2. Unbalanced Layout: The graphic in the upper left side of the page throws the page out of balance. While I like the graphic and the contrast of the black on beige [pops out nicely to the eye and I like that contrast] but having the image there is awkward.

3. Crumbtrail Nav: Looking at the crumbtrail nav on http://www.alistapart.com/topics/code
makes me think that the purpose of that navigational element is lost. Typically, you look at a crumbtrail and know what page you’re on in the trail because the font colors and styling are quite different for a link versus plain text. On this page that’s not the case.

I understand your overall design is more on a minimalistic style and that’s why you’re using slight variations in the hues used on fonts and styling instead of making them dramatically different. And obviously you’re good at what you do, there’s no debating that, but the site isn’t as usable to me as some of your other work… like your personal homepage.

As far as criticism being a two way street is concerned: I completely agree and am up for all sorts of critiquing of my work. My own site’s xhtml doesn’t validate [I could care less] and I’m sure there are all sorts of design issues with it. It’s just not normal for a large group of individuals to be in perfect accord on a single subject, so that’s what struck me as being way too bandwagon-ish for my tastes.

47. James Archer says… aug 23, 2005 | 12:32 pm

Great work, Jason. It’s a finely crafted site, and you handled a lot of tricky issues with great dexterity.

To be honest, I have some doubts about with this is the right look for ALA, since it’s such a radical departure from its past incarnations. The past versions weren’t as lovely as this one, but it would have been nice to see some continuity of brand. It appears that the new content is going to be very similar to the content of the past, so I’m not sure that such a radical brand overhaul was necessary.

Of course, I don’t fault you for that. That’s probably more of a Jay-Z issue. You were given the job of designing a beautiful site and you accomplished it admirably. :-)

48. Dave Lowe says… aug 23, 2005 | 12:46 pm

Good job Jason! It’s very classy and distinguished-looking. The typefaces are great, and I love all the hover styling - interacting with the site is a pleasure.

It’s a great contribution, especially as ALA is such an influential site. Nice work.

49. John Athayde says… aug 23, 2005 | 12:50 pm

nice job :)

50. Ian Cheung says… aug 23, 2005 | 1:02 pm

A massive improvement over the last design definitely deserving all the praise garnered so far.

But…

I agree in part with Jason (Dowell). I had to reach for ctrl + to up the font size almost immediately when I started reading Jeffery Zeldman’s launch article. My eyesight is above average and I would like to keep it that way. :o ) Also the layout is a little unbalanced, the front page more so than the others. Another thing that struck me is (while reading Jim Coudal’s article) is that it bears an uncanny resemblance to the pdf version of Design In-Flight.

But as Jason (Santa Maria) said they are still working on ironing out the little bugs and quirks. Looking forward to v4.1 :o )

51. Dan Mall says… aug 23, 2005 | 1:14 pm

@Jason Dowdell: Good criticisms, but a bit uninformed.

1. All of those seem to be monitor issues, not actually bad design decisions.

2. The graphic purposely has more emphasis than anything else on the page. It’s not just any old graphic; it’s the logo, which sets the identity of the page. As far as the creating an unbalanced layout, the contrast of an empty column versus more content-heavy columns on the right side are actually what create balance on the page.

3. Format and placement play a big part here. First of all, because it’s a list, it’s already set in a different convention, which shows that it’s a different element. The colors supplement that decision by distinguishing it from body copy. Also, it’s a lower priority item than the actual content, which describes the sub-topics in greater detail. It’s an alternative way to navigate rather than being the primary path to those sections.

Constructive criticism is great, and to assume that any site will be perfect on launch is unlikely. However, good design should be appreciated, and to critcize a site in which a lot of thought has obviously been done requires the same amount of consideration.

52. Glen C. says… aug 23, 2005 | 1:22 pm

“Get drunk tonight.”

Excellent, excellent, excellent. I love the whole feel. The design suits the content.

53. Joshua Lane says… aug 23, 2005 | 1:24 pm

I think it looks really good Jason. I have a few comments to share (based entirely on my own subjective tastes and preferences).

1) I would have given the footer the exact same color treatment the header received, but in opposite order (beige behind the footer text, then thick brown line after that). To give the site a little more balance and help frame the main content. This is a personal preference though, so “different strokes for different folks” and all that.

2) The thin black line appearing on top of the logo sash thing (or whatever it is) looks odd to me. Might it look better underneath instead? I don’t know. It just strikes me as out of place.

3) The mouse-overs in the menu seem odd to me as well. It’s probably because you’re just using the same format as the article links. I would have done something different to better separate those two.

4) When reading/viewing an article, the “Snapshot” thing on the side bar seems oddly placed. I thought it was a callout to another similar article and I was wondering why there was no link. Turns out, it’s just a quick summary of the article I’m already looking at. Is there a better way to present this piece of info? Maybe treat it similarly to how the italicized info on the home page is handled?

Alright, that’s all from me on the negative side of things. On the positive, I think the site really makes readers comfortable and I like that everything is so wonderfully presented. Very accessible and usable without much fuss and searching needed to find things. Typography and color scheme are also top notch… very elegant and sophisticated.

Really good work. On a scale of 1-10, I give it a solid 8.

54. jason lynes says… aug 23, 2005 | 1:26 pm

amazing. i am also struggling to find something wrong with it. i know it’s good when i see it and like a previous comment said feel the need to design.

classic, refined, and outstanding.

55. Allan Rojas says… aug 23, 2005 | 3:47 pm

Impressive… Flawless… Perfect !

56. John says… aug 23, 2005 | 4:35 pm

What CMS did you switch to?

57. Dale Cruse says… aug 23, 2005 | 5:34 pm

First, I want to say congratulations to all involved - I believe this is a significant improvement over what you had before. It’s subtle - and I believe that’s it’s power. Many of us (me included) try to knock people upside the head with our designs. I think you’ve proven that subtlety is just as viable.

I do want to address something that I haven’t seen others mention - centered headlines in the main article column. Coming from a newspaper background, that feels unsettling to me. Yes, I know this isn’t a newspaper, but those are still effectively headlines. Some commented that they weren’t sure if you were going for a centered page layout or not. I think the centered headlines in the main content area feel odd vs. the flush-left headlines in the other content areas. Perhaps making them all flush-left could alleviate some of the visual confusion some have. I want to emphasize that I don’t there’s a right or wrong here - this is just my preference.

I also think the leading is a bit too generous, but again, that’s just preference.

All in all, I think this is really well done. You’ve certainly set the bar higher for all of us.

P.S. I also wish this comment field were wider!

58. Andre says… aug 23, 2005 | 5:48 pm

Very very very nice. Extremely well done, Jason! I absolute love the way the content is organized.
The site is very “readable”, and that’s always a good thing :)
Keep up the good work!

59. Jough Dempsey says… aug 23, 2005 | 5:52 pm

Wow. It looks great if I maximize my browser on my widescreen 1280x800 display, but generally I leave my browser set to about 800px wide and keep some other smaller windows next to the browser - Trillian, Winamp, a little Sage TV window sometimes…

Anyway, not only is there horizontal scroll in 800px wide (and even at 1024px wide there’s a tiny bit of scroll in Firefox/WinXP) but the column lengths are about 30% too wide to be easily readable, especially with the tiny font size scrolled to 150%.

I found the articles unreadable. So… pretty site, completely useless. I’m already cutting and pasting the text out to put into a more reasonable container for reading.

So for me,

Look: A-
Useability: C-
Horizontal Scrolling/Fixed Width Layout: F-

But other than that it’s great. ;)

60. Jason Santa Maria says… aug 23, 2005 | 5:59 pm

An A, C, and an F! I am already doing better than I did in college! score! :D

61. Trevor says… aug 23, 2005 | 6:00 pm

Eric,

I didn’t say anything about 4 elements or that the markup was bad? Where did you get this from?

62. Trevor says… aug 23, 2005 | 6:04 pm

Eric,

Anyway, sorry about the double post, I only stated the obvious things I think that need improvement earlier, main thing for me is the lack of support for 800x600. I went into some detail, are you sure your question was meant for me? I didn’t mention h4 elements anywhere in my comments.

63. Ian says… aug 23, 2005 | 6:12 pm

WinAmp! That’s priceless!
Jough, you know you can disable the styles with that tiny Firefox browser. Should save you repeated trips to the Edit menu.
Should also make it less-than completely useless.

64. Matt says… aug 23, 2005 | 6:18 pm

It sure is easy on the eyes (great work, Jason), but I’m also in the “I keep my browsers closer to 800 wide even though I have a dual-monitor setup in front of me” camp. Was shocked to reach the home page and need to scroll horizontally.

65. Allan Rojas says… aug 23, 2005 | 6:20 pm

Jough -

Can’t believe you give the design a “C” on usability!!! What exactly is against usability on the site? I just asked my cat to use the site and it did pretty well, he particularly loved the “Issue No.” link at the top of every article…

I’m going to encourage Jason to ignore where it says “articles unreadable” and “completely useless”… I mean, black text on white background is the most readable you can get!!! And the line-space makes it even easier to follow… Let alone talking about the nice use of side images, bullets and subtitles all over the text…

Please people, don’t be jealous at this masterpiece!

66. sergio says… aug 23, 2005 | 6:54 pm

I want to have your babies.

Ok, so maybe I’ll just buy you a beer. Great work, Stan. I agree with Joshua on the comment that the footer could use more color, but other than that, it’s a gorgeous exercise in understated hyperbole.

Or something.

67. Jason Santa Maria says… aug 23, 2005 | 7:05 pm

I know what you and Joshua mean, Sergio. After he posted that comment, I swiveled around in my chair to talk to him :D

Trust me when I say that I am not one to settle on a design from the outset. I toyed a lot with elements like the footer and navigation to get them just the way I wanted. So, I did indeed try the footer with more color and the nav with different hovers, ad nauseam. But I kept reeling it back in. I wanted quiet sophistication. I wanted light and airy. There is a nice grid, but not an obtrusive one. Certain things happened because of the way ALA is structured, or the way the CMS needed to work, and some of these things I couldn’t change with design alone. In the end, the decisions I made, and I am pleased with them. I think it’s a solid site.

68. Dan Benjamin says… aug 23, 2005 | 7:32 pm

JSM, you get an A+ from me, if for no other reason than you handled the stress so well.

As always, was a pleasure working with you!

69. Miko says… aug 23, 2005 | 7:43 pm

That’s the first time I’ve seen an up-to-date platform — through a RSS feed (on AnEventApart) compared to the usual enter-your-email mailing list. That’s a great idea.

70. Jason Santa Maria says… aug 23, 2005 | 7:45 pm

Thanks! I’m glad someone noticed. I thought that would be better than an email. Less maintenance for us too, now we can just roll that into being AEA’s direct news feed.

I like the typography there too…

71. Peter Asquith says… aug 23, 2005 | 9:37 pm

Lovely job! All this with a wedding to plan as well - stupendous!

72. JM says… aug 23, 2005 | 10:12 pm

Great job with the design! It’ll take some getting used to for me, but I think I can cope with it…It looks very distinguished and I don’t know, “roman-ish.” :P There’s a beter word, but I can’t think of one…

Excellent work!
JM

73. Adam Bramwell says… aug 23, 2005 | 11:04 pm

The side-header transposition works for me; having the tagline in the footer balances the logo through all that white space on the left. Nice.

The a:hover details are another highlight but some titles are h a r d - t o - r e a d with so much letter spacing!

Can you please tell me why would i want to validate ALA’s feed though? Is it a good use of anyone’s time? The link to validate the feed is more prominently placed than the feed itself in my opinion.

All said, it looks and works shweet. Nice refresh guys!

74. Douglas Gontijo says… aug 24, 2005 | 2:42 am

Hmmm, simply amazing… I never visited this site before, as I’m not designer, btw, just looking at some css sites, I’d found this link and clicked it, for my surprise I got this wonderful work. Talking about code/stylesheet, you did the best. We get one trouble on menu-rollover, it take a bit to work properly (maybe image load?). Btw, formal and centered makes it easy to browse.

Perfect under all browsers.

Congrats

75. Faruk Ateş says… aug 24, 2005 | 4:50 am

Stjanson, (Jason/Stan)

After having browsed around and read articles in the new layout (all over) again, I have the following two remarks:

1. the font-size of code samples is really, really small. So small that it makes me squint my eyes, scratch my head, select the code and copy it to my editor just to see it more easily.
Thankfully I have two monitors, so that I can keep them both in view normally, but it’s not exactly the most optimal solution. Any chance the code sections can be bumped up in fontsize a notch or two?
What’s the reason it’s this small, anyway? Or is it simply an oversight?

2. the content works so much better in this layout than it did in the previous one. I really feel that the content out of context issue matters greatly on the new ALA and its content, now.
Line lengths are much better and the overall feel of the design really does what you wanted it to (as expressed in your interview at Malarkey’s). Good job :-)

76. David Horn says… aug 24, 2005 | 5:03 am

Just brilliant. A long time since such an inspiring design came our way - congratulations.

77. Jens Meiert says… aug 24, 2005 | 5:41 am

Ah, but why does ALA ignore 24% of intl users using an 800x600 pixel resolution (as I just noted at 37signals?

78. Faruk Ateş says… aug 24, 2005 | 5:51 am

Jens,

That 24% is pretty unreliable. First of all, it really does not apply to the ALA audience, and second of all, TheCounter.com’s stats only apply to the visitors of the sites included in their statistics tracking. They don’t track the entire Internet, nor do they track half of it, nor anything else that is a remotely accurate representation of one’s target audience. The only thing they can rely on is the statistics that ALA gathers on their own, and if they’re including resolution stats on that, I’d be surprised to see more than 2-3% of 800x600 users on them.

Don’t forget that ALA is for web developers. That audience is the most likely, after extreme designers, to use the highest possible / available resolution.

79. Jason Santa Maria says… aug 24, 2005 | 7:32 am

Faruk: (from #75)
1. That is exactly the type of feedback that’s helpful. We tested on any platform we could get a hold of, but what may look readable to us, may not to other people. I will investigate. Stuff like this and the print css (which is nearly done) are just parts that we didn’t want to delay the launch. We knew we could fix them in the coming days.

80. Faruk Ateş says… aug 24, 2005 | 8:02 am

Stjanson,

I forgot, my setup is: WinXP. Browsers tested: Mozilla 1.7.8 and IE 6.0.

Seems the code CSS is just small by definition. It’s 0.85em (pre {}, base.css line 22) of 0.8125em (body {}, base.css line 2)

81. Jens Meiert says… aug 24, 2005 | 8:26 am

I replied to Faruk’s comment (#78) at 37signals.

82. Rachael says… aug 24, 2005 | 8:56 am

Looks clean & elegant to me. Good job!

83. Rowan Lewis says… aug 24, 2005 | 9:02 am

I agree with the font size being to small, but Faruk, why not just press CTRL-PLUS? :)

Also, if there are really people out there that read ALA and use such a low res, its no big deal to scroll to the right. Although I still think it should have a min-width set ;)

84. Jim Ley says… aug 24, 2005 | 9:38 am

0.8125em for body text, that’s a joke surely? When does the real accessible site come out?

85. Mark Ng says… aug 24, 2005 | 9:57 am

The reason why we can’t just press ctrl-plus is because of the fact that the design breaks when you do (look at the issue number). The markup seems to be okay, but “could do better” - this is just from looking at the frontpage.

Designing a page that horizontally scrolls at resolutions of less than 1024x768 by default on a *site about accessibility* is, well, odd. The argument I’ve seen here about “target audiences” is somewhat ridiculous, and akin to saying “well, all of my target audience have flash installed.” or “all of my target audience have broadband”.

Specific criticisms about the (otherwise okay) HTML markup are the use of bold tags, and not using labels on forms. I’d also question if a byline is really a heading ?

Something else, and a criticism I have of the older design also, is why the font size does not affect the size of the columns ? I have no way of making the site use more of my screen real estate, if for example, I were hard of sight and wanted to increase the font size on a large monitor, I would be left viewing a couple of words per line.

All in all, I think the ALA team think they know what they are talking about, and some parts of the web industry think they are “experts”. I personally think the accessibility and usability of the ALA website, whilst being much better than an average website, leaves a *lot* to be desired if it’s supposed to be a shining example.

(This is before I start wondering why *anyone* would want to use a transitional standard when they appear to be touting best practice and standards compliance.).

86. Mark Ng says… aug 24, 2005 | 10:09 am

Actually, on further looking, I’m noticing more nasty things in the markup - whats the class caps all about ?

87. Ocoth says… aug 24, 2005 | 10:17 am

Another point, why do you use a span with a class of caps for acronyms? Surely, if you were going to class acronyms, you should use the element designed for it, and in the process adding accessibility? Or abbr.

And if you wanted to be picky, couldn’t you turn:
<span class=”issn”>ISSN: <b>1534-0295</b></span>
into:
<acronym title=”International Standard Serial Number”>ISSN</acronym>: <cite>1534-0295</cite>
or, if you must both the items as one object:
<span class=”issn”><acronym title=”International Standard Serial Number”>ISSN</acronym>: <cite>1534-0295</cite></span>

Then, couldn’t you use a fieldset with legend for the search form, instead of a heading. Maybe some labels or titles or filler text for the fields?

88. Jason Santa Maria says… aug 24, 2005 | 10:24 am

Just a note about the span CAPS. This is a deficiency in the current port of Textile to Ruby on Rails. We tried to use Textile as much as possible, including in the CMS to enter articles, to make our lives easy. But there are some minor missteps in makes. One of them is wrapping two or more capital letters in a row in that span. It should hopefully be fixed soon. Same with details here and there like a missing label on some form elements. We know the site isn’t 100% perfect, and that is ok. The site is immense, and we are only a couple people. A relaunch of this scope is never really perfect out of the gate. We are on the job chaps, and rest assured, we will polish this sucker until you can see your face in it.

89. Faruk Ateş says… aug 24, 2005 | 10:50 am

“we will polish this sucker until you can see your face in it.”

Shit, bloggers’ vanity will go up even more!

90. Krista Stevens says… aug 24, 2005 | 10:56 am

It’s great to see ALA back again! Three cheers for your lovely design. It’s sophisticated, yet inviting. Very nicely done. The high calibre content has been missed. I can’t wait for the next issue!

91. Charlynda says… aug 24, 2005 | 12:21 pm

It looks great. While some have issues with the fixed width - you probably would have received just as many complaints on a fully fluid site (potentially forcing users with higher resolutions to scale their browser windows down to decrease line widths).

I think that it’s quite an improvement over the last version (much more readable for someone at 1280 x 1024) - and like many others, I sure am happy to see ALA back up and running on the web.

92. Jody says… aug 24, 2005 | 12:31 pm

Stunning!

93. William Doyle says… aug 24, 2005 | 12:54 pm

Jason…

I really like the new design. It is just really great.

I don’t know if you have a say in this, but full-text RSS feeds would be superb.

94. Lisa McMillan says… aug 24, 2005 | 1:08 pm

Dude. I have nothing new to say, but couldn’t pass the opportunity to add my congratulations to the mix. You do great work. Thanks for helping to bring ALA back to us!

95. Taare says… aug 24, 2005 | 1:37 pm

I had to look through the markup to see what trevor was talking about. I didn’t find much wrong with it though, and even the errors I found might not be considered errors in other coders eyes.

First of all, the xml:lang and lang attribute is not set in your html tag..

Secondly the class name “column” is more describing the presentational value of the block than the content(maybe switch to content and use the ids content-1, content-2… to separate them (would improve the “secondary” id too).

And finally, the use of <b> is also a bit “invalid”. Maybe replace them with a span or strong tag.


Oh, and you should use the header tags (<h#>) recursively instead of skip right to h3 from h1… That’s actually the one thing I find most wrong about your markup. If you had coded this in XHTML 1.0 strict and turned on “show outline” you would see it complains about it(will validate you though).

That’s also a good point, using a strict doctype. That is no requirement, but I feel better about my self when I use a strict doctype :) (Trying to validate the site with XHTML 1.0 strict makes it complain about the input fields wrapped directly in the form tag btw..).

In addition to markup errors, I miss some skip to links(like skip to content, footer, navigation etc.), and I think it’s odd way to skip the skip to links by placing the navigation above everything. When I use links or lynx, those links are quite useful(and I use lynx and links close to everyday) and I guess the cellphone users will thank you too if you put them in.

One other thing I don’t get is why you would want to use img tags instead of one of the many CSS image replacement methods for your header and some other images. I only use img tags for image that are illustrations, and I believe that using them for a header would be putting presentational content in the HTML.

Also, I don’t think the world is ready for the step to 1024x768 as a minimum resolution quite yet. I know that many schools don’t have the possibility to set their resolution up that much as well as people with poor eye sight.

And even if you won’t listen to what I had to say above, I beg you to add a CSS signature like the one at http://www.markschenk.com/.

Thank you for reading my comment and sorry if some of the paragrafs are a bit odd(I copied it to openoffice before I posted to check for spelling errors :/).

96. Patrick Haney says… aug 24, 2005 | 1:45 pm

Props to you and the rest of the ALA team for doing such a fine job with the site even before this redesign. While I’ve never considered that ALA needed a new site, the one you’ve come up with is fantastic. It’s classy and simple, yet stylish and sophisticated.

Excellent work!

97. Joshua Kendall says… aug 24, 2005 | 4:17 pm

I didn’t even know that ALA was redesigning until I saw it in Patricks ^^ RSS feed.

Nice use of colors and nice layout. Just to let you know I am using Firefox on WinXP and there is NO horizontal scrollbar.

Also people are saying the text is too small. I wear glasses and even with them off I can read ALA clear as day.

98. Chasen Le Hara says… aug 24, 2005 | 4:32 pm

It’s a nice design, but there’s a few things I don’t like about it, as others have noted.

The font size seems a bit too small. Granted, it looks nice and clean, but it’s not as easy to read as the previous design.

I’ve noticed that you’re styling things such as the search button. I’d suggest styling all of the form controls when you get the opportunity, so there’s more of a unified interface.

The front page seems to have an imbalance. I’d expect for their to be three columns, not four, on the front page like the rest of the site. I’m sure that if you wanted to, you’re plenty capable of merging the two right columns, but that’s my preference.

A Book Apart should have a border, but just not have the hover state. As of right now, it feels a bit lost in the design.

The underlining underneath the article links looks a little bit funny. It’s like the underlines are part of the text for some reason when there are multiple lines.

An empty onload on the body tag? What is this, 1998? ;) Hopefully we’ll see some window.onload goodness later.

There are some flat out awesome things that have been done with the design (I’m fond of the no. badge, the navigation, and the A List Apart logo) but it feels like there should be more contrast at the top of each page. With ALA 3, each section was defined by color, with plenty of contrast. While your eye doesn’t really focus on something, I think it leads to wandering eyes that won’t actually focus on the content.

It’s a nice design, but I’m fonder of the previous ALA.
-Chase

99. Rowan Lewis says… aug 24, 2005 | 6:42 pm

The font size, for me, is fine, it was only the code and pre elements that where a little too small.

Other than that, I use font sizes of around 0.8 em all the time, even on my large screen its readable.

Iron out those bugs, you could make the site perfect :)

100. Rowan Lewis says… aug 24, 2005 | 6:43 pm

Just a note, it would be nice to be able to use the code elements within comments.

101. nat says… aug 24, 2005 | 9:37 pm

Nice design. It reminds me of a more elegant Gapers Block; though I have to agree that the body copy seems a bit on the small side and the leading is just a tiny bit much. I’m also not a fan of the centered headlines.
My only real complaint is the way the masthead breaks when you bump up the text size. I’m viewing the site in Safari 2.0, and when I increase the text size, the right side of the nav bar disappears without adding a horizontal scroll bar. If I increase the width of the window, it comes back, but it seems like this could be quite annoying for people who are viewing the site at lower resolutions and would have to keep resizing the text or make their window wider than their monitor in order to use the full navigation. Also, the issue number icon (which I like a lot) only really looks good at the default size; I know it would be extra work, but I think it would be worth it to make a new image for this for each issue.
Now here is my really nit-picky complaint that no one else will probably ever notice: The column widths are seemingly arbitrary, which to me makes the whole thing feel unbalanced. I really want it to be an equal 5 column grid (counting the logo column). At the very least, the logo column and the far right column being equal would help to balance things out.
Anyway, great work.

102. Chasen Le Hara says… aug 24, 2005 | 9:57 pm

Wait a minute, have you already fixed the A Book Apart image? Snazzy.

JSM, are we going to see the design evolve at all or are we going to just see bug fixes? I know there’s plenty of things that need to be fixed (print style sheet for one), but will we see the design or feature set change at all?
-Chase

103. Jason Santa Maria says… aug 24, 2005 | 10:11 pm

Chasen: I’m not quite sure what you mean. The ABA image was always ok (with inner border and all). We will be fixing bugs, tweaking little things (like code font sizing), and adding bits (like print css… which is nearly done). Aside from that, we will be delving into the archives and making sure everything is ok in old articles too. If something is really screaming to be added, we will surely consider it though. As far as the evolution, the site is pretty much going to stay as you see it now.

104. Chasen Le Hara says… aug 25, 2005 | 2:09 am

I mentioned the ABA image in my first comment here because I thought it looked funny, but apparently it was perfectly fine when I made my comment. Go figure :-/.

Anyway, I’m glad that things will be smoothed out. I’m sure I’ll get used to the new design (I already enjoy things like the round border around the article no. badge).
-Chase

105. jérôme coupé says… aug 25, 2005 | 6:47 am

Hi there,

Awsome work. Like it very much ! My only remark is that h-scroll showing up when in 800/600 screen resolution …

106. Ronald van der Wijden says… aug 25, 2005 | 7:41 am

Subtle, tasteful, light, appealing, inviting, slightly uneasy; those are some of the impressions I got after glancing over the new ALA design.
Let’s not forget that this is a vast departure from previous versions of ALA and will take some getting used to, especially for the long time readers. Still, after going over it for some time, I can’t really relate to much of the harsh critisism uttered in previous posts, but that’s just me.
I still have mixed feelings about four column designs; they run a definite risk of feeling overcrowded, yet on ALA this has been compensated by using sufficient amounts of whitespace and clear yet subtle column divisions.

I’ve been an avid supporter of 800x600 resolution support, but the rationale for this wide design is solid, and the fourth column is expendable when just reading articles.

Concerning legibility, after bumping up the text size one notch for IE (yeah, I know: company box) I had no problems reading the various texts. Even the code snippets were perfectly legible, something that leaves a lot to be desired on many sites.

All in all: cracking job!

107. Jan Brasna says… aug 25, 2005 | 10:22 pm

Aaah, everyone can smell your signature there :) Great job.

108. Richard Medek says… aug 26, 2005 | 1:19 pm

The biggest surprise to me about the ALA redesign is that so many Monday Morning Quarterbacks showed up on a Tuesday…

The site looks great. What I love most about it is that now when I go to ALA I want to relax and dig into an article a little more. There’s sort of a subconscious “article worth reading” versus a “skim through a web resource” effect that, in my opinion, was really needed.

109. Mohodin Rageh says… aug 28, 2005 | 1:33 pm

The new ALA redesign is a breath of fresh air and congratulations to the team behind it. I have a couple of issues with this redesign though:

First, the logo image on the left looks like an orphaned element left dangling from a clift. In other words, it would have been better, in my humble opinion, if the height of the top nav is increased to accommodate smaller version of the logo on the top left conner of the page.

Second, if the hover effect on the navigation were placed on the bottom on each menu item instead of top, it would have looked far better.

Jason, can you share with us the reasoning behind these design decisions?

110. Richard Medek says… aug 28, 2005 | 4:18 pm

May I suggest a contest where all the people who say, “I would have done it like this…” submit their redesign of ALA? It could be sort of like the Zen Garden of monday morning quarterbacks.

Just a thought.

111. Don Crowley says… aug 29, 2005 | 7:38 am

I like the new ALA. I love the design… esp. the 4 column layout, it’s different and it works. Cool stuff even if I probably would not do it myself. My opinion about the 800x60 arguement. The intended audience are designers who usually have acres of screen real estate. If it was a more general site it would be of more concern. But as Faruk mentioned at the beginning …your hosting !! The site is down right now. Anyway Jason… thumbs up here

112. Jason Santa Maria says… aug 29, 2005 | 8:06 am

Richard: While that might be a little bit of fun Richard, it’s already giving it more of a spotlight than it needs :D

We aren’t saying that ALA did things the right way or the only way or the wrong way. We did it our way (cue Laverne and Shirley theme); working on our impulses and intuition to make the best site we could.

As with anything of this scope it’s tough to see its success, failure, and adaptability right away. It’s going to take more than a couple days to really see how people interact with the new structure and features. But, we will be ready to make necessary adjustments as needed.

Don: I know many people have had some bad times with TextDrive, but so far they have been nothing but roses. We scored a dedicated server over there, though any site can be hit by intermittent downtime, if the site goes down for a prolonged period of time, it may be because we are fixing something with the CMS (as evidenced by a little bit of downtime late last week).

113. James says… aug 29, 2005 | 4:10 pm

I haven’t read all 100+ comments and sorry if I’m retreading ground here, but why the waste of space under the logo?

It’s very hollow and for some reason I find it incredibly distracting when trying to read because there’s a blinding white void to the left for seemingly no reason.

Why not move the right sidebar (Which makes me have to scroll anyways) into that un-used space under the logo instead?

It seems like a much more logical placement for it and a much more efficient use of screen space.

I have my desktop in 1600x1200, but I don’t browse full-screen. 800x600 may be nearing extinction for desktop resolutions, but it is far from extinct for most people’s browser screen real estate.

Aside from that, it’s just personal preference but I find the layout dry, uninviting and lacking the personality the last layout had.

The layout went from saying to me “Hey, making websites is fun and we love our jobs. Here are some cool tips, tricks and advice from the pros” to “Please take out your text-books and turn to page 83.”

In other words the new layout is very boring and turns me away rather than drawing me in, but that could just be me.

Despite all the criticsm, congrats manging a re-design and migration of this magnitude. It’s an impressive feat in of itself.

Cheers

114. Si says… aug 31, 2005 | 7:07 am

Hi!

I like the ALA redesign, it’s a much friendlier, academic-feeling redesign. It looks pretty authoritative, which I think is great!

But…
I’ve noticed quite a big problem - although I browse using an Apple Mac, I looked at the site on IE 5.2 on the Mac and it flips out badly - the top portion of screen (i.e. where all the main navigation is situated) gets obscured by a big solid grey block. I know it’s a marginal browser, but surely a major benefit of CSS is underpinned by accessibility - and this glitch (I hope it’s a glitch) is really poor. It’s so obviously wrong that I’m surprised it wasn’t picked up at a testing stage!

115. Khoi Vinh says… aug 31, 2005 | 3:19 pm

I really should’ve have added a comment here earlier, but I’m just coming up for air from a redesign of my own. As it happens, that project was made a little bit easier by the fact that ALA had the balls to go 1024 — it was a precedent set just in time, as it made our own decision to go 1024 seem less risky. So for that, at least, I can’t say enough great things about the new ALA.

But beyond that, the new ALA is just a gorgeous redesign. It’s spare and yet packed with really loving detail. Hats off. Redesign of the year.

116. AkaXakA says… sep 2, 2005 | 6:48 am

Love the typography - makes ALA feel all grown up and nice, a bit like coudal.com.

The balance and flow is spot on too. Good work.

117. Barry says… sep 2, 2005 | 6:50 am

Yeah, redesign of the year… that doesn’t support Apple/Microsoft. Great.

Barry

118. Jason Santa Maria says… sep 2, 2005 | 7:13 am

Barry: Soooo… do you mean “Apple/Microsoft”, as in their browsers? Or the companies in general?

119. Barry says… sep 5, 2005 | 3:50 am

Nah, I mean that I’m running Microsoft’s Internet Explorer on my AppleMac, and the A List Apart site doesn’t work right.

120. Jason Santa Maria says… sep 5, 2005 | 6:48 am

Looks fine to me now. We obviously want the site to work in as many environments as possible. Older browsers like Mac IE 5 might take longer to code around. Like I said above, we are going to be working through the next few weeks to tweak and improve the site. Just bear with us.

121. Barry says… sep 5, 2005 | 9:27 am

Nice one, Jason… it looks great now!

122. Damian Vila says… sep 5, 2005 | 10:46 am

I really liked the redesign!. I know how hard it is to take other peoples work and make it something new, interesting and useful. As designers we never please everyone. I try not to judge on personal tastes, and I think you did a wonderful job. I only have a comment: When I changed the font size from medium to big the right column jumped to the bottom of the previous section. I really don’t know if this is a bug of IE 6 (Win) or not, but I hope there’s a way to avoid this, as lots of people I know use this feature. I’ll check the site in Firefox at home. Regards.

123. Damian Vila says… sep 6, 2005 | 6:46 am

Just another comment: ALA’s got “Issues” as a content formal structure… How can I change from one Issue to another?, I know that if I click on theIssue number in the Articles section I can go to that Issue, but I’d really love to see a way to navigate through Issues, specially in the Home. Regards.

124. Chasen Le Hara says… sep 9, 2005 | 7:04 pm

Damian: Go to the articles link and then browse through the different pages to look at the issues, their articles, and the short description.

You’ve probably figured this out by now though.
-Chase

125. chas says… oct 10, 2005 | 6:12 pm

good work. the only issue i have with the redesign has been stated just once before - the “snapshot” blurb seems out of place. placing it below the article title and above the article content would make more sense. it seems out of place next to the navigation/ads and i definetely had to think twice about what that text meant. maybe just using “article summary” would be work better.

i look forward to the new content.

126. Milos says… jul 8, 2006 | 11:00 am

Hello there!

Very good job @ http://alistapart.com/ - clean code, good layout- impressive!

Go on like this! Greetings Milos