Menu

Redesigned

The zeldman.com redesign is up. You’re soaking in it. It’s old school. It’s brand heritage, baby. It’s retro 90s web. It’s so retro it’s nowtro. Because old is the new new.

Mainly, the redesign is content focused. After so many years as a web designer, and after creative directing so many influential projects, I naturally considered doing a wide, three-column, ultra-modern design—something cool, detached, polished, and glowing with rich media and fancy-pants sliding-drawer JavaScript effects. Not that there’s anything wrong with those things. In the right circumstances, those things can rock hard. But this site is mainly about my writing. So I crafted a simple look that encourages reading and hearkens back to this site’s early years.

Read more about it here, here, there, and elsewhere. (Don’t freak out; these old posts are now in the new layout, adding a layer of surrealism to the experience, since you’re looking at a blog post in the finished new look that links to and talks about cruddy early versions of that same look.)

If orange hurts you, there’s a style switcher in the footer that will remember your preference for an off-white background. You’re welcome.

Love the new design! I like simple designs that are content focused and the retro look is just very well done. Reminds me the day I got the first edition of the famous orange book “Designing With Web Standards”. When all the web standards topics where hot and new.

Personally I am getting of the tired old (it is now) “web 2.0 look” as everyone likes to call it. This is timeless, will still look good long after gradients and reflections are popular…Oh, and I love orange.

Clean and minimal, but I miss some of the texture and embellishments of your previous site. The scheme is solid, but seems to be lacking something to give it a little jazz to engage interest. I’m thinking something different with the sidebar…

When this design becomes more ubiquitous, I’d love to see a t-shirt with some reference to this design, and blazing construction-worker orange sides. You just can’t get a PROPER bright orange from a monitor.

Zeldman and orange have gone hand in hand for years. Like your brand of sorts. This is a welcome comeback. And yes, while it is always tempting to use the latest and greatest whiz-bang effects and technology out there (the “I got skillz” showoff part of web design never quite fades away), focusing on the content is what will pay off in the long run, every time.

This looks like the websites I develop when I am just getting all the content in the right place… you know, before the design is approved. If this is what people are happy with now, we can save a pile of money by getting rid of our designers.

@Rod Galindez: I’m guessing the “Why Ask?” text renders that way because of a setting on your machine (“Turn off text smoothing for font sizes __ and smaller” in the Appearance section of System Preferences).

@Chris Wallace: Criticize my work all you like, but don’t insult other commenters here. Or daddy will spank.

I’ve noticed a few comments state that the design “seems to be missing something”. My best estimate of this is the design uses almost zero images and I think that’s probably what a few people’s brains are focusing on. People have come to expect little bells and whistles here and there in designs now and I think this is the angle they are taking.

Perhaps including something as the BODY element’s background would jazz it up a bit, like a small almost unnoticeable pattern on the red/orange background?

@Chris Wallace & Jeffrey Zeldman: If you really want to be put down have Andy Rutledge review your new design, he’ll have you in the fetal position in no time.

Now I think we all need to peer pressure Eric Meyer into redesigning, his blog design is starting to bore me.

One visual glitch caught my eye: on Firefox 3.0.10, Windows XPSP3, the post on the NSFW tag has a lot of black missing-character glyphs in the blockquote. Probably because the blockquote is rendering as a monospace font (Courier New?) that doesn’t support curly quotes.

In all honesty, I’m not blown away. But it has some good things going for it. The classic DWWS orange is welcome.

But there are little details that are irksome: 1) the tiny hyphen after the “hot or cold” text box, 2) the “previous reports” button, which I’m not a fan of anyway, is slightly smaller and less padded than the “submit comment” button just a few pixels above, 3) the link to each post on the home page is obscurely placed on the post date rather than post title, which took me a while to discover, 4) search box doesn’t clear when I click into it, 5) multi-line headers have more space between the lines than between the bottom line and the text below it.

IMO those are all fairly easy to correct, so hopefully the design still evolves over time!

I dig it yo. Takes me back. I used to have a preference for the neon green ala early Webmonkey and HotBot. Now when are you going to try and design with the new fangled TABLE based layouts I’m hearing so much about? ;)

This is absolutely right, it shouldn’t have a textual alternative as it is for presentation only. Giving it a text would hurt the text flow for people with images turned off or people with screen readers and the likes.

I live the new layout but it seems there is no :focus on links? It was very hard to navigate by tabbing. Also, the ‘why ask?’ question on the spam protection is hard to tab to.

