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.
Testing your blog
Go to http://resolutiontester.com/, enter your blog URL, and select a resolution. Your blog will appear inside an iframe that simulates a computer screen. The iframe will be resized to match your selected resolution. Check 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.
For proper preview on how your blog would appear on iPhones and other smartphones go to BloggerInDraft > Dashboard > Settings > Email & Mobile > Mobile Preview.
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 | Higher | 1024x768 | 800x600 | 640x480 | Other |
| January 2011 | 85.1% | 13.8% | 0.6% | 0% | 0.5% |
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!
23 comments to "Test your blog in different screen resolutions"
This is a fantastic tool, thank you.
waduh bahasa inggris, Rusa gak paham e :D
*buka kamus*
That's impressive :)
Baru nyadar :D
Tapi apa daya saya gaptek HTML :(
wow... i just know resolution tester, thank you.
what a great and helpfull tool to test a fluid-width website
which i don't used, i always use fixed-width
Gak terlalu mikirin tampilan sih. Yang penting nulis
Thanks for sharing site that can show all the best resolutions of my website. So I can understand how it looks for other on different desktop resolutions
bisa untuk dicoba, makasih udah sharing informasi soal resolutiontester.com :)
Good info and very usefull for a web designer, thanks :)
Keren... Jadi bisa tau mana resolusi yang cocok buat websiteku.. :D
@Amri
Optimize your blog to 1024px wide and you'll make 98.9% of your readers happy :)
thanks for sharing this. I detected some errors on my blog in other screen resolutions. I just fixed it. Thank you for this.
Hello GL, very usefull site (resolutiontester.com), If I may, I'll recommend you to insert in this tutorial another usefull tip for site testing: browser compatibility - browsershots.org. I found this one, and it's ok. If you know another one I also want to know it :)
Hi there, my blog looks messed up on iphone screen resolution, but fine on 1400x900. Can't I fix one location for the gadgets so that on different resolutions it doesn't move and just gets re-sized? tnx
@Yvonne
You can activate a special layout just for smartphones: Blogger mobile template.
thanks green lava
Is it possible to use this on normal web sites. Thanks Vicky
@Victoria Froud
You can use it on all kinds of websites.
Thanks for taking the time to discuss this, really liked this article you have posted. i shared this on facebook.
This helped a lot!!
thanks for the post, i like that tool..
Nice article, thanks for the information.
A nice find mate. You can also use the[href="http://whatismyresolution.net/screen-resolution-test"]screen resolution test[/href] provided here!
There are many sites who let you view your webiste in your desired resolution.
To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool. Then paste the escaped code here.
If your question is unrelated to this article, please post on our Facebook page.