Useful advice there, thanks for sharing. One addition I might make would be involving developers in the primary stages of the design process, and maintaining that relationship as you fashion your design, and then afterward, when the dev work begins. This should lead to greater understanding on both sides, and hopefully a better project overall.

Just wanted to give a big thumbs up on the design. Very original! That said – and this is by no means a bad thing – it reminds me of the early “CSS demos” from – cripes – 8-9 years ago? The overlaying text, etc :) Still, this looks very modern and I love the way you can flip through the years. Good work.

I think this new design is unique and very well thought-out. Kudos.

This is a valuable reference for responsible and thorough design. Great opening to the new series and seems particularly apt with the beautiful new design, which is obviously conceived with the development process very close to mind.

Love the design for this year. Good starting article as well. I must say, with all the discussion about designer and developer interaction lately I feel truly blessed to work with a design team that is considerate of the web as a medium and receptive to feedback.

Fantastic article too :) Looking forward to the rest.

Ok first off wow… Great design! I just love the time-lines on the top and left side. What great way to fashion the navigation for this site it works great.

On Drew’s post: I take a project from design to development. Guess I’m dancing with myself then. That dance admittedly becomes quite a violent footsie sometimes.

Tthis as a superb post! I’ve got a lot of talking to do with myself in the near future.

Can’t wait for tomorrow’s one

Sweet design. I like it. Simple, clean, different. Nice work.

Great article. I’d include a typographic summary in the handover package too. Even if when using web safe fonts I find it useful to to tell the developers specs on font size, line height, letter spacing and colour for p, h tags an other specific classes.

Well the site looks great but you have no comments about the article so I feel compelled to give you positive feedback.

This article is great and I am happy that someone has sat down and actually put all this down in writing. I am going to use this at my office and although some things may not apply I have to admit that it is a very practical set of rules to go by. The check list at the end is especially brilliant and can be modified as a heads up from the developers to designers.

Thanks again this was a great read.

Cheers!

Yay! And here we go for another year! Great design, and article to start with! :)

“Designers need to consider both states of any feature they’re designing – how it looks and functions with and without JavaScript. If the feature does something fancy with Ajax, consider how the same can be achieved with basic HTML forms, links and intermediary pages. These all need to be designed, because this is how some of your users will interact with the site.”

Wise words indeed. Pity they weren’t heeded by the team responsible for the 24ways.org redesign. Did anyone user test the site with Javascript disabled, to see how it “looks and functions with and without Javascript”? And Opera?

The article text is present in the markup, but styled {display:none} in the CSS, until the Gods of JQuery come and sprinkle their fairy dust on it to make it readable. FOR THE PAGE CONTENT.

Sure, for some bleeding edge tech site, but on a site advocating for best practise in web design, whose first article is on using Javascript responsibly…

Epic Fail.

Love the new design.

24Ways is one of my favorite Christmas-time things! Great stuff as always, and looking forward to the next 24 days.

In addition to Drews checklist I think that the communication itself is very important.

If the developer does only take the design as it is but understands the goals behind it, he can often suggest better solutions (better user experience and/or less work), the designer might even not think about, because he doesn’t know whats possible.

Nice to see that 24ways ist back! The new design is not only unique, but also very inspiring in regard of whats possible with CSS and HTML. Thanks a lot for that!

“Remember, though, that any developer worth their salt will start by building the interface without JavaScript, get it all working, and then layer that JavaScript on top.”

Euh, yeah, right, sure thing, like…

Wow at the design, looks fresh and original, keep it up guys.

Also, love how on time you guys are =P

Fantastic design this year. Just wanted to mention that the title permalink 404’s from the article page itself. Looking forward to the next 24. =)

Nice article. Just one note about your sentence, “Designers need to consider both states of any feature they’re designing – how it looks and functions with and without JavaScript.” I use the “No Script” Firefox extension, and your site did not show me the article until I enabled javascript :)

Agreed – loving the ‘bigness’ of the new design and focus on geometry and numbers/chronology.