Since I visited this site in the 90s I’ll say, I love the throw back. Jeffrey, you’ve got a tighter grid and bigger type; those are great improvements to a well-known and quirky style! I’m also loving the type size changes all around, some are subtle (like the intro and body shift) but the titles are nice and strong, which is very fitting for the tone of the site.

The simplicity is great, and not to take anything away from this one, but I have to say I really liked the previous design. If I were to nit-pick I’d add some left and right padding to the text of each comment block.

I just have to add another, looks great. I was putting together a design very similar when I realized my site is not focused on my writing (as yours is very much so) but my portfolio so have to refigure. Anyway straying off topic.

Very torn. Half of me calls outs out the bullshit of this being anything other than an off-white blog template on blood orange back. The other half adores the blessed, skeletal simplicity that hearkens back to circa ’90s web design.

Hot. Passionate. Strong. Footer is very jsm (in a good way). Do you like how comments wrap around avatars? Depending on the character length of our names, sometimes its a bit tough to scan comments because they begin in different spots. Nice work!

Do you like how comments wrap around avatars? Depending on the character length of our names, sometimes its a bit tough to scan comments because they begin in different spots.

@JodyFerry:

I like that avatars float left and comments to the right of them (as intended), but I don’t like the amount of padding (agree with comments it feels tight). This is something I fixed in the prototype but which got left out of the final CSS by error. I’ll fix it soon.

Neal, the shortest path to making absolutely certain that I will not do a thing is to peer-pressure me about it.

Besides, what I need is not a redesign, but a realign (especially if I ever get ’round to merging my “Recent Links” content into the main flow of the blog, the way all the kids do these days). Further, I must say I’m impressed that you’re only just now starting to get bored by my site’s design. Most of the audience was bored by it the day it launched!

I love the new design! It is totally retro-ninties web! I’m just a wanna-be, my designs are very pre-k and I have a blogspot URL for goodness sakes, but at least I don’t have any delusions that I’m a web-designer! It is fun though, I have been a fan of yours for quite some time and have your books Designing With Web Standards, which are great. I have commented on your blog before but it was eons ago, prolly when the first book came out. I also follow on twitter of course and always enjoy your tweets so I thought I’d come back by & say hello and thanks. You’re the best. ~Lauren

Quite simply, great redesign. I was a little bit worried after seeing the first iteration of this but you’ve pulled it altogether nicely. The orange hurts my eyes before my morning cup of tea but who would want to look at pastel colours all day long anyway?!

Does it ever bother you that the leading between the first and second lines of the double line header looks bigger than the leading between the second line of the double line header and the body text of the post?

For the single lined header it looks wonderful but for the double it looks odd to me. I’m assuming it is because you’ve set the page to a baseline grid…amiright?

surely content is king but there are better ways to present your content than this… it looks like a regular wordpress theme.

I’d be intrigued to know what those better ways to present this content are.

It looks like a WordPress theme because it is one.

WordPress themes spring from Blogger themes. Blogger themes sprang from what Dave Winer, Jason Kottke and I and some of our friends were doing on the web in the mid-1990s. (I also designed some of the default Blogger themes.)

So it makes sense that my blog would look like a blog, and that a retro redesign of my blog would look like a primordial blogging template. It’s a zag away from the modern trend of making blogs look like newspapers or Flash sites or movie posters or other things.

That trend is interesting and those design explorations by other people can really be wonderful and can push web design in new directions.

But that’s not what I’m doing here, as noted in the “blog post” that precedes these comments. What I’m doing here is resurrecting early blogdom, with modern typographical niceties made possible by better standards support in modern browsers—you’re welcome!

Love the redesign, I think you accomplished exactly what you said you were setting out to do. I prefer the off-white background, and as a user I appreciate being given the choice. The off white is just much easier on the eyes for prolonged reading, and it makes me appreciate the spots of orange much more because of the contrast. Well done.

I like it. Sure, it’s not blowing my mind or anything but it’s pleasant enough and I feel instantly very comfortable, which can only be a good thing right? It’s not like you’ve got anything to prove anyway.

I see your header is 1 image with it’s text included in the alt attribute. I’m curious as to how you came to this choice? I would think a more semantically sound way would be to make that text h or p elements with image replacement so as to keep the info hierarchy intact sans-css.Your thoughts?

The new design is almost avant-garde in a “We have no sense of history” sort of way. But for those who were brazen enough to design on the web in the early days this exemplifies all the web should have been then.

