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

  9. A great read, and this bit really cracked me up:
    _”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.”_

    I can’t wait to see new issues appear, now even more than before.

  10. It’s fantastic to see the content back, I always really enjoy reading your articles. I can’t get enough of the illustrations. Great stuff!

    Now it’s probably just me, (and I feel slightly blasphemous saying this) but I find it really difficult focusing on the text in the articles. It would be great to have an option to make the font-size larger for us people with bad eyes and small monitors. 🙂

  13. I had only been thinking about ALA last night in bed (no really), and wondering why it seemed to have died..nice surprise this morning to find it resurrected in all it’s new found glory. Now happy as a pig in doo-dah..

    Have we now arrived at the days when we can design at fixed width, 1024×768? Not that I personally have a problem with that.

  15. Great Job all of you!

    I really feel at home with the new design.

    That said only one thing irks me: Did it really have to be Verdana? Lucida would have done the readability-trick too as it did in 3.0.

  17. Great work from all concerned. I like how you’ve rebranded and yet there are aspects which still feel very much like previous incarnations.

    The illustrations by the way are superb. I’d come here just to see them to be honest.

    OK, enough sycophancy ;o)

  18. A very nice design indeed. I’m sure we’ll start seeing copycats emerge, i.e., that “sincerest form of flattery” thing.

    This is really nice work.

  20. I visited the States for the first time recently and was struck by how common this word was in use. Here in ‘stiff upper lip’ Britain we reserve it for things that are truly awesome!

    Awesome redesign guys!

  21. I just wanted to congratulate you guys on a great job. I really appreciate the content you provide and it serves as an inspiration that even tough this is a tough field to work in at the end if you love it you can still be happy in it. Love the new look!

  22. I came to see the changes and was instantly hooked… What was supposed to be a quick 5 minute visit, turned into an hour long stay… Great Job!

  23. The Joe Clark article, at least in Firefox, prints 8 pages, only three of which have content – on the first three pages, the content shifts in successive stages to the right, then by page 4 it’s gone. In IE6 slightly different, the right edge of the content column simple disappears, so you lose words and parts of words.

    Please file under “constructive criticism” 🙂

  24. The attention to details on the new design clearly show the passion of everyone involved. Congrats on a great re-design.

  35. A List Apart is now absolutely gorgeous! I always went to it as just a resource, never thinking of it as eyecandy. But now, wow, now it is both. Simplicity is sublime, and this design is sublime.

    Okay, it’s designed for 1024×768 rather than 800×600 (or fluid). But that does not really detract from the design, merely the right of the publisher to cater to the audience.

    The small touches on the links, the beautiful typography, and the newspaper look all really make this design come together and invite reading. Amazing job to the team that put this together.

  37. Very fine work! It feels so light and airy—and live preview is amazing!

    We simply must see some Ruby on Rails writings very soon; some of us get PHP, but Ruby is another beast indeed.

  38. Good to see ALA back with a new look. I think most people have said everything there is to say, but major kudos to the sexy new design – some top class CSS from Eric as usual.

    I look forward to your future articles with glee and hope that there is any remote chance of you bringing An Event Apart to England any time in the future.

    All the best

  40. I generally like the new fresh look, but…

    # I don’t really see why everyone in the comments above are so forgiving for the 1024×768 issue? I think it’s a problem.

    It’s not that I can’t handle viewing on that resolution, but I choose not to. Because the font looks really small on my monitor and I choose to scale the page. Happily Opera manages scaling really well and fit-to-page-width feature removes the horizontal scrollbar problem.

    # Visited and unvisited links look exactly the same. Why isn’t there a destinction? Not that I would claim all links should be underlined and blue and visited ones purple. But removing the ability to see where you have already been, is simply reducing this site’s usability.

    Happily again, I can choose to override the visited link colors with my own style sheet.

    # (Finally a real problem.) When I tried to register and left the not required e-mail field empty, the site told me “This e-mail address is already in use.”

  41. There should be a *preview button* too, because the live preview isn’t always quite correct.

    My previous post obviously wasn’t formatted as I expected.

  46. I enjoyed reading Joe’s tome on the new alistapart. It was nice to see an in-depth story as opposed to a longer diatribe split between several posts as seen on many web sites. I hope this leads a movement towards more in-depth content generation around the web.

  47. That’s great! Tnx a lot, Jeffrey and ALA team. Wait to see new issues appear.
    P.S. And we’ll translate them on Russian with pleasure like we done this work before.

  48. Hats off to all of you for this new look in ALA 4.0. I never had a problem with the previous layout, but this new look and feel is more professional, more scholarly, and easier to read.

    I’m looking forward to diving into the new site soon to see what else has changed for the better. Until then, good luck and have fun.

  53. I don’t think the 1024 width is an issue, as you can read the main text of any article without problems with a 800×600 screen resolution: you only need to scroll if you want to access the small list of topics, advertising, search, etc. That seems ok to me.

    Very nice indeed.

  54. not to start a flamefest, but why go with rss 2.0 over rss 1.0? just wondering…i like to get my content in my rss1.0 feeds, and 2.0 doesn’t even allow that.

  57. The first thing I felt when I saw it was “this looks like a university site.” I’m glad it was partially intentionally, or at least acknowledged. I like it a lot–very handsome. I’m looking forward to a wealth of great articles.

    As for the t-shirts. I especially enjoy the Count Rugen edition (look it up. 😉 xHTML, indeed!

  58. Congratulations on your beautiful and skilled design work at ala 4.0. But where is the beautiful print style sheet you had in your previous version?

  59. – Lack of print CSS
    – Previous, Next links on the very bottom of the page has overlaping with page footer in Opera 8.02 (7 and even 6 are Ok).

  63. Love the new layout… very minimal, but also very classy. I miss ALA, but no longer ;)!

    I too prefer Markdown over Textile, however, they both work just as well.

  68. It’s great to see ALA back in action, and that pleasure is made that much greater by the tremendous improvements that have been made, aesthetically and structurally. Congrats to the whole team; you’ve done a superb job!

  71. My resolution is 1024×768, but like so many I surf with my sidebar open, so count me in as another detractor for the widescreen fixed width design. I actually wouldn’t complain, except that this design wastes a lot of space on the left just to make room for the logo. Kind of goes against good design sensibility, doesn’t it?

  73. Love the new design, but I note that your older articles no longer have their discussions available.

    This is rather irritating since I have some of those pages bookmarked (oh, and the bookmarks don’t work either!) where people have posted some extremely useful information and web links.

    Is there any chance that these will return?

    And if not, are all the comments currently being made destined for binary oblivion?

  74. Nice open design, and nice that it’s friendly to my 800 x 600 monitor as well for reading the articles themselves.

    Is Textile fully working? I tried “h1.” at the beginning of a line and it didn’t render as

    :

    h1. This is supposed to be H1 text, but isn’t in the preview.

    and *bold* via asterisks doesn’t work if the last character before the second asterisk is punctuation, *like this,* which means I have to violate the rule that bold styling is supposed to carry over to the immediately following punctuation.

  76. Old discussions should _hopefully_ return in the near future. As you can imagine the task of migrating all the old issue content was a huge undertaking, and the comments for those articles are even more numerous and expansive. But, we know about it, as well as many other hiccups. You will just have to trust we are on the job 😀

    _- your friendly neighborhood designer_

  78. Much respect, and I love the style of the layout. My only gripe is that with all the CSS experts on staff, you still put out a static width layout that doesn’t even work on 800×600…

    Come on guys, you can try harder than that. Much love!

  80. I too like the muted color scheme and the general order and dynamism of the new ALA. I do however agree with several of the posters about the fixed width.

  81. The new design is okay, but I find it pretty hard to read compared to the old one. Not really sure what you meant by lacked soul; I had no problem with it, heck, I preferred it.

  82. Beautiful design here, guys. The internet went down at my work today, and the entry on ALA version 4.0 was the last thing open on my browser, so I spent the whole day just staring at it and looking it over. A coworker even came by to look and loved the design as well.

    I’ll be ordering the XHTML shirt now as a slap in the face at all the Flash designers at my work. Keep up the inspiring designs and articles.

  83. Thumbs up for all the design, the effort in bringing back a ‘kinda defunct’ ALA (now i know why), and the work to come, to make all archive articles avaliable to us on this new layout and design.

    I don’t know how long i’ve been reading ALA now, but I really see this space as one of the most representative websites in my not-so-short career into website development.

    Keep the good work guys, you are really appreciated by the whole of us!!

  84. The new design is spiffy, but what really interests me is the new publishing platform using Ruby on Rails. I’m amazed no one has commented on this yet? I look forward to an in-depth article on the technology behind ALA 4.0, and my mouth waters at the thought of peeking at the code behind the scenes. Will the platform be open sourced?

  85. Just when I thought the web was getting ‘stale’ and nothing new was happening and every page was looking the same, along comes ALA (again). Love the new design, classy, clean design, it just sneaked up on us.

  87. As one who has recently taken to browsing sites such as this with NetNewsWire, I am disappointed to find that I need to shrink my sidebar in order to read the site. Come on folks! You people taught me how to design an effective liquid layout. And now you’ve cocked it up.
    Still, it’s great to be see some new content!

  88. Very nice indeed – I have been wondering what had been going on with ALA after not seeing an update for a while!

    Liking the new design, looks almost roman to me with the reefs and stuff and nice cool colours. Another site gets redone in a liquid layout – with stuffandnonsense doing the same is this how we are going now? We have just redesigned to a fixed width!

  89. great design guys, brave departure from the old style.

    i second the calls for a print style sheet.

    for those with woes over 800×600 you could probably offer an alternative style sheet which moves the masthead logo to the top above the nav. The main 3 cols seem to fit nicely within an 800 wide window, if you wanted them to…

    si

  90. I’m I the only one who prefers the old style site? Guess you can’t please everyone 🙂

    I have to agree with all the comments questioning the fixed 1024×768 display. I feel this site should be a flagship for the best practice that is talked about in it’s articles.

  91. I really like the new design. I am also glad to see new stuff being added to the ALA feeds. I’ve really grown to miss the regular updates as I follow the ALA feed pretty close and hadn’t seen anything new in a while. Now I know why. Here’s wishing you a bigger, better, brighter future. Keep up the great work.

  92. As much as I like all the improved functionality and admire the excellent, I dislike the design. It is 2005, not 19.. whatever. Real shame that such a great opportunity is missed.

  93. Again don’t wanna dampen the joy but the design only works at full screen (1024 by 768). I only use full screen when working in applications that require my full attention. Browsing the web lends it self to multi-tasking & multi screens (not just multi tabs in Firefox) – at full screen the website feels as though it is imposing itself on my desktop and it is far too easy for my boss to spot!

    Even in this day of larger screen resolution I still advocate designing websites to the old 800 * 600 or getting rid of fixed widths. Bigger is not always better.

  94. Nice to see an update to a site that helped me think about web standards and css in a new way when I first started out in the web development business, but like recent articles, somehow it is unfulfilling and doesn’t grab me like the designs that Dan Benjamin, Dan Cederholm, 37 Signals and the Coudal Partners produce.

    Nevertheless, this site remains a regular on my bookmark list.

    P.S. It also does work well on my pocket pc – something I didn’t expect for a revamped site.

  96. Content is King, right? And this site’s content is at least an Emperor, so I can forgive it much in the layout department. It’s easy on the eye, only marginally afflicted by the “tiny text disease” contemporary designers are prey to, and still usable when not full screen without excessive horizontal scrolling. A style switcher would be nice though.

    The absence of a print stylesheet (or equivalent) is a surprise, given that it was Eric’s article on here that got many of us to abandon the old “printer-friendly version” way of doing things. I’m assuming that’s work in progress.

    What I’d really like to do is control how many comments are displayed per page – articles often trigger good discussions, but I find paging through the comments ten at a time can be a real pain. I’d rather have the option of loading the whole lot at once, or at least getting them in bigger portions.

  98. Is it just me, or does the colour scheme in this first issue of ALA 4.0 reek of “zeldman.com”:http://zeldman.com/ ? I’m really not impressed with the whole musty brown look for this issue – it makes ALA look like a wine-tasting site instead of a web design site – and personally I’m glad that the colours will be changing in each issue. I hope that ALA 4.0 redeems itself by looking a bit more modern and cutting-edge in the next issue.

    I really loved ALA 3.0, and I’m very sorry to see it go. I disagree with Jeffrey Zeldman’s criticism of it as “??generic??” and “??lacking soul??”. I thought it was quite the opposite: it was sleek, innovative, and full of character. I think that those criticisms are more valid for this new incarnation, than for the old one. Is there any way to look at the site (or at least some pages of it) in the old design? Has ALA 3.0 been archived somewhere, to satisfy those of us that are pining for it?

    I’m not impressed with: the lack of support for low-res and / or small-screen users; the removal of the beautiful paintings from the banner; and the continued use of a fixed-width design (particularly now that the banner paintings are gone – using em’s to specify the width would be more plausible now). But most of all, I just don’t think the new design suits ALA: it’s more upmarket, but the ‘upmarket’ look is bordering on snobbery, and this could turn away the geek audience that has always been a significant part of ALA’s readership.

    Then again, this new live comment preview is _really cool!_

  99. While quite liking the new design, I find the main text column too wide for comfort. It would be less tirihg to read if it were somewhat narrower. I have tried zooming-in with Firefox but that spoils the overall appearance of the page — by the time the column is the right width, the text is becoming unaesthetically large.

    I have no problem with fixed width layouts; in fact I detest liquid designs because they make the long-line problem even worse.

    Still, it’s good to have you back!

  102. Nice redesign, simple and elegant. It’s not a revolution in terms of design but it’s very well crafted. However one question has been nagging at me after reading the article about the redesign and who participated.

    Is a web guru still a web guru if they didn’t design their own site?

    Don’t take this as a personal attack on Zeldman himself. I have no doublt about his abilities. But it’s an interesting debate.

    What makes a web guru? A good understanding of web issues alone? A flair for creative writing and oral presentation? Or is it neccesary they practise what they preach?

    P Lemoine

  103. Pierre, is a great movie director still a great director if he doesn’t write the screenplay, hold the camera and act in the movie?

    A triumph of a redesign – congratulations to all involved. It’s like breathing fresh mountain air.

  105. With all the fantastic design and CSS/XHTML going on here, I have to say my favorite part is the tiled-background-image-with-bottom-border on the links. Something so very simple yet so very cool. Love it.

  108. I really like the comment preview! I can watch myself type and watch text elements like *bold* and ^superscripts^ are shown to me in real time.

    The new design shows a classiness that the old one didn’t and I like it! Keep up the great work.

  109. Charles: Good point about the director. He is an integral part of the process. I also enjoyed the article about Art Direction (an article that I’d missed).

    To refine the question I posed earlier, if a web “guru” becomes removed from the work over time how does that impact their credibility? If they don’t do the work and new technologies develop that they’ve never used themselves, but they preach about these new technologies are they still credible?

    A director can talk about how the latest digital effects help him do his job but if he starts telling me how they’re done I’d find his input substanltially less credible than the effects supervisor.

    I do feel Zeldman knows what he’s talking about otherwise I woldn’t keep coming back to this site. But I felt it was a question compelling enough to post. (And was posted here only because his article made me think about it.)

    Pierre

  111. I discovered ALA in June on my journey to better standards design. And then I noticed it wasn’t updating … oh the horror. Anyway, great to see the site renovated and hope to read many new articles.

    As for the comments on design, I like it. It’s simple and elegant. I don’t have a problem with the fixed width as all my monitors run 1280×1024 or higher as a do a lot of graphic work.

    Keep up the good work.

  112. Awesome site, I’ve just discovered it, and now I’m in love with it, what a wonderful work! I’ve hours reading wonderful articles. Thanks!

  113. Pierre, I see what you’re getting at; George Lucas springs to mind with the whole visual effects thing. But I think you’re selling the other members of the “Happy Cog team”:http://happycog.com/about/ short if you take ALA as a Zeldman only production. Ultimately, the credibility of those involved should be judged by the overall quality of the end result. The proof of the pudding, as they say, is in the eating.

  115. Wonderfull new side. Please tell us more about the Backend. A mission statement about Ruby on Rails in production use would be a great thing.

  117. The new design is great! Definitely worth the publishing freeze that had me worried all this time. Fantastic work–the new design is beautiful and elegant, but sits back and lets the content take center stage.

    The topic reorganization is probably my favorite thing about ALA 4.0–the sheer number of articles filed under “CSS” or “XHTML” was a victim of ALA’s own success. I’d click one and say, “What if I want CSS articles related to [blank]?” Now, I can easily find something when I have an objective in mind.

    I’m very glad ALA is back and better than ever. You guys are truly at the frontier of the web.

  118. Great redesign and as far as it being designed for a 1024×768 resolution; I’m thinking that it was designed for people who make webpages. The target audience are webdesigners meaning it would be the proper time to step out of the 800×600 box and use 1024×768 resolution.

    A job well done

  119. Good to see there is a new life for ALA, the prime resource for web coding/content production.

    I’m a little bit disappointed in the 1024*768 design. My iBook has got a 1024*768 screen and I never surf in full screen mode. Given the names that produced this website, I would have thought that a bit more flexibility would have been no challenge at all 😉

    On the upside: the site is very easy to read; an example for online reading.

  121. Excellent piece of work! This is what you get when great minds cooperate.
    As a long time reader of ALA, I witnessed all incarnations from version 1.0 up, and this is by far the best looking one. Great to see it’s still going as strong as ever.

  122. Beautifully simple, stunningly readable, massively useful. An excellent upgrade. Heck, it even works in Konqueror!

    All the best…

  123. Firstly – I’m rapt to see some action on the site and like the redesign. My favourite aspect is how you have made many different fonts all work in the same design. Clever.

    However (hate that word, but…) the css is not working in IE Mac – was that browser written-off as irrelevant? I was eager to see how you addressed the 100% width repeating header (and pesky scrollbar) issues as I have been struggling with that myself in Mac IE. When I checked IE Mac’s rendering of your site I found that a large section at the top of the design extending right from the main logo is obscured by a grey rectangle. This makes the site unuseable in that browser. I know web designers that use Macs and test in IE thinking (wrongly) that they are covering IE PC also. These are the same people who would benefit most from your enlightened content but will go elsewhere if they visit using IE Mac.

    Lastly, regarding the fixed width debate – I was expecting to see the column widths expand when scaling up the text, but I understand the issues that made you refrain from this.

    In awe of your skills people. And thanks for all the great content.

  124. It looks good – modern, clean, professional.

    But if I was sat at any other desk in this office, it would be a PITA to use. Mine is the only PC that can display more than 800×600. So anyone else in this office looking at your site would see horizontal scrollbars and wouldn’t see the menu “above the fold”.

    And it only looks good because my computer is bad. IE doesn’t remember that I like to look at text at “smaller”, because “normal” size text is just too big. But if I do look at your site with “smaller” text – ie, the text size that I find best to read – it is illegibly small. Not just too small to be comfortable, but utterly illegible.

    For a site that prides itself on accessibility, and writes such good articles on the topic, this is disappointing. Not so much the font size, because I can get round that, but a minimum width of 1024 really is unforgiveable. Sorry.

  126. It goes to crap at anything smaller than 1006 pixels. Many of us still set our monitor at 800×600, and many of us browse with a smaller-than-maximized window that might be smaller than 1006 pixels. Horizontal scrolling bad.

    It also goes to crap at larger text sizes – some menu items at the top become completely inaccessible.

    I’m greatly disappointed in a site that preaches accessibility on the main page – and a site I like to point others to when *I* preach accessibility.

  127. It’s great that on the comments page, someone can click on my name and go straight to my web page, a really nice touch.

    But what of the home(page)less? Clicking on their names sends you to http:/// – not very friendly. Could there be some trick that only hyperlinks the name when there’s a non-empty string?

  128. Let me preface my comments by saying, I’m one of those old school guys that started designing before the web, or computers.
    As such, my view of design relates to the form and function of the page visually. I agree that web standards are important (if I didn’t think so I wouldn’t be here).

    In reading some of the other comments, there is a lot of praise for this design. I agree the code for this site is done very well, but don’t confuse code and visual appearance. Without going into a long winded critique, I would just say that there are elements of this design that don’t work (and I’m not talking about 800 x 600). Now I’m not saying by any means that this site is terrible, my point is that it appears to me more thought is given to the code and not enough to the actual presentation.

    In his book, Designing With Web Standards , Jeffrey Zeldman walked us through a design process that started and ended in code. I don’t know if that was the case here, but this is a practice I have seen too often. The design process should start with a well thought out design that is then translated into compliant code. A really great design does both extremely well.

  129. I’m not terribly sold on this upgrade. A lot of people could skim through old articles on this very site and make arguments on its design. Visually the site’s on the mark, but only for those with enough screen to afford it. The content management system is above the mark (and far beyond something I could pull off), but there are still issues (the CMS no longer allows people to register without an email address because it sees a blank email address in someone’s account and says the email address has been taken). A lot of this can be fixed easily, though.

    I think expectations were very high for this redesign; people wanted a flawless, liquid layout with a rock-solid CMS straight out of the gate.

    I can’t fault the A List Apart folks, though, because overall this is a spectacular site and has helped me out several times. While this redesign isn’t a 100% case of “practice what you preach”, it’s still a good place for people new to standards-based design to learn.

  130. This was indeed a welcome surprise when I dropped by ALA this morning. It’s good to seea loose, easy layout with spiffy design, executed via css (as I would expect from Zeldman et al)…

    Congrats all who worked therein!

  131. Loving the new look and feel. I had wondered where you were Jeff, now I see that the absence was worth while.
    Nice work guys!

  132. The design was conceived visually, as pencil sketches followed by Illustrator and Photoshop comps in an iterative process that lasted about two months. If you can’t tell by looking at the design that it is a carefully considered visual experience, view source. Nobody would write such markup and CSS unless unless they were working to deliver detailed page designs.

    _Ralph Spoilsport said:_

    bq. In his book, Designing With Web Standards , Jeffrey Zeldman walked us through a design process that started and ended in code. I don’t know if that was the case here, but this is a practice I have seen too often. The design process should start with a well thought out design that is then translated into compliant code. A really great design does both extremely well.

  133. Jeffrey,
    Your response to my comment about design is not true…
    “Nobody would write such markup and CSS unless they were working to deliver detailed page designs.”
    Unfortunately, they do, I see it all the time. I am glad that you took the time to map out your site properly. However I work with and see lots of examples of designers/developers who spend countless hours working out code for a poorly planned site.

    If you want to defend the attributes of your design, which there are many, point to them, don’t use the markup as proof.

  134. Congrats with improvements! But why again fixed page layout (as opposed to fluid)? Why default font is so small (at least I can change its size from MSIE, some sites use absolute font sizes)? When I change to “larger” font from “normal”, MSIE 6.0 hides the right navigation column. Do you guys really think that small fonts and toned-down colors make for a upscale website? Not that my own site is better (frankly, it sucks), but you are supposed to set the tone amongst those not in the know.

    C’mon, you can do better, guys!

  136. Lots of positives but… I find the very small font hard to read, soon becoming tiring, especially with the white background glare. The line-length is also too long, imho. So I do NOT find it comfortable reading, which is one of the main aims of the site. Surely an option to change style is a must as all kinds of people make websites these days.

    I like the visual joke of the A List Apart logo being in the form of a…list…apart on the left, but it doesn’t have me rolling on the floor. I would prefer 800 width instead, even though I don’t use 800×600 much, but I almost always have my sidebar open so my window size is 800, so I miss the right column. If you must, you could still have the logo apart but make it float over the text when the window narrows or make it push the top text aside.

  137. I think it’s a beautiful new look. I really enjoy the feeling of open space. However, when I try to look at the site on my smartphone, it draws the black rule across the top and then crashes the browser.

  139. This is a hugely attractive and inspiring design. Many congratulations for all the work everyone has done – it’s never easy revamping, but seldom is it as successful as you’ve made this look and feel!

    Great T’s too!!

  140. I recently started browsing A List Apart after reading ??Designing with Web Standards??, and I must say I am quite impressed by the wise use of horizontal space in the new layout.

    My favorite part is how the box containing the logo goes “over” the border at the top of the page, but “under” the horizontal line that supports the nav and the bug. Additionally, The rollovers on both the logo and issue no. elements are fabulous.

  141. Thought I’d give the old bookmark a click and to my surprise the new ALA site was such a pleasant surprise. Works great on my set up (23″ HD Cinema Display at 1920 x 1200) and quite frankly I find it a pleasure to read and truly enjoy the white space.

    The new site design feels light, clean, airy, refreshing, tasteful, and sophisticated, and to my thinking is an excellent example of “less is more.” I’m surprised by some of the negative comments, especially those that seem stuck in a mind set of “overdesign for design sake.” This site is meant to be read, and the new design serves that end wonderfully. It’s easy to read and doesn’t seem to lead to visual fatigue sometimes brought about by darker, heavier design elements.

    A very nice, effective, and attractive redesign – ALA leaps forward once again – Thank You!

  142. The new design is very nice to look at but I was a big fan of the last layout. However, ever looking forward and not backward I look forward to growing into a good feeling about this design. Besides the cover of the book is not the correct judge of the content held within. Keep up the good work all.

  143. bug > when signing up to comment, it says that email is optional, so I left it blank, but that generated an error because somene already has the email address ‘null’

  144. Your new design is attractive, but one of the things I liked most about ALA was being able to print out articles that I found useful. Printing from the new ALA site is pretty useless. I don’t understand why there is no print style sheet with this new design.

    And unfortunately, I’ve never been a fan of fixed-width designs. The new ALA design is almost 1000 px wide, too wide in my opinion.

    Hope you will fix the printing issue.

  145. I guess I will be the first say that I feel the new layout and design is not nearly as ‘neat’ as the last one. The new site actually looks boring at first glance and somehow I feel the text is harder to read as well.

  146. …why aren’t articles printer friendly?
    Both Explorer (Win 6.0), Opera (Win 7.23) cut the right side of the page (including text). Firefox (Win 1.0) works good.
    Anyhow: great job!

  148. The design and layout are lovely indeed. I find myself wishing that the width of the center column were variable however. Some of us keep our browsers slim, and your right column completely escaped my view until I saw the horizontal thumb bar at the bottom of the browser window.

    I also wish you used the “user name” rather than the real name for posts. (Wasn’t that the implication?) 🙂

  152. 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.

  153. 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.

  154. 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.

  155. 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.

  156. 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.

  157. 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

  158. 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

  159. 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.

  161. 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.

  162. 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.

  163. 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.)

  166. 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.

  167. 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?

  168. 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!

  169. 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?

  170. 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?

  172. 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!

  174. 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! 😉

  176. 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!

  177. 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…

  178. 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… 🙂

  180. 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).

  181. 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.

  182. 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.)

  183. 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.

  184. – 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!

  185. 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.

  190. 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.

  192. 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.

  195. 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.

  197. “天长地久，天地所以能长且久者，以其ä¸?自生”?ï¼?ï¼?《è€?å­?》
    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