Alternate color scheme

23 Apr 2009 12 pm eastern

Thanks for the great feedback, folks. For those who find the orange background objectionable, I’ll offer a user-selectable alternate color scheme, like this one (quick sketch, ignore the color of the printer’s mark at the top, final colors may vary).

[tags]zeldman, zeldman.com, redesign, webdesign, css, code[/tags]

Filed under: CSS, Design, Web Design, Web Standards, Zeldman, zeldman.com

24 Responses to “Alternate color scheme”

John Lascurettes said on 23 April 2009 at 1:29 pm:

I like the character of the orange but not its intensity (either in how much of it there is or in how saturated it is). The alternate is nice and I’m sure a lot of people will prefer and opt for it, but it has far less personality (and zeldmanish equity) than the orange.
Jeffrey Zeldman said on 23 April 2009 at 1:39 pm:

I agree.

Perhaps, as I fine-tune the alternate colors and experiment with backgrounds, I’ll find a combination that has a bit more personality yet remains neutral and easy to read.
Shelley said on 23 April 2009 at 2:05 pm:

I’m not a designer, only a web developer, but I think one challenge with your first iteration is that there’s such a strong demarcation between the content and the background. It comes across as a little on the rigid side, and isolated.

I’ve noticed that a lot of the new designs, in addition to large headers and footers, have been de-emphasizing the break between the content and the background, allowing some bleed-through between them without necessarily losing the focus on what’s important.

I like the strong color, and it looks really nice with your footer, not to mention being a color by which you’re known, but it does make your content scream out, “Look at me, dammit!”

Of course, if that’s what you want the design to accomplish, never mind.
Jeffrey Zeldman said on 23 April 2009 at 2:12 pm:

I’ve noticed that a lot of the new designs, in addition to large headers and footers, have been de-emphasizing the break between the content and the background, allowing some bleed-through between them without necessarily losing the focus on what’s important.

I agree, Shelley. Designs like NYTimes.com, A List Apart, and Simplebits call little or no attention to the difference between foreground and background.

The alternate color scheme sketched here works the same way. Or will, when it is fine-tuned.
Trent said on 23 April 2009 at 2:12 pm:

If you get into a 3rd design, I think you should axe the designing from the content idea out and just base it all on this: http://www.zeldman.com/secret/
bank charges | Small Initiatives said on 23 April 2009 at 2:23 pm:

[...] Latest from elsewhere Alternate color scheme [...]
Rian said on 23 April 2009 at 2:32 pm:

As a long time patron, the return to Zeldman Orange (a rebutal to IKB perhaps?) is very welcome.

As a mellow alternative though, you might consider the current green which after this long stretch of Internet time has become a Zeldman institution in its own right.

Or perhaps your very own riff on IKB in the form of Zeldman Beanie Blue.
Alex said on 23 April 2009 at 3:08 pm:

Great looking site.

IE does seem to maul the drop caps a bit, which is pretty expected.

Playing with padding/line height can fix it. These settings worked on my computer and produce no inconsistency in IE and a couple pixels of shift in firefox.

span.drop {
display:inline;
float: left;
margin: 0;
padding: .03em .08em 0 0;
font-size: 3.2em;
line-height: .8em;
text-transform: capitalize;
color: #c30;
}

IE also will occasionally render right-side padding on drop caps weirdly. I’ve had to change it to margin.
Jason Santa Maria said on 23 April 2009 at 3:50 pm:

I say go orange. It’s always been a color I associate with your site. I remember how much I used to love all the old orange editions. Also, why the typeface switch in the sidebar headers (Helvetica to Verdana, looks like)? As a cursory look, seems like the only place you switched it up, for some reason it sticks out to me. Loving where you’re headed with the new design, feels like a mighty good throwback.
Neal G said on 23 April 2009 at 4:24 pm:

Why not use .intro:first-letter to style your drop cap rather than having to add a class to it? CSS selectors are your friend : )
willem said on 23 April 2009 at 4:47 pm:

It’s time to go 960, Jeff!

Ditto JSM
Matt said on 23 April 2009 at 6:07 pm:

Jeff,

How about a colour scheme like this:

http://i41.tinypic.com/2ilk95g.gif

That orangey colour for the bg and white for the wrapper.

I think it would be more subtle but still distinctive in the way your site needs to be!
Ray said on 23 April 2009 at 6:19 pm:

Jason likes the orange too. I feel vindicated. Long live #C30.
Thiago Cavalcanti said on 24 April 2009 at 1:03 am:

I’m all in for orange. In fact, when I went orange in my blog, I was thinking of your designs, though I used #F60 because I found it easier on my eyes.
News Feeds - free_mambo_template said on 24 April 2009 at 2:57 am:

[...] Alternate color scheme Thanks for the great feedback, folks. For those who find the orange background objectionable, I’ll offer a user-selectable alternate color scheme, like this one (quick sketch, ignore the color of the printer’s mark at the top, final colors may vary). [tags]zeldman, zeldman.com, redesign, webdesign, css, code[/tags] [...]
GP said on 24 April 2009 at 7:32 am:

Sorry to disagree with some readers : the orange background is awesome. As JSM said: go!
Eduf said on 24 April 2009 at 9:16 am:

I loved that.

It’s really necessary to have a sidebar?
Karin Merx said on 24 April 2009 at 9:29 am:

Like the orange best. Fits you, is warm, is active, is Zeldman.
josh said on 24 April 2009 at 10:36 am:

I thought the orange bg was a little tough on the eyes (not aesthetically but contrast-wise) but I feel like that ties into your “brand” so well. It reminds me of the old site as well as the first edition of DWWS. If anything it would be nice as an accent color or part of a secondary palette.

I didn’t see anywhere in the initial post why you are redesigning this site. I think this design has held up great and find it extremely readable. Love to hear your thoughts and thanks for sharing!
-josh
Josh Stodola said on 24 April 2009 at 10:39 am:

In all honesty, orange is vintage Zeldman, pure and simple. I like that you give the users the option, but definitely make orange the default. It reminds me of the kickass Astros jerseys from the early 80s.
Stephanie Booth said on 25 April 2009 at 3:05 am:

Yeah, I know the orange is Zeldman-trademark, but the alternate colour scheme is so much easier on the eyes :-/
Amazon.com: Designing with Web Standards (2nd Edition): Jeffrey Zeldman: Books said on 25 April 2009 at 11:54 am:

[...] vary). [tags]zeldman, zeldman.com, redesign, webdesign, css, code[/tags] This is syndicated from Jeffrey Zeldman Presents The Daily Report. [...]
Handy said on 25 April 2009 at 6:29 pm:

Yes orange is great !
Antoine E Butler Sr said on 26 April 2009 at 9:36 am:

I do think the alternative color scheme is nice. And much softer on the eyes than the boldness of the orange one.

Although I do think it could benefit from the use of your trademark orange as an accent color. Which other than on the flourish is underused.

Comments off.

23 Apr 2009 12 pm eastern

Alternate color scheme

24 Responses to “Alternate color scheme”

Best Ad Ever

Job Board

Here ’n There

See Me Speak