Drew-

Thanks for banging this out. I’ve had to convey all or parts of this at some point, but never got down to business to put it all together in one concise piece. Good one.

Thrilled to see you’re back for yet another year.

“Wise words indeed. Pity they weren’t heeded by the team responsible for the 24ways.org redesign. Did anyone user test the site with Javascript disabled, to see how it “looks and functions with and without Javascript”? And Opera?”

Don’t worry, we are of course aware that we’re not quite done with the redesign yet. We’ll be fixin’ her up over the next few days (and we have some more features to add too).

We’re fully aware and are getting it fixed.

I am very glad, that there is a fantastic advent calendar, again… what else should we do until christmas? ;-)

thank you and your team for all the very interesting articles over the years – keep up the good work!

Irregardless of your implementation of JavaScript, what you’ve done with not losing your focus is awesome! It’s not the same everywhere one may hover, however this is a great example of best practices and looking good. Cheers!

Nice start to the next 23 days. A good recap of best practice. You’re probably already aware but the article contains multiple instances of the same ID on the page. Do I win a prize?

Awesome design. I think whats been pointed out in this article is all the differences between print- and webdesign. Designers who don’t know or aren’t interrested in the way the web works shouldn’t be hired for webdesign or stick to flash.

I love the christmas time: Good articles and a really good redesign! Thank you for that and for the next 23 days….

Love the clean, crisp redesign. Nice work.

A lot of the designers I work with in the office (I’m primarily a front-end web developer) come from a print background, and are sometimes guilty of making the mistakes listed in this article.

This will be a great article to forward on to them.

Good article, and a good checklist for any designer.

Can I bring up one pet peeve regarding fonts that has become very fashionable lately?

Helvetica Neue makes text almost ilegible in alaised text on windows platform browsers.

If it is meant to appeal to the designer crowd, then a lot of designers use PC’s and will have the font installed — it will look awful in their web browser.

First off: awesome job with the redesign! The navigation is just original, for one. Plus all the opacity chaos just comes all together great. Do your best to fix whatever issues are still lingering around though :)

“There are three main causes of war in this world; religious, politics and fonts.”

My most favorite sentence in the entire article. Although, shouldn’t that be religion?

I’ve never worked with anybody else on my web designs before, but nevertheless this article still contains lots of meaningful tips that I should consider in all my future design endeavors.

I’ve been regretting my comment above since I hit submit this morning. Wasn’t terribly gracious and I came across as a bit of a tool. My apologies.

I notice the JS issue is fixed now, thanks (although it would be great if comments could also display if Javascript is disabled) .

Love the new design. Great article to begin the run down to Christmas.

I’ll be checking back on a daily basis.

Layer Comps are very helpful for multiple states of a comp and are greatly appreciated on hand off to developer.

Great concept!

Nice! Another year with 24 geek gifts ;)

But – Did you ever had a look on your new design using FF2 or IE6? I don’t think so. That’s really horrible! The redesign was no good decision, my opinion :(

But now I’ll take a look to the content.

Great redesign for a great site.

Well done Drew and Tim.

“But – Did you ever had a look on your new design using FF2 or IE6? I don’t think so.”

Yes, of course we did. We know we’re not done yet, and we’re working on it. Fear not.

Love the design but one think, I keep rubbing my eyes. It’s a bit blurry for me.

Excellent writeup Drew, definitely a good read for anyone having their first run in with a developer, or vise versa.

And the design is wonderful. There will always be haters ;).

p.s. you might want to specify some way that you need to hit preview for the blog to work. I know it’s stupid, but early in the morning as it is now, it took me about 5 minutes to realize that I had to hit preview before I could submit it. Though I suppose the other 39 people got it right, ha ;).

