A List Apart 4.0

by
Published in Brand Identity, CSS, Graphic Design, Writing

From the crown of its cranium to the tips of its Ruby-slippered toes, A List Apart 4.0 is both old and new. Old in its mission to help people who make websites see farther and jump higher. New in its design, structure, publishing system, and brand extensions.

Article Continues Below
Article Continues Below

The magazine has long advocated accessibility and web standards, providing deep and sometimes controversial insights into these areas and not infrequently presenting ideas and methods that change the way you think and work. We will never abandon this subject area, but we are once more widening our gaze to encompass disciplines and themes beyond those that have obsessed us for the past five years.

I say “once more” because A List Apart started as a broad and inclusive explorer of all things web design. Our visual and structural relaunch provides the perfect platform from which to expand our self-definition and broaden our subject matter.

A Look Back#section2

In an interview published this month, Armin Vit is asked what motivated him to create the design blog SpeakUp. His answer, in part: “anger [at] portals like K10k, DiK and Surfstation defining what ‘design’ was.” Now, I adore K10k and the other portals Vit cited, but his motivation struck a chord. Frustration with what already exists has always been the ultimate creative aphrodisiac.

In 1997, web developer Brian M. Platz and I started the A List Apart mailing list because we found the web design mailing lists that were already out there to be too contentious, too careerist, or too scattershot. There was too much noise, too little signal. We figured, if we created something we liked better, maybe other people would like it too. Within months, 16,000 designers, developers, and content specialists had joined our list.

Editing was the key. Many members submitted comments and topics each day; we dumped the dross, published the gold, often selecting pieces for their thematic relevance to one another. Through editorial cultivation, we rapidly grew an intelligent and insightful community.

From mailing list to web magazine#section3

Taking it to the web was the next logical step, and again a Vit-like dissatisfaction helped. I launched the A List Apart website in in 1998 partly because the two leading web design magazines of the time, although brilliant, did not cover “web design” as I was coming to understand the profession.

David Siegel’s now-defunct High Five advocated graphic design; Wired’s Webmonkey taught JavaScript and other technologies. Both magazines were great, both subject areas vital. But to me they were parts of a larger whole, incorporating writing, structure, community, and other bits nobody had quite put together. Then, too, no web design zine of the time seemed to grasp or value web standards the way I and my peeps at The Web Standards Project did.

A List Apart 2.0 (detail).

The Evolution of a Design#section4

A List Apart 1.0 staked out its turf with hubris and punk rock aggression. Its low-bandwidth modern primitive design made no attempt to be cute or friendly. A wide range of subjects, from early CSS advocacy to the notion that designers could become their own clients, debuted within its narrow columns and baleful color schemes.

On 16 February 2001, ALA’s three-chord design abandoned HTML table layout techniques, embracing semantic markup and CSS layout to prove that the separation of structure from presentation was feasible in modern browsers and to encourage designer-developers everywhere to learn it, do it, and sell it to their bosses, colleagues, and clients. A few minor improvements aside, ALA 2.0 looked exactly like ALA 1.0, which was the point. A generation of web designers got it, bought it, and took it to the next level.

Out of the Bronze Age#section5

ALA 3.0 (30 October 2003) brought two key advances:

# Findability was greatly improved, via topic-driven navigation and automated clustering of like kinds of content.
# Making #1 possible, developer extraordinaire Brian Alvey designed a powerful and standards-compliant publishing system that lifted our forward-looking magazine out of its backwards, hand-coding days. (Yes, we really did hand-code the first 159 issues.)

A List Apart 3.0 (detail, size reduced).

Enraptured by our newfound utility, I lost sight of brand, replacing the gaudy design of yore with a conservative look and feel that lacked soul. The design was easy to read, grasp, and navigate, and the original paintings by Fred Gates helped breathe some life into my visual golem, but the overall feeling was uninspired.

If the value of a design can be measured by how often it gets swiped, then ALA 3.0 was genius, for it has been copied, with and without attribution, hundreds of times. But of course it was copied all those times, not because it was lovely, but because it was generic: an adequate template for nearly any content-oriented site. Most of all, it was copied because it was easy to copy.

What’s new in ALA 4.0#section6

For ALA 4.0, Jason Santa Maria created not merely a new logo and layout but an entire branding system, to cover such natural brand extensions as a live conference series (An Event Apart) and an upcoming series of publications (A Book Apart).