The design highlights some of the web’s limitations as well (like the very ragged right because of poor typographic controls). I don’t think that this is a “content is king” sort of design. The design itself is also in a state-of-being because it has a history and it serves the moment. Whether intended or not, for me, this design is good because it shows that there are inherit limitations in web design and that we’ve also progressed. I wonder what this site will look in ten years.

Seems like a lot of the thumbs down comments are poo-poo-ing the simplicity? I have to say, in my experience, as a web designer gets better/more experienced at their craft their personal sites tend to get simpler. They start to leave the jQuery sliders and textures for the client sites. (I realize that this makes my own site point a finger toward in-experience).

I heard it said once (I forget who, EJS maybe?) that the first thing you should ask someone when building them a website is “If you had to choose would you want people to notice your website or read your website?” This is definitely a read me website, sublime in it’s subtle simplicity. I find myself reading the post almost immediately and usually that’s the last thing I look at.

Wow. Never have I seen a redesign of someone’s blog cause so much bad mojo. Don’t be a playa hata. ;-)

Personally, I like it (and I already said so to you on Twitter). The design feels so nostalgic for me and the typographical nuances are really slick. Like I said before, great stuff, Mr. Zeldman.

I also thought the follow-up to the comments on “it looks like a WP theme…” were spot-on. And it kind of goes along with my last blog post on why 90% of all websites suck. People are too focused on the glitzy-glam, “look at me I’m a Photoshop wizard” style of design when content is the meat of any website…unless you happen to be one of those people who “think needless ornamentation equals great design.” Or if you hate design, period. ;-)

It’s good but there is nothing special about it except it’s at zeldman.com ;)

Please people, I know it’s very hard to seperate content (it’s the great Zeldman’s site with great reading…) and presentation (…oh so how wonderful this resdesign is!) in our minds/perception of ‘things'; but try to think as if you see this while browsing randomly at some other place: What would you think, you would think? :D

(I don’t mean there is anything wrong with this design. It’s perfectly solid and to the point as is.)

I’m not sure users know what to do anymore when they comment. Agree and say “this is awesome”, disagree and say “how could you” or say something neutral like “thanks” or “yah!” And then there’s the ones waiting for you to slip up with “it’s not valid.”

I like your commentary, ALA, AEA and all you do for Web Design so you can color this anything you’d like and I’ll still follow you.

I don’t think any attitude you’re getting is necessarily directed at the actual design; I guess they just expected ‘more’. If anyone else made this big a deal about unveiling this design, they would be met with far worse.

Anyhow, I can’t say I love it, but its certainly pleasant (off-white at least) and easy to read. Does what it says on the tin, as they say.

Accessibility, like design, is always a matter of judgement. The links, “here,” “here,” and “there” are no more blind to a disabled user than they are to a temporarily able one. It’s clear from context (and the rest of the paragraph) that that these are links to earlier blog posts discussing the then-design-in-progress.

I feel it is better always to design a site content based rather than designing a site with only attraction. The site attraction can bring visitors but it will not repeat the visitor. The content based websites will bring repeated visitors.

I’ve been waiting for this for 5 years plus. Sitting under the stairs asking unfamiliar passers by through the crack in the door,

“is Zeldman still Olive green” -?

they’d answer

“yes, he’s still the color of feeling nauseous at sea………”

I’d hunker my arms around my bent legs, pulling my knees towards me and rocking back and forth I’d wonder when I could go back onto the net again!, when would it be safe?

But one day, finally – the man in the orange work suit has appeared and he’s answered through the door under the stairs…………..

“he’s back to his orange best, come out, its safe to go into THE INTERNET once more and feel happy and bright and bold” -!

Finally the balls have dropped for the second coming! and the Zeldman true core has revealed itself, the hot pumpkin magma of clear thinking and the magnum 57 and long dangerous hair.

The new footer area is a great reason to use more images, which is a nice add on for the new look and its an ever present reason to scroll all the way down…. just incase something new and decent has arrived.

The Blue Line at the very bottom – a hat matching success……………

Welcome back to big ballsy design land Zeldman……………… where the contrast is high.

Welcome once again Zeldman to the true pleasure of irreverent pleasures and publishing,

Now to complete your web based zen, all you have to do is moon the camera on your apple laptop and post the video on youtube and you will enter an XHTML strict Nirvana of marked up Enlightenment…………..

