A design that departs from our past and a platform on which to build the future. Welcome to the relaunch of A List Apart, for people who make websites. Content first: We’ve added new kinds of content (with more to come), and we’re publishing more frequently—a lot more frequently. Fear not, we will continue to produce the insightful and important articles you expect from A List Apart, and the biweekly issues they ride in on. Major articles and (mostly) biweekly issues are forever.
But in between those issues, you’ll now find helpful link posts, provocative and insightful blog posts on focused topics, and opinion columns by some of the smartest people we know in this industry. There’s even a column by our friends at the W3C, who need your help to make sure that web standards remain practical, usable, advanced, and forward-thinking. (See the Masthead for a glimpse at our new contributors.)
In the months to come, as our between-issues content becomes as solid and valuable to you as our articles are, we plan to introduce additional and equally useful new kinds of content designed to provide you with more of the information you need most, sometimes even before you know you need it.
The design#section2
Putting the content first, and conceiving of its presentation by default as a fluid series of multi-device encounters, designer Mike Pick and developer Tim Murtaugh have delivered a high-impact, responsive reading experience with the virtues (but not the constraints) of great print design.
As always, the new design flips its predecessor on its head and deepens how we understand ALA as a product and brand. Whereas my original (1998) design sported an “underground club flyer” look appropriate for the wild early days of professional web design, and the most recent (2005) design by Jason Santa Maria cultivated a bookish look and feel indicative of A List Apart’s stature as a time-tested resource, the new design conceives of ALA as a boldly art-directed magazine.
To make their task more daunting, I challenged Mike and Tim to think of design non-canonically. What do I mean by that? Sometimes with responsive design, one particular layout (for instance, the desktop browser layout) feels like the “real” design, and smaller-screen experiences become merely usable afterthoughts. I didn’t want that here. Instead I wanted you, our readers, to feel that you’re experiencing the real thing on whichever device or circumstance you happen to encounter it. Of course that should be a goal of any mature approach to responsive web design. In any case, in my opinion, Mike and Tim succeeded brilliantly.
Tying the new design to its predecessor is the flabbergastingly magnificent illustration work of Kevin Cornell, author of Bearskinrug and numerous books and works. For extra juiciness, Kevin’s illustrations are now viewable in higher resolution (including Retina where appropriate)—as is the other artwork that adorns ALA.
Fun features: where ALA 4.0 employed a system of dual link colors that changed with each issue we published, ALA 5.0 takes things old-school with blue links. Equally old-timey, we set the body type in good old classic Georgia. (Our Georgia Pro and ITC Franklin are both courtesy of the wizards at Webtype. If it’s wrong to be in love with two web fonts, I don’t want to be right.)
Mike and Tim will address interesting aesthetic decisions and technical challenges of the redesign in subsequent articles and blog posts.
The strategy#section3
We began planning A List Apart 5.0 in November, 2011. Yes, that was fourteen months ago. Slow bakin’ makes good eatin’.
The strategic team that conceived ALA’s new features included producer Tim Murtaugh, former creative director Jason Santa Maria, former editor-in-chief Krista Stevens, former contributing editor Mandy Brown, and yours truly. The work continued under the direction of new editor-in-chief Sara Wachter-Boettcher, designer Mike Pick, developer Tim Murtaugh, and, of course, yours truly.
In between the two sets of team leaders, UX champ Marcy Mayer conceived and executed detailed wireframes that made the strategists’ visions concrete (or revealed gaps and flaws in those visions), and planned out multiple phases of possible feature rollout. As it always does, the IA has continued to evolve throughout the project as we’ve vetted it against real design, content, and workflow.
A tricked-out build of Expression Engine 2.0 by Tim Murtaugh (who also, with Mike Pick, slaved over the CSS and HTML) powers the new site’s visible and secret features. More will be revealed.
Pirates ship#section4
To launch on time, we have knowingly held off on finessing certain details and (like you do) decided to suppress a few niceties until after the relaunch. If you spot a quirk in the UX logic, an inconsistency in the design hierarchy, or a curious flaw in the CSS, we are probably working on it.
If you are new to A List Apart, welcome! You may want to check out “The ALA Primer: A Guide for New Readers” by Erin Lynch, the “ALA Summer Reading Issue” of 2012 (our favorite articles from 355 issues of A List Apart), and “Findings from the Survey, 2011,” our latest assessment of the profession via data submitted by our readers.
For more about our design and content history, see “Ten Years,” my 2008 retelling of the magazine’s first decade.
First-time visitor or longtime reader, you’re why we’re here—and we want to know what you think. Tell us how you like the new ALA, and what you hope to see in (and in between) future issues.
Am I the only person who loves the clipped header and footer design? My only issue is that they don’t scale for mobile.
I’ve love a top-anchored navigation or at least a “scroll to top” link anchored to the bottom.
Top part takes up a lot of space. Any concerns with the “above the fold” content issue?
I’m sorry to offend, but I hate it.
In the software world, they are having to discover that not only does a desktop user interface not work on a tablet or a phone but a tablet/phone UI also does not work on a desktop. Likewise, a web design best suited for a mobile device does not work well on a desktop.
“Sometimes with responsive design, one particular layout (for instance, the desktop browser layout) feels like the “real” design, and smaller-screen experiences become merely usable afterthoughts. I didn’t want that here. ”
Well, congratulations. All you’ve managed to do is now make the desktop experience the “usable” (if only just) afterthought. Time to go elsewhere for design inspiration. You guys have lost it.
— Smittie
The body of this new design is how mobile should look.
It looks great … if I minimize the browser window to a phone size.
It scales nicely at that point, but the header and footers don’t.
I haven’t been back to Alistapart since January hoping things might have been worked out by now.
The large type is nice, but even on a small laptop it is too big and the amount of whitespace makes it impossible for me to read due to sensitivity to bright light. I’d hate to see this blown up for someone with a large monitor.
For desktop users there should be some limits on or better scaling on say a curve and not just for a few elements.
I live in a city with a world renowned university.
Their architectural school building is heralded as an example of a certain style.
Unfortunately, that building’s design flaws include being out of proportion to the neighborhood, having odd angles that create lots of unused space and is hard to heat and cool.
Many say it is an ugly monument to the designer’s ego and an example of what not to do.
Making a bold statement should take into account the people using it.
My first reaction to the new site was negative, but I am aware of the “new site prejudice” that many users experience when a major redesign occurs(article idea!). I’ve given it a few months now and I have to say my first reaction continues each time I load up the front page. I’m going to keep it brief in hopes that someone actually reads this:
1. Title clipping: Uncomfortable, uneasy, incomplete, those are the feelings I get when I look at the title.
2. Two front page articles: ALA has always had proudly low-click through titles, “Growing Your Design Business”, or “Material Honesty for the Web.” Of course we don’t come to ALA for click-fodder celeb-gossip. But if you display informative, yet dry titles, I need more time to decide what to read. With more title options I could peruse, read the abstract blurbs, then decide.
3. Wide paragraph blocks: It may be that I’m used to narrow web articles wedged between screaming ad blocks, but the front page blurbs seems to wide and require head turning scanning.
The entire effect for me as a reader is to be put off and want to click away form the page, which is what I usually do. My readership of ALA has dropped from once a week(one new article one old) to once a month and even then I don’t often read anything. Looking forward to the next redesign…sad….
The site now gives me a headache. I came to read an article, thinking “yay, this link is sure to be helpful, I’ve always learned so much from ALA articles in the past… I should really check in to that site more regularly.” and then, ugh, why is the top banner cut off? How can I shrink this type so that it is readable on my large monitor? Maybe it’s a safari bug, let me check it out on firefox, nope, top is cut off there too. What the heck is going on? I can’t bear to read the article that I came here for.
So, I searched for info and came across this announcement.
In reading through the comments I saw that there was a lot of praise for viewing the site on a mobile device. I checked it out on my iphone and yep, it looks fine, easy to read, no zooming necessary, terrific. But,
I am a professional who sits down at a large monitor when I want to get work done, I don’t do serious work or research from my phone or iPad.
The design on the phone doesn’t have the horrendous amount of white space, and the giant font an large line spacing is helpful, but why on earth make a design that causes nausea on a desktop, where most of us get our work done? That’s the opposite of responsive design.
Aside from the difficulty using the site on a desktop monitor, the choice to cut off logos/images is questionable. If all browsers played nicely and we were at a stage where web content was consistently displayed across platforms then it might be a cute/tongue in cheek choice, but we don’t live in that reality. We still live in a reality where because of poorly coded web pages, or poorly coded browsers, or a combination of the two, I have to fire up a page in my secondary browser at least a couple of times a month in order to properly view content.
What is good about a design that makes the user wonder if their browser is working / if they are missing part of the page?
I am saddened and have sore eyes.