Yes, the clipped logotype at the top of the page is intentional. The amount of clipping varies depending on viewport size and where you are on the site. We’ve gotten numerous bug reports and quizzical comments. Some people like it. Some people really don’t like it.
One reader really, really didn’t like it. We admire his ingenuity even if we don’t share his distress over logo truncation.
Logo amputation is not new, or particularly original, either, as a design affectation. The Brooklyn Academy of Music website clips its logo and headlines. Closer to home, at A Book Apart, the covers are printed with the titles clipped on the spines. Even zeldman.com trafficked in this sort of thing, once upon a time.
In the beginning
We started the project with the idea that we were building on the current design, while aiming for a bigger, more readable, content-first approach. As the design evolved we began to think more of the publication as a magazine, given its timely nature, rather than a news media or blog website. This led us directly to the oversized, bold masthead that we adopted. Franklin Gothic ended up being our choice for the typeface—at first glance, it appears to be a very modern and formal sans-serif, but when we inflated it to fill the page it revealed a number of eccentricities in the letter-forms which work well with the hand-made sensibility of Kevin Cornell’s excellent illustrations.
For responsive breakpoints, we began with the obvious: resizing the logo to fit the viewport. In practice, this seemed to take away everything that we liked about the oversized logotype—it became small and insubstantial. Clipping the logo at full size instead created interesting graphic shapes that we could position within the viewport.
Whoa. @alistapart‘s brand new alistapart.com is bold, like manifesto bold. Looking forward to taking a closer look after work.
— Matt Popke (@Polackio) January 25, 2013
A List Apart was created to challenge and inform designers, so a manifesto sounds about right. The logo adopts the design goal of putting content first by moving aside to make room. It’s a rare element that pushes the boundaries in an otherwise very structured design system. It complements the brand by embracing a willingness to try something different, even if it seems wrong to some people.
It seems possible that we are sometimes too influenced by the best practices sides of our work in UX design and coding. Design can be provocative, or playful, and not only about putting Everything in its Right Place. It’s fun to work with a logo and treat it not as a precious jewel, coddled in a pillowy 2-3 ems of white space. It also presents us with an opportunity—what exactly is up there, that we don’t yet see?
I really like the clipped logo, I’m amazed it annoys people so much.
I really – really – really love your new design ! “Out of the box” thinking may not be so easy to like… But are all tastes good ? Thanks all for your amazing work !
Think the dislike for the logo stems from the obstruction & clipping jolting expectation. Think some people may react to it like a picture of a disfigured face, In Emotional Design (http://amzn.com/0465051367) Norman calls this out a classic way to make people uncomfortable. Seems you may trigger a similar instinctive reaction.
bq. The logo adopts the design goal of putting content first by moving aside to make room.
But, conversely, by loudly breaking with what we expect to see, your treatment attracts a huge amount of attention to the logo rather than the content 😉
I really like the new design, it’s sharp. I think the fact the text is clipped only slightly, makes it seem more unintentional, unlike, say the spines of A Book Apart titles, which are almost 50% clipped (on the spine). But the text is legible, ties with the design and gets a reaction- nicely done.
Personally, I love getting a reaction to a design. Nothing worse than indifference.
I like that this brings forward the old debate of “design vs art”.
The truncated logo falls on the “artist” side of the spectrum, provoking, questioning, etc. But, in the strict “don’t make me think” side, it can be considered “wrong”.
Now, given the audience of this website, I think it’s ok, we are all aware of the intention so carry on!
Ha ha I love that someone created a userscript. I certainly don’t mind the clipping. It’s different and to be honest it looks really cool.
Myself, I don’t mind the clipped logo. However, when you have something in your design that could be interpreted as a bug (not “I don’t like it” but rather “I think this is wrong“), I would argue that it might have gone a little too far.
The only thing worse than indifference is misinterpretation, IMO.
When I first saw the new design my immediate first thought was “omg it’s broken”! But it took me no more than 3 seconds to understand it was intentional. People may like it or not, but I’m truly amazed on how many of them are still thinking it’s a bug.
Think this part of the article above sums up my thoughts
The masthead is an edgy and whimsical element that adds some personality to what is a very disciplined and minimal layout. Really like it.
What about add a text when visitor hovering the clipped title? `Yes this is intended` to avoid people thinking this site is broken. Though it is a bit annoying for a while.
I think the main difference between this and the Brooklyn Academy of Music and A Book Apart examples is that there could be more to see. When the page loads, it feels as though we should be able to scroll up. Of course, on a book spine we do not expect any more content to magically exist beyond the edge. The BAM logo is cropped on both the left and right sides – it doesn’t feel like there is more to see.
This is the sentiment that has made the most sense to me as I’ve been trying to understand the objections to the logo.
A book is a finite canvas; a browser viewport is not. Maybe 5 or even 3 years ago that feeling wasn’t quite as pervasive, but with the advent of responsive designs and the (perhaps belated) acceptance that a single browser window can not contain a web site, we all now think about our medium in ways that eluded us before.
I like it.. of course, it’s clear to me what is missing and my mind can reliably fill in the rest of the picture. How about new visitors, especially those deep linking to content? The clipped logo might encourage them to dig some more to complete the picture (gotta love that) but the first impression is probably that something’s not right.
What I like is that it focuses attention on the content, front and center – at least for the non-logo-confused/questioning user. I’m trying something sorta similar for a mobile theme – displaying a logo at the top left when the page loads and then animating it away after a few seconds so the title is front and center.
Aside from the logo, love the super clean look.
To me, it seems perfectly normal to trim the title. A List Apart has been around for a good long while. It’s got recognition that major commercial brands long for. Nobody objects to the Marlboro logo being trimmed when that happens.
Dare I mention that they trimmed the footer too?
It’s the same as google groups. Scroll down and the site will scroll you back up a line or two. It feels very intrusive, as if the site tries to hide the footer (which, on closer inspection isn’t there after all). The ALA header is the same idea: it looks as if you’re trying to hide something from plain view – it just looks a little suspicious. What is it you don’t want me to see?
@Jim Voorhies
Marlboro, what you;re talking about, is a printed logo. On the website they did no such thing, as far as I can see without logging in (honestly, Marlboro…)
Trimming a logo as part of the visual that represents the company, is perfectly fine. But putting it on a scrollable document *and* putting it at screen edge makes it look like a mistake, or an attempt to deliberately hide something.
Makes me think of the Viking Line logo, which is just the letters “NG LI” – the idea is that cruise ships are so big that it’s the only part of the logo you see while boarding.
I find it hilarious that so many people assumed that a website designed and built by some of the most illustrious pros in the business somehow “missed” the fact that the logo – y’know, that big f*cking graphic at the top of the page – was clipped. As if you just coded this up over the weekend and said, “f*ck browser testing, honey badger don’t care.”
Hmm. No Textile?
Two thoughts:
1) When on an interior page, say a blog post like this one, using a larger screen device, the entire width of the logo is displayed. However, the top of the logo is chopped off by the navbar. And in fact when the page first loads, that navbar flashes into place, giving a very brief glance of the full logo. This (to me) feels as if the logo is being covered up by the navbar, and to some could feel more like a layout error than a designed choice.
2) The main concern I would have with only seeing a portion of the logo, particularly on smaller screens, is that it only works if everybody already knows what the full-size logo looks like and what it actually says. Yes, for experienced web professionals, we all know and love A List Apart. But what about those new to the field? There will always be somebody new, and if they come upon a post shared by somebody else on Twitter while using their phone, will they fully grasp the title of the publication? For most people, the logo may be mere decoration, but there are certainly some audience segments where the communication of the brand identity through the logo is probably important, and I’m not sure this design allows for that.
The top half of the letters are what’s being chopped off rather than the bottoms. In general, the top halfs of letters are more important for legibility than the bottom halfs. So this might go over better if it was the bottom half chopped off.
This is your site to do as you will. The volume of comments probably says as much about how much the community loves A List Apart as it does about the design itself. Most of us have learned some of our most important web design lessons on this site.
One last thought. I’ve long thought that the difference between art and graphic design is how explicitly a message is communicated. This logo treatment probably falls more on the art side of that continuum. It’s not terrible to remind people that the web is about more than just standards, HTML elements, coding and optimization. Design matters, too. And great design, particularly as with time it is removed from the original context in which it was intended to be viewed, can be art. The logo treatment is a reminder of that. Art is often not appreciated in its time. Dealing with the criticism and confusion of some may be worth it in the long view.
I loved the clipped type. In fact, you guys inspired my site’s redesign. Look: http://bandd.co/
I don’t think the concern with the clipped logo is necessarily UX-influenced. I think it’s cool and arty, yes, but the clipped bar of the “T” renders it illegible, especially on pages where the menu covers it (Another minor point of contention for me. The slight translucency reminds me of the sickly default menu bar of OS X. Not one of Apple’s shining moments).
Maybe if this logo were more established, or if your name were more established (say, McDonald’s established), then you could get away with it. And I say “get away with it” meaning people would be able to read it. Magazines (well, some magazines) can obscure their masthead because there is an established rhythm. I see WIRED magazine and am familiar with the layout, the style, ergo I know what the title says, even when Chewbacca’s massive mane is blotting it out. Your new logo doesn’t have that luxury, so the effect is not as strong.
I applaud you for your design efforts, and I’m not going to say that your design decisions are wrong, just maybe not as strong as they could be. And you may be able to live with that. As long as you continue the great content, I can as well. Cheers!
I’m not often given to commenting on design, it’s such a subjective and personal issue. Honestly I’m not a fan of this layout, but I can fully appreciate the goals you have set out to achieve and in many respects I think you have achieved them. What I can’t escape though, is the feeling that when I step back and look at the bigger picture here and just absorb it, it looks like it’s broken. I can;t get away from that. It’s like a portrait which looks perfect up close, the detail in the eyes etc, but when you stand back and view the whole piece just simply doesn’t look like the person it is supposed to be. It’s like you have focused on various details, which are justified by your reasoning, but the whole thing put together is less than the sum of it’s parts.
All of this feedback though, stems form viewing it on a large screen monitor with swathes of white space. I don’t find the content comes to the fore at all in that scenario, I am simply, irrecoverably drawn to the massive cropped logo at the top and what feels like a misalignment of the columns between the main content and the below the line comments section.
There is a massive caveat to all this though and that is that I think the layout works really well on mobiles. But on large screens for me, personally, it losses clarity and confuses me.
Yeah I know right? for someone who doesn’t often comment on designs I sure have a lot to say 🙂 I’ll shu’p now.
Ok, I’m stumped.. can’t find an ALA ‘my account’ or ‘settings’ page or similar, and Google can’t either. Is that a feature or ?
@Sam — we’re working on it 🙂
Imagine pitching this to stakeholders:
So, for the new design instead of showing it like you might expect, we will be “clipping the logo at full size to create interesting graphic shapes that we could position within the viewport.” resulting in users perhaps being able to recognize one letter of it (http://goo.gl/CE6oN). We find this approach “provocative, or playful, and not only about putting Everything in its Right Place” What do you guys think?
– *cricket soudns*
Additionally, if your goal was to put content first you failed miserably… logo still occupies the highest place in the hierarchy; now even more since you gave it that very unique treatment that screams “look at me look at me”. After all, we are having a discussion about it rather than the content.
@tim Thanks!
@Jim Vooorhies said:
Thanks, Jim. We looked at it that way, too—although the example that sprang to mind for us wasn’t Marlboro, it was People Magazine. Celebrity heads routinely interrupt the People logo, but no People reader is confused, or wonders which magazine she’s looking at. Likewise, A List Apart is a familiar presence on the web design scene—only Webmonkey is older, and it went through a ten-year hiatus. Our brand isn’t our name set in this font or that font—it’s more a matrix of qualities our readers associate with us.
Yes, here we are having a discussion about the topic of this blog post.
Even though I loved the clipped header, I don’t why there isn’t much content filling the space, since it was the purpose. But I really loved it.
Oh, okey, it was only in the comments page, sorry. It is gorgeous in the home page.
“It also presents us with an opportunity—what exactly is up there, that we don’t yet see?”
Why not take advantage of the opportunity? I find the current logo treatment irksome, not because the cut off style bothers me, but because it invites me to explore but doesn’t reward my curiosity. You guys are clearly very clever. Why not push the design and so something interesting when the user attempts to scroll up?
You shouldn’t stoop to defend yourself against these trolls, Zeldman. You and ALA are better than that. Let ’em whine.
i liked the clipped logotype on my computer but it doesn’t work too well on my phone. some further viewport tweaking needed, perchance?
Clipped logotypes only work with recognizable brands. ALA did it right.
I’m sorry that I don’t belong to those who think the logo clipping is clever. It’s not that I don’t “get it”, it just makes me go “meh”. Mark Senf has hit the nail on the head.
Maybe a bit too much whalesong and jossticks in the design echo-chamber?
I don’t like this clipped logo because I spent few minutes of my life trying to find out if it’s a bug or not. Some logos can be trimmed, like your example of BAM, where you can read each letter, but in yours not on all screens. It’s too long, too many letters to be trimmed. IMO
From my perspective the clipped logo part of cognitive imagination, the mind will fill in the gaps and you will read A LIST APART. That is why the clipped logo is so powerful, when redirected from a source to ALA; no matter what device I am using the logo is recognizable and taps into your emotion a.k.a. trusted resource.
I love the redesign. The only thing that bugs me about the clipping is the transparent nav on top of it. For instance, if it were more like the home / this, I wouldn’t be nearly as drawn to it. But that’d be safe, and maybe it wouldn’t be as visually interesting, or maybe being drawn to the nav / logo is worth the double-take on whether it’s a bug or not. Not gonna forget this redesign anytime soon. Well done, and well said guys. Loved the line about being playful and provocative.
Things don’t always have to be usable, readable, accessible, or make sense. Web design is still artistic, is it not?
Make the logo bigger!!
[removed][removed]
Who’s going to pitch a design like you described to a client? Other than nobody?
It worries me that so many people that are frequenting a Web Design blog could not discern that this was intentional.
I think it speaks volumes about the lack of design education a lot of so called ‘web designers’ have these days.
I enjoy the new look, I think it suits A List Apart better than the old design did.
I must say I was thrown a little by the logo, I don’t think it is bad by any means, but I do find it a bit distracting for a website so content focused.
I think it’d be better faded out with less padding at the bottom:
http://i.imgur.com/fAJRSsM.png
while i definitely do hate the clipped logo, i love to see the though process behind it.
i absolutely love the clipped logo, likely my favorite part along with the super blue links!
The clipped logo is a bad design decision. I like the overall site redesign but clipping the top half of text is visually irritating as the eye uses the top half of the letters to identify the word. You could clip the bottom half and it wouldn’t be nearly as arresting. Why you would clip it at all is beyond me.
FTFY
https://chrome.google.com/webstore/detail/decrappify-a-list-apart/eamoaibokpmekdkdidambphmhhldghhb
I’ve lurked on this site a long time. Great content and this new design is awesome, but that clipped text will piss me off every time I visit.
Seems to me that the choice of clipping the logo was simply done because it’s “high impact” (using words from the original post introducing the redesign).
I also find it curious that the authors here say: “We started the project with the idea that we were building on the current design, while aiming for a bigger, more readable, content-first approach.”… and then introduce a design choice that is completely opposite to more readable.
For me it just has the feeling of a silly gimmick put in “just because we can”. I realised after a few seconds that it was intentional but that isn’t likely to be a universal result. To a first time visitor it could appear like a bug and to an even more casual reader who arrives here from a link on another site they might not even be able to work out what it says without checking their address bar. It introduces work/effort unnecessarily and it doesn’t even look particularly good. The best design doesn’t draw attention to itself. Aggressively clipped titles do.
It looks so much better when you change the margins/padding on the “killer-logo > a” and “main-wrapper” to make it display properly.
I’m primarily a print designer, although I do some web. So maybe I come at it from a slightly different perspective, but the whole clipped logo or clipped type is something I did in design school 10 years ago. So to see this level of distress is very surprising to me. When someone uses this design trope on a letterhead (bleeding off the top) no one thinks it was a mistake and that the printer trimmed the paper incorrectly.
I have no problem with clipped logos, used them myself many a times but there’s something I really don’t like about this. I think it’s the combo clipped logo + being covered by the menubar.
Anyway, who cares.
It’s not so much that I don’t like clipped logos/titles; I think they can look modern and sleek, but in this case when that white top bar appears on top, it looks broken. I keep trying to scroll up because I know the logo is under the bar, and, of course, “everyone knows” that the “proper” state when you’ve scrolled all the way to the top is for those two elements to clear each other; we see it in websites all the time. So I keep running into that “broken” user experience; past experience says it should scroll more, the browser refuses to scroll more… it’s incredibly irksome. It’s giving off the same vibe as a melody that ends on the wrong note. I’m distracted from the rest of the design by the unfinished nature of it. I’m left waiting for it to finally scroll, to resolve, for there to be an end. It’s stressful.
Don’t get me wrong; I like full bleed, and I like things that are clipped off on the edges, particularly when it’s with blocky letters like this in print… but this just feels really wrong. It’s ok when the bar goes away though.
The content of this site occupies roughly one third of my 2560px-wide desktop, with vast empty space on either side. There’s actually more whitespace than content. So it’s too narrow on the horizontal axis, and too tall on the vertical axis (apparently by choice). How can you preach responsive design and yet produce something so perfectly maladapted to my device?
On my iPhone, the content is readable at least but the logo is nearly illegible; you can kind of tell there’s an “LIS” but that’s it.
This is why I’ll always read blogs via RSS. As a backend programmer, visual designers continue to amaze me with what they can get away with and call it “professional.” By what metric is this an improvement over the way the site looks with CSS disabled?
Oh, I get it; 54 comments. Point taken. Congratulations; consider me “engaged.”
I love that this article needed to be written.
that said, since we’re talking… the only thing that confused me is that i don’t understand why the home page has such minimal content and no nav, but then when you find the red circle and click on it, it looks like it takes you to exactly the same page, but with a nav… why not just have a nav site-wide?
Even though I loved the clipped header, I don’t why there isn’t much content filling the space, since it was the purpose. But I really loved it.
オススメのデジカメ