A List Apart 5.0

120 points by pgmcgee 13 years ago | 85 comments

mnicole 13 years ago |

I'm kind of at a loss for words.

It used to be unique and friendly, and now it is just another Medium, 37signals, altered Bootstrap-looking thing with no personality. Not including dates in the highlighted articles on the homepage (and only highlighting two to begin with?), along with putting it at the bottom of the "More From" is a huge miss (as the date of these types of articles is important to the context and to give me an idea of how often they are written).

Having to click into, and then scroll, to see all of the topics instead of having them in a sidebar adds more clicks for the user to navigate. The mix between bolded blue links and thin black links.. the differences in formatting between every single title, date and author depending on which part of the site it is on.. The awkward "No" in "Issue No." and the misaligned/missing top padding on the button-looking elements.. The terrible overall typography.. Just noticed that when you're in an article and hover over a subheader, it shows a hidden element that pushes all of the content down.. The fact that the "Share This" crap is on there at all (or that it isn't just one line of gray icons) and that it is not spaced apart or visibly different from Kevin's byline (which deserves more)..

FireBeyond 13 years ago | |

"Not including dates in the highlighted articles on the homepage (and only highlighting two to begin with?)"

Which is basically intended only to increase page views. If you're searching for something about web design, and Google's results show the slug for an entry as "Sep 21, 2004", you're probably a lot less likely to read that than the other link that is "current". So, better to take out a date altogether. The only person who loses out is the viewer, who might rely on sometimes vastly outdated information (says me, who has spent the last couple of days looking at Crystal Reports forums and having to discard search results from the early 2000s and even 1990s).

mnicole 13 years ago | | |

Only highlighting the last two posts, without dates, is a disservice to readers - particularly new visitors - who want to get a better idea of what topics the site covers and how often it does so. Tack on the fact that ALA is one of the only sites I visit sporadically because I know it will be relevant and now I'm lost trying to figure out where I'm at and where I should go. A content site should highlight the content, not hide it. Do they publish a certain amount of articles per timeframe, or is it random? If it's random, now the design is playing favors to posts who aren't up as long as the others.

larrydavid 13 years ago | |

Medium, 37 Signals and ALA look nothing like Bootstrap at all, so I'm not sure why you made that comparison.

I am not a fan of this new redesign at all and feel like Medium and 37 signals do the simple/clean layout approach much better than A List Apart. But as with all three designs, the primary focus is on the content, which I guess is why some people seem to think they lack 'personality'.

mnicole 13 years ago | | |

Content = typography = the potential for a lot of personality if done appropriately.

camus 13 years ago | | |

content which is barely readable on my laptop , it's not content focus as i have to scroll to get past the illustration.

silverbax88 13 years ago | |

That site is a good example of how not to ever do web design. Really cluttered, bulky and sporadic.

mirkules 13 years ago | | |

What really struck me as visually jarring was the top bar and how it permanently overlaps the title, "A LIST APART". At first, I thought it was NoScript doing something funny, but it's the same in Safari. It just feels like a temporary menu bar that should disappear after a few seconds.

Silhouette 13 years ago | |

I've always found A List Apart something of a contradiction: a lot of their articles are better than average, but their design and usability have always been weak. Mostly, I drop in every few days to see if there's a new feature article, and don't even notice anything else on the site. So while I dislike just about everything "arty" about the new design, for many of the same reasons as you, I'm hoping the quality of the articles will stay up and I'll still get something interesting to read every couple of weeks.

jrode 13 years ago | |

Everything you just said, plus the non-scaled header and footer image/text gives it a non-responsive feel, the search bar intrudes on the top nav...sheesh. The design of the comments is cool.

bbx 13 years ago |

Oh, it's that Grey Period [1] all over again...

I loved the previous design [2]. It only used 2 fonts (and default ones, for that matter): Georgia and Arial. But it didn't feel 'cheap'. The font-size, letter-spacing, small-caps, weight and style variations provided a versatile set of text layout.

The spacing and colors were perfect too, and yielded a well-thought and pleasant visual hierarchy. It is one of the few websites I enjoyed reading directly from the website (instead of using Google Reader or Instapaper).

I'm sure many hours of work are behind that new design. And maybe it's the same for any redesign: I'll get used to it. But I'm not thrilled. We'll see.

[1]: http://jgthms.com/the-grey-period.html [2]: http://alistapart.com/d//368/jsm.png

Silhouette 13 years ago | |

