meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

A List Apart Returns

A List Apart is back in business and sporting a radically new design.  Check it out!  Four columns on the main page?  Yes indeed!

I’m proud to say I had a hand in the redesign process, taking the visual goodness of Jason Santa Maria and turning it into living, breathing XHTML and CSS.  Keeping the pages from going completely crazy in broken browsers was an interesting challenge at times, but overall I think things came together rather nicely.  There may be a few glitches here and there, though we did our best to test widely and often, but if so we’ll handle them as they arise.

It was good fun working with the talented team members in this process, and I especially enjoyed being able to concentrate on what I know—building XHTML and CSS around existing designs—and leave the rest to other people who knew their stuff as well as I know mine.  Due to the strategic partnership between Complex Spiral Consulting and Happy Cog Studios, I look forward to assuming that role more often, and on ever more interesting projects.

Addendum: it seems the DNS change to point to ALA’s new Textdrive home hasn’t made it as far as I’d thought, so I’ll point you to the numeric IP address; that way, you can see it even if your local DNS hasn’t caught up yet.  Sorry for any confusion!

Addendum 2: it’s been long enough that the DNS change should have made it to all the far-flung corners of the net, so I’ve removed the numeric IP addresses.

32 Responses»

    • #1
    • Comment
    • Tue 23 Aug 2005
    • 0842
    Eric Gruber wrote in to say...

    It looks the same to me.

    • #2
    • Comment
    • Tue 23 Aug 2005
    • 0851
    Kristof Rutten wrote in to say...

    A List Apart is back in business and sporting a radically new design. Check it out! Four columns on the main page? Yes indeed!

    I guess I’m just too fast because it looks exactly the same over here ;)

    • #3
    • Comment
    • Tue 23 Aug 2005
    • 0926
    Bart Grzyb wrote in to say...

    Use the numeric adress http://69.93.55.164/ to see the ALA ver. 4.
    Looks great for me! Nice job.

    • #4
    • Comment
    • Tue 23 Aug 2005
    • 0936
    Paul Armstrong wrote in to say...

    4 columns? I only see 3, unless you are counting the banner on the far left, which really doesn’t seem like a column, but more of a part of the header/nav.

    • #5
    • Comment
    • Tue 23 Aug 2005
    • 1016
    Dave Maxwell wrote in to say...

    The textdrive URL is http://alistapart.textdrive.com. I’m assuming the alistapart.com URL will forward over to this new location at some point??

    • #6
    • Comment
    • Tue 23 Aug 2005
    • 1047
    Simon Jessey wrote in to say...

    Oh! That’s much better! The new design is very pretty indeed, and certainly a big deparature from ALA’s previous “narrowness”. I like the browns, creams, and oranges – echoes of Happy Cog. The three-column approach on sub pages works exceptionally well. Yummy.

    • #7
    • Comment
    • Tue 23 Aug 2005
    • 1052
    Paul Roub wrote in to say...

    I don’t usually pay much attention to redesigns, but man… that’s just a beautiful job. That’s going to be ripped off constantly, and I mean that in a good way.

    • #8
    • Comment
    • Tue 23 Aug 2005
    • 1120
    Carl wrote in to say...

    Very slick, readable, and visually appealing. I noted in my blog that ALA chooses to publish in RSS 2.0 exclusively. I agree when ALA justifies its decision with the argument that (my paraphrasing) it’s time the internet settled on a subscription standard.

    • #9
    • Comment
    • Tue 23 Aug 2005
    • 1226
    Jennifer Thul wrote in to say...

    Great job on the redesign! Kudos to everyone involved.

    I was looking at your code and wondering why you chose 0.8125em as the default body size. Was it for aesthetic reasons or did you have another specific rationale?

    • #10
    • Comment
    • Tue 23 Aug 2005
    • 1328
    Craig wrote in to say...

    Jennifer, I’m guessing “0.8125em” was chosen because it’s the equivalent of 12px for most browsers (i.e., those set to 96dpi, with a medium default text size of 16px) — but it’s much more scalable.

    If yr referring to why its on the body, and not another element, I’ll leave Eric to explain.

    • #11
    • Comment
    • Tue 23 Aug 2005
    • 1343
    William Stewart wrote in to say...

    It’s nice, but I get a horizontal scrollbar at 800×600 resolution. Is this no longer forbidden?

    • #12
    • Comment
    • Tue 23 Aug 2005
    • 1411
    Stephen Collins wrote in to say...

    Very nice. Jason did a great job. I am a little surprised at the non flexibility of the layout though.

    • #13
    • Comment
    • Tue 23 Aug 2005
    • 1411
    Jesse Andrews wrote in to say...

    Great work!

    Did your work involve touching the rails portions at all, if so what did you think?

    • #14
    • Comment
    • Tue 23 Aug 2005
    • 1421
    Dylan Grose wrote in to say...

    Very nice redesign, but echoing some previous comments, I’m also a bit surprised/confused/perplexed at the lack of fluidity in the layout.

    Also, a small sidenote: why hasn’t the “include discussions” text under the search field been surrounded in label tags?

    • #15
    • Comment
    • Tue 23 Aug 2005
    • 1639
    Mike Goodspeed wrote in to say...

    Was it an oversight that the text “include discussions” wasn’t set as a label for the associating checkbox?

    • #16
    • Comment
    • Tue 23 Aug 2005
    • 1942
    John wrote in to say...

    I think I will make a layout with 7 columns!

    • #17
    • Comment
    • Tue 23 Aug 2005
    • 2137
    Elliott Back wrote in to say...

    So, the problem with the site is really quite minor–that is, the CSS that handles the image-list mouseovers causes a roundtrip to the server each time, which really is quite sad. Just give up and use jscript already, neh?

    • #18
    • Comment
    • Tue 23 Aug 2005
    • 2140
    Adrian Rinehart-Balfe wrote in to say...

    I’m liking the new look. I can’t help wondering if the wider fixed width will spawn a heap of copycats, insiting the small monitored masses to a tabled layout revolt. I just like it because it is more pleasant to read, pure and simple.

    • #19
    • Comment
    • Tue 23 Aug 2005
    • 2219
    Maniac wrote in to say...

    I also out of luck seeing the fourth column. I run in 1024×768, just ain’t a big fun of maximized windows.

    • #20
    • Comment
    • Tue 23 Aug 2005
    • 2232
    Joe D'Andrea wrote in to say...

    Congratulations Eric! Some tasty CSS and neat-n-tidy XHTML you’ve got there. Four columns?! “Wow, push the envelope, why don’tcha.”

    I liked seeing the id “lucre” for the ad (what an excellent choice) and chuckled at “ish” for the issue … not to mention “ishinfo,” “ishintro,” and “ishoutro.” I can almost hear Mooch exclaiming an approving “yesh!”

    • #21
    • Comment
    • Wed 24 Aug 2005
    • 0216
    Eric wrote in to say...

    Congratulation for the new look. And like some of the previous commenters, I’m quite surprised with the width which require the 800×600 resolution users have to scroll sideways. Or is the 800x600res over yet? Aside from that, I like the new look. A bold change from the old one. I guess I have to keep learning about CSS-ing the web, from one Eric to the other :)

    • #22
    • Pingback
    • Wed 24 Aug 2005
    • 0329
    Received from Just Relax! :: ALA’s new look: ALA 4.0 :: August :: 2005

    […] er (who else?) who I still see as (one of) the CSS master. I, as some of the commenters on Meyer’s article, was asking about the flexibility of the design. Try usi […]

    • #23
    • Comment
    • Wed 24 Aug 2005
    • 0357
    Conánn wrote in to say...

    That is a really good looking site and totaly original. Can’t wait to start picking it apart.

    • #24
    • Comment
    • Wed 24 Aug 2005
    • 0954
    Philippe wrote in to say...

    It is an interesting stylesheet. One little (not so little) complain, why is the font-size so damn small ?
    body has a font-size of 0.8125em, and then div#main goes even smaller at 0.88em. That computes at 11px on my side, which is my minimum font-size (that is, already uncomfortable to read).

    • #25
    • Comment
    • Wed 24 Aug 2005
    • 1319
    Lou wrote in to say...

    Whats with the print CSS? tiny type, all menus show. None of the goodness of the old print CSS carried over.

    • #26
    • Comment
    • Wed 24 Aug 2005
    • 1407
    Will wrote in to say...

    Neither alistapart.com or the IP address given above work.

    • #27
    • Comment
    • Thu 25 Aug 2005
    • 0352
    Ronald wrote in to say...

    Eric,

    Excellent piece of work, as expected of course! :D
    I just was a little disappointed to encounter ant track text sizing. I know IE gets the standard text sizing wrong, but it’s a little effort to use an approach that works well in both IE and more compliant browers.
    Other then that: I love ALA’s new look!

    • #28
    • Comment
    • Thu 25 Aug 2005
    • 0417
    Lars Kasper wrote in to say...

    At first I thougt: Huh, four columns – where? I only see two. But then I realized that you count the enormous whitespace at the left (which I had called padding, not a column, but the ALA logo might justify that column wording) as column. And the fourth was discovered after scrolling right (I hate doing that).

    I am not a friend of column layouts on the Web. Especially here, where again two columns, the leftmost and rightmost, consist mainly of whitespace. Oh course, whitespace is important. But a flexible, fluid layout (with shrinking whitespace) and no horizontal scrolling is more important.

    From what I have read in your comments I am quite happy to have set a large minimum font size in my browser. A quick check with disabling it made me still more happy. I cannot understand those eagle eyed designers using such tiny font sizes on the Web. Of course, people can zoom in, enlarge it, set a minimum font size; but most users do not know how – for them it would be better to respect their readable font size chosen in their browser.

    Besides all this critique, the new ALA looks quite good in general, escpecially the colours.

    • #29
    • Comment
    • Sat 27 Aug 2005
    • 2326
    Eric Meyer wrote in to say...

    Eliott: what “image-list mouseovers” are causing round-trips? And in which browser(s)? I’m not aware of any rollover effects that should cause a server hit every time they fire.

    • #30
    • Comment
    • Sun 28 Aug 2005
    • 0613
    Anup Shah wrote in to say...

    Very nice redesign.

    Not being nit-picky, but just a few quick accessibility type things that come to mind immediately:

    Increasing text size:
    1) The “No. 201″ circle does not increase in size with the text, so the text starts to get cut off

    2) The top menu links disappear one by one off the right.

    3) There are some images with Text inside. Where possible, can text be used for some of those instead where branding isn’t impacted? Examples:
    a) the image in the bottom left of the home page that reads “From pixel to prose, coding to content.”
    b) some of those images in the third column, perhaps?

    While the target audience is probably not one that often needs to resize text very much, it would be interesting to see if ALA can somehow incorporate these considerations so as to teach readers pleasant design and accessibility through example.

    Using Forms:
    The search form does not use labels for the text field or check box

    (All this was tested in Firefox 1.0.6 on XP. In bit of a rush to test with other browsers, or screen readers just now. More later, hopefully)

    Good job though on the whole!

    • #31
    • Comment
    • Mon 12 Sep 2005
    • 0310
    Roger Karlsson wrote in to say...

    Looks really nice!! Good work.

    What I’m missing is fluidity in the layout.

    • #32
    • Pingback
    • Sat 5 Nov 2005
    • 1601
    Received from Medicinal Food News » learning from the best

    […] cument by Jeffrey’s article. Jason also talks about the redesign on his website and Eric Meyer does the same as well. Although this is the number one site for lea […]

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


August 2005
SMTWTFS
July September
 123456
78910111213
14151617181920
21222324252627
28293031  

Sidestep

Feeds

Extras