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’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.
オススメのデジカメ