A List Apart Returns
Published 19 years, 3 months pastA 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.
Comments (32)
It looks the same to me.
I guess I’m just too fast because it looks exactly the same over here ;)
Use the numeric adress http://69.93.55.164/ to see the ALA ver. 4.
Looks great for me! Nice job.
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.
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??
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.
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.
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.
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?
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.
It’s nice, but I get a horizontal scrollbar at 800×600 resolution. Is this no longer forbidden?
Very nice. Jason did a great job. I am a little surprised at the non flexibility of the layout though.
Great work!
Did your work involve touching the rails portions at all, if so what did you think?
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
labeltags?Was it an oversight that the text “include discussions” wasn’t set as a label for the associating checkbox?
I think I will make a layout with 7 columns!
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?
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.
I also out of luck seeing the fourth column. I run in 1024×768, just ain’t a big fun of maximized windows.
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!”
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 :)
Pingback ::
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 […]
That is a really good looking site and totaly original. Can’t wait to start picking it apart.
It is an interesting stylesheet. One little (not so little) complain, why is the font-size so damn small ?
bodyhas a font-size of 0.8125em, and thendiv#maingoes even smaller at 0.88em. That computes at 11px on my side, which is my minimum font-size (that is, already uncomfortable to read).Whats with the print CSS? tiny type, all menus show. None of the goodness of the old print CSS carried over.
Neither alistapart.com or the IP address given above work.
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!
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.
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.
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!
Looks really nice!! Good work.
What I’m missing is fluidity in the layout.
Pingback ::
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 […]