I’m afraid I fail to see what all the fuss is about. To my eyes, it’s a fairly bog-standard two column layout. Nothing more, nothing less. Yes, the content is easy to read, but it’s not like you’ve got a lot else on here fighting for the space it occupies.

A couple of quick things…
* You need to make your post titles links. Seriously. I’m surprised you’ve neglected that.
* The pre-populated text in the search box could perhaps do with auto-clearing on focus.
* Maybe do something with the “tags” block. It currently bleeds into the post too much. Maybe a bit of margin? Put it in a box (similar to “Filed under”)?

I’m not questioning all you’ve done for the web community, but as someone has already said, if anyone else had built up such a buzz around a new design over a matter of weeks before revealing THIS with a great “Ta-daaa!”, they’d be met with a chorus of “Is that it?!” (and possibly some not-entirely-undeserved p*ss taking).

Some of the repsonses posted here have really had me cringing (and Mr Zeldman, you cannot deny that more than a few have been OTT and bordering on sycophantic).

Sorry to rain on the parade, but a little perspective is needed, I feel. It’s not that it’s bad, it’s just that it’s nothing special, and certainly nothing to make such a fanfare about.

I didn’t intend it as a big “ta-da!” I was just sharing my design process, as I’ve done many times before. This interests some people and bores others. I don’t share it for the people it bores, I share it for the people it interests.

I can see that it might sometimes be hard to tell the difference between happy sharing and undeserved bragging. That’s a risk with all writing, and especially with all self-published web content. Anytime anyone on the web writes about their work or beliefs, some people reading what they have to say will think, “So what? Your work is nothing special/your ideas are not that original” and so on.

Of course that effects gets exaggerated when the person doing the writing has a following, has been around a while, and at times presents him or herself to the community as an expert. I get it and I expected some good-natured piss-taking.

That said, comments like “It’s nothing special” don’t bother me (a) because there’s no context; what’s special to you might suck to me, and (b) it’s not trying to be anything special. As I said in the post, I wasn’t trying to blow anyone away. I was simply improving on an old design—removing unneeded or ill-considered details, enhancing readability, and so on.

Judging it on those terms, its own terms, if you find it hard to read, or ill-balanced, or you see ways to improve the typographic hierarchy, those are critiques that matter to me, and to which I pay grateful attention.

Criticizing it for lack of awesomeness is like attacking Stephen Colbert for not being serious enough. To me, anyway.

Or maybe that’s just what I tell myself in the long, tear-filled nights.

OK, I take your point(s). Perhaps it sounded like I was having a go at you for simply sharing your design process and then failing to deliver the most world-beating cutting-edge pant-wetting website ever. That wasn’t my intention.

The general thrust of what I was saying was more directed towards the “ZOMG this is awesome!!1″ tone of some of the responses here (slightly exaggerated, but you have to admit some have definitely had that vibe). I really don’t like seeing knee-jerk reactions (especially not gushing praise) for something based on factors other than it’s own individual merit; something which I think has happened here (“It’s Zeldman therefore it’s automatically the most brilliant design ever”). Nothing personal; it just gets my goat in a massive way, and I’ve clearly got too much time on my hands so I feel the need to publicise the fact ;o)

Long time lurker, probably only the second time I have commented:
Yes, this is very reminiscent of the early designs of your site. Same orange as your earlier book. Yet I prefer the previous site layout. I’ll be sticking with my black and white design.

I love the new design. Clean and everything is ready to read and focused on what really matters. I do have one thing that bothered me a little – the fact that the titles don’t link to the permalink but the date on top is a bit odd….not as natural as the post title.

As per a previous reply, the masthead is still sans rollover. You said the Olive site had a ‘too subtle’ rollover. Absence is the new subtle? ;)

After reading all of the criticisms, I fiddled around with a user stylesheet in Firefox to address a couple of personal nits. Here’s what I found.

Re the H2 leading:
I changed the line height to 1.2em and 1.em, and after looking at it that way for a few moments, it still looked hinky (for lack of a better term) and now I’m getting used to the existing leading. Shorter headlines is a good fix. Nuff said.

Re Georgia, Times and Blockquotes:
As to the body text, I’m not seeing a problem on WindowsXP and FF.

What I am seeing is that you haven’t specified a Windows font face for blockquotes. So, at 1680×1050 I’m finding the blockquote text a wee bit small. I looked at your site on the Mac, and the blockquote font is significantly more readable at 14px than Times New Roman is on FF. I tried subbing out for Georgia, which is more readable but there’s less visual separation between blockquote and body copy. I tried Lucida Console, and that looked pretty cool, but the addition of the extra typeface busied up the site and I wasn’t sold on it. Still…