Interesting stuff, although I’d love to hear more about how to be a good dance partner (the kind of advice that’s useful for both sides of the equation. This article feels more appropriate for an organisation where there is a more distinct handover from design to development. I’ve felt for some time that this approach is risky, since a lot of the issues that can arise with a design are only apparent once you start building and using the design. That said, I bridge the gap between development and design in my workplace, so a lot of people probably have a different working environment; there are still a lot of useful things to take home here.

First off – lovely design. Very original. I did notice though that Google has picked out and uses the list of years as the description for site’s entry in the search results. It might be an idea to add a meaningful meta description instead or rejig the source order to improve.

“I did notice though that Google has picked out and uses the list of years as the description for site’s entry in the search results. It might be an idea to add a meaningful meta description instead or rejig the source order to improve.”

Thanks Ed, we’ll have a look.

This was the first thing I looked at this morning. What a lovely way to start the day! I love the look of the design. It’s clean and clear. I love the navigation. I love the way the text sits. I don’t think I could come up with adequate words to compliment you fully.

Definitely looking forward to returning every day until Christmas. Thanks!

This article is very useful – I’m in the middle of compiling a similar checklist for the designers I work with – but there are some other points that need to be included as you can’t assume your designers will know these basic rules.

There are lots of design agencies setting print designers the task of designing websites when they don’t have a clue about the web. These designers will create their design in illustrator, in CMYK using a grid set to mm, and then they simply convert it into PDF format to deliver to the unsuspecting developer!

My very first points then, are that designs should be created in Photoshop or Fireworks, with a grid set in pixel units (with snap to grid on), in RGB colours. I will also ask for a list of font names, text and line-height sizes, text colours and rollover/on-states. I also need an indication of whether the site is left or center aligned (which is not always clear from the design comps).

About the new 24 ways design: I agree with Peter that it reminds me of the early CSS demos and designs of that period, but that is exactly why I love this new design. A contemporary, modern take on that classic style.

“for a lot of developers, working in a tool like Photoshop is like presenting a designer with an SSH terminal into a web server.”

I love this line :)

Label Layers. I wonder if Santa will grant my wish this year…

Great work, love the redesign.

With regards to the complaints about using this site in IE6 or with JS disabled: The audience is always an important factor in considering browser/technology support. If, for instance, this site was intended to be used by non-web-savvy users I could understand why support of IE6 would be important. But seriously people, this isn’t a web site for the faint of heart. I highly doubt the audience of this web site is 35% IE6 usage! If it is, it’s probably used only to bust balls, and not honest browsing anyways.

Love this part of the site design: I can click over to the article, while still editing my comment!

Well written Drew, and looking forward to the rest of the 24ways articles! =)

Love the new design. Especially the advent stuff.

I also appreciate the bigness of everything. I’m reading this over breakfast, as I’ve always done. Being able to have my laptop safely away from my bowl of cereal and still comfortably read the article was a big bonus.

Well done.

Thank you for the walk through the process from your point of view. Excellent points. And having fun is a good way to end a project!
Best regards,
Cathleen

This was a great way to kick-off 24ways for another year! I’m tempted to print this article and post it in my studio for the designers to read.

Design: Anything with a good clear font size works for me. The articles are meant to be read and the design certainly aids that process. So it’s a winner for me…

Content: Very interesting to hear from someone who has such a clearly defined distinction in roles. As a designer/developer it makes me rethink some of my own workflow processes. I tend to get the design to a level I can start developing and then allow the coding to affect the design. Can be good but can also be a pain. Anyway, good food for thought … thanx…

Looking forward to the rest of the series…

I recently worked with a very good graphic designer and then did the coding myself. This was a new experience for me, though I’ve been ‘doing’ HTML since 1996 it’s hard to keep up with everything sometimes. I’m glad the site was pretty simple, but I guess I did a pretty good job making it look right because she asked if I’d like to code for her other projects now and then. Your checklist is right on and I love the layout and concept.

I thought this site was dead. I’ve had it in my feed reader for almost a year now and no new articles. I’ll second the unique design that other commenters have made.

great to see you’re back,
and awesome start for this year!

