A List Apart 4.0

by Jeffrey Zeldman

200 Reader Comments

Back to the Article
  1. Looking forward to An Event Apart near me.

    Copy & paste the code below to embed this comment.
  2. Every now and again my favorite online magazine is redesigned and I am taken aback by it’s beauty in organized thought and aesthetics. Welcome back.

    Copy & paste the code below to embed this comment.
  3. Love what you’ve done with the site!

    Copy & paste the code below to embed this comment.
  4. You guys did a wonderful job. The re-design is great and look forward to all the new articles.

    Copy & paste the code below to embed this comment.
  5. 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.

    Copy & paste the code below to embed this comment.
  6. Lovely. Congrats on the redesign. Live comment preview is a nice touch.

    Copy & paste the code below to embed this comment.
  7. 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.

    Copy & paste the code below to embed this comment.
  8. 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

    Copy & paste the code below to embed this comment.
  9. If you’re happy, we’re happy.

    Thanks for all the great feedback so far.

    Copy & paste the code below to embed this comment.
  10. I generally like the new fresh look, but…

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

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

    1. (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.”
    Copy & paste the code below to embed this comment.
  11. 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.

    Copy & paste the code below to embed this comment.
  12. Congratulations on the redesign! Looking forward to (the) next Tuesday already.

    Copy & paste the code below to embed this comment.
  13. Very, very nice design!

    Copy & paste the code below to embed this comment.
  14. Congrats on the redesign, and glad to see another big name hosting at “TextDrive”:http://www.textdrive.com!

    Copy & paste the code below to embed this comment.
  15. Five pages of ‘love the site’ – wow, job well done!

    Copy & paste the code below to embed this comment.
  16. 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.

    Copy & paste the code below to embed this comment.
  17. 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.

    Copy & paste the code below to embed this comment.
  18. 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.

    Copy & paste the code below to embed this comment.
  19. Nice redesign!!
    more readable, comfortable

    Copy & paste the code below to embed this comment.
  20. You guys are too cool.  The new site is stunning.

    Copy & paste the code below to embed this comment.
  21. the right side of the ALA page is clipped in print preview in IE

    Copy & paste the code below to embed this comment.
  22. I’ve been snooping around the new site and have been enjoying it very much. Great work all around.

    Copy & paste the code below to embed this comment.
  23. 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.

    Copy & paste the code below to embed this comment.
  24. 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.

    Copy & paste the code below to embed this comment.
  25. Very nice Clean design, welcome back ALA.

    Copy & paste the code below to embed this comment.
  26. Are you going to be pointing the www.alistapart.com to the new site? Just wondering. I went to it a few minutes ago and was greeted with the old design and content.

    Thought it was all a dream for a minute.

    Copy & paste the code below to embed this comment.
  27. 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!

    Copy & paste the code below to embed this comment.
  28. 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?

    Copy & paste the code below to embed this comment.
  29. - 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).

    Copy & paste the code below to embed this comment.
  30. nice rugen comment!

    one other small quibble: “markdown”:http://daringfireball.net/projects/markdown/ does a better job than textile at translating text to html…

    Copy & paste the code below to embed this comment.
  31. Again, very slick. Very…very! Always finding a voice and this is the loudest yet. Congrats on the re-launch of something big and necessary.

    Copy & paste the code below to embed this comment.
  32. The new ALA is really nice! Glad to see it updated again. ;-)

    Copy & paste the code below to embed this comment.
  33. 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.

    Copy & paste the code below to embed this comment.
  34. Noticed that the User Name links, strips out the slashes ‘/’ from the URI’s of users.

    Copy & paste the code below to embed this comment.
  35. You folks all did an excellent job! Nice, clean feeling! You rock!

    Copy & paste the code below to embed this comment.
  36. Really nice design, amazing. Congratulations, parabéns!

    Copy & paste the code below to embed this comment.
  37. Beautiful work, all. Damn impressive and inspirational, as a good redesign of a beloved resource should be.

    Copy & paste the code below to embed this comment.
  38. 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!

    Copy & paste the code below to embed this comment.
  39. All i can say is super!

    Copy & paste the code below to embed this comment.
  40. Not bad at all guys! Good to have ALA back again

    Copy & paste the code below to embed this comment.
  41. 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?

    Copy & paste the code below to embed this comment.
  42. I like the new visual design and especially the mild colors.

    However, I wouldn’t call this wide fixed-width layout good/modern.

    Copy & paste the code below to embed this comment.
  43. 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?

    Copy & paste the code below to embed this comment.
  44. Nice open design, and nice that it’s friendly to my 800 × 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.

    Copy & paste the code below to embed this comment.
  45. However, I see they both work once posted.  The problem is only with the preview.

    Copy & paste the code below to embed this comment.
  46. 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 :D

    - your friendly neighborhood designer

    Copy & paste the code below to embed this comment.
  47. Just lovin’ the new look, so much easier to read. Congrats to all on what must have been a huge undertaking, what with moving host at the same time and all.

    Copy & paste the code below to embed this comment.
  48. 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!

    Copy & paste the code below to embed this comment.
  49. Subj. Look at the Print Preview. Right side of a page cutted.

    Copy & paste the code below to embed this comment.
  50. 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.

    Copy & paste the code below to embed this comment.
  51. 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.

    Copy & paste the code below to embed this comment.
  52. 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.

    Copy & paste the code below to embed this comment.
  53. 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!!

    Copy & paste the code below to embed this comment.
  54. 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?

    Copy & paste the code below to embed this comment.
  55. 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.

    Copy & paste the code below to embed this comment.
  56. absolutely great re-design. really love it and lookin’ forward for upcoming new content. best wishes from germany!

    Copy & paste the code below to embed this comment.
  57. 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!

    Copy & paste the code below to embed this comment.
  58. 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!

    Copy & paste the code below to embed this comment.
  59. 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

    Copy & paste the code below to embed this comment.
  60. 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.

    Copy & paste the code below to embed this comment.
  61. 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.

    Copy & paste the code below to embed this comment.
  62. 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.

    Copy & paste the code below to embed this comment.
  63. 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.

    Copy & paste the code below to embed this comment.
  64. 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.

    Copy & paste the code below to embed this comment.
  65. The new design is just lovely!

    Copy & paste the code below to embed this comment.
  66. 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.

    Copy & paste the code below to embed this comment.
  67. So glad you’re back.  I love the new design—fresh yet classy.  The article by Jim Coudal was terrific.  Looking forward to Tuesdays.

    Copy & paste the code below to embed this comment.
  68. 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!

    Copy & paste the code below to embed this comment.
  69. 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!

    Copy & paste the code below to embed this comment.
  70. Nice job on the redesign. I’ve learned a lot from reading this site over the years. Thanks for all your efforts.

    Copy & paste the code below to embed this comment.
  71. What can I say, the new design rox. V.nice.

    A.

    Copy & paste the code below to embed this comment.
  72. 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

    Copy & paste the code below to embed this comment.
  73. 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.

    Copy & paste the code below to embed this comment.
  74. In fact, there’s an article about the subject of art direction “within these very pages”:http://www.alistapart.com/articles/artdirweb

    Copy & paste the code below to embed this comment.
  75. 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.

    Copy & paste the code below to embed this comment.
  76. Meant to say background color…

    Copy & paste the code below to embed this comment.
  77. Very nice design, very clear and beautiful.

    Copy & paste the code below to embed this comment.
  78. 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.

    Copy & paste the code below to embed this comment.
  79. 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

    Copy & paste the code below to embed this comment.
  80. messes up the page layout?

    Copy & paste the code below to embed this comment.
  81. 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.

    Copy & paste the code below to embed this comment.
  82. 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!

    Copy & paste the code below to embed this comment.
  83. 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.

    Copy & paste the code below to embed this comment.
  84. Nice to see this out of the closet.

    Copy & paste the code below to embed this comment.
  85. 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.

    Copy & paste the code below to embed this comment.
  86. Congrats on the redesign! Keep the great content coming…

    Copy & paste the code below to embed this comment.
  87. 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.

    Copy & paste the code below to embed this comment.
  88. 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

    Copy & paste the code below to embed this comment.
  89. 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.

    Copy & paste the code below to embed this comment.
  90. Is Ruby on Rails a scripting language like PHP? I can’t tell from their site what it is exactly….

    Copy & paste the code below to embed this comment.
  91. 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.

    Copy & paste the code below to embed this comment.
  92. Beautifully simple, stunningly readable, massively useful. An excellent upgrade. Heck, it even works in Konqueror!

    All the best…

    Copy & paste the code below to embed this comment.
  93. 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.

    Copy & paste the code below to embed this comment.
  94. 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.

    Copy & paste the code below to embed this comment.
  95. For a moment, I thought that I visited the wrong site. But it was ALA’s itself. Still Legendary and still magnificent. Really good job.

    Copy & paste the code below to embed this comment.
  96. 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.

    Copy & paste the code below to embed this comment.
  97. 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?

    Copy & paste the code below to embed this comment.
  98. 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 × 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.

    Copy & paste the code below to embed this comment.
  99. 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.

    Copy & paste the code below to embed this comment.
  100. 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!

    Copy & paste the code below to embed this comment.
  101. 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!

    Copy & paste the code below to embed this comment.
  102. 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:

    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.

    Copy & paste the code below to embed this comment.
  103. 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.

    Copy & paste the code below to embed this comment.
  104. 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!

    Copy & paste the code below to embed this comment.
  105. In an “interview”:http://www.stuffandnonsense.co.uk/archives/a_list_taken_apart.html at stuffandnonsense.co.uk, Jason Santa Maria discusses some of the thinking behind the design and also answers such questions as why fixed width? why this width? why now?

    Copy & paste the code below to embed this comment.
  106. 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.

    Copy & paste the code below to embed this comment.
  107. 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.

    Copy & paste the code below to embed this comment.
  108. I really like the new design, great work team.

    One small thing I noticed is that the old /stories/ urls are broken eg: http://www.alistapart.com/stories/doctype/. At this point Google is still pointing to the old URLs so some Apache tweaking may be in order.

    Copy & paste the code below to embed this comment.
  109. 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!!

    Copy & paste the code below to embed this comment.
  110. 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.

    Copy & paste the code below to embed this comment.
  111. 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 × 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!

    Copy & paste the code below to embed this comment.
  112. 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.

    Copy & paste the code below to embed this comment.
  113. 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’

    Copy & paste the code below to embed this comment.
  114. 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.

    Copy & paste the code below to embed this comment.
  115. 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.

    Copy & paste the code below to embed this comment.
  116. …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!

    Copy & paste the code below to embed this comment.
  117. This is realy briljant. Nice layout and design! I’am impressed.

    Copy & paste the code below to embed this comment.
  118. 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?) :)

    Copy & paste the code below to embed this comment.
  119. I especially dig the new IRI design, i.e. no trailing slashes for new articles. :) Congrats to the entire team!

    Copy & paste the code below to embed this comment.
  120. This new design is fantastic!  Easy to read, aesthetically pleasing.

    Copy & paste the code below to embed this comment.
  121. ALA is simply more beautiful than ever…

    Copy & paste the code below to embed this comment.
  122. 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.

    Copy & paste the code below to embed this comment.
  123. 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.

    Copy & paste the code below to embed this comment.
  124. 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.

    Copy & paste the code below to embed this comment.
  125. 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.

    Copy & paste the code below to embed this comment.
  126. 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.

    Copy & paste the code below to embed this comment.
  127. 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

    Copy & paste the code below to embed this comment.
  128. 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

    Copy & paste the code below to embed this comment.
  129. 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.

    Copy & paste the code below to embed this comment.
  130. Relly nice design and engine

    Copy & paste the code below to embed this comment.
  131. 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.

    Copy & paste the code below to embed this comment.
  132. “¦ 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.

    Copy & paste the code below to embed this comment.
  133. 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.)

    Copy & paste the code below to embed this comment.
  134. Plain and Simple aka Beautiful :) Compliments from Italy :)

    Copy & paste the code below to embed this comment.
  135. Plain and Simple aka Beautiful :) Compliments from Italy :)

    Copy & paste the code below to embed this comment.
  136. 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.

    Copy & paste the code below to embed this comment.
  137. 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?

    Copy & paste the code below to embed this comment.
  138. 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!

    Copy & paste the code below to embed this comment.
  139. 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?

    Copy & paste the code below to embed this comment.
  140. 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?

    Copy & paste the code below to embed this comment.
  141. Fantastic! My compliments to the ALA team, bravo for real!

    Copy & paste the code below to embed this comment.
  142. 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!

    Copy & paste the code below to embed this comment.
  143. Hope this marks the turning of the corner for ALA, looking forward to reading more.  Great stuff.

    Copy & paste the code below to embed this comment.
  144. 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! ;)

    Copy & paste the code below to embed this comment.
  145. I’ve got Textile link wrong. It was supposed to be: “404”:http://www.alistapart.com/topics/dom/

    Copy & paste the code below to embed this comment.
  146. 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!

    Copy & paste the code below to embed this comment.
  147. 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…

    Copy & paste the code below to embed this comment.
  148. 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 <fieldset> and <legend>? (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… :)

    Copy & paste the code below to embed this comment.
  149. I always loved ALA. If the content-related level of articles won’t be lower, I’ll love you much more than it is now :) Good luck.

    Copy & paste the code below to embed this comment.
  150. 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).

    Copy & paste the code below to embed this comment.
  151. 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.

    Copy & paste the code below to embed this comment.
  152. 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.)

    Copy & paste the code below to embed this comment.
  153. 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.

    Copy & paste the code below to embed this comment.
  154. - 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!

    Copy & paste the code below to embed this comment.
  155. 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.

    Copy & paste the code below to embed this comment.
  156. I was suprised to see a new design. I do like it though.

    I also plan to buy all three of the ALA shirts when I get paid.

    Copy & paste the code below to embed this comment.
  157. I was suprised to see a new design. I do like it though.

    I also plan to buy all three of the ALA shirts when I get paid.

    Copy & paste the code below to embed this comment.
  158. Congratulates! version 4.0 was born.
    And thanks ZELDMAN, always give me best ways for standards

    Copy & paste the code below to embed this comment.
  159. I love new ala’s dress “molto elegante”.
    Thank you for your great work.

    Copy & paste the code below to embed this comment.
  160. 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.

    Copy & paste the code below to embed this comment.
  161. Such an attractive site, clean, crisp, beautiful on a Mac with anti-aliasing! I can’t stop staring at the layout, the smooth serif fonts…

    Copy & paste the code below to embed this comment.
  162. 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.

    Copy & paste the code below to embed this comment.
  163. I must say, I’m not a big fan of the forced fixed-width design. I think it overlooks a lot of basic web design principals. But, so be it—the redesign does look nice. A recent debate about this in another forum got me motivated to offern an alternative for those that want it. I made a bookmarklet to convert the article pages into a fluid-width layout for thos of us that prefer it:

    http://mnteractive.com/archive/fixing-the-fixed-width-design-again/

    Copy & paste the code below to embed this comment.
  164. Textiled link:

    ALAP Fluid Bookmark”:http://mnteractive.com/archive/fixing-the-fixed-width-design-again/

    Copy & paste the code below to embed this comment.
  165. 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.

    Copy & paste the code below to embed this comment.
  166. However, I do feel that the fonts of comments are too small. I always read it enlarged.

    Is it me or the design?


    Nir Ben-Dor
    I write for “Linkaedlic Magazine”:http://www.comagz.com/webmagazine/ , you can too.

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

    Copy & paste the code below to embed this comment.
  168. is there a physical “A list Apart” magazine i can order?

    Copy & paste the code below to embed this comment.
  169. Congratulations, I like this new better. Nice Loking!

    Copy & paste the code below to embed this comment.
  170. The new look is cool but I still prefer the old stylish , compact page

    Copy & paste the code below to embed this comment.