Brought to life through Eric Meyer‘s CSS, the design has a classic, almost scholarly feeling, although there is a hint of teasing play behind elements like the laurel wreath—and Kevin Cornell‘s illustrations interject an additional note of fun. Some highlights:

* Each issue will have its own color scheme. Imagine: Red and green for Christmas; blue underlined links for when Jakob Nielsen finally writes for us.
* Legacy articles, i.e. those published in ALA 1.0-3.0, will share a common color scheme as a further means of delineating between then and now.
* Wide, comfortable columns make text a pleasure to read and code easier to parse.
* The numerical bug that sits atop the logo and astride the nav bar makes each issue feel like an important limited edition.

CSS techniques used include:

* Sprite rollovers  for the issue bug.
* Faux columns for the column separators.
* Others devised by Eric Meyer as need arose.

An upcoming article will explore the new layout’s creative and technical aspects in detail.

Findability#section7

Topics in ALA 3.0 inhabited a flat landscape: XML was at the same level as Design, CSS at the same level as Business. Topics in ALA 4.0 are more intelligently categorized, I hope. We have broken the art and science of web design into six big areas; granular topics live underneath.

Better discussion (with RSS)#section8

We’ve overhauled the comment structure: editor’s and author’s comments are now highlighted to help anchor discussion while keeping it moving. You can still share HTML, CSS, and JavaScript source code, but you can now also use Textile to style your comments (and watch them dance via a Live Preview).

Best of all, for the first time, you can subscribe to the RSS feed for any article’s discussion. This is a great feature few sites currently offer but many, we think, soon will.

To achieve some of these new features, and in an effort to keep spammers out of our conversations, we now require registration before you can post a comment.

A custom Ruby on Rails platform#section9

ALA’s new publishing system, a carefully crafted Ruby on Rails application custom designed by Dan Benjamin, makes possible the features described in this article and dozens more – too many to list here.

Mr Damon Clinkscales supervised the migration of legacy content from ALA 3.0’s Microsoft SQL database to ALA 4.0’s MySQL, a task that did not run as smoothly as one might fantasize, and about which he never complained. Mr Brian Alvey was perpetually helpful and patient as we toiled and tinkered.

Additional features and changes#section10

For the first time in its eight year history, ALA has advertisers. We chose just a few companies whose products we believe in. Nobody else gets to advertise here.

For the first time, we also have a store, not that it will make us rich (and not that was intended to). We love ALA – now more than ever. We hope you do, too. So we designed some kickass tee shirts and partnered with Threadless to bring them to you.

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

Where we’re going#section11

The magazine will be published on Tuesdays. Not every Tuesday – just when we have something fabulous to share.

Erin and I will continue to edit the magazine, seeking ideas that illuminate, challenge, and change the way we work with this thing called the web. In addition to the cutting-edge implementation techniques and detailed accessibility information we’ve focused on in the last few years, expect more theory, more analysis, and a wider range of perspectives.