I really like this list, and as a developer I know my life would be a heck of a lot easier if all the designers I’d ever worked with followed even half of these tips.

I particularly like your analogy at the end about comfort zones and areas of expertise.

Another couple notes I’d like to add would be:

- Actively point out/annotate how the content should sit on the page (fixed width/resizable, left/right/center, etc)

- Make sure that if your background image isn’t a tile, then you take into account that some people have really large screens (e.g. don’t give us a background image cropped at 1024 or something, just because that’s the size you were working at).

- It can be really handy to have a list of the fonts that you used, and also “back up” font preferences, especially for system text/content.

Really looking forward to seeing the rest of this year’s 24ways!

A comment on the design, not the article, sorry.

Your date format looks at though the comments are being made on January 12th, 2008, to this American.

I understand you’re based in the UK, but maybe you’d consider international date format rather than US or UK date format?

ex: 2008-12-01

Nice article… and nice design

OK, so we know why this layout looks like a load of crap in FF2 (hello, Camino anyone?). But there also a few more bugs:

Clicking “comments” tab at the bottom of article doesnt scroll my window back to top. I stood there a moment wondering why this some one in the first (i.e. topmost) comment is replying to some nonexistent comment. Are they reverse sorted or what? It took me quite a few seconds to realize, that I could scroll the list up, and that I wasn`t at the first comment.

Why isn`t the basic navigation visible above the fold? Yeah, nice layout. good idea, but please – I can only see days 24-12 above the fold (and I`m not using 800×600). Ok, so maybe thats not important, whatever.

But I`d like to get the old layout back. Let us opt in for it, use some briliant style switcher from the past years articles. Really, please. I loved that one, and I’ll never like this one.

And comments tracking via co.mments looks like crap too. :(

Wow at the design, looks fresh and original, keep it up guys.

“OK, so we know why this layout looks like a load of crap in FF2 (hello, Camino anyone?).”

We know we’re pushing the boundaries of current browser tech here, but if we can’t do that on a site like this, where can we? If you’re still using FF2, it’s way past time to upgrade (I’d be genuinely interested to hear of a reason why you couldn’t – you get that with IE6 a lot, but not FF2).

The latest version of Camino supports RGBA – in fact that’s what I personally use to browse. Again, time to upgrade.

“Clicking “comments” tab at the bottom of article doesnt scroll my window back to top.”

It should do – I made that addition about 12 hours ago. You may need to do a hard refresh.

“Why isn`t the basic navigation visible above the fold?”

Two reasons.

1) that’s not the basic navigation. It’s supplementary, and absolutely not required to navigate the site
2) there is no fold.

May I suggest a print stylesheet where all the dispensable fluff is removed? I just wanted to print the page to read in a break, but it’s a fail.

Latest stable version of Camino still runs on gecko 1.8, so theres no RGBA here.

The comments issue is fixed, that`s right.

(still – I liked the old layout more) ;-)

Comment permalinks doesn`t work (how can they – comments are invisible untill tab is selected)

“Comment permalinks doesn`t work (how can they – comments are invisible untill tab is selected)”

Thanks – that’s now fixed.

The Camino ‘nightly’ releases of version 2 have been stable for months – I’d recommend upgrading. The 1.6 branch is really old.

Great article.

Also, looks like there are a few design woes in Firefox 2.0 (courtesy of a few co-workers who haven’t upgraded).

Great article. Thanks.

Great job on the redesign! Don’t let the naysayers dampen your Christmas spirits. You’ve done something innovative, and well-deserving of applause!

(You might want to check it out in Epiphany 2.22 and Avant 11.7 though. Seriously, come on.)

Fantastic redesign!

Looking forward to the next few weeks!

NIce stuff, good and interesting article. I actually learn something today from this article, that I’m on my way to try…
Thanks

“it’s way past time to upgrade (I’d be genuinely interested to hear of a reason why you couldn’t – you get that with IE6 a lot, but not FF2).”

My mom is stuck with FF2 because her Mac only has OS X 10.3 on it. I really need to upgrade it to Tiger for her soon. It surprised me that she couldn’t get FF3, but then I realized that she’s 3+ years behind on the OS.

Super article, thank you. Wonderful, just wonderful re-design, I want to pull it from the screen and hug it.

This design is truly awesome – congrats!

I’m a bit dumbfounded though that Opera 9.6x does such a poor job of displaying the intended design. Luckily I have Opera 10 beta installed and that version displays this website just like Firefox and Safari on Windows. IE6 for once does a better job than Opera 9.6x in a “I’m doing my darndest to display this high-tech design, and it came out rather good!” kind of way.

Lots of Advent-reading, thanx ;-)

