The Gates Notes, issues I have with the site

Today on Twitter Bill Gates's new site, The Gates Notes, was being passed around and it seemed that everyone liked it. I saw it and I liked the idea behind it, but to me the execution wasn't there. Here are the problems I have with the homepage.

1) Fonts are too small. Not sure who was looking at this site when they gave it the go ahead to go live, but how could you not feel that the fonts are just too small to read? I'm wondering if they seem bigger on a Windows machine (anyone confirm?), but without looking at the code I feel like I am reading 8px font. Let me rephrase, I go through the motions of reading because I simply can't focus my eyes on font that small for too long.

Bumping up the size 2px or 3px more wouldn't break the site or change how the design looks so I'm not sure why this wasn't done. Yeah I could bump up the size myself, but should I have to by default considering all the text is that small? It's kind of discouraging to see so many designers giving the site praise because I feel they didn't even try to read what was on the site. If you give the site a quick glance sure it looks good, but look at it for longer than 5 seconds and it starts to fall apart.

2) The navigation, what is it? I love doing cool stuff and pushing boundaries, but does that mean you create something that leaves the user questioning what exactly is going on? I see the links to the left of the side and I can only assume they are the navigation. They do this cool curve around a circle thing, but does that mean the links at the top are more important than the links on the bottom?

If you start to peruse the site and wish to go back to the homepage, isn't your initial inclination to go to the top of the sidebar? I keep on doing that, but then remember the home link is actually in the middle. Frustrating.

Maybe I'm the only one that has these problems with the site. Hope not.

Then there is a "view by topic" choice. View what by topic?

And for the record I use some small 10px fonts on this site, but I use them sparingly for a sentence or two. I don't expect you to read whole sections at that size.

Plus:

• Markup doesn't validate - FAR from it, in fact
• Functionality embedded directly in content
• 'View by topic' requires javascript
• Poor use of alt text

You'd think Bill would care a little more about accessibility. And those many different font sizes in several different faces don't help the design much.

And, whilst I'm at critiquing sites:

The comment parser inserts spurious line breaks which really screw up the layout "h2 { line-height: 0; }" totally breaks my display name

I'll stop throwing stones, now ;-)

I'll agree that the font's are simply too small. There is a lot of information on that home page, and if it's so crammed that the text has to be that small, something needs to change. Maybe take some out, perhaps?

However, I don't see a whole lot wrong with the navigation. I'm all for conventions and making things easiest for the user, but there comes a time when you have to think out of the box and I think the navigation does that. What I don't like is the "View By Topic".. You have to select Topic twice to find these topics. Rather, I think the Topic accordion should be open by default.

In all, I think there are positives and negatives. Doesn't really stand out at me much, though.

Ha, stones should be thrown when they are being used to help make this site better. You were the first person it seems to have a 99,000 char name write on the forums so it was the first instance of me seeing that. Fixed it up a bit.

Bill is probably too busy saving the world, but even he had to look over the site. It's funny how much thought went into the navigation, but the main header which tells you the section you went on is just some simple text.

If you know me then you know I'm all for thinking outside the box, but if that outside confuses the users then what is the point? Try something different, but shouldn't that different make things easier/better?

Interestingly enough, while inspecting the CSS they are using Avenir in their main body font stack, which is even tinier and harder to read at 12px. It would be the first non-designer catered site that I've personally seen with Avenir being used atop their stack. I would think that whoever worked on this site must have just forgotten to remove it or fix it up. Overall, I like the direction and layout so far.

Agreed, I like the direction and when my biggest complaint is the size of the font you know you are probably going in the right direction. It's an easy enough fix and you might have to adjust the size of some columns, but that shouldn't be too bad.

The one thing about font size is that when you first visited the site you are greeted with a lightboxed note with a pleasantly-sized font.

Also the page s could use some improvement.

Oh the tag got eaten. What I meant was that the page title tags could use some improvement.

Someone not named Scrivs needs to do a mockup of the site that shows some of the basic improvements being suggested here. Get to it!

A couple of things:

First, of course the site isn't going to look good on a Mac. Bill cares about as much as his site looking good on your mac as you do about your site looking good in IE 6. The font size you're seeing on your mac are considerably smaller than they are when viewed on a PC (in most any browser).

Secondly, Bill didn't hire a designer for this. Guaranteed some slack at Microsoft was given this assignment because there was still some money left to burn in some budget somewhere. As soon as he/she was done, they were probably let go.

Third, doubtful Bill has even seen the site, and probably could care less. It is simply a vehicle to promote the work he's doing through his foundation (which has a much stronger design, btw). He probably just simply logs on to his CMS and writes his articles.

Could someone link up a screenshot of how the site looks on a PC? I find it hard to believe that it could differ that much.

Here is my screenshot. you have to view the large one which is the original size.

Gates Notes on Flickr

Mine looks pretty much the same as Buddhan's screenshot, there.

I completely agree about the font sizes, but I'll throw in that the header colours are too washed out to be skim-read - there's very little contrast. Perhaps I need to calibrate my monitor again, but I doubt it.

The navigation is quite pretty, isn't it, but there's a definite unbalanced feel there due to the central home button and logo. My mind immediately ignores any navigation item above it as unimportant and, perhaps, even advertising - a sorry state of affairs for the most important items in the list!

To me the main problem is how nothing really stands out enough to grab your attention. We, as designers, should be guiding users through web pages, not simply dumping all of the information there with equal weight and contrast, then making it slightly pretty. At first glance, my eyes jump to the Annual Letter image which, when skimming, really doesn't actually mean anything.

The site is quite clean and good looking, but from a user's perspective (the most important perspective) it's one of those sites I'd have closed shortly after landing there.

Thanks Buddhan. Was that taken in IE? If so then the Windows and Mac difference is negligible and it makes me question if the person who created the site was someone that didn't have magnification enabled on their screen.

The site is quite clean and good looking, but from a user's perspective (the most important perspective) it's one of those sites I'd have closed shortly after landing there.

I guess clean and good looking only takes you so far huh?

Honestly, the site really doesn't make me want to read anything. Sure, the navigation might be unique, but that certainly won't carry a design. Like I said - I have no desire to read anything on the site... nothing stands out to tell me where I might begin, or at least to bring attention to the newest article.

actually that was in firefox... so maybe not as useful. here's one from IE8.

Gates Note in IE8

Yep, font size is still too small and like others have said, the colors are just washed out. Everything just has that "too light" effect going on. Maybe I'm just looking a this site with jaded eyes, but I'm reminded of late 90's sites instead of 2010.

Honestly, while i don't pretend to have any solutions, the appearance of the site and its function seem totally disconnected. I think Bill or whoever he set in charge of web dev, need to a look at the function of this site and design around that more than what appear to be fanciful whims.

Here is a great thought on that very subject. Simon Collison did a very interesting look at Bauhaus Ideology and bringing it to web design.

Someone needs to find the designer and conduct an interview. We need to get to the bottom of this.