A List (taken) Apart

A major brand name redesigning and implementing their web site with web standards can still be big news. When that brand belongs to one of the most influential sites of modern web design, the news is bigger. When the redesign was accomplished by some of the leading talents in today’s web industry, the news is biggest. What am I talking about? It’s the new A List Apart 4.0.

You might expect one of two outcomes from putting Jeffrey Zeldman, Eric Meyer, Dan Benjamin and Jason Andrew Andrew Santa Maria into a blender. A bloody mess is possible (but not likely), a tasty cocktail more probable. Whatever preconceived notions we might have, there is a lot for these guys to live up to. With a site this popular and it’s contributors this well known, a redesigned ALA would always attract discussion. Within hours of its relaunch, the air was thick with both positive and negative ions at Style Gala and Jason Santa Maria.

Like Revenge Of The Sith or sequels to The Matrix before it, expectations of a new ALA run extremely high. It would be virtually impossible to please everyone and with every project there are many contributing factors, many choices or compromises to be made. It is impossible for us commenting from the outside on gallery sites such as StyleGala to be aware of the reasons for these decisions. So I was lucky enough to steal ALA designer Jason Santa Maria for a few minutes to explain a little about the design process.

An interview with Jason Santa Maria

Q: I loved the ALA design when I first saw it a few months ago. One of the comments I made then was that the home page lacked a strong visual focus point, a place to start reading. What are your thoughts on this?

It’s roundabout, but I’ll get to an answer. I know it’s a bit different in the way it treats certain subtle things. For instance, I consciously avoided visited link states. I wanted to give the impression that this was more than a website. Almost like an illusion of something more. A List Apart shouldn’t be like a blog. It’s not something we want people to skim.

There is so much thought provoking material for our industry there that you would be losing out if you skimmed it. I have always thought of ALA as though it were a teacher or a repository of ideas. I tried to get that across with this design; I wanted it to feel like something you are going to sit down and spend time with. As though it were a book you’ve been waiting to pore over.

I didn’t want to hit people over the head when they get there. Some sites you need to hook people in immediately and get them to do something. I want people so peruse the place, find somewhere to settle down and get comfy and start reading. So, there is no overt focus of the homepage. The logo is there, the latest articles are there. Nothing screams because it doesn't need to. If you are the type of person who leave because you didn’t fill your brain in 3 seconds, you probably wouldn't have benefited much from the articles anyway.

Q: I know it’s an age old chestnut, but we are seeing more creative, liquid layouts than we have for some time. What were the reasons for ALA adopting a fixed-pixel approach?

ALA 4.0 actually started out as fluid, but was changed to fixed after the first or second round of designs revisions I did.

I honestly don’t think liquid layouts are the last step in evolution for web layouts. They are a fantastic option, and an even better solution as a stepping-stone to accommodate larger resolutions. The content columns still maintain comfortable line lengths for reading. ALA is supposed to be one of the grandaddy accessible sites, and it still is. But something many people are missing is that ALA is also one of the more trailblazing sites around. Remember To Hell With Bad Browsers?

ALA has always tried to be one of those sites at the front of the pack. We don't support 800 x 600 anymore, nor do we 640 x 480. Do you? People flipped when sites stopped supporting 640 x 480… now no one says a word. Things change. Trust me, you are going to see more sites stretching out their legs and putting their feet up.

Q: Strong visual hooks like the new logo panel are easier to transfer from design comp to web. But you have a lot of very subtle effects such as the link:hover states which are hard to invisage without a web browser. Were these effects part of your original design ideas or did they become introduced during the CSS stage?

Many of them, like the subtle background hover for the logo were in my head from the design stage. Others like the issue stamp came about during CSS programming in drips and drabs, like Shit, we got that to work? Ok, let's push it here now.

In the case of the styling of links; I knew the colors would be changing each issue, but I wanted to have a consistent hover styles throughout. So, with that in mind I just sat down and started playing with live XHTML and CSS until I found what I wanted. I had an overall feel in my head for how I wanted the site to behave visually, but some stuff had to be left until the build.

Q: Last one. How precise were your design comps? Did you provide either an overall look-and-feel to ALA or did you make pixel perfect comps for each and every template?

Well, I actually did flesh out PSDs for the majority of pages. I am obsessive with my design files, making sure things are even and on their grid (if there is a grid) and ALA was no different. Because it was such a departure I had to really sell it to the gang with flat comps.

ALA is less like most blogs structurally than you think (especially once you start getting into the thick of it). There are many varieties of information that need to be presented, and I wanted to treat each one specially with the attention it needed. I didn't want to be hindered by the strict system of templates.

This is a dream site to work on, and we really were wide open on what we could do. There are a lot of nuances to the design, and we are all very proud of it.