The Grey Period seems to be like Flat Design and Big Fonts: there's an unwelcome general trend at the moment to dumb everything down to the point of being... well, dumb.

Subtle visual effects like gradients and shadows and the use of different colours don't just make a site or UI look pretty, they also give cues about how it works. At the moment, it seems like everything is just another flat, grey rectangle, and we've reached the point where sometimes you literally can't tell whether something on the screen is a block quote, a button, the title of a drop down menu, or possibly even more than one thing arranged in a toolbar...

These new trends can't die fast enough, IMHO. Too many projects are sacrificing both usability and aesthetics just to be fashionable.

camus 13 years ago | | |

designers and users need to speak up about it , that trend is silly , horrible and i'm sick of it. Does it work on tablet ? maybe but it doesnt work at all on desktop, and they did not vanish obviously. The heck you dont even need designers anymore , there is no design at all on these website. flat , no texture , no balance , nothing ...

arrrg 13 years ago | |

The font size used to be horrifically small. This is a big step up, for this change alone.

stan_rogers 13 years ago | | |

They fixed the too-small-font problem (finally!!) at the beginning of March last year, making it a very reasonable read, and without changing the overall design much.

sjwright 13 years ago | | |

I browse Hacker News at 200% zoom.

pgrote 13 years ago |

I am using Chrome on Windows 7. The menu bar on the top of the page cuts off the title and the bottom of the page slightly cuts off the * FOR PEOPLE WHO MAKE WEBSITES.

Is that the way it should look?

gyardley 13 years ago | |

It's intentional. I can't say I care for it - I've tried to scroll the missing part of the type onto the screen a couple times now.

You can fix this pretty easily if you use a browser extension like Stylebot to customize your page styling - it's great when something just annoys you aesthetically.

Here's my first pass at a correction that seems to work with the main pages, although I'm sure I'm missing something somewhere:

.home-page .killer-logo { top: 40px; overflow: visible; }

.killer-logo { top: 82px; overflow: visible; }

.home-page .wide-hero, .issue-page .wide-hero { padding-top: 136px; }

.wide-hero { padding-top: 98px; }

.global-footer { padding-bottom: 100px; }

.deadly-subtitle { bottom: 10px; height: 60px; }

.global-footer .inline-items { margin-bottom: 2px; }

.main-wrapper.stacker:first-of-type { margin-top: 198px; }

.single-column-display, .two-column-display, .multi-column-display { margin-top: 198px; }

jrode 13 years ago | | |

Adding this css changed my whole impression of the site. (I just inserted at the top w/ firebug, had to add !important to the .deadly-subtitle styles.)

pacomerh 13 years ago |

It's actually funny how the communities of developers get divided into groups. There's the know-everythings who are inclined to the technical side and have a smart answer for anything and everything, all decisions are based on manuals and numbers. Also, creative ones who have some sort of background in something else other than development, like music or illustration, etc. They usually make things touching a bit on the side of art, therefore experimenting a bit more. In some cases these dudes will actually be very well versed on the technical side, but not all of the time. So, the interesting thing here to see how people appreciate websites in different forms. You see these guys from 'A List Apart' sorta breaking schemes by doing a chopped title on the header, and people here deciding it's a bug on their browser :) . I've seen designs on the web that propose something different to the eye, where nerds will be ranting that the rules say it's wrong because you're violating the rules of this or that. Maybe I just wish I could experiment more, because I like looking at developers and designers proposing new things.

camus 13 years ago | |

except these guys claim they have something to teach you, i'm sorry but based on their sloppy design i conclude they do not.

pacomerh 13 years ago | | |

Can you recommend a good person/group/source for great design?. I think these guys Zeldman, Santamaria, etc, rather than innovators are good decision makers in terms of where to place things on a page. Because it seems to be working for everybody, and they proved it.

saltcod 13 years ago |

Wow. Despite the largely hideous comments here, it's beautiful. Great work.

orangethirty 13 years ago | |

Agreed. It is very readable, and eye pleasing.

kmfrk 13 years ago |

I don't think I've ever said this about a website, but the font size is way too large. There is also too much text on each line.

I feel like this was approached from a layout perspective rather than a typographic one.

For a site like ALA, I find the design to be really, really disappointing.

ahi 13 years ago | |

I wonder if the font size issue is because of display resolution. It looks perfect on my screen, but I usually have to zoom into pages to make them readable.

kmfrk 13 years ago | | |

I imagine it'd look fine on a MacBook Air. It doesn't on a 23" monitor, that's for sure.

