A design that departs from our past and a platform on which to build the future. Welcome to the relaunch of A List Apart, for people who make websites. Content first: We’ve added new kinds of content (with more to come), and we’re publishing more frequently—a lot more frequently. Fear not, we will continue to produce the insightful and important articles you expect from A List Apart, and the biweekly issues they ride in on. Major articles and (mostly) biweekly issues are forever.
But in between those issues, you’ll now find helpful link posts, provocative and insightful blog posts on focused topics, and opinion columns by some of the smartest people we know in this industry. There’s even a column by our friends at the W3C, who need your help to make sure that web standards remain practical, usable, advanced, and forward-thinking. (See the Masthead for a glimpse at our new contributors.)
In the months to come, as our between-issues content becomes as solid and valuable to you as our articles are, we plan to introduce additional and equally useful new kinds of content designed to provide you with more of the information you need most, sometimes even before you know you need it.
The design#section2
Putting the content first, and conceiving of its presentation by default as a fluid series of multi-device encounters, designer Mike Pick and developer Tim Murtaugh have delivered a high-impact, responsive reading experience with the virtues (but not the constraints) of great print design.
As always, the new design flips its predecessor on its head and deepens how we understand ALA as a product and brand. Whereas my original (1998) design sported an “underground club flyer” look appropriate for the wild early days of professional web design, and the most recent (2005) design by Jason Santa Maria cultivated a bookish look and feel indicative of A List Apart’s stature as a time-tested resource, the new design conceives of ALA as a boldly art-directed magazine.

To make their task more daunting, I challenged Mike and Tim to think of design non-canonically. What do I mean by that? Sometimes with responsive design, one particular layout (for instance, the desktop browser layout) feels like the “real” design, and smaller-screen experiences become merely usable afterthoughts. I didn’t want that here. Instead I wanted you, our readers, to feel that you’re experiencing the real thing on whichever device or circumstance you happen to encounter it. Of course that should be a goal of any mature approach to responsive web design. In any case, in my opinion, Mike and Tim succeeded brilliantly.
Tying the new design to its predecessor is the flabbergastingly magnificent illustration work of Kevin Cornell, author of Bearskinrug and numerous books and works. For extra juiciness, Kevin’s illustrations are now viewable in higher resolution (including Retina where appropriate)—as is the other artwork that adorns ALA.

Fun features: where ALA 4.0 employed a system of dual link colors that changed with each issue we published, ALA 5.0 takes things old-school with blue links. Equally old-timey, we set the body type in good old classic Georgia. (Our Georgia Pro and ITC Franklin are both courtesy of the wizards at Webtype. If it’s wrong to be in love with two web fonts, I don’t want to be right.)
Mike and Tim will address interesting aesthetic decisions and technical challenges of the redesign in subsequent articles and blog posts.
The strategy#section3
We began planning A List Apart 5.0 in November, 2011. Yes, that was fourteen months ago. Slow bakin’ makes good eatin’.
The strategic team that conceived ALA’s new features included producer Tim Murtaugh, former creative director Jason Santa Maria, former editor-in-chief Krista Stevens, former contributing editor Mandy Brown, and yours truly. The work continued under the direction of new editor-in-chief Sara Wachter-Boettcher, designer Mike Pick, developer Tim Murtaugh, and, of course, yours truly.

