8 ms·

A List Apart 5.0

120 points by pgmcgee 14y ago

rodriguezcommaj 14y 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 14y ago
  I will add that I am loving seeing Kevin Cornell's illustrations at that size, though.
pgrote 14y 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?
- rodriguezcommaj 14y ago
  Pretty sure it is intended. I refreshed a few times thinking that some stylesheets were missing or not loading properly. Definitely a bold direction...
- stan_rogers 14y ago
  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".
- darkarmani 14y ago
  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.
- bullseye 14y ago
  http://imageshack.us/a/img228/8256/alat.png 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.
  - colmvp 14y ago
    I don't think it looks sloppy. It's intentionally styled like a magazine. Magazines deliberately break typographic conventions.
    - bullseye 14y ago
      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.
    - keithpeter 14y ago
      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.
    - frogpelt 14y ago
      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.
      - cypher543 14y ago
        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.
    - jere 14y ago
      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-gaga-vogue-cover.o.jpg/a_4x-horizontal.jpg 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.
- mikegioia 14y ago
  It is so distracting that I can't even be on this site anymore.
- ThomPete 14y ago
  it's intentional and is a normal design aesthetic/style especially in typographically designers mind.
- gyardley 14y 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 14y 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.)
    - leddt 14y ago
      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).
- FreeFull 14y ago
  Same happens in Firefox 18 on Linux
night_fury 14y ago
is it down for anyone else? connection keeps timing out =\
kmfrk 14y 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 14y 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 14y 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.
    - bryne 14y ago
      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.
      - Silhouette 14y ago
        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.
    - DanBC 14y ago
      > 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"?
ahi 14y ago
It has to be a little terrifying to redesign one of the most popular sites on web design.
hpaavola 14y ago
And that's how you design blogs and similar sites. Put the content in the spotlight and shove everything else away.
- fhars 14y 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.
  - hpaavola 14y 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).
    - fhars 14y ago
      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.
  - jammmuel 14y 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.
    - camus 14y ago
dreamdu5t 14y ago
Looks like a wannabe version of the 37signals blog redesign. White background, overly large text, no aside, author at the bottom, etc.
waxjar 14y ago
I was just thinking recently how amazingly not-outdated A List Apart's design looked, despite it being really quite old.
- bbx 14y 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.
bbx 14y 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 http://jgthms.com/the-grey-period.html [2]: http://alistapart.com/d//368/jsm.png http://alistapart.com/d//368/jsm.png
- arrrg 14y ago
  The font size used to be horrifically small. This is a big step up, for this change alone.
  - sjwright 14y ago
    I browse Hacker News at 200% zoom.
  - stan_rogers 14y 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.
- Silhouette 14y 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.
briancray 14y ago
Looks like they need a better web server to go with that redesign
saltcod 14y ago
Wow. Despite the largely hideous comments here, it's beautiful. Great work.
- orangethirty 14y ago
  Agreed. It is very readable, and eye pleasing.
rodriguezcommaj 14y 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.
mnicole 14y 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).. .
- silverbax88 14y ago
  That site is a good example of how not to ever do web design. Really cluttered, bulky and sporadic.
  - mirkules 14y 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.
- jrode 14y 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.
- Silhouette 14y ago
justjimmy 14y 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/ 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)
DanBC 14y 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.
camus 14y 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.
run4yourlives 14y 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.
charlieok 14y 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 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 14y 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 14y 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”.
tokenadult 14y 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.
rwl4 14y ago
Weird to see this in their HTML code:  I'd probably remove that after I've made my decision about whether or not to officially support IE 6.
pacomerh 14y 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 14y 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 14y 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.
    - camus 14y ago
      dont care about these guys , they did not invent webdesign and i dont claim i can teach people stuff while producing design that sucks.
      - pacomerh 14y ago
