Riding the wave of web design

I'm currently working on my own web page, and I'm not at all displeased with the progress. People will certainly recognize that I have gathered some design cues from Blizzard Entertainment, a company known for very energetic and rich web sites to support their games. This is a strong step away from a long attachment to minimalist designs. I've always loved the simple elegant sites that still remain perfectly usable and totally intuitive. Websites should look like you can use them to do things. Tabs and big buttons of current designs have helped, and I like the solid colored div layer designs being used these days.



For years now, I've read CNN.com as part of my routine. While I have many news sources these days, CNN is the one I've used the longest, and have seen the evolution of their design.



If you look back through the years using the WayBack Machine (or, in this case, the mirror at the Alexandria Library site) you can see this evolution in action:

Important Note: I am not a design expert by any means, these are just my thoughts on things based on my own experience in web design and being a web user.

• 2001 - Mostly text on a white background, seems to be trying to stay low-bandwidth for dialup users, not many images. It seems like they are attempting to get as much info in as quickly as possible. Design is built mostly with tables.


• 2002 brings us a more intense design, the logo is larger at the top, sections are defined with bright color headers, the sidebar menu has changed from a light sky blue to an eye-catching dark blue. It's meant to be bolder and more serious. The design is still created using tables, but with a lot more Javascript. Interestingly, the first bit of Javascript is a CSS fix for users browsing with Netscape.


• 2003 through 2005 stays essentially the same, proving that sometimes a good design just works. Gone is the placating of low-bandwidth users. Headers, search bars, titles, all made with graphics adorning them. The main story takes center stage, allowing browsers immediate access to "what's important right now". While CNN, and most other news sites have always had a "headline" story, this took it to a new level on terms of real estate dedicated to one piece of information. Very little changes over the years, the Google-powered search becomes a Yahoo-powered search and in 2005, they introduce RSS feeds to the site.



• 2006 sees the first steps towards the latest "Web 2.0" trends with embedded video, some rounded corners, etc. There's a higher level of integration with the specialty shows on the network, blogs by anchors and other journalists, and a streaming video pay service that drops the latest content to your computer as it's happening. While some divs sneak into the code, it's still a table based design. But I don't consider any of that to be the big design change. The big thing to me is that they finally broke the 800px width barrier. Just that little change allows them so much more space to work with, finally breaking the crowded busy atmosphere of the earlier iteration.
  


• It wasn't until just a few months ago that CNN really hit the level of interactivity and design that I expect in "current" sites. Here it is. Finally, built completely out of div layers, and fully AJAXy in implementation. Obviously, the design is different. The big blue side bar is finally gone, turning in a seamless and almost unnoticed top menu. Data is streamed into the site, allowing for you to see popular topics, most viewed and most emailed pages, etc. The "main" window of the whole page, holding the summary of the headline story and the other top headlines in one place, and refreshes automatically via AJAX. The "ticker" provides a live feed of incoming stories and updates to stories. A "Developing Story" bar sometimes fills in between the top bar and the content, alerting you to what's occurring now. The whole format of news delivery puts you in the moment, getting up-to-the-minute information. It has a user-oriented methodology as well, focusing a good deal of their space on what is popular and being viewed.
  
  What gets me the most about this design is in the stories themselves. I was shocked to see this feature added in when this version of CNN.com was beta-testing, but they have a "Story Highlights" section at the top, like a Cliff Notes version. The title section of the story's page, which is definitively separated from the story, has the title, then three or more little bullet points giving you the pertinent information, however generalized it may be, and directly under, has a link to the next story in that section. They are inviting users to "skim" the news, get the basics, and move on. While I abhor the thought and think this is where misinformation comes from, for a modern web-user, busy and not able to read EVERY story out there, it gives you a wonderful preview function to see if you want to continue down to the story below.

Long story short, you can see how the focus has shifted from getting the information up there for the lowest cost in bandwidth to making it look as good as possible and stacking features on top, to finally resting on a low-impact, high-usability web site.

When I think about these sites, I wonder about how I could better optimize my own design, and, of course, I wonder how I could possibly match the simple beauty and function of the Windows Live website. Is it enough to have a really really nice menu bar across the top that does everything you need?