Thanks Jason.

Replies

1. #1 On August 24, 2005 02:13 AM Dan Mall said:

   Well said. This is exactly the type of response that I would expect from such a seasoned designer. For ALA to work as smartly as it does is no coincidence.

   Malarkey, thanks for asking the right questions and provoking Stan to share his insight.

2. #2 On August 24, 2005 02:30 AM Scrivs said:

   One of the best interviews I have seen in a long time. It's a shame it came from a Brit...shit did I say that out loud?

3. #3 On August 24, 2005 03:23 AM Bobaggio said:

   How come I'm not seeing the same ALA site as your screenshots show?

   The ALA site i reach(https://alistapart.com/) has a grey bg with diagonal stripes, a header bar containing the logo and some abstract painting. I can only get it to show Issue 200 from May 24 2005, even after shift-refresh and, get this, it uses Avenir(?) as the principal content font, which makes it basically unreadable! (I'm running IE6 on windows xp.)

   Is it me or the meister? Anyone got any bright ideas?

   P.S. Sorry to take this thread away from your interview, which was thought provoking as always. Consider it a brief diversion.

4. #4 On August 24, 2005 04:02 AM bobaggio said:

   Ok, ok, it was me after all. The DNS hasn't fully propogated yet. (I am in New Zealand after all. Last place to hear about anything. I employ pigeons to bring me the footie results)

5. #5 On August 24, 2005 06:18 AM Tommy Olsson said:

   It looks pretty in a modern browser on a big monitor, and I suppose that's what you an expect from ALA readers.

   They did not consider the 'CSS on/images off' scenario, though. That's what I use from home (on dial-up), and ALA is something of a mess. The issue number, that you like so much, becomes invisible for one thing. White text on white background. The alt text for the logo is huge and overlaps some of the menu choices (Opera 8.02/RH9).

   If ALA is supposed to be on of the 'grandaddy accessible sites', I'd say it fails.

   It looks more like a site for graphic designers than one for web designers, IMHO.

6. #6 On August 24, 2005 09:09 AM Matt Wilcox said:

   I like the look, but the front page seems to lack a focal point. I find that my eyes are bouncing all over the page trying to figure out what I ought to be looking at first, and where the 'primary' attention point is. Because of that the design feels a bit messy and cluttered, even though it actually isn't.

   Other than that I think it's a great re-design which works well.

7. #7 On August 24, 2005 10:00 AM Faruk Ateş said:

   Tommy,

   The CSS on/images off scenario has probably just been taken as "too insignificant" here. ALA is for people who makes websites, and you're the first web developer I've come across who actually has CSS on/images off. Hell, you're the first I've come across in the past 5 years who still has dialup!

   Sure, you won't be the only person in the world with that scenario, but I think it's a pretty safe bet to say that the vast majority of ALA's audience has a decent, fast dsl connection and browses with CSS and images on.

8. #8 On August 24, 2005 11:11 AM Dan Mall said:

   Matt,

   As per JSM's interview, the layout is intended to lack a focal point.

   I want people so peruse the place, find somewhere to settle down and get comfy and start reading. So, there is no overt focus of the homepage. The logo is there, the latest articles are there. Nothing screams because it doesn't need to.

   The viewer is responsible for picking their landing point. On the surface, it may seem unintuitive for a designer to intend this, but it makes complete sense with the amount of great content that the site has to offer. As far as a "messy and cluttered" layout, I will respectfully disagree. Concerning the homepage, the middle columns seem to balance themselves out. The left (logo column) and right columns also work well together because a large image with lots of whitespace contrasts nicely with a more content-heavy column with smaller compartments. What exactly are you referring to here?

9. #9 On August 24, 2005 12:20 PM Ross Bruniges said:

   I like the fact it has no focal point - I don't like to be forced into looking at something - in many cases I don't read it out of spite!

   the new look makes me feel at ease and calm; certainly the type of look I would look at for a long time at once (though I have probably seen most of it numerous times already :>)

   just annoyed the book link isn't active yet - talk about leaving people wanting more!!!!!

10. #10 On August 24, 2005 12:55 PM Laura Zucchetti said:

    I have to disagree with the lack of focal point. I feel drawn to the issue number at the top of the page and then I flow on nicely to the latest articles, which in my opinion is the correct thing to look at next. Audience is king especially for ALA. I mean real visitors won’t just stumble upon the site and think ’what’s this then’ ’ skip..
    And if they do they probably won’t benefit from the site anyway just as JSM says.

    I think the site is great with some really appealing and refined styles sprinkled all over the site. The simple idea for the rollover effects are fantastic, they are really neat.

    I only have one disappointment’ Why is there no ’print this article’ link? I was hoping for that’
    

11. #11 On August 24, 2005 01:52 PM Chris K said:

    Nice interview. It definitely answers a lot of questions people have been asking throughout the web community on the design decisions. I think everything Jason was hoping to do with the new deisgn got accomplished.

12. #12 On August 24, 2005 02:11 PM Matt Wilcox said:

    Dan,

    "The viewer is responsible for picking their landing point".

    That sentence is at the heart of my comments. It wasn't my intent to criticise the design itself, which I already said is great. Rather my intention was to point out that I don't like the type of design that 'encourages' the user to find their own starting point.
    I never liked the Flash based sites that attempted to get the user to explore by making articles and navigation obscure either. It's simply a preference of me, the reader.

    The design itself is sound, and easy on the eye. But I personally don't like the lack of a focus 'article' to get me started. It's also the lack of a focus article/section which makes me say it 'feels' cluttered and messy when in fact it isn't. I'm so busy trying to find a starting point that I end up 'wasting time' looking everywhere, and because I'm looking everywhere I get the feeling of a mess, regardless of the fact that it is systematically and logically laid out.

    My browsing preference is to get to a page, get a near instant overview of what area's are 'most important', and start at the 'primary' article - deviating to other areas afterward. Here, by design, there is no focus article. That doesn't sit well with my browsing habit, and I would imagine it's not a unique browsing habit. Regardless, the design decision is interesting, but in my particular case it is not the one I would have made myself, or one I would have preferred to see.

13. #13 On August 24, 2005 03:10 PM Dan Mall said:

    Matt, now I understand what you mean. Browsing habits do come into play big time for any web site, but, especially for a site like ALA, think of it from a content perspective, especially from the point of view of an author. Which article should have more prominence, the Joe Clark article or the Jim Coudal article? There isn't ever a feature article for an issue, so to design for that would be encouraging the user in a way that they may not necessarily want to go.

14. #14 On August 25, 2005 12:32 AM Andy Saxton said:

    @Faruk: Tommy lives out "in the sticks" in Sweden and can't get any form of DSL/Cable which he considers forces him to have CSS on / images off. I have to say whenever I am unfortunate enough to have to use dialup for anything (usually at peoples houses when "fixing" their old pentium 3's) I turn images off for less pain. I'm Only mentioning it as he is a member of one of the forums I frequent...

    I have to admit when I first saw the ALA redesign I didn't like it. That wore off after about 2 or 3 hours of saying "Have you seen the new ALA" and showing various people from around the office. I think it was the shock of change. Northerners don't like change (as soccer AM reminds us).

    I have to say it definitely suggests "Magazine" to me now and not "Blog" which, reading the interview with Stan, is exactly what they wanted to get across and therefore this must be seen as a success.

    I don't really agree that it's a website for graphic designers not web designers.
    As it says it's "For people who make websites". Graphic designers, or at least people who used to be in graphic design, make websites (Your looking at one now) just as much as "code monkeys" make websites.

    I think that this is one of the strengths of ALA, it does appeal to everyone "who make websites" and writes articles with different, yet a collective, audience in mind.

    Anyway, ALA will still be quality no matter what it looks like, and at the minute it looks good.