I want to believe that the people behind it didn't bother to test it on different viewports, but I have created websites that look fine on everything from iPhones to large monitors without writing viewport-specific CSS.

It just seems incredibly sloppy, which is hard to believe for a company like ALA.

osks 13 years ago | | |

It probably does. On my 13" MacBook I need to zoom out to read A List Apart now. If I zoom out two steps in Firefox it takes the font size from 18px to ~14px (guess), which is much more comfortable to read.

It's sad that we haven't gotten further with typography on the web. The solution to "some people have to zoom in" should't be "other people have to zoom out".

keithpeter 13 years ago | | |

1080p monitor, full screen, 96 pixels to the nominal 'inch'. Looks nice actually. Its that header...

rodriguezcommaj 13 years ago |

It may just need some getting used to, but at first glance - I am not digging it all that much. I understand the thinking behind content first and thinking outside of the "Desktop as "real design" mentality, but I feel like the desktop (and even iPad landscape) version now suffers due to that mentality. The shift of the menu and navigation to the bottom is also very annoying for finding other pages quickly - and I know I am going to miss the quick glance of multiple stories every other week on the home page. The old design was easy to digest and get a summary of what was in that issue and whether or not I wanted to read it. This version, not so much.

I like the idea of moving in the "boldy art-directed magazine" direction, so maybe it will just take some time to get there and feel comfortable in that role. But for now I feel like it is forcing a responsive, mobile design at larger sizes and the layout suffering for it.

All that said, I adore the content (usually) and look forward to what they have prepared for the future. Like any drastic change, I am sure I will grow accustomed to it and will stop whining about it in a month or two.

rodriguezcommaj 13 years ago | |

I will add that I am loving seeing Kevin Cornell's illustrations at that size, though.

tokenadult 13 years ago |

The key paragraph in the article kindly submitted here appears to be below the fold:

"Pirates ship

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

As announced on my HN user profile, I am updating my personal website (which is seventeen years old, and which I last extensively updated in 1998). I'll party like it's 1999 by reading the new-and-improved A List Apart both on my desktop and with my Nexus 4 phone, and see what I think over a few weeks about how well the new site design responds to the huge range of devices used to acccess websites these days. This should be interesting food for thought.

charlieok 13 years ago |

So they've got “articles”, “blog posts”, “link posts”, “columns” and a number of “topics”. They're “publishing more frequently—a lot more frequently”.

Fantastic! So why do I just see one “RSS” link in the footer pointing to http://alistapart.com/site/rss ?

Are they turning on the fire hose without giving users any way to control what content/topic/author they subscribe to? And these guys are the shining exemplars of site design and “content strategy”?

My feed reader just blew up with a slew of “new” entries from alistapart.com, apparently a result of their new platform not properly handling the identifiers from posts used on their previous platform.

I understand Zeldman & Co to be champions of web standards. RSS (and its sibling rival, Atom) is still the best decentralized way to subscribe to updates on the web that I know of. So why is their site apparently treating it with such little regard?

Am I going to have to unsubscribe because they overwhelm me with stuff in their feed with no good option for fine-tuning?

recuter 13 years ago | |

I've had that happen countless times with different feeds, it is very rarely on purpose because as you say it leaves a bad taste.

For now, I'd chuck it up to a one-off snafu.

charlieok 13 years ago | | |

Yeah, that's merely an annoying thing that seems to crop up occasionally with RSS.

My main frustration here is not finding a menu of feed options; instead, I just see one big site-wide feed.

I've had this frustration with many sites, and it's kept me from following things I otherwise would have followed. I'm just much more mystified when the entire aim of the site is “web design, by web designers, for web designers”.

waxjar 13 years ago |

I was just thinking recently how amazingly not-outdated A List Apart's design looked, despite it being really quite old.

bbx 13 years ago | |

Felt exactly the same. I visited the website yesterday and thought "This design has been around for years and it still feels fresh".

There was nothing to change about it, but I guess this redesign didn't happen just for the sake of following the "grey" trend.

rwl4 13 years ago |

Weird to see this in their HTML code:

  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
		 chromium.org/developers/how-tos/chrome-frame-getting-started -->

I'd probably remove that after I've made my decision about whether or not to officially support IE 6.

run4yourlives 13 years ago |

Sometimes, the biggest issue with designers is that they design. They're a lot like programmers that way; further optimization is often only a step backward.