deleted 14y ago
[deleted]
dlf 14y 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.
verisimilitude 14y ago
Let it be known that some have cut off the top of their text before ALA 5.0 (myself included: http://tumbledry.org 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 14y ago
  Your title is still readable , theirs is not.
aristus 14y 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-complete http://alistapart.com/article/accent-folding-for-auto-comple...
nerdfiles 14y ago
Ruined one of my favorite webzines.
apathetic 14y ago
What's with the header[1] and the footer? It doesn't feel right. 1: http://i.imgur.com/kTbkdXa.png http://i.imgur.com/kTbkdXa.png

120 points by pgmcgee 14y 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 14y ago
I will add that I am loving seeing Kevin Cornell's illustrations at that size, though.

pgrote 14y 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?

rodriguezcommaj 14y ago
Pretty sure it is intended. I refreshed a few times thinking that some stylesheets were missing or not loading properly. Definitely a bold direction...
stan_rogers 14y ago
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".
darkarmani 14y ago
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.
bullseye 14y ago
http://imageshack.us/a/img228/8256/alat.png 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.
- colmvp 14y ago
  I don't think it looks sloppy. It's intentionally styled like a magazine. Magazines deliberately break typographic conventions.
  - bullseye 14y ago
    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.
  - keithpeter 14y ago
    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.
  - frogpelt 14y ago
    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.
    - cypher543 14y ago
      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.
  - jere 14y ago
    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-gaga-vogue-cover.o.jpg/a_4x-horizontal.jpg 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.
mikegioia 14y ago
It is so distracting that I can't even be on this site anymore.
ThomPete 14y ago
it's intentional and is a normal design aesthetic/style especially in typographically designers mind.
gyardley 14y 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 14y 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.)
  - leddt 14y ago
    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).
FreeFull 14y ago
Same happens in Firefox 18 on Linux

night_fury 14y ago

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

kmfrk 14y 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 14y 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 14y 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.
  - bryne 14y ago
    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.
    - Silhouette 14y ago
      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.
  - DanBC 14y ago
    > 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"?

ahi 14y ago

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

hpaavola 14y ago

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

fhars 14y 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.
- hpaavola 14y 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).
  - fhars 14y ago
    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.
- jammmuel 14y 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.
  - camus 14y ago

dreamdu5t 14y ago

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

waxjar 14y ago

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

bbx 14y 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.

bbx 14y 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 http://jgthms.com/the-grey-period.html [2]: http://alistapart.com/d//368/jsm.png http://alistapart.com/d//368/jsm.png

arrrg 14y ago
The font size used to be horrifically small. This is a big step up, for this change alone.
- sjwright 14y ago
  I browse Hacker News at 200% zoom.
- stan_rogers 14y 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.
Silhouette 14y 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.

briancray 14y ago

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

saltcod 14y ago

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

orangethirty 14y ago
Agreed. It is very readable, and eye pleasing.

rodriguezcommaj 14y 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.

mnicole 14y 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).. .

silverbax88 14y ago
That site is a good example of how not to ever do web design. Really cluttered, bulky and sporadic.
- mirkules 14y 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.
jrode 14y 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.
Silhouette 14y ago

justjimmy 14y 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/ 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)

DanBC 14y 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.

camus 14y 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.

run4yourlives 14y 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.

charlieok 14y 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 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 14y 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 14y 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”.

tokenadult 14y 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.

rwl4 14y ago

Weird to see this in their HTML code:  I'd probably remove that after I've made my decision about whether or not to officially support IE 6.

pacomerh 14y 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 14y 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 14y 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.
  - camus 14y ago
    dont care about these guys , they did not invent webdesign and i dont claim i can teach people stuff while producing design that sucks.
    - pacomerh 14y ago

deleted 14y ago

[deleted]

dlf 14y 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.

verisimilitude 14y ago

Let it be known that some have cut off the top of their text before ALA 5.0 (myself included: http://tumbledry.org 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 14y ago
Your title is still readable , theirs is not.

aristus 14y 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-complete http://alistapart.com/article/accent-folding-for-auto-comple...

nerdfiles 14y ago

Ruined one of my favorite webzines.

apathetic 14y ago

What's with the header[1] and the footer? It doesn't feel right. 1: http://i.imgur.com/kTbkdXa.png http://i.imgur.com/kTbkdXa.png