Test Your Blog On Different Screen Devices And Resolutions

Have you ever considered how your site or 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 on a different computer (with a different screen resolution) or on a different device?

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 screens and 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 device/resolution from the menu bar across the top of your screen. The iframe will be resized to match your selected resolution.
4. Test with different resolutions and observe how your blog layout changes.

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 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.

Update Dec 2013: Screenfly can now mimic the user agent of the devices you select using a proxy server. If your site/blog serves a different template for smartphones, just click the "Use Proxy Server" eye icon to see the mobile template in action.

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!