In between the two sets of team leaders, UX champ Marcy Mayer conceived and executed detailed wireframes that made the strategists’ visions concrete (or revealed gaps and flaws in those visions), and planned out multiple phases of possible feature rollout. As it always does, the IA has continued to evolve throughout the project as we’ve vetted it against real design, content, and workflow.
A tricked-out build of Expression Engine 2.0 by Tim Murtaugh (who also, with Mike Pick, slaved over the CSS and HTML) powers the new site’s visible and secret features. More will be revealed.
Pirates ship#section4
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.
If you are new to A List Apart, welcome! You may want to check out “The ALA Primer: A Guide for New Readers” by Erin Lynch, the “ALA Summer Reading Issue” of 2012 (our favorite articles from 355 issues of A List Apart), and “Findings from the Survey, 2011,” our latest assessment of the profession via data submitted by our readers.
For more about our design and content history, see “Ten Years,” my 2008 retelling of the magazine’s first decade.
First-time visitor or longtime reader, you’re why we’re here—and we want to know what you think. Tell us how you like the new ALA, and what you hope to see in (and in between) future issues.
Both Twitter and Facebook sign-in are broken – remove the prepended “v5.” in the URL for a quickfix.
There’s some font clipping on .killer-logo and .deadly-subtitle – I’ll keep this post (if it’s editable) and my Twitter (@ChristianBundy) updated with fixes for any broken features that I find. Cheers!
The reading experience was lovely, good to see you near-instantly fix the comment bug! 🙂
BIG TYPE. Love it. Those Murtaugh & Pick guys deserve raises.
The “v5” redirect bug has been knocked down!
@Christian – I’m pretty sure font clipping on the logos are a feature rather than a bug. I like it.
I like the design update. A few accessibility considerations:
– Change a:hover styles to a:hover, a:focus to meet WCAG requirements and ensure keyboard users can clearly identify focused links.
– I like the blue links, but am rather confused that many of the article title links are non-underlined black and of the same style as surrounding text. This makes determining actionable items difficult, particularly on mobile.
– It would be sweet to see some ARIA landmarks – even if just nav role=”navigation” and div class=”main-wrapper” role=”main”.
@jared — thanks for the suggestions. I’ve updated the CSS with your focus suggestion, and it’s on our list to address ARIA roles.
Fantastic redesign – all focused around the content with many delightful touches.
This is amazing. Great new look. I first loaded this on my phone (a poor little Android device that should be put out of its misery), and the experience was nice. You definitely met the goal of creating a pragmatically responsive site. (And Tim, the type—oh, the type—is stunning).
Beautiful! Focus on content and typography. Love it!
Have to agree the redesign is looking fantastic, great to read. I like some of the class names too 😛 Looking forward to seeing the new content.
This is beautiful. Easy to read and looks gorgeous, content-first always wins.
Great redesign and very good to read!! More stuff like this please.
Thanks, folks!
I finally decided to make an account. The Password and Confirm Password boxes have something funky going on when focused that required me to hold down my left-mouse button while typing to stay in the field. Also, for some reason the Email Address field is of type “text” instead of “email”?
Is the clipping intentional on the killer-logo and deadly-subtitle? I kind of like it on the latter, but I keep wanting to scroll up more to see the rest of the logo at the top, especially when viewing an article and the global-nav makes only the lower half visible. Also related to both is that on my tablet I see the bottom half of “List Apar” and “*For people who make web” which feels unnecessarily cramped.
I tried justifying the article text and it actually looks pretty good, helping to give definition to the right side of the page. The rows are long enough that there didn’t seem to be any jarring word spacing.
I do really like how clean the site is now. You guys did a terrific job!
Gorgeous redesign today, guys. Looking forward to the future feature unveilings, and it’s clear this will be a resource for how to do things right for a long time.
Glad I no longer need to give a disclaimer when sending fellow web designers to the site for reference. Great work.
I feel like I did when I first discovered ALA back in 2001. Good feeling! I look forward to this year’s content.
Is the logo slipping beyond the top of the page intentional? Because it hurts my eyes to read. (Chrome 24)
Overall, I really like it. Love the clean layout and white space. The clipped header and footer are killing me, though. Maybe I’m OCD or maybe it’s my incessant need for open space, but I’m not saying it is necessarily a bad thing. After all, that’s what I love about ALA, the fact that it has always stirred the pot and challenged the norm, even if it made a few people itch. So congratulations. Job well done.
Yawn! Just do it without indulging in this self-opinionated navel gazing. If you’ve got it right, people will use your site. If you’ve got it wrong they won’t. The fact I think it’s pretty horrible (oversized text, clipped title) is neither here nor there.
David, that’s an asshat-ish remark to make. A List Apart is a site that discusses how people are building sites. It’s 100% appropriate for a site that’s mission is to educate and inform us about web design, to discuss their re-design.
Font is to big on my 27′ screen.
Font is to small on my 7′ Nexus 7.
Sign-in is an usability nightmare.
Header is clipped.
40+ http requests.
Grade B on Yslow.
Bah accessibility.
Bah code based on bad frameworks.
Dude, what did you do to ALA ? That’s a stupid hyped design, not a real web design.
Shame.
@David Leader: Many, perhaps most, bloggers, agencies, freelancers, companies tell the story of their redesign. In fact, after working at a couple of online magazines, I’ve seen that tales of the processes and decision-making involved in redesigns (their own or an author’s) are often among the most popular articles or posts published. I found the post here interesting; it’s a natural accompaniment to a major change in the presentation of information for people who make websites. And for those who aren’t interested, it’s easy to skip it and be drawn to a large amount of high-quality content on other subjects.
Hmm, I don’t know why I’m listed as Carolyn Wood 1. I’m quite sure I am one of the lesser of the Carolyn Woods of this world. I just hope I can live up to my new moniker. 🙂
(Ed. note: Carolyn, we’ve fixed your user name. You are now the *only* Carolyn Wood that matters to us. 🙂
Lovely on an iPhone.
One tiny nit. The Search icon (small magnifying glass) is not retina, and stands out as such.
I’m really not a fan of the (intentional, I assume) text clipping in the header. And the header navigation doesn’t seem to appear on the front page.
Other than that, it’s not bad. Less distinctive than the previous incarnation, possibly, but not bad.
@scott — lol, we were wondering how long it would take for someone to call us out on that.
@alfred — don’t give up on us! we know there are a lot of little things that need doing that will add up to better performance. The yslow score improves if you tell it about our private CDN 😉
@jared — I’ve added “navigation” and “main” roles, and we’ll put some more thought into it as well.
Complexity organised into simplicity, nice work.
Still getting use to the logo/footer type being cut and generally happy to know my mouse scroll action was not broken : )
Love the redesign and the focus on the content with the big font.
Wouldn’t it be an idea to have the nav fixed top? I had to scroll all the way up now to access the navigation again.
I like it. The one thing that bothers me is the ajax loading of comments. I think they should either be shown (so it can smoothly scroll), or, make the delay longer so that when my mouse scroll ‘bottoms out’, then i get a brief pause before I scroll again… kind of as a mental reset that ‘yes this is infinite scroll’. As of right now it just jerks and looks like a glitch.
Great work on the responsiveness though, I dig it.
One more thing I don’t care for is the cut off header. Not sure if that’s trying to be trendy but it drives my subconscious desire for things to be neatly aligned mad.
And… totally broken in Chrome. Top menu cuts off nearly the entire title and the text is sliced off at the bottom of the page as well… Prepare that “Things we learned in 2013 article!”
The two things that seem really important seem off — especially with respect to responsiveness of the UI here. The “logo” which now is a graphic for plain text doesn’t resize for mobile well. The same for the Footer text *For People Who Make Websites … I’ll always love this site for the content, but there’s seems to be broken stuff in the layout — even if it’s intentional the title & footer text seem broken.
Just chiming in with another vote to say that I absolutely hate the clipped header/footer. Not sure if intentionally trolling people or not but it’s irritating as hell so mission accomplished if so.
Other than that, I like the increased legibility.
Thanks for the comments, complimentary and otherwise, folks.
@scott: Most of the graphic imagery on the site is SVG, but you caught us out on the one that we realized we missed on just as we pulled the oversized contact switch down. 🙂
I find it kinda funny that I read this post in Google Reader — I haven’t seen ALA’s design for years, and I had to take an explicit action to see the design that is the implicit conclusion of the article.
It’s pretty, though! The only downside IMO is that — particularly in the long comments section — there’s very little to latch onto to afford scroll navigation. It’s pretty much fling-and-pray.
I think that you might need to tame your RSS feed somewhat: I’ve had 25 ALA items coming through today, including this one 3 times… All that being said, I do like the redesign: the comment numbering is a nice touch.
I was going to mention the clipped logo, but from reading a few of the comments I assume it’s an intentional design decision. Not a fan. It looks and feels wrong. Also, why is it an image and it doesn’t scale to fit the size of the browser. I assume again that’s a “feature,” but surely with just text, there’s no reason for “A List Apart” to be an image. Admittedly, I have a text logo.jpg on the web, but my site wasn’t redesigned in 2013. Wait… the clipping is at the top and bottom. Come on guys, rethink that.
Looks great! Love the focus on content and big font. And I agree with barryvan, the comment numbering is a nice touch. I’m not a fan of the clipping in the header and footer, but maybe it’ll grow on me. It’d be nice to have the navigation stick when scrolling, though. Overall, I’m impressed.
Seems to me that even with the somewhat “radical” departure to more of a zeldman.com design thing with the layout/type, etc., the same illustration is being used. Was all the old layout/font use considered the bath water and the illustration somehow the baby. I’m not knocking that “New Yorker/cartoon” stuff but a big step design refresh might have moved on in that department too. I like the grayscale/black font footer.
@whudat The logo and tagline are text, but the spacing between the letters has been adjusted quite a bit, so we went with SVG in order to make it sharp for hi-DPI devices and maintain the design we desired.
I generally like the clean look of the redesign, but the clipped logo literally gives me a stomach ache. The tagline at the bottom being clipped is totally fine.
I figured out why the logo is giving me an anxiety attack. Because basic legibility rules of fonts teaches that clipping the bottoms of letters still leave the words readable while clipping the tops makes them hard to read. Do a test. Print out a sentence and cover up the top half. I’ve read this in books, but can only find one example on the web: http://www.tomontheweb2.ca/CMX/4D5E2/.
It also makes me wonder what this would look like to my dyslexic friends and relatives.
This is very high quality. Congratulations! Really appreciate the emphasis on clear legible text.
I will miss your last iteration but new things are fun. I do like the content first style, headers and logos do become invisible after repeated wear. Though my inner-autistic does have me pulling/swiping downward to see if this time I will see the top of the clipped title. Maybe this time.
The new look is very clean and it’s great for reading, but it’s a big leap from the previous design.
There’s one thing that I would like to point out for mobile devices. The header and the footer image, is not readable and the size is not scaled. You might want to do something about it.
Wonderful! How about a “Back to top” link? Again, beautiful work! You should all be proud!
The logo being cut off at the top feels broken. Otherwise, LOVE the redesign. Congratulations!
As a rss reader I would like you to get rid of feedburner tags. When I open article from greader I get this:
http://alistapart.com/article/vexing-viewports?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+alistapart/main+A+List+Apart&utm_content=Google+Reader#When:06:00:09Z
and I want:
http://alistapart.com/article/vexing-viewports
Also could you add a rss feed only for articles?
Looks good, feels good, and is really easy to read. But as comment #6 already observed there are/were some very basic accessibility issues. Shouldn’t take long to fix them.
And the images in the article don’t have any text in the alt=”” attribute. Forgetful? In a hurry? You guys are the beacon and the site should honor basic a11y.
Overall I’m liking the new design, especially the ‘punchy’ and clear typographical feel to it – well done! Minor quibbles are the clipping of the logo (as mentioned by others); my immediate reaction was there was something wrong and it took a few seconds to realise this was done on purpose. Also, have you thought about having the navigation at the top of the page remain visible as you scroll down? This would save having to scroll back up again when viewing a long list e.g. the blog section. Lastly, on the blog section page, the last item on the list of blog articles appears to be clipped by the footer when viewing in chrome.
Loving it ! Btw. would nice a simple shortcut to scroll down to the last comment.
On the contrary. We quite consciously omit alt text where it is needless, because the image is followed by a title equivalent to the alt text.
I’ve never posted here before, but I must say that the clipped logo looks really odd.
Lovely clean and legible, though I do have a soft spot for the previous design and it’s bookish feel 🙂 I suppose change can seem a little jarring sometimes, I’m beginning to realise why clients sometimes freak out after a redesign an suddenly become nostalgic for the old one!
Minor things I’ve spotted… dev version of Modernizer? unminified js. Though I understand these are all probably in the works. It’s actually nice to see a big website ship without finessing certain details, after all the beauty of the web is that it easy to ship revisions quickly and unobtrusively… something I really need to get a handle on!
Congrats on the re-launch. After having taken a look at the underlying html – taking, for instance, this page of the site as an example – I think a lot of ALA readers would benefit from a line-by-line critique explaining why things are being done the way they are being done.
Why the html elements wrapped in conditional comments? Why is Modernizr being used? What is Modernizr, anyway?
As a web site, ALA,
As the web has evolved, with each new design iteration, ALA has always served as an exemplar of Web Standards as applied within the strictures of what today’s hardware and software demand and allow.
Therefore, I think a point-by-point rundown of why the choices you’ve made were made, would be right on point and very helpful to your readers.
Overall great redesign! But: 1) This comment entry field should be between the article and the existing comments, not at the bottom of all comments (took me quite some scrolling to find it). 2) I like the large font-size but find the line height to be a tad too high, the paragraphs don’t stick together that much.
Like a lot of others have said: not a fan of the clipped logo, particularly on smaller screens. That would be my only gripe though.
Excellent work on the new design. The Franklin ITC Pro + Georgia Pro combo is such a great fit for ALA. I think the new typefaces, along with larger text and increased spacing, have really improved readability.
+1 on nixing the clipped logo. Will a uniquely styled header impress some users? Perhaps. Will it confuse, frustrate, concern others? Definitely. The cons simply outweigh the pros.
+1 on not hiding the homepage nav. (Same rationale.)
The only other tweak I’d like to see is a slightly wider live area for the body (.article-layout .main-content). Removing margin-right does the trick.
Great redesign, I really like it. I think fixed navigation would be useful, quite a long way to the top.
I second the request for an article-only RSS feed. While I appreciate that you want to share links with your readers, I would prefer receive that type of information via Twitter. I subscribed to A List Apart for the exclusive content only. Looking forward to resubscribing once that’s fixed!
I am curious how you folks are handling the SEO aspect of moving all the old content to ALA 5.0. Take an article with significant PageRank like “Responsive Web Design.” It’s built up quite a bit of Google PageRank here: http://alistapart.com/article/responsive-web-design/. It’s new URL is here: http://alistapart.com/article/responsive-web-design. Notice there is no trailing slash on the new URL. It is my understanding that in the eyes of a search engine that is a new page with none of the built up PageRank carried over.
Furthermore, it appears both URLs with and without the trailing slash are pulling in the same content. One can even append any text after the trailing slash, like ‘foo’ and still pull up the same content. It is my understanding this is bad SEO since this is duplicate content.
I suppose the duplicate content could be fixed with setting the canonical URL in the head of the HTML document or in the HTTP header, but how is the search engine ranking being carried over to the new URL? Is this a concern for ALA?
Appreciate your move to a responsive design. However, that your header title is cropped at the top is somehow immediately unnerving. Makes me feel I’ve scrolled the page when I know I haven’t. And what is with the huge type size? Want to like the upgrade, but don’t. Will check back in a month or so.
Subtly played, guys! To support what other readers have said I would request: change the clipped logo, use fixed top nav when scrolling, add a back to top button.
Hmmm.
1) I dislike the clipped logo.
2) I especially dislike it when the logo is more clipped by the navigation bar—which isn’t even position:fixed;
3) Big text! And narrow columns! So I have to scroll more! Yay!
Other than that, it’s alright.
DK
Header and footer look strangely cropped, is this intentional?
Jim Renaud wrote
“David, that’s an asshat-ish remark to make. A List Apart is a site that discusses how people are building sites.”
Jim, I don’t belong to the religion you mention, what ever it is, but let me quote from the article:
“As always, the new design flips its predecessor on its head and deepens how we understand ALA as a product and brand.”
Try getting up in front of other people anywhere other than in an advertising agency and saying that with a straight face. Go on, I dare you! Do you really regard that sort of bovine excrement as intelligent discussion of design?
Let me try to be constructive and offer a psychological explanation for the effect this redesign has on me. The combination of large type and clipped title mean that nowhere – not even at the start – do I feel I have a reference point. It’s as if I start in the middle and as I scroll I’m falling down some kind of bottomless well. Kind of like a Hitchcock movie, but with no saving Grace (Kelly).
I come to this site because it sometimes has interesting articles. I’m grateful to Mr Zeldman for providing it. I imagine he wouldn’t continue to do so if it wasn’t profitable. However I guess that in future I’ll just have to read the articles in Safari’s ‘Reader’ mode if I want to avoid nausea.
I’ve been visiting this site for many years, and do you know why? For the articles. And this new design has made it difficult to get to them.
I use a feed reader so I can keep up with all of my sites at once. The infrequency of updates from ALA made it more exciting when one actually showed up. Well you have a blog now and for some reason you assumed that I cared about that and started shoving blog entries into your article feed. I can’t tell what’s an actual well written article, and what’s a blog entry with nothing but a link to a twitter post with a link to a comment in another blog article. (Yo dawg…) I’ve always enjoyed your site for its simplicity and clarity. The feed is no longer in line with that. Either give me separate feeds for what I want or indicate when something is an article or a blog entry. Thanks.
But I guess people will have to use the feed to read older blog articles since the list gets cut off and hidden behind the huge footer. (http://alistapart.com/blog)
Now, the title and footer clipping is a horrible choice. I don’t know what you were going for, but if you wanted me to feel like I’ve landed in the middle of a web page and to have a constant need to scroll up to see what I’m missing, then congratulations. When you see this kind of thing in real print, you feel like it’s a defect, like the printing presses chopped the paper off at the wrong spot and no one noticed it. What’s worse, when you go to any of the articles, the menu almost completely hides the title. If I were new to the site, I would think, “these guys don’t know how to use CSS, or they think that everyone still uses IE.”
One last thing, I wasn’t able to login via Facebook to post this. Instead I got a JSON message with this error inside: “Invalid redirect_uri: Given URL is not allowed by the Application configuration.” So I logged in with twitter instead, and guess where I landed. No, not to a comment box. Not even back to the article I was reading. It took me to the home page. It would have been more frustrating if I was on a deep linked page and had to find my way back.
I still love your content though. 🙂
Holy Big Black Font! A redesign! I had no idea this was in the works, so boy was I surprised to see it when I tootled over to the site on this lazy Sunday. Generally speaking, two thumbs up! You have gotten a lot of flak for the clipped header and footer, but … meh. I can live with that. I love the larger type and simpler navigation, and nifty search box. And the piece that starts to explain the rationale behind the redesign (realign?) — “the new design flips its predecessor on its head and deepens how we understand ALA as a product and brand” blather notwithstanding — is perfectly valid on a site like this. I look forward to more stories about the challenges encountered and decisions made along the way to v5.0. Congratulations!
p.s. Also appreciate the elimination of the sophomoric “Was it good for you, too?” that used to precede the Comments section. I mean, honestly …
Just my opinion… but I think this redesign is a step backward. I use news feeds to get updated on links to numerous sites – wired, smashing, sitepoint, etc, and this one. When I brought up an ALA article in the past, there were two things that set it apart from other sites: the pleasant header with the logo on the left, and the always-clever image – and not too big. What you just did was get rid of the first identity. Now it looks a lot closer to any other article site. (And yeah, to me it looked like the header and footer was broken CSS due to it being slightly off the edge, and even worse when a menu popped over it.) I’m actually surprised that you even bothered to do a redesign. One of the laws of usability is to not change everything around – the Jakob Neilsen law or something, where people spend the majority of their time on other sites, so they don’t get as tired of it as you do, etc. So according to Neilsen, you are web/usability designers who are not following the basic guidance of experts in your industry.
I landed here on iPad2 via Google Reader, and at first I thought something was wrong. (Clipped header, etc.) But I started reading, and after a few minutes I got it. Content forward. Distractions out of the way. No need for “Readability” because it is built in. (And now I’ve come back to comment on my Mac, where I prefer to type.) Nice job!
Peter Müller wrote:
“And the images in the article don’t have any text in the alt=”“ attribute. Forgetful? In a hurry?”
Jeffrey Zeldman wrote:
“On the contrary. We quite consciously omit alt text where it is needless, because the image is followed by a title equivalent to the alt text.”
In “Using the HTML title attribute – updated”
Steve Faulkner wrote:
“If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute.”
http://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/
Cool typo – congrat guys!
Great new design! It’s comfortable to read and it looks really neat on my mobile too. Just a few things:
1. I’m a bit confused by the content and navigation. Articles, blog posts, columns. Seems to be a lot, and everything looks the same!
2. Your logo looks like Fred Perry’s logo.
Nice work! Love the mobile reading experience. And I’m looking forward to the more frequent content!
One suggestion: After logging in (via twitter in my case) I got redirected to the start page. Would be nice to end up at the place I clicked the login button.
As much as I love that black/white, lots of contrast, beautiful Typo with big line height and your delightful graphics… a clean, modern, sizzling und sparkly style witch is really delightful, Jeffrey,.. exactly since when does “content first” means to have a typo, which is way less readable? Don’t get me wrong, I’m not trying to have the “I have something to say too”-thingy…
If I want to read and comprehend your content, my eyes are being forced to watch sort of a Tennis match. I have to roll my eyes from left to right constantly. So what happens is that I’m more busy with not loosing the word or line witch I was reading as reading a good article. If I dare to support my eyes panning my head from left to right (you get my Point if I say this is a “no-no”, right 😉 my changes to lose the focus increase drastically. Especially if you use a “designers line height” 🙂 Since Gutenberg Layout-Guys have put her focus to create well structured, easy readable Text. Try to use less than 9 words per line, serifs are better readable on a monitor, don’t use black for text… there a lots of stuff you can read about how people consume Text. Like scanning for potentially interesting Words, pre-scanning whole sentences while reading,.. well… I’m sort of missing this using Fonts when they are to(!) big.
Beg your pardon: To say “Putting the content first…” just to justify big, big Fonts as a designer sounds to me like you’r in a Pitch and try desperately (with no better Idea at all) to sell your visual design 🙁
Right now I’m sitting in front of an 27″ iMac. So… if I’m willing to read your text the way that it’s comfy for me, I have to shrink my Browser to a with of 600 (the next Breakpoint). This works pretty good. I will spare you the “but” 😉 Btw: Great UX on an iPad 😀
Amazing content first solution, readability now just for read later offline hehe
I just have some problem with open links in other tabs in iPad 3 running iOS 6.0.1 on safari.
Sorry, I have to join those who find the redesign somewhat jarring: I suspect we are all using desktop browsers and find the experience of having our screens into very large I-Phones less than spectacular. I have a 27 ” screen but am used to having my browser in only half of it. Even so the experience is underwhelming with the sidebar buried at the end of content.
Copy text is okay but I think the opening paragraph is WAY TOO BIG, comment text is too small.
A page like this with > 70 comments takes an awful lot of scrolling. The comments at least should be paginated and a login box à la Economist permanently available.
RSS is spewing out at least duplicates of items.
I think I probably understand the motivation and ideas behind the redesign and suspect that only a few tweaks are needed to make it work properly. Support for something funky liked the page-media extensions (http://people.opera.com/howcome/2011/reader/index.html) might be fun!
Anyway, keep up the good work!
Also, sidenote: it would be cool if I log in from twitter that it shows my icon and username 🙂
Awesome new design. Clear and simple, luv it !
congrats
Reading an ALA article has always been such a calm and soothing experience. Now my eyes burn from all of the glaring white. Why, Mr. Zeldman, why….
I really love the redesign, it’s a pleasure to read and explore the site with my browser set to full screen. I hope that you don’t succumb to niggling doubts that might arise from comments about the logo bleeding off the top of the screen. It’s a gutsy design decision, you decided to run with it, it looks great, stand by it.
Design by committee will never result in anything but a bland, watered down design. Accepting criticism and making user experience improvements suggested by the community, sure. But not design.
Amazing job! I love the Franklin Gothic type. It’s inviting and accessible. This site could easily go down an elitist path, but it’s far from it. I can’t wait to see the new content. Consider me inspired.
Minor side note: UNCLIP THE F-KING HEADER BECAUSE IT’S GIVING ME HIVES!
Keep up the good work.
Amazing job! I love the Franklin Gothic type. It’s inviting and accessible. This site could easily go down an elitist path, but it’s far from it. I can’t wait to see the new content. Consider me inspired.
Minor side note: UNCLIP THE F-KING HEADER BECAUSE IT’S GIVING ME HIVES!
Keep up the good work.
Nice redesign, like everything except for the clipped header and footer. Please if anything unclip the header and footer.
Looks nice, if a little similar to Zeldman’s own site.
Congratulations! Its a really nice redesign guys, cant wait to see the bonus bits rolled out too. Its actually really inspiring @zeldman and team.
LOVE the clipped mega-type, like the design of any new Porsche or BMW, its met with an initial split in favour, but over time, appreciation will grow, and its a digital landmark that will stand the test of time. Just like the old site did.
Well done!
Read this article on iPhone and forgot where I was reading.
Generally the redesign looks nice visually but like others I have certain specific issues that I feel are terrible.
The top logo being cut-off and overlaid by the menu looks terrible and honestly looks amateurish. It really looks like you have no idea how to format a web page which I know is not true. If the menu were to pop down when the cursor was at the top of the page then I would understand overlaying the content, but as it is it just gives me a headache. Being the first thing that people see when they go to your site can give them a bad first impression that is hard to fix. If this site looked like it does not when I first went to it, I’m not sure that I would have stayed.
The picture at the top, while it does scale, is way, way, way too large. No matter how big my browser window is, I cannot see any part of the article except for the title, which does look like a title to me until I scroll down a little. Why is it so large? When I go to a page I expect to see at least the lead-in paragraph for the article without having to scroll (on a large screen). And after I’ve been to the page once, why do I need to have that image shoved in my face? It’s a nice picture, but not that nice.
You use an enormous amount of room at the bottom of the page for the footer (which is just fine, it’s at the bottom after all) but then you push the bottom logo just off the page. Again, it looks like you made a mistake, rather than a design decision. With all of that space and all of the margins and padding around items in the footer you couldn’t put a small margin at the bottom?
Some positives: your footer is one of the easiest to read and understand that I have ever seen, bravo. I love the letter, word, line, and paragraph spacing. It is visually compelling and easy to read (my aging eyes really appreciate this part).
I’m not sure why you show the comment number for comments. Is this information really wanted?
BTW, I never noticed that there was an issue number on the old format but it was extremely visible on the new one. Not sure if this is positive, negative, or neutral.
I can sum up my biggest criticism with the redesign in one question: Since when does focusing on content and readability require sacrificing appeal and aesthetics? The footer is the most exciting part of the redesign.
Sorry guys, I think you went a good bit backward here. Outside of the interactive elements thanks to it being a website, what sets this design apart from a 1st generation Kindle? Oh wait, the 1st gen Kindle could do that too.
Before I say anything, let me mention that I wouldn’t be a professional web designer today if I hadn’t discovered ALA ten or so years ago. I love you guys!
But this redesign seems like poor work. I’m a huge fan of putting content first (the new Signal vs. Noise comes to mind as an example of how to do it right), but everything is still design and needs to be handled deliberately.
A few things.
Like many, I don’t like the clipped title and subtitle, but feel this is one of the works in progress rather than a design decision? Hope I’m right.
Too much scrolling is required when it comes to the comments, so it would be good to have them paginated, although I do like them numbered as I can pick up on where I left off, as I did this morning.
This is when I noticed a bug. Clicking the comments link from the homepage (http://alistapart.com/article/a-list-apart-relaunches-new-features-new-design#comments) will take me directly to the comments, but displays the comments twice, so when I come to the first #comment-form it then displays the comments and the form all over again.
This only happens when clicking the link with the #comments selector attached to the URL.
Not sure about this new design. Possibly taking a mobile first approach too literally, but maybe it will grow on me.
10/10 for trying something different though!
I tried to log in to comment with Facebook first and got a nasty error page. Tried Twitter and that work.
I was just wondering why the main ‘A LIST APART’ header image doesn’t resize on mobile devices?
I’m using Chrome on an NEXUS 4.
Beautiful and inspirational design. Type work is fantastic.
Very small thing – It’s ExpressionEngine ( made the same mistake myself even after a few years of use)
@Joseph Karr O’Connor
A title. Not a title element. As you could have seen for yourself by viewing Source.
@Dan Guy 1:
ALA has had a white background since 2005.
Site looks great on IE 10 for Windows 8. One possible improvement: The @-ms-viewport directive would allow the site to be properly responsive in the IE 10 snap view.
The new site looks great, love the design!
Today I printed out an article and I think this needs a little bit of work. Sharing links are not needed and some things in the footer etc…
Keep up the great work!
Your choice in fonts for the redesign really set this apart.
Thank you for years of reading and learning material!
Love the new design – really focused on the content – specially placing the “More from ALA” next to the comments instead of the content. Did notice, however, that when I signed in with Twitter, I was redirected back to the home page instead of the article.
@Kristof:
Thanks for the bug report. We know about this problem and are working on a fix! 🙂
Great, great design. I love how ballsy the “killer logo” is…but having a reallllly hard time with it.
I LOVE the clipped header, I was just testing out a similar solution for a WordPress theme I’m building – of course nobody will believe me now, I’ll just be ripping you off! Haha, great work! 🙂
love the new design! but posts in google reader are all messed up: everything you post, and I mean every-thing, is loaded not twice, but several times. even after it’s been marked as read, it loads all over again the next day… love to read your stuff, but not three times.
Love 99.9% of the redesign, but just can’t get on board with the header being clipped.
As others have said (and probably much more eloquently than me – particularly Tom Charde) there’s just something that feels wrong about it – your eye is drawn to it, and you’re compelled to look as it’s the most prominent element on the page, but you’re forced to stare through the semi-opaque nav bar if you want to read it.
And you can’t help but try and scroll up a bit (at least the first time you visit) as it feels like you’ve landed half way down a page, especially if you land straight on an article rather than the home page.
Sure, people will get used to it, and then learn to tune it out when they visit the site in future, but is that the way we should be interacting with design? Just sayin’.
Love 99.9% of the redesign, but just can’t get on board with the header being clipped.
As others have said (and probably much more eloquently than me – particularly Tom Charde) there’s just something that feels wrong about it – your eye is drawn to it, and you’re compelled to look as it’s the most prominent element on the page, but then you’re forced to stare through the semi-opaque nav bar if you want to read it.
And you can’t help but try and scroll up a bit (at least the first time you visit) as it feels like you’ve landed half way down a page, especially if you land straight on an article rather than the home page.
Sure, people will get used to it, and then learn to tune it out when they visit the site in future, but is that the way we should be interacting with design? Just sayin’.
Christine Zoltok said:
On our RSS page, you can now choose between a firehose feed (all ALA content) and a feed containing only articles and columns. Enjoy! 🙂
Richard Fink said:
I agree, and we plan to address select decisions in a series of brief blog posts, such as this one on alt text.
Um, guys, I don’t know if you noticed, but the header and footer are clipped.
Just kidding! I think it looks great, and I’m looking forward to reading more from you about the redesign process.
Really nice looking site. One of the few sites on the interweb where I don’t have to read the article(s) in Readability. My only request would be a ‘back to top’ link, although I find sites using it less and less. Not sure why. I’ve always found it to be a useful feature.
dude… your site looks terrible in IE6. Whatever happened to backwards compatibility Brö?
JK.
Nice work on the redesign. One thing I noticed is that the search bar on the iPhone 5 is really buggy. Other than that, looks great, keep up the good work!
Mr. Zeldman: “ALA has had a white background since 2005.”
Sure, but it used to have other, moderating elements, gray washes and whatever that cream-green color was. The net effect was MUCH easier on the eyes.
https://www.google.com/search?q=a+list+apart&tbm=isch
While I can see how this would be great on a smaller device, I find the wide column really hard to read on a large monitor.
I like the design for reading purposes… and to be honest, I come to this site primarily to read.
Makes Sense to me 🙂
I have been a longtime fan of this site – now I am very disappointed with the new look. I don’t like the clipping of the logo title at the top – the big font and large image size. The clipping makes me think my browser is non-compliant and I don’t like scrolling down before I can read anything on my 13″ screen. I miss the old layout – it served me well and was easy to read.
Perfect design. So refreshing. Almost gives back me the good feeling I have when I am using a pure text browser (“my favourite, w3m”:https://en.wikipedia.org/wiki/W3m).
One little bug though – to comment I picked up the “Sign in with ALA” options, but unfortunately I right-clicked on it to have it in another browser tab, and ended up in http://alistapart.com/login with a 404 message.
Perfect design. So refreshing. Almost gives back me the good feeling I have when I am using a pure text browser (“my favourite, w3m”:https://en.wikipedia.org/wiki/W3m).
One little bug though – to comment I picked up the “Sign in with ALA” options, but unfortunately I right-clicked on it to have it in another browser tab, and ended up in http://alistapart.com/login with a 404 message.
Just checked with the text browser “w3m”:https://en.wikipedia.org/wiki/W3m
– very good non-Javascript fallback, “load comments link”:http://alistapart.com/comments/a-list-apart-relaunches-new-features-new-design
felt so natural! I wonder that I can only see only “100 comments”:http://alistapart.com/comments/a-list-apart-relaunches-new-features-new-design
and not all of them here.
I wonder only if Textile syntax for links works – seems that
the quotes might have got replaced to be “nicer” and therefore
not working.
I really like how the header shifts horizontally to show the clearest subset of “A LIST APART” to show for any given browser width —
. LIST .
LIST A
LIST AP
LIST APA
A LIST AP
A LIST APA
A LIST APAR
A LIST APART
Great attention to detail!
Great design, well done! The large type if great, but it seems to me that you have only really paid lip service to it. Large type should not be used as a stylistic widget. It should be used because you’ve decided your audience would be happier with it – so why an equal amount of small type? Must be 10 different size fonts on this page alone.
I’m a bit late to the party but wanted to say that I love this redesign. I loved the old ALA design too but this one is sublime. It’s exactly the sort of innovative design I would expect from ALA. Absolute genius.
Well, almost everything looks perfect, except having your site look like it’s cut off above or down I think is really a bad idea… Takes some time from me to get that it’s intentional, not a silly bug! (at bottom of page it’s near to OK, but at top…. looks terrible from my point of view)
Ah and last: to make comment on this article, I was need to scroll down all 118 comments 🙂 Not sure however, maybe you intentionally want me to read all the comments above? 😀
I have to agree with the many people who dislike the clipped logo at the top (and bottom). It makes me twitch, and wonder if my scrolling is broken.
The rest of the design is… okay.
One of the difficulties of designing for the current webspace is that the difference between the smallest expected screen (mobile) and largest expected screen (24+ inch widescreen) is much greater than it used to be. And trying to design for both… tends to favour one or the other. This design is obviously favouring the mobile user, but leaves the widescreen user with lots of scrolling to do.
Love the new design guys. RSS feed gives me a 404 though…
Pretty cool design, but every time I get here, I roll my scroll wheel upward in vain =[
Thanks for the feedback, @Paul Christian and @Brad Garrett. We are still finding and fixing bugs, and will investigate these. Brad, out of interest, what browser (and version) and OS (and version) are you using? Thanks again.
Thanks for the feedback, @Paul Christian and @Brad Garrett. We are still finding and fixing bugs, and will investigate these. Brad, out of interest, what browser (and version) and OS (and version) are you using? Thanks again.
Thanks for the feedback, @Paul Christian and @Brad Garrett. We are still finding and fixing bugs, and will investigate these. Brad, out of interest, what browser (and version) and OS (and version) are you using? Thanks again.
Unfortunately I’m going to have to add another “me too” post. I’ve been reading ALA since 2000 or 2001, the 2005 design for me was extremely polished and was a shining example of design and content really combining well.
This one doesn’t have that feeling for me. The cut-off title mixed with the lack of content when I open the site make it feel broken. I would think a content-oriented design would have more of the content available when I opened the page and would cater to the reader, instead of straining our eyes. As another poster mentioned, I feel like the there is more glare even though I know the background color for the prior design was white as well. The starting font is overly large for reading comfortably, but the switch means I can’t just zoom out (I keep zeldman.com zoomed at 50-65%).
It feels less mobile-first and more desktops-are-second-class-citizens. I feel like this redesign actually dissuades me from reading the content.
Jefffrey, my comment was aimed at the header and the fact it makes me think I’m part-way down the page =/ Actual scrolling works fine!
(FWIW I’m using Firefox 18 for Mountain Lion)
I like the clipped logo especially on tablets and mobile. Great idea!
Thanks for adding the abridged RSS feed! Any chance you could go a step further and add a just-the-articles feed for curmudgeonly traditionalists who hate change? I’m sure your columnists and bloggers are going to be great, but I miss the sparser articles-only feed.
To echo a few of the previous comments, I’m a little disappointed that your new layout is so narrow even for those of us reading from desktops. One of the things that I’ve always appreciated about A List Apart is that you produce in-depth articles that can require some serious concentration to follow and engage with. This is a rare thing on the web, and I really enjoy taking a couple of hours now and then to peruse the recent articles and take the time to work through the examples and make sure that I understand the ideas behind the code. The larger font size and narrow text container is great for casual reading on a mobile device, but it can be much harder to do the sort of back-and-forth reading you need to do when wrapping your mind around a new concept — going back and reading a previous paragraph, viewing all of an example at once, writing absurdly long comments in tiny textarea fields. (Then again, that last item might be a ramble-prevention feature.)
The site looks great on my phone, though, and if I’m in a tiny minority of people who dislike narrow text windows, one of the lovely things about being a web developer is that it’s easy to override the width of .main-content when I’m viewing from my desktop, so I’ll stop grumbling. Great job with the redesign — I look forward to seeing what you’ll come up with next!
I like parts of the new design, and parts I do not. The clipped header and footer are a little distracting, but unique. The simple colour scheme is nice, but something seams off with the blue links… Maybe they just need to grow on me.
Now with a small bug report. I noticed that when the comments for this article loaded in, they loaded twice. I have not been able to reproduce. Maybe someone else has noticed this as well.
I like it! Nice and clean, much easier to read. I also like the blog with the shorter articles and advice on techniques. Well done!
I still find the bug of the comments section being displayed twice one-after-the-other when clicking the comments link from the homepage.
That’s definitely what it is. I can confirm that clicking the comments link from the home page triggers the comments to load twice.
Nice…
It’s about time people, androids and others pilot apps are conquering the tech world by storm, logo especially on tablets and mobile are very common idea. People who has a widescreen will have a lots of scrolling to do, this upgrade is indeed favouring the mobile user.
___________
marquette university
Nice and concise! The clipped header makes me think something is wrong with the code displaying for a fraction of a second then I realise its intentional. Otherwise great.
I think it looks great, but the cut-off logo is a bit jarring. It distracts me from the content until I scroll down – but maybe that’s the genius of it… it forces me to scroll and notice more content.
I’ve always loved the illustration work on ALA and am so it is getting a little extra love. Do not give into the header haters. I think it’s a bold design element and shows a sense of confidence in your mark.
Agree with this redesign or not, we’re all here to read the content we’ve grown to love over the years. Thank you and keep up the good work.
Hello again. I have a quibble with your print style sheet: is there one? Is it on a to-do list? [I can’t be the only person on the planet who occasionally prints a web page.] For screen reading, I love that the type is large and readable on my laptop, and I love the larger, awesome Cornell illustrations. But when I print, I don’t need a giant illustration followed by giant type. Can we have a print style sheet that prints text at a more normal size, and shrinks or eliminates the illustration? Thanks.
Finally got around to see the new ALA! While the header and footer were tricky to understand, I’ve come to love it! Only thing that is bugging me is the lack of a “back to top” link. But hey, this is your site, not mine, so if there were a star rating, I’d still give you six out of five stars (and mostly clip off the sixth to match your new look)!
The header being cropped/overlaid is bad readability-wise, brand-wise, usability-wise. I keep thinking I need to scroll up so it’s not covered. The footer “sitting” on the baseline I don’t mind. Still readable, browser chrome doesn’t interfere.
The typography is very readable, but very horsey. I prefer the smaller size of the mobile version, which is still very readable without my glasses!
Thumbs up: responsiveness.
Great job Jeffrey! I especially like the how the big masthead gives a print magazine feel. Retro yet contemporary 🙂
For those who find the clipped title jarring, try this. Its a quick little userscript to unclip the clipped title.
Interesting design, but not for me. Especially the clipped logo and footer (and especially in a mobile browser – all I see is “something LIS something” at the top and “*FOR PEOPL” at the bottom). When I first saw it I assumed there would be something to see beyond the top & bottom and tried scrolling further – it’s just annoying.
Great content as ever, but navigation and discoverability seem a low priority – I know, “content first” and all that, but I still want to find old(er) articles from time to time.
Thanks for sharing your thought process though!
I am not a fan. On the large monitor the font is way too big. I don’t like how I am forced to read the first article on the page. What if it is not what I am looking for? It will create a high bump rate. Found it easier to search via google.
On the iphone I was hoping for a nav to appear at the top, either with a tap or a scroll up which is how most apps, mobile sites work. On the iphone once the search bar is open I can’t navigate to the nav items.
I really feel you have forced content on the reader and lost the usability of this previously turned-to resource.
The logo design is sloppy looks unprofessional but that is secondary to the ability to navigate and find content.
Foul content. Deservedly on http://www.webpagesthatsuck.com/dailysucker
entry for January 28, 2013
I didn’t comment about the new design on the first day it launched as I felt I’d grow to like it and I guess I thought you knew what you were at and it was the right approach.
A month on and I still don’t like it. I like your approach to creating something that’s consistent across all devices but I don’t think that should mean making people on widescreen desktops suffer. This new design bores me to death, almost to the point that I’m not excited to check out the latest ALA articles. The cut header and footer text frsutrates me everytime I see it, I just don’t get it.
A control panel with the option to use the new or old design would be brilliant 😉
I’m glad to see webfonts in use on a design-focused site. Aside from their obvious typographic benefits, it’s important for design sites to set a good example. Too many do not. (For instance, Design Observer still relies on the top typographic trends of 1997.)
But ALA has always honored the abilities of individual designers to change the web for the better. So of all the webfonts you could choose — or even just the webfonts you could choose from the Webtype library — I find ITC Franklin and Georgia Pro to be inconsistent with that principle.
(Disclosure: fonts I have designed are carried in the Webtype library, but beyond those, I have no financial interest in Webtype. Nor do I speak for Webtype.)
Though it’s been revised since, ITC Franklin is a version of a font that was originally released in 1902. Sure, it’s a classic. But by using it, ALA doesn’t acknowledge that type design continues to be a vital area of design exploration. Webtype carries original sans serif designs by some of the best type designers working today, like David Berlow, Mark van Bronkhorst, Jackson Cavanaugh, and Cyrus Highsmith. Any of these designers would be more worthy of your support than good old Morris Fuller Benton, dead since 1948. Again, nothing wrong with ALA being “in love” with ITC Franklin — it’s a great typeface, and it’s not going anywhere. But it’s a little like going to SXSW and announcing that your favorite band is the Glenn Miller Orchestra.
As for Georgia. Georgia, of course, was originally designed by Matthew Carter and hinted by Tom Rickner, and the Georgia Pro family has been newly expanded by Steve Matteson and others. These designers are all alive and well. But Georgia was originally commissioned by Microsoft and distributed with Windows and Office (making its way into the Mac OS too at some point). I have no complaints about Georgia as a work of type design — it’s in the Museum of Modern Art, after all.
But a few principled objections to its use on ALA:
First, Georgia was originally designed for the low-resolution, non-anti-aliased screens of the 90s. Even the originator of the Georgia project at Microsoft, the late Bill Hill, acknowledged that on today’s screens “we can do better.” So can ALA.
Second, Georgia is probably the most common serif font used on the web. For ALA to employ the “wizards at Webtype” to serve even more Georgia seems like a waste of bandwidth at best, and a missed opportunity at worst. Do I really need to download another copy of Georgia? Does ALA really want to look like all those sites that don’t care about design — you know, the ones that just rely on a default OS font?
Finally, to those whose memories are long enough, the choice of Georgia cannot help but seem like a tribute to Microsoft. Over the first 20 years of the web, Microsoft has made some positive contributions — Georgia, Verdana, and other early screen-oriented fonts would be at the top of the list. But when the history of the web is written, Microsoft will be remembered mostly for its awful anticompetitive behavior, the ways it undermined the web-standards process, and the unnecessary suffering it inflicted on web users, and most of all, web designers. As one of the most tireless advocates for that group, it seems terribly inapt that ALA would, from all the great serif webfonts available today, choose Georgia. It is a reminder of the bad old days, when we have come so far.
As Oliver Reichenstein once observed, the web is 95% typography. So webfonts do matter. And ALA has always been a champion for the idea that designers matter. While the ALA redesign has many excellent attributes, I respectfully encourage you to reconsider the type choices. Because if webfont designers don’t matter at ALA, they don’t matter anywhere.
This redesign is an embarrassment, best experienced as an RSS feed. Font selection is stale, as commenter Butterick so elegantly states. The logo, such as it is, is a purposeless hack job. The edge-to-edge mono-column of copy is unsightly, it impairs easy legibility while it also “big-foots” navigation and any other content. You’ve erased any connection to the intelligent, writerly look and natural organization of Santa Maria’s prior design — except, as you note in your preening, self -congratulatory post about the redesign, for the illustration style, in the process preserving the one element that most deserved the chopping block. Terribly, terribly disappointing.
Am I the only person who loves the clipped header and footer design? My only issue is that they don’t scale for mobile.
I’ve love a top-anchored navigation or at least a “scroll to top” link anchored to the bottom.
Top part takes up a lot of space. Any concerns with the “above the fold” content issue?
I’m sorry to offend, but I hate it.
In the software world, they are having to discover that not only does a desktop user interface not work on a tablet or a phone but a tablet/phone UI also does not work on a desktop. Likewise, a web design best suited for a mobile device does not work well on a desktop.
“Sometimes with responsive design, one particular layout (for instance, the desktop browser layout) feels like the “real” design, and smaller-screen experiences become merely usable afterthoughts. I didn’t want that here. ”
Well, congratulations. All you’ve managed to do is now make the desktop experience the “usable” (if only just) afterthought. Time to go elsewhere for design inspiration. You guys have lost it.
— Smittie
The body of this new design is how mobile should look.
It looks great … if I minimize the browser window to a phone size.
It scales nicely at that point, but the header and footers don’t.
I haven’t been back to Alistapart since January hoping things might have been worked out by now.
The large type is nice, but even on a small laptop it is too big and the amount of whitespace makes it impossible for me to read due to sensitivity to bright light. I’d hate to see this blown up for someone with a large monitor.
For desktop users there should be some limits on or better scaling on say a curve and not just for a few elements.
I live in a city with a world renowned university.
Their architectural school building is heralded as an example of a certain style.
Unfortunately, that building’s design flaws include being out of proportion to the neighborhood, having odd angles that create lots of unused space and is hard to heat and cool.
Many say it is an ugly monument to the designer’s ego and an example of what not to do.
Making a bold statement should take into account the people using it.
My first reaction to the new site was negative, but I am aware of the “new site prejudice” that many users experience when a major redesign occurs(article idea!). I’ve given it a few months now and I have to say my first reaction continues each time I load up the front page. I’m going to keep it brief in hopes that someone actually reads this:
1. Title clipping: Uncomfortable, uneasy, incomplete, those are the feelings I get when I look at the title.
2. Two front page articles: ALA has always had proudly low-click through titles, “Growing Your Design Business”, or “Material Honesty for the Web.” Of course we don’t come to ALA for click-fodder celeb-gossip. But if you display informative, yet dry titles, I need more time to decide what to read. With more title options I could peruse, read the abstract blurbs, then decide.
3. Wide paragraph blocks: It may be that I’m used to narrow web articles wedged between screaming ad blocks, but the front page blurbs seems to wide and require head turning scanning.
The entire effect for me as a reader is to be put off and want to click away form the page, which is what I usually do. My readership of ALA has dropped from once a week(one new article one old) to once a month and even then I don’t often read anything. Looking forward to the next redesign…sad….
The site now gives me a headache. I came to read an article, thinking “yay, this link is sure to be helpful, I’ve always learned so much from ALA articles in the past… I should really check in to that site more regularly.” and then, ugh, why is the top banner cut off? How can I shrink this type so that it is readable on my large monitor? Maybe it’s a safari bug, let me check it out on firefox, nope, top is cut off there too. What the heck is going on? I can’t bear to read the article that I came here for.
So, I searched for info and came across this announcement.
In reading through the comments I saw that there was a lot of praise for viewing the site on a mobile device. I checked it out on my iphone and yep, it looks fine, easy to read, no zooming necessary, terrific. But,
I am a professional who sits down at a large monitor when I want to get work done, I don’t do serious work or research from my phone or iPad.
The design on the phone doesn’t have the horrendous amount of white space, and the giant font an large line spacing is helpful, but why on earth make a design that causes nausea on a desktop, where most of us get our work done? That’s the opposite of responsive design.
Aside from the difficulty using the site on a desktop monitor, the choice to cut off logos/images is questionable. If all browsers played nicely and we were at a stage where web content was consistently displayed across platforms then it might be a cute/tongue in cheek choice, but we don’t live in that reality. We still live in a reality where because of poorly coded web pages, or poorly coded browsers, or a combination of the two, I have to fire up a page in my secondary browser at least a couple of times a month in order to properly view content.
What is good about a design that makes the user wonder if their browser is working / if they are missing part of the page?
I am saddened and have sore eyes.