Spring 2006 CSS Reboot Trends
I have noticed quite a few trends across various sites in the May 2006 CSS Reboot that are worth mentioning. Here's the trends I found.
1024 px
There were a few 1024 px width sites in the Fall 2005 Reboot, but this time there's enough of them to say that 1024 px sites are definitely in. I think the move was a simple matter of analyzing site statistics and recognizing that for many tech and design blogs, less than 1% of visitors use a resolution lower than 1024×768. This doesn't mean that every business or web service can make the jump to 1024; many of them still get enough users at 800×600 resolution to justify designing for the lowest common denominator. And if your site has 1 column, 1024 px is way too wide.
What is mostly absent is flexible layouts; there are a few liquid layouts, a couple resolution dependent layouts, and (AFAIK) no elastic ones. This is kind of a dissappointment, since I am still a fan of flexible design; I'd like to see more creative fluid techniques and Javascript tricks in the future. Look at Dragon Labs to see what I mean.
Silk Icons
I've seen Mark James' popular Silk Icons everywhere lately (even right here). There's over 700 of them and they are absolutely free. It's amazing how popular they are, and how good they look on so many different designs. I just wonder if it might be a matter of time before they get too common, and everyone runs off looking for an alternative. I'm also suprised that no one is using sets from IconBuffet's Free Delivery. They may be cheesy, but I think they look cool on the web.
Light on Dark
There are a lot of sites that have gone to the dark side recently… just look at the front page of the Reboot to see what I mean. Many of them recently had dark on light designs before and made the switch with this redesign. This question of why this style is becoming more popular was recently posed on Light on Dark, a new gallery for just that. Then again, maybe designers are just going down the dark path to get listed on that site!
Beefy Footers
Big footers are still in. I think the format of putting lots of extra content below the main content, which you can see an example of right here on this site, has gotten popular, and it's still agreed that Powazek was one of the first to do it. It's a nice style, and great for things like photo feeds, links, blogrolls, recent posts, etc.
I've also noticed that a few sites have advanced this to the point of making their layouts into clearly defined sections, where each section stands out a lot from other sections. Some sites will have a dark-on-light body and a large, light-on-dark footer; others will drastically change the font or positioning from one section to the next. I'll provide an examples of this since it's hard to explain: notice how Elliot Swan's redesign is basically three huge sections with different styling in each. I think there's a lot of potential in this technique, in terms of offering front page visitors a lot of content, but it can also go too far and become information overload. Use with caution.
So what now?
The easy thing to do is look at this list and say, "oh wow cool! xyz is in! I need to go redesign my site with xyz!"
This is the wrong attitude. Each trend I've mentioned is just a small part of the many sites that use it, and in their site design, it's hard to argue that any designer actually used it just for the sake of having it. They fit the design, and in any design you do, you have to make sure things fit too. More importantly, creative ideas are far better than trend-following, and what makes many of these sites stand out is not the trendy aspects they have, but the overall creativity of the design, which is more original than not. And even though I'm not an artist myself, I can say all this with certaintly. Take all these trends as ideas for inspiration, and keep producing totally creative designs as always.
18 Trackbacks/Pingbacks
- Trackback: Style Grind on May 5, 2006
- Pingback: The Web Design Blog on May 6, 2006
- Pingback: Spring 2006 CSS Reboot Trends at jarkolicious on May 6, 2006
- Pingback: taking a break on May 6, 2006
- Pingback: Dr. Web Weblog » Blog-Archiv » CSS Reboot Background Colorscheme on May 7, 2006
- Trackback: einfach persoenlich Weblog on May 8, 2006
- Pingback: Akkam’s Razor on May 8, 2006
- Trackback: Ellis Web on May 9, 2006
- Pingback: Articoli su web design, web standards, css e xhtml - TomStardust.com on May 10, 2006
- Pingback: BlueSparc design, technology news » Blog Archive » May 2006 CSS Trends on May 11, 2006
- Pingback: Mossy » Blog Archive » Resolution Dependent design on May 18, 2006
- Pingback: Designs » CSS Reboot Trends on August 31, 2006
- Trackback: 17 on December 8, 2006
- Trackback: 4 on December 8, 2006
- Pingback: BlairDee.info » CSS Reboot Trends on May 22, 2007
- Pingback: Teaching Online Journalism » Trends in Web design today on July 14, 2007
- Pingback: The Design (And Other) Stuff - The Vidar Site on July 19, 2007
- Pingback: Ellis Web » Items of Interest: 2006.05.08 on August 14, 2008
Ah damnit! I was going to right this article :-p but you beat me to it.
d'oh! write*
Nice post, I'm with ya 100% on the "so what now?"
Innovation (if it's good) will always get you farther than copying others.
And thanks for the linkage btw.
Anand: You could still write it; maybe you noticed something I didn't. I would always be interested in what you have to say.
Elliot: Exactly. I think there are a lot of innovative designs this time, and I'm really pleased to see designers trying new things. There's a lot more that could be done, and I wouldn't want to see these trends go the way of diagonal stripes (those used to be everywhere!).
My favourite of the "beefy footer" bunch has to be justkyle.com (my favourite site in the reboot). It has a small (and I mean small - 400px wide!) content area; and 100% wide footer full of juicy bits.
I missed silky icons from my "quick observations" list, but now you've mentioned them, I'm seeing them everywhere!
Thanks for Article, Christian!
My entry was a sort of elastic/liquid hybrid (still a couple of kinks I think I need to iron out) Though I agree I haven't seen many elastic designs.
Good round up by the way. Except for the elastic bit I fell into some of those. mmmm.
Gareth: Nice job. I was wondering if I would see an elastic reboot. Yours came out great.
F tha trends - these fads happen so fast it's hard to keep up with!!! Drink more whiskey.
This is a good roundup of some of the trends I noticed in the CSS Reboot; you might also take note of the number of green-accented designs that made it into the top scores. Green was "in" this time around. (Not that any of the scores are too accurate from what I see–less than 3/5 for the top designs? Pfft!)
My least favorite trend is definitely the beefy footers. No offense to you or any other designer who uses them, but I think they're entirely counter-intuitive to good design and accessibility (just my opinion). Users hardly stay on a site, much less a site they don't know well. You want your various content easy to get to and as near to the top as possible, depending on what it is. The average, random user may not even make it far enough on your page (especially pages with comments) to see that chunky, hip footer.
Case in point: I am 19, and I've been around computers and using computers since I was a toddler, so I'm well aware of basic navigation, to say the least. However, one of the rebooted sites in the CSS Reboot put its entire navigation in the footer. I fully admit to being dumbfounded at the top of the page (which just happened to have a lot on it, to boot) for the longest time.
For those who are dying to have chunky footers, at least make an anchor link somewhere toward the top so people have an idea that it even exists.
Lelia: I hear you on the footers issue. I keep my navigation at the top for just that reason.
I think the footers trend will stay on blogs… at least it should. I don't think any of the designers in the reboot would use them in a commercial site. Even for many blogs, the footer is a place for "less important" content targeted at the more consistent visitors. I can at least speak for myself when I say that.
I have started on my redesign, I didn't hit the May 1st Reboot
but i had decided a long time ago to go light on dark, now I am going to look like a poser. Although i am going to pose and do my layout to 1024 though 
6 Foot Design's entry is elastic (assuming I understand the definition you are going for). Of course, it doesn't appear that anyone is home over there.
The trend towards fixed-width 1024px bugs me; just because I run a 1900×1200px screen does NOT mean I keep browser windows open that wide. I actually prefer them to be about 900px wide so I can have several other things on my screen as well.
Go ahead people, reboot to 1024… but if I have to h-scroll to read your text, I'm leaving.
I'm not sure why the "beefy footer" fad is so popular, especially when designed in the way that Elliot Swan's page is. Does he (or anyone, for that matter) realize that the whole purpose of using thin (~400 - 600px) main columns was for readability on lower resolution monitors? This is precisely what CSS can prevent: design being fucked up on different resolutions.
These trends aren't about good design, they're about being "in." If this site is a representation of what CSS Reboot really is this year, I'm pretty disheartened. There's little consistancy with this design: pacman/mario and the modern silk icons are mutually exclusive, your "feeds" aren't even all the same format (two rss 2.0, and rdf (what is it… rss 1.0? Can't remember…)), and you're using magenta (~50% magenta, 0 cyan, 0 yellow), a color that's been informally banned from computer usage since CGA graphics went out of style.
I respect your effort, but remember that valid CSS != good design.
I enjoyed this. It was nice to read insights upon the minor details of design without any fluff or supercilious banter. Observation without judgement, that's what I appreciate. I especially enjoyed the last paragraph. I've done it myself, and it's so easy to get caught up in the latest trends, and to design for other people. In the end, one can become a trend-whore with no distinct talent or flavor.
I believe it is really important for web designers to keep liquid/very elastic designs. Just as Matt said in the previous comment, many people with big screens don't maximize their browser's windows. I'd also like to be able to see a site in 800×600 correctly (without horizontal scrollbars).
Hey! I tried to resize the browser a moment ago just to see that your site isn't flexible at all. And it sure looks like it could be done easily.
PS: If you check my site, it's also fixed, but since I'm on wordpress.com everyone (except http://scobleizer.wordpress.com/) is forced to use the site's predefined layouts.
I do agree Mark James' (Fam) icons have proliferated to all corners of the Internet. But that is what happens when you deliver quality in quantity. As an aside, he does a lot of freelance work so if you are in need of some professional style and design… do hire him.
Great read, I might have to create a new layout for my blog - or just update it with a huge footer which I am quite a fan of!
Nice post, even though I my resolution is over 1024 I still like to have my browser window open about 75% of the width. So im not a big fan of the wider sites. Big footer's are handy, I am tempted to add one on my site.
Nice article, although I think the trends are mostly for blogs, which are the trend of course. I wonder if these trends will hit the coorporate sites.
My problem with light on dark sites is that if you are on a big ass CRT monitor which is actually calibrated properly and run it at 9300K, many of the sites have blogrolls and links and sometimes entire content sections that are absolutely indiscernible.
I'm not going to give examples, but there is at least one referenced here in the comments of which 1/2 is illegible to me. So, I'm not going there again.
The other day I was basically told to buy a new monitor if I wanted to look at those sites made on TFT or huge apple LCD screens and my answer was quite short (and is certainly not quotable here). If you demand of your users that they invest huge lumps of money to see your site … I think it'll end there. At least it does for me.
Summary: We have to take one more thing into consideration when designing: monitors. What you should try to do is run your site on as many different monitors as possible. Pink (TFT is usually red (CRT), for example. Since I've started comparing, I've also started going for different colors. I'm trying to incorporate this into my own reboot … coming within the next two to ten years.
BTW: Your site's colors and the contrast here are no problem whatsoever. Be proud that you are one of the very few owners of a "dark site" that can say that for himself/herself.
Our web stats show that 75% of our sites' (I'm talking about fashion/clothing/sports sites) users have resolutions above 800×600px — that 25% chunk of our audience isn't enough for me personally to consider jumping over the 760px site width, but then its more of a question for the designers where I work (I write the backend, they make it look pretty).
Still, maybe the statistic is of use to someone.
Andy: My site is one of the most accessible and usable out of all in the CSS Reboot. I went through a lot of trouble testing this site and asking users to give me feedback on it, and I know that it looks good on many different monitors. It's also liquid, has anyone noticed that?
While I may be guilty of 3 of the trends on this list, I think I've handled them allright.
And to everyone else: It's nice to see that there are still people who understand that screen resolution != viewport size. It's also nice to see that there are still people who value fluid design. I run Liquid Designs so I think I can say I'm the biggest fan of it. Check it out if you haven't seen it yet.
Julian, and everyone else: I should mention that my site is fixed in IE 6. I'm sorry if you use IE and find this to be a problem; I just didn't want to make accomodations for that browser. While I would go through the extra trouble for a commercial site, this is my personal site and I don't cater to IE around here. That's my decision
And it's a good decision. I know many people frown upon that, but I don't. It's a personal site and we can decide who gets the goodies served up properly.
i started a small conversation about the overall feel of this season's reboot, and the general feeling i got is that it was kinda uninspiring. there were indeed a lot of great designs but that was over taken by the ammount of clone sites that were put up. my fear is that with the growing popularity of the reboot, its more about fame then creativity.
I don't have a flickr account so I'll comment here (and maybe blog about it in the future).
I think people are doing a lot of copying for a couple reasons. For one thing, people have always done it. Very few designers are inclined to make original designs. Also, most galleries do not reward creativity. For example, take my site. Even though a lot of my visitors have said very good things about this design, it's a very dangerous design, because it also turns off some people. People either love it or hate it. It's very difficult to make a design that is creative and unique and still pleases everyone. In my case I wanted a design that expressed my interests, so I was willing to take that risk. For most bloggers, I would actually suggest going with what's safe (Hemingway or K2 or whatever else) rather than risking a creative design that turns off half the visitors. Know what I mean?
Nice roundup Christian. Can't wait to see what Adam writes-up. I also would like to see a review more specific to CSS, but then again… Design is boundless.
I was skimming thru the responses above looking for anyone talking about the readability issues involved in having light text on a dark background. If I missed one I apologize…. but, to me, this trend is the most disturbing. I have a headache just reading through this blog. The eyes and brain have a very hard time processing light text on dark backgrounds. It's not so bad with small bits here and there for accents, but it's too much when you are trying to read a blog article. I hope this trend dies fast!
MondoMan: I haven't seen anything about the light-on-dark issue, but I would have thought that the issue is how much the text contrasts with the background, not the specific X-on-Y vs Y-on-X quality. I don't have a problem reading this or any pages with dark backgrounds.
Sorry about my old comment. I use Firefox and Opera, and the site looks good.
What I was referring to (maybe because I'm a complete totalitarian) was that there comes a moment when you can't resize the page any more (min-width), and there you have it, a horizontal nav-bar appears. The limit you set in your page is good (760px aprox, right?), but being a complete usability bstrd, I would go for 620px maybe.
You know what? forget it. I really love your site's design and content, I think I'm actually being overcritical. And I really wish I had the creativity to do what you did with your site!
Mondoman: I have trouble reading light-on-dark sites myself so I was my own test on this one. I use background #222 with color #ccc to make this as readable as possible. I find it readable with my monitor both bright and dim; then again, I have an LCD so maybe it's tougher for the CRT crowd. I can assure you it's more readable than if it were #fff on #000, but I'm still going to make an alternate stylesheet for you guys who are having trouble. I just need a few weeks as I have exams right now. Besides, you can always get the RSS feed and read my blog however you like.
Julian: I hear ya, I just figured anything below 760 was too low. I'm glad you like the site.
http://www.studio7designs.com has all those elements that you are talking about…
it was wierd reading all the "current trends" and they all applied to my design.. I didnt do it on purpose.. I just liked the elements and applied them…
Great roundup. You didn't mention gradients. There are a lot of sites with gradients. On another note I love how you did your comments preview.
Sorry to come with off topic things, but I want to tell Carlos I subscribed to the comments with the "Notify me of followup comments via e-mail" checkbox, and then I wanted to cancel that and I can't. I mean, the first time I tried to cancel it was ok, the wordpress page appeared and said something like "click here to unsubscribe". I did so and the comments just keep coming! I tried to cancel again and the WP page says "xxx@xxx.com is not subscribed to any posts on this site." (where xxx is my mail account).
Wonder if it can be fixed. Thanks!
Kelsey: Gradients are not a new fad so I didn't mention them.
Julian: I'll remove you through the admin section. I don't know where the problem comes from but thanks for letting me know. Sorry you got so many e-mails.
Julian: I think I know what the problem is. I checked the DB and you are, in fact, unsubscribed. I think the problem is that my server is being really slow lately and e-mails have been received up to a day late (even to me, I get e-mailed for every comment). So you got e-mails from comments that were logged before you unsubscribed, even though you received them much later. Oh well, another reason to leave Dreamhost.
Great write-up, it's interesting to see what's been going on in our little world of CSS and cruft free urls.
Hey, if you are interested in what's been going on with liquid CSS, you might like this entry too:
The Good, the Bad, and the Ugly
Well, nowadays trends are quite fast dead, but i am sure also a quarter of a year later, this lines are still true! So thanks for the quick report of the css reboot!
This is a great insight, as for me i am a resolution conscious guy in which i want my audience to see everything at a glance and put the essentials at the right position. But it doesn't mean if it's "in" i will jump in to it.
I for one love the large footers
love the article, Im a bit late on commenting but just thought id give my 2c