We all know that with the ever shortening attention span of people these days that we only have a few seconds to catch the attention of a potential customer. Well guess what? Now we have a study that tells us that we actually have less than a few seconds. Designers have an average of 1/20th of a second to keep a viewer. How shallow no? A study conducted by Carleton University in Canada, published in Behaviour and Information Technology, and reported on by Nature.com hypothesized that websites had 500 milliseconds to make an impression. In reality we only have 50 milliseconds before the viewer passes judgement. And so there you have it, though content is still king, the trick for us is to make a lasting impression during the first 50 milliseconds of viewing. Doesn't sound that tough. The study aligned itself with the KISS philosophy, less is more. And however great your content is, the delivery makes the initial impression and sometimes it's the only chance you'll get.

Starting off the new year with yet another library of CSS resources. Titled CSS & XHTML Bookmarks, readers that had problems with the previously mentioned collection containing ads should have no ill will towards this site. In addition to nicely categorized links for galleries, articles and techniques, the third column provides a welcomed synopsis of certain links of interest. Already I found a great resource in the cheat sheets located at I Love Jack Daniels.

Previous collections:
Don't Meet Your Heroes
Web Developer's Handbook

This is a new take on standards friendly design. So far we've moved from tables to divs, now P.J. Onori is proposing the use of unordered lists and definition lists to make the content friendlier for older browsers. Since older browsers don't support the div tags, they are simply ignored, the designs fare no better or worse. However with unordered or definition lists, the older browsers will still be able to pick up on some of the hierarchy. P.J. walks us through the benefits and drawbacks with using each type of list as a replacement for div tags and even provides examples of their applications! Very interesting, if any of you readers out there have implemented a design using the lists comment so we can take a look! I've used the unordered lists for menus before as with almost every other designer out there, but for an entire site, that's a tall order!

BTW, Merry Christmas! (for those of you who celebrate this particular holiday).

Thought I had already gone and posted this, but what I was actually thinking of was the Web Developer's Handbook. This well designed site (would be ironic if they didn't practice what they preached) compiles a bunch of feeds from CSS and web starndards related sites. Wouldn't be too bad to take a gander from time to time when not working on a project.

One to ponder about for the weekend. When I first started working with CSS, I was one of the types that had the all or nothing approach. It was an incredibly frustrating experience trying to design a site and make it work as it was intended using CSS instead of tables. Why, tables were easy and you knew exactly how it was going to behave. CSS, not so easy and you would pull your hair out just trying to fix the layout for the various browsers out there. Over time I eventually embraced a mixed use of CSS and tables (as little as possible, but still there). Just now I came across this great tutorial, pulled out of a book by Dan Cederholm. This PDF is chapter 8 of the book, Fluid layouts. I scanned through it quickly as I still have a lot of work to get to, but I don't think I saw anything regarding the footer problem I've dealt with in the past… anyone know of an easy fool proof way of creating a footer?

I had a footer going, but when you scroll down, the footer gets stuck and doesn't stick to the bottom of the browser. Same thing if you resize it. The only way it would become unstuck in the original position is if you resized the browser or scroll and then refresh. Eventually, without getting much help, I decided to do without the footer.

Almost let this one sneak by me, apparently Monday was Wired News 2002 redesign's 3rd anniversary! Douglas Bowman who left shortly after to focus on his design consultancy, Stopdesign really did a fantastic job on the site. Even after three years which is what? 30 internet years? The design still looks somewhat unique and fresh. And if it doesn't, that's only because all the other sites out there modeled their's after Wired News. I remember when I first saw it, with the different sized letters on the top bar, I never saw anything like that before. Even now, the design is unique and original enough for people to really identify it as Wired News' site. In Bowman's post reflecting back, he takes us back to when he first released that redesign and the aftermath.

Why is this in the CSS blog? Simple answer, just read the post or take a look at the source code of Wired News.

I actually wish this campaign was introduced a few months ago, but now with the development of IE7 really picking up steam and their PR actually taking a turn for the better, Kill Bills Browser may not be as effective as it could have been. Regardless I just switched two of the upper level guys in my department (my superiors) to FireFox and am looking forward to a trickle down effect in addition to lateral movement.

Humor sells, and this poster is chock full of it. The ironic thing? Every point listed is so true! For you webdevelopers or CSS nuts, aren't you tired of the %*@)$* hacks you have to apply all the time for every site you code? Do your part now, make life easier later!

At least for a little while more. A report on sitepoint points to an account by Molly Holzschlag of Tuesday's meeting of the Web Standards Project's Microsoft Task Force. The bad news? It won't be perfect obviously, there are still a number of issues requiring hacks that will remain present in IE7. However they have fixed a number of problems we deal with everyday like the overflow problem. But hey, they are trying, and my god PNG images' alpha transparency is going to work! Goodbye GIF images!

Not CSS related, but this little study may be of interest to you web designers. I suppose most websites follow this placement anyway, and yes following users usage patterns will undoubtly cause many sites to be cut from the same mold (grid wise anyway). Regardless for those of you working with superiors or clients and having a hard time convincing them of why you placed things a certain way, as long as this study backs you up, feel free to use it. They may not respect you, but they'll respect studies, no matter who conducts them.

Khoi Vinh recently wrote an opinion column on why the CSS facelift contest over at Slashdot (previously covered by David and me) will ultimately fail because the underlying architecture of the site is not up for reconsideration. He makes a good point about why the site architecture should be considered in a redesign along with the graphical portion of it. However, that is a pretty monumental task and I doubt many people will be willing to put in the time for a contest. A pure CSS template, that's a different story and I look forward to seeing the entries. Any readers looking to take part?

The links on the following page may or may not be on that Web Developer's Handbook I wrote earlier about, but it's a nice small collection of some popular CSS tips and tricks. Much easier to digest and sort through if you are looking for something specific or something to experiment with. Just viewing the list quickly raises my eyebrows. I've had a lot of issues getting centered multiple columns to work with footer bars. Looks like they have at least two links that may give me some insight into make something like that work! Very useful list!

It's been a long time coming, but Slashdot has finally gotten rid of their tables and converted to HTML 4.01 with a full complement of CSS. If they were able to switch their 900k users, 60k stories, and 13 million comments over, then I don't see how anyone can back away from their very own standards compliant projects. For the designers out there, you may want to take note as they will be looking for a new look soon! Their dated look is really nothing to oggle at, let's hope they get that redesign contest running quickly!

For any readers that have recently been charged to redevelop a site to be fully standards compliant, this article covering how AT&T went about their site redevelopment may prove informative. I'll be approaching a similar task in a month or two, so I read this article with great interest. Though the site I'll be working on isn't as large or dated as AT&T's, I won't have the benefit of an entire crew to work with. It's really amazing how they attacked the project of this scale, just reading about it gets me all itchy to start my project. Read on true believers (of CSS that is)!

I have a huge set of bookmarks I share with my close friends, and within them are a bunch of links related to web development. After coming across this site, I think I should just get rid of that section and link to this insane directory. The web developers handbook includes more links than you can shake a stick at from galleries, color theory, royalty free photos, css topics, ajax apps, blogging, CMS, usability… and SO MUCH MORE. Do yourself a favor and bookmark this badboy.

If you want to read short blurbs on each link, check out the maxi edition.

This sweet little web based utility allows you to compare blocks of text in various different forms (italic, bold, regular, etc), showing you how they will look on screen. You can choose from default fonts, Windows safe fonts or Mac safe fonts. Leading, tracking, spacing, size and more, all selectable. After you've chosen your preferred style, they give you a nifty option of just downloading the CSS code for it. FANTASTIC!