15. #15 On August 25, 2005 09:33 AM Adrian Lee said:

    " I think it's a pretty safe bet to say that the vast majority of ALA's audience has a decent, fast dsl connection and browses with CSS and images on."

    Accessibility is all about minorities.....

    I can understand that a site like ALA may be able to drop 800x600(many sites couldn't, and I don't think they will be able to for a few years), but if you're going to aim at higher resolutions, I wish the default text size would be upped a bit. I'm finding myself using the zoom feature in Opera more and more these days.

    The text is just about big enough at 1024x768, but because I have Opera's sidebar open, I get horizontal scrolling at that resolution.
    At my normal res of 1280x1024 I deffinately wouldn't sit down as if it was a book I wanted to pore over while I squint to read the text. Sure it's easy to whack the + key to zoom in in Opera a bit, but when a sites being purposely designed for higher resolution, I wonder why the text isn't treated the same....

    I like the actual styling generally though, if the contents there, I'll still visit and whack the + a couple times....
    I don't know about the lack of focus thing, but I do find my focus drawn away from the main nav at the top ironically. And though I know many sites now use the 'logo' to link back to the home page, I was expecting a proper 'home' link on ALA.
    Still I shouldn't moan about any of it until I can produce work of the same quality, I think there's more plus points than minus.

16. #16 On August 25, 2005 10:08 AM Dave Bedingfield said:

    Lack of a focal point? How about the issue number. And what about the implied hierarchy of the top-most article having importance? This site achieves a focal point and subsequent visual hierarchy by leveraging what most Western-cultured people know best: top left to lower right. Sweet. Simple. Successful. And not uncommon.