Re tag links:
The tag link text appears smaller on Safari Mac. They sort of assault the eyeballs on FF Win. Might also be a Win font substitution issue? As per Hudson’s comment, but I don’t think they need to be boxed. That they are upper cased sans-serif and large is probably where the issue lies, the effect is better when scaled down.

That was the end of an hour’s worth of fiddling. I’ve deleted the Firefox user stylesheet. I didn’t improve much, but I learned some. Too bad some of the more vitriolic critics didn’t try this tack.

Last words from me:

Re Orange
Pardon your history… but your own archives are missing an inclusion of content in the legacy orange design, the one with the table-based masthead and the orange background. I think it’d give some of the nay sayers a bit of historical context. Or have I overlooked something?

As an aside: the old orange design featured vertically repeating dashed lines, three of them, about 70 or 80 pixels off the left viewport? Do I win a prize for remembering details?

Post title permalinks
Another Zeldman tradition. The Daily Report (get it, daily?) has been organized around dates for as long as I remember (about a decade) and since the advent of WordPress on this site the URLs are date based, so the date is the logical permalink. It’s funny to me that critics are saying “it looks too much like a WordPress theme, and can you please make the titles permalinks?” Seriously.

A redesign is a redesign. We do it for our own reasons of our own personal sites, and yes Jeffery Zeldman is an expert in the field of web standards among other things. He has carved a huge path for many of us and I thank you.

My issue is of legibility.
The bold orange links fight for dominance of attention over the rest of the content. I feel these links now take precedence over the content. So my question is in doing this are you now stating that external links are more important than the content? What is the purpose of having such a strong contrast of marking a link so strongly?

And Jeffery may have made a big song and dance about web standards, but even after all these years his own website still only validates to XHTML 1.0 Transitional.

The previous website did a good job of masking the designer’s complete lack of understanding of typography and spacing, but this design makes those issues especially stand out, among others.

This is a mediocre design at best which many amateurs may praise Zeldman for, but if you stood this up against any true professional web designer’s work then everyone would see clearly what a poor effort this is.

@ray – re: permalink titles. I get that @Zeldman arranges everything by date. All I’m saying it’s a matter of usability. I bet my ass that if you pick a bunch of users and check where they are going to click first, the title would be it. Only then, they’ll realize it’s the date. It has nothing to do with the looks…

I know this is a relatively old post now, but I’ve only just taken a look at your site today. I have a habit of investigating the code that other developers produce to see how they do things and if there’s something I can learn from it.
But I have to wonder why you’ve set your font sizes to be in px. I’m assuming this is in support for modern browsers only and not including IE6? Is this the modern trend now, because I wish I could say the same and have no clients who require IE6 to be fully supported.
I also noticed the content in the right hand column on the homepage drops below the main content in IE6.
And that your timestamp wrapped in a H3 is before your article title thats wrapped in a H2.

My timestamp is wrapped in an H3 because it is of lesser importance than my article title, which merits an H2. It would be wrong to give the timestamp greater structural weight than the article title merely because it precedes it. It would also be wrong to change the design to force the H3 below the H2 merely to please people who like to see grammar school outline style expressed in order. It is okay to have small type above big type. In newspapers and in advertising layout there are many names for this, including “eyebrow” (the small text, often italic that precedes the headline).

I could easily introduce hacks to my CSS that would move the sidebar where it belongs in IE6, but this is a site for web designers and developers, and in particular for standardistas, very few of whom are using IE6 as their daily browser (except perhaps when forced to in an office situation). A standardista forced to use IE6 at work, who uses Safari 4, IE8, or Firefox 3+ at home, will understand and accept that zeldman.com isn’t overly concerned with niceties of layout in a nearly ten-year-old browser whose bugs vis-a-vis web standards are legion and legendary. The One Ring was Isildur’s Bane, and IE6 is our bane (as Netscape 4 once was). While in most commercial sites, I and all of us still probably need to create a separate IE6 style sheet, or hack up our single style sheet with mind-dead “rules” that compensate for most of IE6’s tragicomic deficiencies, we don’t have to do that on *every* site, and I choose not to do it on this one, where I don’t have to.

I set my font sizes in px because every modern browser now supports PAGE ZOOM rather than TEXT ZOOM and px enable greater accuracy when you create both vertical and horizontal grids, as I use on this site, deceptively simple though it may appear to your eyes.