200 Reader Comments

  2. So I like the new layout for its wider main column and improved readability. I don’t quite mind the fixth widht set at 1024 px. However, as someone else pointed out, why is there _nothing_ except the logo at the top. Are there plans to have content under that logo in the future? If not, there seems to be no reason why this couldn’t just be a two column layout.

    Anyway, I also noticed, as previously mentioned some bugs in the Textile preview and an error when leaving one’s email blank during registration.

    Keep up the good work and great content.

  3. It really is the most pleasing site I have come accross in a very long time – and SO informative and easy to navigate.

    Congratulations to all concerned – and keep up the good work.

  4. It really is the most pleasing site I have come accross in a very long time – and SO informative and easy to navigate.

    Congratulations to all concerned – and keep up the good work.

  5. Like the new presentation, but…

    I’ve got two “vanilla” Windows machines here in the office, one desktop and one laptop. The default text size option (i.e. what was selected following system installation) that is set within IE6.02 on each machine is “smaller.”

    When viewing the “new” ALA on either machine using IE, the text size of the body copy throughout the site is so small that it is unreadable. This was not the case with either of these machines when viewing the “old” ALA.

    Personally this doesn’t bother me as I use Firefox as my default browser, however given the nature of this site I’m quite surprised to see such a significant oversight. With computers set to use higher and higher resolutions out of the box (especially laptops, where the res gets higher but the screens stay the same), this is hardly something that should be chalked up to an IE weakness or a user-config error.

    I’ll be happy to provide a screenshot on request.

  6. I am really glad you guys are back. But it seems like I am the only one who DOESN’T LOVE the new look. It is like when the wife comes home from the beauty shop, “You like my new hairdo?”

    I didn’t know you NEEDED a new look. AND, worst of all, I don’t like it. Sure, some things make sense, and overall, I am glad you did it… but…

    I miss the graphic headers (paintings) and really dislike the article titles onMousOver (hover) style. Uuugh-ly. My opinion.

    However, I do love the magazine and content and will continue to learn much from you guys, so welcome back.

  7. Looks groovy. However, the principle article font is set quite small. On Windows, it’s readable. On Mac, not so much. Perhaps this could be addressed.

    Cheers

  8. It’s been fun, exciting, rewarding and educational to watch ALA grow since the list days. She’s all grown up now. Looking forward to a bright future reading Alistapart.

    All the best 8 )

    Ray

  9. As has already been said, the font sizing and the fact I need a side scroll at 800×600 is a backward step, has anyone at ALA given a good explanation for this? I fear a hoarde of non-compliant copycat sites who claim it’s ok to go against web standards cos ALA do.

  11. I am suprised that Eric Meyer didn’t provide a Printer Friendly version of the site… considering he was the one who wrote the article on “Printer Friendly Sheets”

    Also, the font is way too small. There should be a limitation to how small it can be viewed.

  12. bq. “¦ the font sizing and the fact I need a side scroll at 800×600 is a backward step, has anyone at ALA given a good explanation for this? I fear a hoarde of non-compliant copycat sites who claim it’s ok to go against web standards cos ALA do.

    There’s nothing in the W3C recommendations about (initial) font size and screen width. The fact that the font size is adjustable in IE/Win means it is following accessibility guidelines. ALA already did justify the width by stating they couldn’t please everyone—count yourself among those that aren’t pleased.

    Personally for me, the width is neither here nor there. It doesn’t matter. For a site visited mainly by developers and designers, it’s surprising that so many people have a problem with a 1024-pixel base width.

  13. You are back! Missed the pleasant readings all this time. Thanks folks and congrats on the upgrade.

    (one more little bug you guys might take a look, in the create a login form, you might not enter your email, but then it tells you that email is already taken. Fun with the insects.)

  16. what ever happened to ALA 3.0’s print style sheet? Or was it
    left as an exercise to the readers? oh, also btw, would be nice
    if the checkbox with id “incdisc” in the Search ALA form is
    linked to a label.
    Seems like most form elements on the ALA forms are labelled.
    Love the new design.

  17. bq. Personally for me, the width is neither here nor there. It doesn’t matter. For a site visited mainly by developers and designers, it’s surprising that so many people have a problem with a 1024-pixel base width.

    This is a website to promote good design and good practice. Unfortunately the 1024 fixed width and the lack of a print stylesheet violate both of those principles.

    Just because most web designers have high end computers doesn’t mean that we all do, and it doesn’t mean that we want to browse in a full screen window. If ALA can get away with saying “Our website is only going to be read by the élite”, where is the incentive for other designers to make the effort?

  18. Mixed feelings about the fixed-width — I do it too, but not generally this wide — but as far as the colors, typography and layout goes, the new design looks fantastic. (I guess I’m a sucker for tone-on-tone.) ALA always serves to inspire me, and this version is no exception. Congratulations!

  19. I have been wondering where does ALA get the statistics for determining the site’s specs, specifically the width of the browser? Is 1024 the current standard today?

    I am wondering if this is a delimiter, to separate the 800×600 crowd. But don’t get me wrong, I pretty much like the new/old style. It’s just that I am thinking, would web designers/developers start embracing the fact that indeed the 1024 is here and we can kiss the 800×600 crowd… well rather out?

  20. I have been wondering where does ALA get the statistics for determining the site’s specs, specifically the width of the browser? Is 1024 the current standard today?

    I am wondering if this is a delimiter, to separate the 800×600 crowd. But don’t get me wrong, I pretty much like the new/old style. It’s just that I am thinking, would web designers/developers start embracing the fact that indeed the 1024 is here and we can kiss the 800×600 crowd… well rather out?

  22. Kevin Cornell is a morally bankrupt, dirty-dirty man. How A List Apart could lower itself to employ such a lecher is beyond the scope of my imagination. Oh happy day!

  24. I’ve followed link from site older than ALA4 and got “http://www.alistapart.com/topics/dom/”:404. I was expecting you brilliant guys to have automatic redirects from all old links.

    Oh, and there is “click here” link above comment box! How lame! 😉

  26. It is lovely indeed, but you’ve got a small bug in registration. although email is listed as optional, if you leave that field blank you are given the error that “that email is taken”

    cheers on the launch!

  27. Nice site and all, but in the name of accessibility I think you have chosen a far too small font size. Especially code is unreadable…

  28. Nice work. 🙂 I was just wondering, since ALA strongly promotes accessibility and clean semantic code, why you didn’t use any labels for your “Search ALA” field?

    “Include discussions” is just a

    in your form. What about

    and

    ? (also missing these things on your registration form, though you did implement labels there: http://www.alistapart.com/comments/ala40/signup)

    Was this left out purposely or was it merely an oversight (e.g. in a rush to get the new site online)? Not trying to be too nitpicky… 🙂

  30. Like others have said before me… Could we please, no I mean *PLEASE* see some source on how the Rails CMS was built? There’s a sore lack in the webdev-space for this kind of progra atm. We might be rolling our own here at “mopo as in Norway”:http://mopo.no , but would prefer to build on the work of others (we are a free as in liberty type of company).

  31. I noticed the new colour scheme for Issue 202 still uses brown for the hover background on links. Shouldn’t it be a shade of green? Also I was thinking the main ALA logo would change colour too with each issue. Anyway, great site! Keep it up. So glad you’re back.

  32. Sorry to be late to the party but I’m a busy man. I haven’t had time to read all the comments but the ones I have read seem to like ALA 4.0. I don’t.
    But if you move that bloody logo (I hate branding) over to the right of the viewport so I can read the, mostly, brilliant articles and interesting comments on them without having to SCROLL HORIZONTALLY I’ll change my mind. But if anyone tells me to make my browser window wider I’ll scream and probably not visit ALA again. User rules OK (since CSS2, anyway).
    I quite like the ‘live’ comment preview though it was lucky that I had scripting enabled. Not everybody does you know and I haven’t been able to find any noscript tags in the XHTML source. ( http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#tech-scripts , I think.)

  33. You make over 25% of page left side completely useless. This huge logo is so important? Very good content, but scary design. Old ALA layout was much better for me.

  34. – Tasteful combination of serif and sans serif types. (The small font is just fine)
    – Perfect application of big space on the left which is a basic layout principle of white space.
    – Palette that gives the site a mature and respectable air.

    Totally inspiring. Best design ever!

  35. I always found ALA a great source for CSS stuff. But now it looks like a cornflakes box. Maybe the web will look in general more like a cornflakes box with CSS. Certainly that impression arouses when you look at some designers’ pages … Talking about the old ALA as looking “conservative” I don’t know how to call this. But maybe such things come after publishing books and growing up.
    Best greetings.

  40. When the discussion are closed, the link to the Discussions is removed. Atleast let me read what was already discussed, even if new discussions are not allowed. Perhaps someone already asked the question similar to mine and it was answered.

    As it stands I’m stranded.

  42. Have you intentionally designed for a minimum 1024×768 ?

    When viewing the size in a windowed browser, running this resolution, WXP, Firefox 1.0.6, horizontal scrolling is required to view content.

  45. As I grow and learn (present tense always) ALAP has been and continues to be an inspiration to excellence.

    As an old teacher used to tell me, a real pro makes it look simple. Your new design has that awesome simplicity.

  47. “天长地久，天地所以能长且久者，以其ä¸?自生”?ï¼?ï¼?《è€?å­?》
    ALA能有今天之å?‘展，完全因为她ä¸?是为自己而生ï¼?ï¼?”没有任何广告”?，å?¯è§?一斑ï¼?ï¼?此其长久之内在根æº?。

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

I am a creative.

by
A List Apart founder and web design OG Zeldman ponders the moments of inspiration, the hours of plodding, and the ultimate mystery at the heart of a creative career.
Career