17. #17 On August 25, 2005 10:39 AM Faruk Ateş said:

    Andy,

    My example of Graphics designers (rather than web designers) was to indicate that web designers are probably second most likely to have high resolutions.

    Adrian,

    Indeed, accessibility is all about minorities, but show me where ALA are proclaiming themselves as being the most accessible in the world? They care about accessibility, obviously, but so far, I've only seen readers make these claims that ALA is "all about accessibility" - nowhere have I seen ALA say that it's their main concern. Last I checked, they were for people who make websites, which is an audience that should be informed about accessibility. Not an audience that requires high accessibility in the site itself.

18. #18 On August 25, 2005 01:53 PM Adrian Lee said:

    Faruk, shouldn't all web sites be accessible to anyone who wants to use them?
    What about web designers who might have some problems when accessibility isn't taken into account? Not all of them are in perfect mental/physical condition. I certainly know of some with colour blindness and dyslexia for example.

    I didn't comment on the overall accessibility of the new ALA design, and I'm not going to. I've not had that close a look at it, and when there are people like Malarky and Tommy commenting on the design, you can bet they'll do a better job of it.
    But by definition accessibility is about catering for small groups of people, so what if maybe 2% of ALA's visitors need that extra thought, that's what it's all about!

19. #19 On August 25, 2005 08:24 PM Dan said:

    Faruk: "ALA is for people who makes websites..."

    Wow, and I thought the web was for everyone. That's a pretty scary comment, and no defense for inaccessible design. I'm with Tommy 100% on this.

    Remeber that 'people who make websites' generally make websites for people other than 'people who make websites'. If 'people who make websites' consider ALA as a credible source of knowledge for their profession, they might well adopt the techniques and approaches they see being used there, expecting them to be best practice. IMHO ALA has a responsibility to be the best it can be, for all its users, and it falls down in a few areas. None of which is to say I don't like it, quiet the opposite.

    And what's with the printing? Laura, we don't need a 'print this article' link, all we need is a print style sheet.

20. #20 On August 26, 2005 09:22 AM Laura Zucchetti said:

    Exactly, I mean a "print this article" link which uses a print style sheet of course. :) That would be nice.

21. #21 On August 26, 2005 10:31 PM John said:

    I have to chime in about the width. I don't think the world is ready for much 1024 x 768 fixed-width Web design yet. The world is super-stuck on 800 x 600 as the de facto width standard.

    A lot of readers, even Web designers and developers will be using non-maximized windows, maybe writing some code along side the ALA article.

    I love the way it looks but I urge y'all to reconsider maybe making it liquid. Sure, maybe for a fun site or a portfolio site, stretch your legs--but here, we need to get some work done too. Great job all the same.
    

22. #22 On August 26, 2005 11:29 PM Matt Robin said:

    I was going to comment on this site...but what's the bloody point now?
    (Ed says: Well in that case, I'll deem this off topic)

    I'm so late to the thread that no-one even reads this low down on the page...Malarkey probably doesn't bother...(hmm, that gives me a wicked idea!) #Pulls out page 196 from a secret wallet and laughs madly #

23. #23 On August 27, 2005 07:14 PM Alexis Bellido said:

    I really like the subtle effects in the design, for example the logo hover.

    The layout reminds me a bit of www.coudal.com , another site that can make you lose lots of hours reading, like Jason said "As though it were a book you've been waiting to pore over".

    Congratulations to the ALA team and thank you for keeping us, web designers, updated.

24. #24 On August 29, 2005 09:31 PM Darrel said:

    It looks more like a site for graphic designers than one for web designers, IMHO.

    That was my reaction.

    It's a much prettier visual design. And a lot less usable for me with the insane width.

25. #25 On August 31, 2005 01:55 PM Chris Hunt said:

    We don't support 800 x 600 anymore, nor do we 640 x 480.

    I think this is a mistake. The reason we designed sites at 640x480 long after it was supplanted by 800x600 was to support home users on basic machines viewing their browsers full-screen. The same argument can be applied to 800x600 today.

    Sure, most web developers will have access to more screen real-estate, but many of them will already be using it for something else - a tool bar, some other application(s) on the desktop, etc. Also, consider the spread of flat screens that can be swivelled from landscape to portrait orientation - which might be rather a handy way to read a long article. How about designing for 768x1024?

    Hopefully they'll add a style switcher some time that'll let people pick the side of the liquid/fixed fence from which to read the site. I wouldn't put that as a very high priority - porting the old comments across and adding a print stylesheet would be my top two - but it'd be nice to see. A CSS advocate site like ALA needs to eat its own dogfood. Besides, we do happen to know a particularly nifty style-switching routine, don't we...