Test your blog in different screen resolutions

Have you ever considered how your blog might appear to your readers and visitors? I mean your blog may look good when you view it on your computer, but will it appear the same if you were to view it from a different computer, with a different screen resolution?

A blog with fluid-width templates stretches (or shrinks) as resolution changes. Columns or sidebars may lose their alignment, drop to the bottom or simply go out of sight in lower resolutions.

If you don’t know for sure how different resolutions affect your blog, it might be a good idea to test it, especially in resolutions lower than your computer’s. No, you don’t have to use different computers to do that. You can do it online.

[Updated Feb 2013] Replace the old tool (no longer available) with a new one. Update mobile previewing to reflect changes in Blogger user interface.

Testing your blog

1. To test your blog, simply visit Screenfly web page.
2. Enter your blog URL and click Go button. Your blog will appear inside a frame.
3. Select a resolution using the icons (Desktop, Tablet, Mobile and Television) located at the bottom of your screen. The iframe will be resized to match your selected resolution.
4. Test with different resolutions and observe if your blog layout changes as you switch between resolutions.

Note on smartphones

As you might’ve known Blogger has introduced mobile template a while back. If you’ve activated Blogger mobile template for your blog, it should automatically switch to mobile template when accessed using a (webkit-based) smartphone. This resolution tester however, is a mere screen resizer; it will not cause your blog to switch to mobile template, therefore it will not show the layout intended for smartphones.

To preview how your blog would actually appear on iPhones and other smartphones, go to Blogger Dashboard > Template, click the gear icon under “Mobile” and then click Preview button.

Which resolution should you optimize for?

You can use the data from w3schools.com as a guideline. As of January 2011 most web users that visit w3schools use screen resolutions higher than 1024x768 pixels.

Date (updated)	Higher	1024x768	800x600	640x480	Other
January 2012	85%	13%	1%	0%	1%
January 2011	85%	14%	0%	0%	1%

If you want to see data specific to your blog, open Google Analytics and go to Visitors > Browser Capabilities > Screen Resolutions.

According to Google Analytics, only 1.5% of visitors access this blog using resolutions lower than 1024px wide. That means this blog (at 960px wide), should look fine and remain user-friendly to 98.5% of its visitors.

How about your blog?

Enjoy!