Today, an interesting new google project was brought to my attention, so I thought I should highlight it some more.  It’s called Browser Size and it shows us based on google data what the most common resolutions are, that are used on the web today. (Well, what resolutions visit google each day)

To make a point. I am writing this entry using an AOC 23″ monitor with a maximum resolution of 1680 by 1050. I love the real estate for displaying all sorts of data and the bright display shows me the colors clearer than 99% of monitors out there. Now, it’s great for me, but on the other hand it also means that when I think a site’s colors are too bland or too bright, it might just mean that to the average web user it looks just right. Now, this has more to do with colors than with resolution so we may talk about that another time. If you want to read more about what colors to choose for your designs, click here.

Back to resolutions. The new google project is still in it’s labs phase but it brings up a good point. The majority of visitors are still using monitors that have resolutions below 1024 by 768. When designing our sites, you often see that designers are stepping beyond that with designs that are 1100 pixels wide or sometimes even larger. We need to realize that the majority of people will only be able to see a small part of the screen and as a result of that, our layouts must be adjusted. We can still (and IMO should still) design large layouts, but we have to place our content appropriately so users have access to the important links and buttons, no matter what their resolution.

There are a few tools on the web that can help with this. Google’s new Browser Size is partially useful in that it gives you a nice map of sizes, but the problem I immediately noticed is that it’s not yet able to properly display the map for sites that are centered in the display. Considering that most sites we see these days are centered on the screen, I’m betting they will fix that shortly. If not, tell them to by leaving your feedback via email.

A great tool to help you with web development in general is the Web Developer Add On for Firefox. If you don’t have it yet, get on firefox and download it now. Aside from all the awesome web dev tools it contains, there’s a small button that’s among my favorite options and it reads “Resize”. It allows you to set the dimensions you want to see the page at, and once you submit a width and height it resizes the browser window so you can see what a user using that resolution will see on their screen. It allows you to easily check your design at different viewing sizes. The only drawback is that you have to make it a flat image first so you can view it in the browser.

Another item to pay attention to when designing for different resolutions is that designs that fit on small screens, end up having a lot of empty space around them. A good way to avoid the site looking drab on large monitors is to add a simple background graphic that is larger than the main design so on larger monitors the design comes into view and keeps the site looking nice.

Taking into account what hardware your visitors are using can make a big difference in how they interact with your site and can directly impact how often users come back or what links they will actually click on. This in turn affects the revenue you can generate from your sites, which is obviously quite important as well. Now, if only we could convince everyone to just upgrade to better monitors like ours.

Random entertaining link with interesting old information about monitor resolution. Note they have the standards compliant button at the bottom

More informational wikipedia link. Not as entertaining, but the new resolutions are pretty awesome.

If you want to see how screen resolutions have changed over the years, try out the w3schools statistics.