This is actually an old version of For the latest and greatest, check out the new site.

Listed Apart

In light of the major headline across the web world of the new A List Apart launch, there have been a lot of mixed reactions about every portion of this site, most prominently the design, followed by the markup, information architecture and content.

Before I get into too much detail, I need to publicly say how impressed I am with this site. To be fair, be warned that this post is completely biased by my utter affection towards the site. I think that JSM did a bang up job on the design. When he first showed me the initial idea, I was skeptic and responded pretty negatively towards it. I couldn't see his complete vision for it, but the finished version is an exercise in design precision and a superbly smart product.

On the markup end, Eric Meyer shows why he's the right guy for this job. Dig around a little and you'll see how cleverly he interprets some of Jason's design. An example of this is the use of background-color, imagery, and live text to render the issue number.

Not everyone feels the same way that I do, and I'm all right with that. Everyone is entitled to their own opinion. However, even though I have no ownership over this site, it upsets me that some people are so uninformed, and yet rush off to critique mere minutes after the site launches. I spent a good portion of the day, trying to stay in on the massive amount of discussion going on about ALA. I realize that most, if not all, of the comments are well-intentioned, but it's very difficult to offer valuable constructive criticism without spending a good amount of time, just thinking about your opinion in order to logically validate it.

Design taste is relative, so not everyone can be expected to agree, but to conclude—and even assert—that pieces of this design don't serve the intended function is premature. One specific area that has been attacked is the apparent "failure in a branding opportunity." In my opinion, this site (and its counterpart) have a very successful identity. I would also say that most of the dissenters may not have enough of a familiarity with typography to make this decision. Garamond, the typeface used in the logo, is known for it's professionalism as well as friendliness. (In fact, that's why Apple chose to use it in the marketing campaigns for the original Macintosh, the first user-friendly computer.) In terms of qualities, this typeface is dead on. Combine that with a subtle wreathe as a backdrop, a universal symbol for higher learning, and how can you go wrong?

Others have been saying that designing for a larger screen size is a mistake. I can see how it's easy to make this claim, because the statistics of users with certain resolutions don't lie. However, think about the audience. A List Apart caters to the web community. If there's any question of that, its tagline is "for people who make websites." ALA has a responsibility to its readers, not just to inform, but to push the envelope. Designing for a larger resolution is the next natural step in the evolution of web design. A good majority of the population uses 1024x768, and I would guess that an overwhelming majority of ALA readers support a screen res much larger than this. If you can still argue in favor of 800x600, then why not 640x480? Why exclude those readers?

The only way to gain support for something is to use it. Just like CSS3, Web 2.0, Ruby on Rails, AJAX, Javascript, Flash, and anything else, you can never guarantee that all of your users will support every feature of your site. Yet, by staying slightly ahead of the curve, technologies as well as users are encouraged to adapt. Clearly by the launch of this site, A List Apart recognizes and takes advantage of this. All of the people involved demonstrated exactly why they're the best in the business, and I don't believe that this version could have gotten any better.


stilist said:

I'm not the sort that gets all bent out of shape over piddly little things such as minimum screen resolution and such, so I have no objections whatsoever to the way the site has been designed. I think it has an elegant and intelligent feel to it, very much the way it was apparently intended to be.

I don't know the appropriate buzzwords for it, but I very much enjoy the way the site looks and feels.

Posted on August 23, 2005 10:20 PM

Mark said:

First: I am really impressed by the design myself and agree with all you said, but there are two (and sincerely constructive) critical issues I still have:

  1. Print-Stylesheet: guess that is in the making. not providing one would surely be a mistake
  2. Verdana 0.8xxxem: I can not understand why they went with that. The Lucida they had on 3.0 was great and a good choice for both mac and win. Granted, Verdana makes reasonable readability at 11px (which 0.8xxxem translates to in most environments). But it is so wide that Lucida at 12px or more would not lengthen the page-height. It would look a lot more distinguished and would fit the overall stylish yet scholarly look of JSM's fantastic design

That's just my 2C.

btw: I really think the criticism offered in the discussions (and there is very few on the first couple of pages in the discussions) is a sign for the overwhelming commitment of so many people for who ALA is the single most valuable source for webdesign on the net.

Posted on August 24, 2005 04:58 AM

Dan Mall said:

@Mark: I think we're all in agreement that almost none of the critiques are really out to bash the new ALA, but the amount of thought in the critiques is hasty as best.

  1. I don't believe that the lack of a print stylesheet was an oversight. As the creators mentioned, the site is not at a 100%. I'm sure the stylesheet is one of the top things on the list.
  2. Lucida was a great choice for the old site, but it would have been completely inappropriate for this new one. Lucida is too modern of a typeface to fit here. Verdana has enough similiarities with Georgia to make it work, such as the large x-height. However, it does distinguish itself to provide enough contrast to make that relationship more cohesive.

    If you're still not convinced, just as an example, compare the "J" from both faces. Verdana's rigid but subtle serifs are a great juxtaposition to the softer brackets of Georgia and Garamond. Typographic design is all about contrast, and the design of this site is very smart about it.

It's great that people are so involved in the community. That's a big reason why I love being a part of that so much. Constructive criticism is always appreciated, but rash conclusions about things that are completely off is a totally different animal. The majority of comments have been supportive, even if they don't agree with some of the choices. My gripe is with the few that actually believe that ALA is weaker because they would not have made the same decisions.

Posted on August 24, 2005 05:47 AM

Mark said:

...the site is not at a 100%. I'm sure the stylesheet is one of the top things on the list...

as I said: I am sure this is in the making :)

