October 22, 1996

Not bad for ’96. The navigation is, unfortunately, an image map. The site is layed-out using tables, though you should note that that was virtually the only option back then.

May 9, 1998

Hey! Why don’t they have that cool Apple Logo in the header? Remember a picture is worth a thousand words….unless search engines are involved. The “Hello, Pro, Go, Whoa” nonsense is dumb, and there’s a lack of textual content. The thing is all images! Note that already Apple is starting to add a huge image at the top of the page. It’s a proven technique that works for them, and they still use it today.

January 6, 2001

Unfortunately there’s a bit of a gap here, as the Wayback Machine botched most of the entries between 1998 and 2001. This design is an early version of the one that I remember as “The Apple Design.” You can see the plastic tabs, the pinstripes behind them, and the signature “huge image” below the header.

February 2, 2002

The Apple logo on the first tab, as you can see, is blue (instead of red) now that Mac OS X is out. The tabs are a little shorter as well, looking a little less top-heavy. This design is better live; you can see the animated iMac GIF then…

February 3, 2005

Now this is how I remember the layout being (until their very recent redesign). The pinstriped header with its plastic tabs, the large frequently updated image above-the-fold, this is it. This is the design that set several huge design trends. Surely you’ve seen all the websites that have duplicated the plastic tabs.

January 2, 2007

Despite looking so similar to the previous design, I just had to put this one in. This is my favorite incarnation of the Apple website. Why? First of all: “The first 30 years were just the beginning. Welcome to 2007.” That image alone does it. Then you have the products of the time period. You’ve got the new version iPod Shuffle, the iPod Nano, the MacBook/MacBook Pro, the iMac, the Mac Mini, the PowerMac, and then you have the iPhone announcement in a couple months. Then you have Leopard coming later in the year.

The Present

Whoa. Apple’s designers did a great job on this one. Everyone was copying the plastic tabs, and the old design was aging anyway. The brushed-metal navigation bar is the center point of the whole design. It stays consistent across the whole site, while the rest of the page changes. The page background is white on most of the pages, though it’s black on the main page to match the iPhone image (it may change when they swap images). This is probably the best of their designs. Want a deeper analysis of the current design?

February 1, 2001

That, friends, is what Harry Potter news used to look like. Not very good, is it? The Leaky Cauldron started out as a news blog covering the Harry Potter niche. Eventually they made contacts in the book publishers and with Warner Brothers.

December 13, 2001

Well, it’s a bit better. It still looks very ’90s-ish.

December 08, 2002

Isn’t this a bit of a step backward? Though I started reading Harry Potter in 2001, I’m glad I didn’t get seriously involved with Harry Potter sites until 2003… Even then, I used the site Mugglenet, though I switched to The Leaky Cauldron back sometime in 2006. PotterCast is what really got me to switch (along with the slick 2005 design and their longer more-detailed articles).

2004

For the year of 2004, TLC had this design. It’s a bit better than their previous ones, but it’s still not spectacular.

2005

This is one of my favorite web designs ever. From 2005-2007 this was what The Leaky Cauldron looked like. The header is very cool, and I like their four column approach. The most recent news article is featured at the top, with a scrolling list below it. An image cannot capture how dynamic this site is, you really have to see it live. See that scroll marked “Scribbulus”? If you hovered the mouse over it, it would unroll. And did I mention that all of the site’s content is loaded through AJAX?

July 27, 2007 (Present)

Alas, the design introduced in 2005 is no longer in use. Today, they introduced their new design. It’s still pretty darn good, but it lacks the dynamicism and cool look that the old one had. They stopped loading pages with AJAX, which is arguably a good thing. I like the new design, but I’m still mourning the loss of the previous one. The design featured above is subject to change in the next few days, as some bugs are still being ironed-out, so I’m not going to jump in and analyze it like usual.

Before we go, here are a couple of fun factoids about the Leaky Cauldron.

• It won a Webby Award in 2005.
• It’s JK Rowling’s favorite of the Harry Potter sites.
• It costs over $100,000/year to run.
• Borders Bookstores sponsors the site.
• Yes, it’s older than Mugglenet. It’s the oldest of all the Harry Potter sites actually.

October 12, 1999

Not much, is it? This is blogger when it first started. Back then there was no Blog*Spot hosting service. You had to host the files on your own web space. Too bad the Wayback Machine can’t get at the administration pages, it would be cool to see what the write post page used to look like. Oh well.

October 18, 2000

Well, it’s a major improvement. Still, I’m glad most major websites look better than this these days… I like the big “B” logo, introduced with this design, though I prefer it in it’s modern less-square state.

January 5, 2005 to Present

Can you believe those maniacs at Pyra Labs kept that “October 2000″ design for five years, until Google bought Blogger? The new design is pretty darn good. It doesn’t scroll at all at 1024×768 resolution, everything is nicely layed-out, and it convinces you to register with simple pictographs (perfect for some of the cavemen who use Blogger…). The logo is prominently displayed (more rounded than in 2000-2004) , with the login form beside it. My only real complaint design-wise is that some really useful links dwell way down at the bottom, where they surely go unnoticed on lower-resolution displays. If they could just move them up a bit somehow. Blogger.com has a truly well-made design, though I wish I could say the same for some of its users’ blogs…

Well, that’s all for now. Can you believe it though? Blogger has only had three designs in eight years of existence.

April 22, 1999

I despise (most) designs with a black background and white text. It’s hard on the eyes, and come on, that color scheme should have died with DOS!

December 7, 2000

