Redesign template finals

Note: Top left and top right footer elements rotate. ALA element (top middle) changes every two weeks, upon publication. Bottom three elements are static, at least for now.

Thanks to Mark Huot for the rotation script (same one we use on Happy Cog) and Noel Jackson, Daniel Mall, and Media Temple for the love and support.

A couple more templates to go, and then we can build this thing. Can’t wait.

[tags]zeldman, zeldman.com, design, redesign, designingfromthecontentout[/tags]

37 thoughts on “Redesign template finals

  1. Lookin’ good. Quick observation: unlike the current design, the ‘Submit Comment’ and ‘Previous Reports’ buttons are the same colour. At a glance it looks like they belong together, that they for a logical group, but that the second button has slipped out of place.

    I’d actually fired up FireBug to look for a fix before I realised that they weren’t a group. Perhaps a little visual differentiation (as with the current design) could help ‘ungroup’ them.

  2. It’s looking great Jeffrey. I also like the color choices. The Typography in the header is striking & powerful, yet still somewhat “List-Aparty” feeling.

    The red links seem to work well. I think need to re-think the red links on my site. It works, but my BG is black, and I may be shouting where I don’t need to be.

    Anyhoo, great job.

  3. I have a small suggestion, purely technical in its nature, but unfortunately affecting your design – you’re using footer to clear floats (content + sidebar). This creates a large drawback, because before footer is downloaded and displayed in the browser, parent wrapper lacks any background.

    It means that we’re staring on black text / orange background combo for a few moments. Well, few moments now, but should you put any unresponsive widgets in the sidebar, everything can render much slower. Having main content flash like this isn’t very pleasant – especially when you named the redesign “Designing from the content out”.

    Solution is very simple – use ‘:after’ clearing for the main wrapper. Sure, it won’t work on IE, but 1) setting width to wrapper sets hasLayout and triggers clearing 2) #footer is still there, in any case.

    Regards,
    Peter

  4. Love the old-school looks except for the color.

    And in pages where sidebar is larger than content, the last (or lowest) links get really close to the footer. Should add some space there, seems like cut up.

    Thanks for letting us know how it’s going and sorry for my english if you couldn’t figure out my message.

    Cheers J.

  5. Jeffrey this is looking great, and very much “you”!

    Two quick things come to mind: I don’t quite understand the rounded corners in the sidebar headers. They don’t really feel consistent with the rest of the design. Same with the “Go” Search button.

    Are you planning on sticking with WordPress?

  6. Not sure about those CAPS HEADINGS everywhere (particularly in content area), legibility suffers.

    Agree with Peter, background delay really annoys, go should really choose a better clearing technique. :)

    Personally I love the #c30, but an alternate and milder theme is probably welcome.

  7. One thing that has bothered me from one iteration to the next has been the placement of the copyright text. This version is currently the best that I’ve seen but still just off by a bit. The space between the first footer and second footer row seems just slightly larger than the space between the second row and the copyright text. Not sure why that bothers me so but I do feel it deserves just a little more separation. (I’d probably include a 1px line or maybe a slightly different background colour.)

  8. I am not trying to be crude here but… really? All this talk about this thing? It looks like a colored WordPress template. Not that such a thing is a bad thing but weeks of talk of development is a bit of an overkill here. This thing could have been made in half a day. Especially when you have this current theme to start with – strip and fill – done.

    All in all looks just fine, nothing special, but fine none the less. Although that “go” button is damn ugly. Why is the search box so small?

  9. I have to ask (and I have this issue with the existing site as well), why is ‘Previous Reports’ a form button?

    Precariously positioned near the ‘Submit Comment’ button, which does, actually happen to have a proper form to submit. Wouldn’t a link suffice?

  10. I’d say tone down the orange in the background. It distracts from the content.
    And well, no offense…perhaps it’s just my filthy mind, but the animation in the 404 makes me wonder what goes on beyond the picture.

  11. The thing that sticks out for me is the typography heirarchy. In Safari on a high-res screened MacBook Pro, the text generally is quite large and I don’t see a big difference between titles and subheads so it’s hard for me to tell what sections are together in one post. Are the orange ones further down on the page post titles and, if so, why isn’t the title at the top of the page orange? I do like the section layout at the bottom of the page in black!

  12. Thanks for the continuing feedback, folks!

    This orange background is killing my eyes.

    @Benjamin Alijagić, in the footer I’ll provide a switch that toggles the background to the same off-white color as the main content section.

    use ‘:after’ clearing for the main wrapper.

    @Peter Petrus, the red flash bothers me, too. I have an even simpler notion of how to fix it, which I’ll try first.

    In pages where sidebar is larger than content, the last (or lowest) links get really close to the footer.

    @Alex: fixed. (Bugged me, too. Thanks for the nag.)

    I don’t quite understand the rounded corners in the sidebar headers. They don’t really feel consistent with the rest of the design. Same with the “Go” Search button.

    @Brian Warren: They bring a little softness to the sidebar, that’s all. Plus, they’re an easy-to-understand example of progressive enhancement, for DWWS 3e readers unfamiliar with this concept.

    In recent years, the community has come to view “progressive enhancement” as primarily concerned with scripting (so much so that Dan Cederholm now refers to minor design enhancements that don’t work in every browser as “progressive enrichment”), but when Steve Champeon originally coined “progressive enhancement” it covered visual as well as behavioral things whose absence does not lead to bad experience, but whose presence enriches it.

    Are you planning on sticking with WordPress?

    Most definitely!

    I am not trying to be crude here but… really? All this talk about this thing? It looks like a colored WordPress template.

    @chrisp: That’s all it is.

    The interest, if any (and it’s not for all tastes) is twofold:

    1. Design a grid-based blog layout in code (not Photoshop).
    2. Design in public, something I’ve done here many times in the past.

    Designing in public means stopping after incremental changes to collect feedback. It’s like running an open beta, except it’s a design, not an app. Not everyone finds this interesting, nor should they.

    @Brade: I’ve explained elsewhere why I stuck to 800.

    @Lauri Mueller: There are only two levels of headline in the main content area. I’ve nudged the smaller headline down a tad. On the downside, the pages feel like they have lost some punch (which is why I resisted shrinking the subhead); on the upside, the hierarchy should be clearer now. Please refresh.

  13. @Jeffrey Zeldman
    That works for me. I can see it being handy to say “Just look in the sidebar of my site for a good example of Progressive Enhancement/Enrichment”.

    I still would have liked to see the design element of the rounded corners used somewhere else in the design as well. Feels rather lonely over there. Perhaps that “Previous Reports” button people keep mentioning would be a decent place to have it?

  14. An alternate background is now in place on a special switch page. Here’s a screenshot of what it looks like with the “off-white” switcher link activated. The switcher link is located discreetly in the footer (screenshot). I’ve prototyped it using the dreaded onclick.

    And now I’ve integrated it into all the templates. Easy-peasy.

    I still would have liked to see the design element of the rounded corners used somewhere else in the design as well. Feels rather lonely over there. Perhaps that “Previous Reports” button people keep mentioning would be a decent place to have it?

    I know, I know. At least, I hear you.

    Thanks!

  15. The color scheme is really growing on me and I love the typography. The only thing that bothers me, and I’m being terribly nitpicky. The corners on the headers in the sidebar (The Deck, Job Board, etc) are just a little to rounded.

    No bigee, it’s one of those things I have to watch with myself so I’ve developed a little bit of a naggy neurosis when it comes to corners.

  16. I like the subhead size better now! Another note: Is it ok that some links are underlined (the ones in lists) and some aren’t? I would say that it should be consistent and that orange text should be the link indication.

  17. Much respect to you as the master of web standards, but in terms of visual design, I’m not a fan of the crazy orange background (especially when it takes up 75% of my 23″ widescreen). Once you’ve gotten to the place where you currently are, I would assume you can do whatever you want. People aren’t visiting this site to see your crazy-sick designs anyway.

    One suggestion though, might you be able to offer a background switch button (set cookie to remember selection for future visits) at the top of the page instead of the tiny little footer line that will be missed by 99% of the users who have trouble with the orange?

  18. I’m not a fan of the crazy orange background

    @Chris Wallace, now that I have a style switcher in place and you know where it is, why do you need to complain about the orange? You’ll never see the orange. You’ll always see the off-white. The footer switch sets a cookie to remember your preference.

    might you be able to offer a background switch button (set cookie to remember selection for future visits) at the top of the page instead of the tiny little footer line that will be missed by 99% of the users who have trouble with the orange?

    I buried the switch because the orange is part of the brand and the design. Sticking the style switch at the top of the page would call attention to it and make it appear that the two designs are equivalent in value. They’re not. Sticking the switch at the top would encourage people to flick it, and many would choose off-white simply because it’s more familiar to them. I’d rather that most people experience the page through the intended design.

  19. @Lauri Mueller:

    All links are orange, but not everyone can see color the same way, so I use underlining for body links, to help people with certain kinds of colorblindness (and to make the “linkness” more obvious even for non-colorblind folks).

    I don’t use underlines on the subheads because it would be hideous; I don’t use them in the sidebar because visual context makes it unnecessary. Make sense?

  20. The orange really does grow on you, after you visit a few times. I think it’s because it blends well with the well-designed nature of the rest of the site. Quite simply, any colour can look good with good design, and the best colours can look strange or ugly if the design is amateur.
    You pull it off amazingly.

  21. Looking good. Minor detail, but the wording in some of the ads in The Deck get pretty close to the frame now. It’s currently noticeable in one of the Emma ads and the 4by6.com ad. This is on Mac, Firefox 3.0.10 anyway. The blockquote looks particularly tasty on the Mac.. and it reminds me of “Click Clack Moo: Cows That Type.”

    I get the feeling that there’s a specific, possibly illogical and/or historical meaning attached to the “Previous Reports” button.

  22. I’m going to miss this current design, however bravo on the font sizes with the new one.

  23. @Zeldman Aw come on, don’t you think the style switcher is awfully well-hidden? I mean, I only knew about it because I read the post explaining the addition of it. Even then after you told me where it was, it took me some time to even find it (had to read the entire footer text). Now I am all for maintaining the brand and making sure it doesn’t pull attention from the focus of the site, but you wouldn’t put a ‘Skip to Content’ link in the footer or a ‘Skip to Navigation’ link after the navigation? So why place a ‘switch the god-awful background color’ link at the very end of the page?

  24. I didn’t like it at first, but I do like these latest versions. An improvement over the current design, to me, as much as I like it.

  25. Respectfully, I understand the design aspect but I didn’t realize the orange subheads were links until I accidentally moused over them because I was accustomed to them being underlined in that column. Also, with the logic you stated, why aren’t they underlined in the black footer?? Design-wise, I’d hate to see them underlined there but if you justify underlining inline links with color-blindness in one area, how can you not in another? Sorry to bust your chops but it’s kind of like having a chance to debate with Yoda, you know? :) If you’re tired of justifying your choice, I’ll understand if you don’t answer.

    To be fair, when I’ve designed websites I’ve also come up with reasons to break consistency because design-wise it didn’t look good to me. Plus, it’s your personal site and one mostly visited by web designers so they don’t need as much help figuring things out as the average person. It’s all good (even if the orange and black makes me flash back to unpleasant days working on a version of the Geek Squad website, lol). You’re brave to open this up for discussion!

  26. @Lauri Mueller:

    You are spot-on in the inconsistencies you point out. But these same inconsistencies will be found in the current design—the one you’re reading right now. This design has been up since 2004, and no one has reported being confused as to what’s a link and what’s not.

    Lack of reports doesn’t mean no one was ever confused, but if confusion over what is and isn’t a link was a real problem on this design, I surely would have heard about it over the past five years.

    The fact that I haven’t heard a peep suggests it’s not a major problem for the people who read this site.

    Whether this exact same system regarding what gets underlined and what doesn’t will work as well in the orange design remains to be seen.

    Similar inconsistencies—the kind I would never have stood for five years ago—may be found in the designs of A List Apart and AIGA, and they don’t seem to bother anyone there, either.

    I’m thinking—as your own line of discussion suggests—that absolute consistency is a requirement when designing a mass market site such as Yahoo, but the rules may be relaxed a bit when designing for a much smaller and more sophisticated audience.

    Then again, you were confused about the ALA subhead links. I’m thinking perhaps in the orange design I should avoid making subheads linkable, period. (Keep the links in the body, where they’ll be underlined by default.)

    Thanks for the honest and logical feedback.

Comments are closed.