When designing and updating your websites, you need to consider the different types of ways your visitors view your websites through their browsers. Screen resolution, operating system, and browser type are the major factors to consider for maximum compatibility for your visitors. This will be a series of 4 articles over the next 2 weeks discussing the different aspects browser compatibility testing and providing you with the right tools to get the job done quickly. First lets dive into screen resolution trends and browser compatibility testing.

Current screen resolution trends

The current standard when creating a design layout is 1024×768 or larger screen resolution, up from 800×600 just a few years ago. Now that larger monitors are cheaper, more home users and public places have bigger screen resolutions. This new trend in screen resolutions can be see in BlueJar.com’s own stats:

Check your stats for your own trends

The current trend may be 1024×768 but you should still check your own stats to see what your the majority of your own visitors screen resolution is. BlueJar.com visitors are mostly webmasters, developers, and bloggers who tend to utilize the a larger screen resolution. If you find that your visitors screen resolution is smaller, than by all means design for your audience but do test in larger screen resolutions to insure that your website is still “readable”.

In Google Analytics go to Visitors > Browser Compatibilities > Screen Resolutions.

More space to display content with higher screen resolutions

Bigger screen resolutions mean bigger space to display your content. You do not have to restrict your websites to 800 px wide page designs anymore. You can expand your page layout to a comfortable 1024 px without causing scrolling to the majority of your visitors.

As you can see in the diagram above, there is a lot more space you can now utilize in your page designs. The extra space can be used for additional navigation, news, or advertisements.

Keep your main content readable

Just because there is bigger space to place your content, you still keep your reading space readable. Having your main content run all the way across a 1024 px screen (or even larger) will make your website very hard to read. The area where your main readable content goes should be around 500-700 px wide. If you take a look at how newspapers are laid out, they have broken up their content into very short columns spanning across the page. Also when you look at very large books, they do a very similar page layout by breaking up into 2 or 3 columns to allow the content to be easily digested and readable.

Testing screen resolution compatibility

There are many different ways to test your page design against the popular screen resolutions. An easy one that everybody can do is to change their own screen resolution. If you have 2 or more monitors, you could also set a different screen resolution for each. This however can become a bit tedious overtime and you probably don’t want different screen resolutions on each monitor. If you have FireFox, there is a window resizer plugin that will allow you to change you’re your browser size instantly to the popular screen resolutions. Here is a screenshot of the FireFox plugin interface, pretty simple:

There is also a Internet Explorer version of the same plugin which can be found at Yellow Pipe, the creator of both plugins. Keep in mind with the window resizer that your toolbars and other browser configurations may change your viewable browser size.

When testing for screen resolution compatibility just make sure that your content is readable and when viewed in different screen resolutions, the content does not overlap or become unreadable. Check back next week when I cover operating systems and browser type compatibility.

If you liked this post, subscribe to my full RSS feed. Learn more about rss feeds with my quick guide. You can subscribe through e-mail too.