Well, at least they expanded the resolution to fit a 1024px screen. I still don’t like the way it looks though. To top it off, the Wayback Machine missed a few images.

November 25, 2004

Yeah, finally a good design! The two blank spots would have ads, but the Wayback can’t capture them of course. This design firmly says “news site.” It looks pretty good, though it doesn’t have anything on the current design. I had to tweak this slightly in Photoshop, as the absence of the ads sort of screwed-up the positioning of the right column.

April 4, 2007 to Present

This is one of the coolest designs I’ve ever seen. I was surprised it had only been around since April, since I found Ars Technica (through Digg) in that month. The header especially is cool. I like the tabs and the background. Take a look at the website for the full effect. It’s cool.

October 22, 1996

Nothing says “90s” like a design like that! Okay… The yellow is a little hard on the eyes, but other than that it’s not too bad for the ’90s. My biggest complaint: Their shameless touting of Internet Exploder, er Explorer. Obviously I maniacally support Mozilla Firefox (download now, quantities are unlimited!).

November 17, 1999

Well, this is a little better. The header looks nice, though the content area looks a bit wrong. They have their Tech News off in a sidebar, while the navigations to various departments takes-up the main column. Shouldn’t it be the reverse?

May 26, 2001

They’ve switched from a liquid layout (tables) to a fixed design. This design is a bit better than the previous. A little bit of new content at the top, the “CNet Services” bit was carried over from the old design, and the header has definitely improved. There’s less yellow too. The only major problem is the “News.com latest stories” box on the right-hand sidebar. You can’t read it! The blue links don’t contrast enough against the dark background. That’s the kind of stupid mistake I hate seeing. How can you overlook that?

November 14, 2002

This design looks a bit more interesting. Unfortunately, the Wayback Machine is missing a large image in the header. I think it’s safe to assume that it was a yellow gradient that would site behind “CNET.com”. The design looks pretty good, and they’re using some stylesheets finally (though the layout is still done with tables). No <font> tags, unlike a certain site that was using them up until 2006…

December 15, 2004

AAAAARGH!! The yellow is back! Other than that, it’s not too bad. Again, the Wayback Machine is exhibiting one of it’s bugs. There should be a large banner ad to the right of the CNet logo, and a small square advertisement below the search box (see the gray bar in with the yellow?). Despite some minor tweaks, the design stays pretty much the same until August 2006.

August 20, 2006

This design is another fixed-width layout, though it’s designed for a 1024×768 resolution this time. It’s starting to look a bit more like the current design. I like their little “image-ticker” thing (I always forget what it’s called), though it’s not exactly the best of thing to put in such a prominent place. Personally, I’d have put a preview of the most recent article (and accompanying image) there.

October 18, 2006 to Present

I like the current design. There’s barely any yellow, the content is nicely layed-out, and the search tool is prominently displayed at the top. The navigation is great as well. The tabs along the top look cool, and offer upper-level navigation. Then there are some slick expanding menus off to the left side. This CSS layout is designed pretty well.

October 17, 1996

This is as far as the Wayback Machine goes. As you can see, Yahoo wasn’t a “portal” like it is today. Back in ’96, it was just a web directory, albeit a very popular directory. Take a look at the design. Reminiscent of Google, with just a logo and a quantity of links, it’s a very simplistic page by today’s standards (being a mid-90s design helps…). Yahoo has since ditched the minimalistic method of design, opting for a more image-heavy design.

January 9, 1997

By the beginning of 1997, Yahoo was still just a web directory, though they’ve put the categories in two columns. They’ve also started cluttering-up the design a little, though it’s still fairly clean.

November 16, 1999

Okay, Yahoo’s started to catch the dreaded “Yahoo Syndrome”. There’s an overabundance of stuff all over the page. As you can see, by ’99 Yahoo had started branching out a little. They had introduced Yahoo Mail, GeoCities, Yahoo Games, Yahoo Shopping, and a ton of other services. However, the navigation wasn’t terribly great.

September 27, 2002

Bit of a difference, eh? This is Yahoo as we know it now, but with a horrible design. I admit to liking it better than the primitive ’90s designs, but not by much. There’s too much crammed onto the page, crummy navigation, and don’t get me started on the code behind it. It’s full of <font> tags! Notice those bulleted lists? They’re not <ul> elements….they’re <br /> tags and • character entities! Take a look at the source, here’s the Wayback page. Oh well, I suppose it is only 2002.

November 16, 2004

Well, the design is better. It’s cleaner and less cluttered. Oh, wait a minute…they’re still using <font> tags? How dare they? It’s the end of 2004! Checking the Wayback Machine, this design is used until July 27, 2006. What design is released then?

Present Design: July 27, 2006 to the Present

Their best design yet. Not too cluttered, decent navigation, and pure CSS layout. Though I’m not a huge fan of Yahoo,I have to admit this is a pretty good design. Today Yahoo is a huge corporation attempting to excel in everything online. Thus, they have lots of “mini-sites” like Yahoo Tech or Yahoo Movies, in which the designs are a bit different. Personally, I think they need to unify their designs a bit more. It’s a little wonky having a different layout for each of their departments.

Before we go, here’s an interesting factoid: On the current design, all of the CSS declarations reside inside <style> tags in the actual HTML. Why? Yahoo is so huge, they decided to save bandwidth by putting the CSS to reduce browser queries. That’s one file being downloaded instead of two. Most people don’t have to worry about that, though.

Well, that’s the end. If you want to browse Yahoo’s design history, fell free to check out Yahoo’s Wayback Machine history.