The old, JSM design was an absolutely stunning example of what web design can be. It looked like a magazine. It read really well. Hell even the ads fit like an accessory.

It's really hard to improve something so good. And this new design pretty much proves that.

Unfortunately, their audience are people more concerned with trends and 'what's new' than those of us that prefer neat and predictable content delivery. I'm sure in their echo chamber, they will overwhelmingly agree that the design is "fresh" and "great".

Let that be a lesson to developers everywhere about spending too much time with our own kind and not enough with the general population.

justjimmy 13 years ago |

When I design website related work in Photoshop, I have a section of layers that contains shapes with dimensions of the common resolutions ie: MBA 1366 x 768, 1024 x 768, etc.

I'm a bit surprised that the huge image isn't responsive so that it changes in size - to always show or hint that there's something below the fold (ie: https://yourkarma.com/ )

This new design have nothing to indicate there are stuff below the fold when viewed on a MBA 1366x768 or any with 768 height - it looks like a giant magazine cover. Unless that was the intended effect.

(But then I'm using Chrome, so might look different in other browsers)

dlf 13 years ago |

Is the title hiding on purpose? Also, should the menu bar be fixed?

A List Apart is certainly ahead of me when it comes to what's up with web design, so I'm honestly not sure if it's supposed to be like that or if there's something amiss.

rodriguezcommaj 13 years ago |

I wish they would have styled actual text for the header and footer logo/tagline. As it is, they are just huge images that do not scale AT ALL. I guess you could call this art-directed, but it seems sloppy to me.

dreamdu5t 13 years ago |

Looks like a wannabe version of the 37signals blog redesign. White background, overly large text, no aside, author at the bottom, etc.

ahi 13 years ago |

It has to be a little terrifying to redesign one of the most popular sites on web design.

DanBC 13 years ago |

I like it. I dislike the weird stupid half cut header. (Because it looks like there's a sticky header, but it's not a sticky header, and it feels like the font is broken. That's a dissonance that I don't get from print-typography experimentation.) But I like the "big" (readable) fonts. I'd probably make the body font a tad bigger, but I guess that's just me. I wouldn't have a bright white background either, but again that's mostly me. It's nice when a website needs a minimum of tinkering to make it readable.

There are (as they say) a few oddities. The link on "Why are links blue" is not blue, it's black.

hpaavola 13 years ago |

And that's how you design blogs and similar sites. Put the content in the spotlight and shove everything else away.

fhars 13 years ago | |

But they are not putting content in the spotlight, they are putting unreadable letter bottoms and empty space in the spotlight, the content is shoved away to somewhere far down. Maybe the design works on a tablet in portrait mode, but not on a laptop screen. To see more the four lines of content there, you have to scroll.

jammmuel 13 years ago | | |

As has been mentioned, the main header is a typographic curiosity, not a bug. Good design is often controversial. Programmer mentally is at odds with this notion. I like what they've done. It has brought greater focus to the article content. I'm all for bigger type, and the need to scroll is a non-issue in my mind.

hpaavola 13 years ago | | |

I think that the site is suffering from heavy load and some image(s) was/were not transferred to your browser; there should be an image, not empty space.

No, it's not perfect, but better than most sites. No distracting sidebars, no ugly social media buttons, nothing extra (except the letter bottoms).

aristus 13 years ago |

Hmm. The article I wrote for them does not appear when searching for my name. Finding it again through Google, it looks like they lost the images that went with it. :(

http://alistapart.com/article/accent-folding-for-auto-comple...

verisimilitude 13 years ago |

Let it be known that some have cut off the top of their text before ALA 5.0 (myself included: http://tumbledry.org ). I like this design because it's opinionated, and I think we should wait to completely judge until they are done and have polished it.

camus 13 years ago | |

Your title is still readable , theirs is not.

apathetic 13 years ago |

What's with the header[1] and the footer? It doesn't feel right.

1: http://i.imgur.com/kTbkdXa.png

briancray 13 years ago |

Looks like they need a better web server to go with that redesign

night_fury 13 years ago |

is it down for anyone else? connection keeps timing out =\

camus 13 years ago |

welcome to the "appification" design era , where every web site is dull, flat , look like each other and look like crap on laptops and desktops.

"Generic", 0 personality design may work on tablet but that's it. And what is with these huge text fonts ? it's just not readable , reading is not about how big letters are but how the eye is able to identify blocks of text. I just cant read the text , it's just too difficult and exhausting.

nerdfiles 13 years ago |

Ruined one of my favorite webzines.