Lucida is too modern of a typeface to fit here
Verdana has enough similiarities with Georgia to make it work

Hmm... your absolutely right with that. I'm not classicly trained with types. Thanks for the insight. I toyed around a bit with the css-edit-functin of the web developer toolbar. I see your point. It is hard to find the best balance between distinguishedness and harmony of body-text vs. headlines etc. Guess that is why Jason got the opportunity of designing ALA and not me ;)

Posted on August 24, 2005 10:51 AM

Matthijs said:

Daniel, I agree, for some it's too easy to nitpick on a superb site. What's bothering me the most about some of the comments, but I think that's a general problem as well, is the way they are written. Constructive critisism is not bad, and appreciated. But often the critical comments go like: "tss, no print sheet" or "this and that is 2px off on browser x".
But I guess the guys from ALA are used to that.
Another point, as you seem to know a thing or two about typography: are you planning on writing more about it?? ;)

Posted on August 25, 2005 03:18 AM

Dan Mall said:

@Matthijs: I agree completely. It's much easier to sound condescending than it is to actually be helpful. It defeats the whole concept of “community.”

As far as typography is concerned, I still feel like I have a lot to learn in that area. Most of my experience is in the use of classical typefaces and I'm not as comfortable with the modern stuff. I do plan on writing about type, as I have a great passion for it, but I want to make sure that it's something worth while that can actually be useful to people.

Posted on August 25, 2005 07:09 AM

Joshua Blankenship said:

I didn't really understand most of the (seemingly uneducated) critique when the site launched. ALA knows its audience and built a site FOR THEM that was well thought-out and cleverly designed.

(Though I would have used .gif files to render the issue number, but only because live text breaks out of the badge at larger sizes. A minor critique, and proof that everyone has an opinion.)

Posted on August 25, 2005 01:52 PM

Dan Mall said:

Joshua, wouldn't that mean that you'd need a new image for every issue? They probably chose live text just seems because it can be automated by the CMS and they wouldn't have to worry about a manual update, but I see your point. I guess the trade-offs are different for everyone.

Posted on August 25, 2005 02:46 PM

Joshua Blankenship said:

Yes, which is not as complex a process as you'd think.

Some examples would be the calander headers on site like The Big Noob or my personal site which use images for individual dates/numbers/etc.

A little more image-intensive than live text (obviously) but no break-out on text enlargement.

Posted on August 25, 2005 03:27 PM

Dan Mall said:

Oh, I can definitely empathize. My article titles are handled the same way. I would just imagine that they would like to make the updating process as streamlined as possible.

Posted on August 25, 2005 04:28 PM

Fernando Dunn II said:

ALA knows its audience and built a site FOR THEM that was well thought-out and cleverly designed.

This is exactly why using text instead of an image is perfect. How many people in the ALA target audience browse with their fonts set at three sizes larger than the default?

I like what they have going on now. They have almost perfectly integrated the type of atmosphere you'd expect from this type of site. It definitely is much more appropriate than the last design.

Posted on August 27, 2005 10:10 AM

Paul said:

I'd be less than truthful if I said I was immediately impressed with the new ALA design. The urge to join the commentary with critiques based upon initial gut reactions was pretty strong, but I managed to bite my tongue (or whatever the online equivalent of that might be).

Given adequate time to appreciate what ALA has done, I'm very impressed. The design is deceptively subtle and beautifully simple. I'm really impressed with the decision to not have any glaring contrasts to grab (or steer) the viewer's attention and more impressed with how they've pulled it off.

I do have one complaint, though. The height of the navbar area is fixed rather than specified in em units. Bumping up the text size (which I find necessary in order to comfortably read the article text), at least on Safari, causes the nav link(s) in the upper right to disappear. I don't mind a designer choosing to use small fonts, but I do think the design has to accommodate the fact that viewers may increase the font size. Increasing the font size on Safari by one step causes the "FEED" link to vanish. In my opinion, that shouldn't happen (and it's easy to fix).

Posted on August 31, 2005 04:19 PM

Paul said:

I love that they have designed the site for 1024x768. I think it's about time we all push the envelope in this respect.

Posted on September 15, 2005 09:42 AM

Kim Siever said:

First off, I want to say unequivocally that I love the new design. I think it's great.

I have a single comment to make regarding the screen sizes. While I understand their reasonings for wanting to expand the sizes, we must not forget that screen size does not always equate with viewable space in a browser. There are at least two factors why this is so.

1. The larger the screen resolution, the less likely it is for a user to maximise the browser window. If the default viewing area is sufficient to view most websites, there is no incentive to maximise the browser.

2. As resolutions become larger, the use of such things as sidebars and docked windows (Trillian, Google Sidebar, etc) becomes more prevalent. even if the browser is maximised, the width of the viewable space will still be less than the screen resolution.

There may be other reasons, but these are the two with which I am personally familiar.

Posted on September 16, 2005 11:09 AM

Dan Mall said:

@Kim: Great points, but I think there are several things to consider when it comes to screen sizes.

Yes, users that don't maximize the screen may not be able to view the site as intended, but they are making the decision to restrict content, not the site or the designer. I may choose to keep my browser at 200px wide, but that doesn't give me the right to dismiss a design that doesn't fit in my window.

Also, most sidebars and docked windows impact height, not width. Most people don't have a gripe with vertical scrolling, but, admittedly, horizontal scrolling is a pain.

Although designers can't take every nuance into account, designing for the majority is mostly always a good decision. I'd say that 1024x768 fits into that category.

Posted on September 17, 2005 12:37 AM

Joel Young said:

Dan, while you're right about users making the choice to restrict content by not maximizing their browser, there's often a disincentive to keep it as wide as possible. When I use tabbed browsing, I don't like to have to resize the window every time I switch tabs to account for designers who didn't make their site flexible enough.

I tend to choose a middle ground that works for most sites -- on a 1024x768 screen, that's a maximized browser window with the dock on the left, and as a result, ALA gives me horizontal scroll bars. Sure, I could move the dock elsewhere, but I have important reasons for keeping it there, and besides, most sites are well behaved at that window size.

Mind you, this is a minor complaint, but it's one that I have about a lot of sites that use more than two columns in their layout.

Also, to address Paul's comment about the the nav bar pushing elements off the edge, I love what they did. It's similar to the inverted pyramid style used in newspaper articles -- write items in descending importance, and when the end gets cut off, the article is still coherent. The analogy doesn't translate perfectly to navigation, but in the case of the FEED link, it's redundant with the Safari RSS feature, and in general it's a little-used link (each person should need it only once, and generally not while reading an article). It's a tough problem that I run into a lot, and I think hiding the overflow can be an acceptable solution.

Posted on September 29, 2005 02:37 PM

Sorry: comments are closed.