A List Apart 5.0 | Hacker News Reader

A List Apart 5.0

alistapart.com

120 pointspgmcgee85 comments

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

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

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.

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.

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.

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

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.

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

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

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

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

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

I browse Hacker News at 200% zoom.

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.

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.

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

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?

Pretty sure it is intended. I refreshed a few times thinking that some stylesheets were missing or not loading properly. Definitely a bold direction...

Yes, it is. I don't know whether or not I will get used to it, but it certainly qualifies as the advertised "heavily art-directed".

http://imageshack.us/a/img228/8256/alat.png

I see the same thing. I have a hard time believing it is intentional, but even so, I think it looks sloppy.

I don't think it looks sloppy. It's intentionally styled like a magazine. Magazines deliberately break typographic conventions.

Fair enough. I guess I'm just not a fan of websites that want to look like printed material, which is by most accounts an inferior medium.

I see your point, but my Web browser is also an interface, and the way the top cuts the header off makes it look as if there is a rendering problem.

It feels to me a bit like a glossy magazine printed on good quality stock having a cover with a crease in it by design. Most would just assume they got a creased copy until the saw the others.

I've never looked at a quality magazine cover and thought 'did they mean to for it look like that?'

I thought that with this page.

So, that's one glaring difference.

That's because a magazine is printed and its appearance doesn't vary between people looking at it, so we automatically assume that it's supposed to look the way it does. A website can look differently depending on which browser is rendering it.

Usually a magazine overlays its title with a very dramatic photo of a person, which makes the person stand out. And usually only a few letters are obscured. Our brains are quite good at filling in the details.

Example: http://pixel.nymag.com/imgs/fashion/daily/2012/08/09/09-lady...

I'm a lot less impressed by a fricking navigational toolbar that obscures the top of every letter of the logo. What remains are the less recognizable bottom halves of the letters. The T and I (not shown, but also F) look identical for instance. I'll believe that this is intentional, but I think it looks horrible.

I get the same on Firefox (aka Iceweasel) 10.0.12 on Debian Wheezy. I thought there was a rendering issue until I read the parent comment.

It is so distracting that I can't even be on this site anymore.

it's intentional and is a normal design aesthetic/style especially in typographically designers mind.

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; }

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

I agree, without this css I almost feel insulted by the header. With the css it's fine.

What's sad is that ALA now feels... ordinary. It used to be very aesthetically pleasing, now it's just boring (my opinion).

It's broken on firefox too.

edit: ahh for me the stylish add-on helps. Add padding-top: 150px to .main-wrapper and padding-top: 75px to .killer-logo. Apologies to the designers, but it was really, really bothering me.

Same happens in Firefox 18 on Linux

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.

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

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.

dont care about these guys , they did not invent webdesign and i dont claim i can teach people stuff while producing design that sucks.

That's just plain trolling

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

Agreed. It is very readable, and eye pleasing.

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.

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.

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.

> but I have created websites that look fine on everything

Just checking, but really "look fine on everything", or "need to be zoomed in by many people"?

Nah, it looks fine. You can zoom in, if you want, of course, but it's entirely readable on a retina screen.

Of course, those have been very sparse in layout such as blogs, so it's not a solution that fits all, but in a case like this, it would work just as well.

A site like Hacker News obviously needs optimization for different viewports.

> You can zoom in, if you want, of course,

It's pleasing to be in a situation where I can say (about ALA5.0) "you can zoom out, if you want, of course" :p

The home page looks terrible on my 13" Macbook Pro, the illustration takes up almost the entire screen. Everything feels oversized and unbalanced.

It's much more likely that you're creating websites that fail accessibility guidelines and that many people are forced to zoom in to read.

100%/16px is standard for article body copy.

The intro in the linked article is set with a 24px font size and 960px width. For me, on a good desktop screen, that is uncomfortably large on both counts for a full paragraph of body text.

The main part of the article, set at 18px with about 700px width, is sensible IMHO.

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

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

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.

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

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.

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?

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.

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

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

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.

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.

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.

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)

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.

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.

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

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

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.

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

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.

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

Oh, I see. Now that the server has recovered a bit, the image is loaded, too, and it shoves the content even further down. All I can see now is the lower half of the site title and the upper half of the article headline.

There is a certain artistic consistency in that, but from a usability standpoint I would call this only a partial improvement over the situation with the missing image.

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.

good design serves a purpose , the half letters serves no purpose. If i did this on my site everybody would say how stupid it is , but because it's from "design rockstars" it is controvserial ? i call it bullshit .

I call design is simply not as black and white as you'd like it to be and cynicism is lazy. To deny that this aesthetic is controversial is to have not read any of this thread. The very fact that you are suggesting a lack of purpose in the design of the masthead and using a strawman to back it up suggests a modicum of controversy.

Whatever man , i call these so called "designers" bullshit, because they think they can teach people anything about design when their own design makes no sense at all, and frankly sucks. If i had a blog like this and if potential clients would see that , they sure arent going to hire me, as all the blog design feels ridicule and sloppy.

Their solution is perfectly content, you just don't like the aesthetic. Nothing wrong with that at all and neither is expressing that opinion. Calling the people behind the restyle of ALA 'so called "designers"' is disrespectful though and no amount of fallacy is going to change that.

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

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.

Your title is still readable , theirs is not.

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

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

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

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

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.

Ruined one of my favorite webzines.

Reply on news.ycombinator.com