Good Article. One query though. Are there any stats available regarding what percent of users have javascript turned off? Should there be time and effort spent on having alternative solutions for the same?

Are there any stats available regarding what percent of users have javascript turned off?

Every site will have their own stats based on audience – but sometimes it can be as high as 15%.

However, the rules of progressive enhancement remind us that working without JavaScript isn’t an ‘alternative’ solution. It’s the primary, basic solution. On top of that we add JavaScript for where support is available.

The programmer who I work with recommended me to read this article and I think that it’s fantastic. But both partners would need to know eachothers steps in this dance ;-)

When the next article??

Great article! I was nodding in agreement all the way through.

I’d add a couple of things to your list:

If the designer is using a particular non-web font for some elements to match the brand font (designers often seem to do this with navigation items) and there’s therefore a requirement for the developer to create graphics with HTML image replacement – has the designer created all the states (including hover and current) for each of the nav items? Saves the developer having to delve into the photoshop file and create them all – especially if the designer has used all sorts of shading and special effects that only they can recall and recreate.

Designers often seem to forget to style up all the basic content elements. I would include the following as mandatory:

* lists (ordered and unordered)

* headers – at least h1-h3, but preferably h1-h6 in case the client goes crazy with nested headings when they do the content loading

* a standard table layout for any tabular data the client might want to include

* image treatments – eg floated left/right, dropshadows etc and how the designer sees these being used by the client when they have free-reign in the CMS content-loading stage. For example – if image treatment includes a drop-shadow, has the designer considered both portrait- and landscape-shaped images and created a drop-shadow for each – assuming they are only allowing images of specific dimensions? If they will be allowing the client to add images of any dimension the developer needs to know this so that they can style drop-shadows for images of any size – which as we know is quite a lot more work…

I would also encourage designers to work to a grid and ensure that all their edges line up. There’s nothing more annoying for this developer than having to to re-make background images because the designer hasn’t bothered to line everything up and their background boxes are a pixel or two out.

Finally, I would absolutely agree that it makes financial sense to involve the developer right from the start. We can advise on which design elements are likely to cost more than the budget will allow, and we can often come up with sensible ways of achieving the IA in design without blowing the budget once it gets to the development stage.

Great post.I find this blog accidentally ,I am praparing to design a new blog theme,and I think here could give me much help

Yeah, kudos to the design.

I totally agree with Alison, hover and active states as well as the content elements are mandatorey for a screen designer.

But yikes! Do you really want to have a .pdf as quick reference guide?! I definitely disagree with you here.

For quick reference, I prefer .pngs with meaningful names, they come in way more handy than a .pdf would ever do, when it comes down to accurate production, at least for me.

Kind regards,

mt

…oh what a nice world if there was an unique moz-browser! ;)

Great suggestion about handing over a color chart. I always used to get frustrated that developers would add their own colors on form components that were a poor match to site template. Then, as you alluded to, I discovered that just because I love photoshop for web design-storming doesn’t mean that the code-jockeys do.
I started handing over the color keys and all became right in the world.

Another technique that sometimes works (if you have open minded developers) is to allow the designers to pre-design everything including mockups of the forms and interfaces. This can be done as early as the spec creation and can be of tremendous benefit to the sales team when finalizing projects with clients. This mockup can be used through the entire life cycle.