USR? Unidentified Screen Resolution.
We human beings tend to be a little egocentric. We think that everyone else sees the world the same way we do – down to a website on their computer screen.
Even leaving iPhones and other teeny devices aside, standard computer resolutions vary in width between 800 and 2000 pixels and in height between 600 and 1200. That makes a really big difference in how much of a website you can see immediately upon opening it in your browser.
Why is it important how much people can see when your site first flashes onto their screen? Because people are impatient. If they can’t see your amazing video when the page first loads, there’s a good chance they will never see it. They may click a link in the menu. They may decide there’s nothing interesting here and press the back button. They may scroll down and find it – but there’s a good chance they might not.
On the other hand, if your video is staring them in the face when the website loads, they can’t help but see it. And then there’s a much greater chance that they’re actually going to end up watching it.
So how do you step into someone else’s computer’s shoes and see how your website looks in a resolution different than your personal favorite? That’s what we’ll discuss this week. Next week we’ll talk about how you can figure out what screen resolution you should be designing for using Google Analytics.
I found a few screen resolution programs, the two best being:
They seem straightforward enough: type in your URL and then by clicking on the different buttons that specify popular browser sizes, you can see how your URL looks in those browsers. You’ll see where the screen would end, and where you would have to start using the scroll bars, both vertically and horizontally.
But if you try the same resolution on the same URL on both programs, you’ll see that they give significantly different cut-off points.
For example, here’s our site at 1024×768 on screen-resolution.com:
And here’s our site at 1024×768 resolution in viewlike.us:
Why? Why can I see further down in the 1024X768 version on viewlike.us than in the 1024X768 version on screen-resolution.com? Which is correct?
So, they both are – it all depends on how the person with the 1024X768 resolution is viewing your website.
If they’re viewing it in Internet Explorer, then screen-resolution.com is 100% accurate (well, almost. See caveat below). It actually tells you when you get to the site from another browser that it’s meant to work on Internet Explorer. If you look at the image, you’ll see the toolbars and other information bars above and below the actual webpage, which leaves less room for the page itself to display – as it does in real life on any web browser.
Now take a look at the viewlike.us image. No toolbars or other bars of any sort. Viewlike.us gives you a view of your site at the given resolution – provided your website is the only thing on the entire screen. But even the most minimalist browsers don’t work that way – and if you have a power user of Firefox with 4 extra toolbars – he’s going to be seeing about half of what viewlike.us shows.
It seems that the majority of people still use Internet Explorer (see two graphs below), although the gap is closing. Does that mean that screen-resolution.com is the way to go?
Because (as I realized when trying to write this blog post on a different computer than having done all the prep for this blog post on), as you can see above, the above view of Internet Explorer is that of versions IE 8 and below. Why does this make a difference? Because IE 9 doesn’t have all the mandatory toolbars that the older version used to have. That means that the actual view of the web page starts higher up on the screen – which means that more of the webpage can show before you have to scroll. So this tool is great for seeing how your Internet Explorer visitors using 8 and below will view your website. (In fact, screen-resolution.com is so connected to IE8 and below that it won’t display properly on IE9. I had to use the “compatibility view” – the little icon of a broken page next to the refresh icon – to make it work.)
So what do you do? How do you figure out how people are seeing your site at different screen resolutions?
The above tools – and any tool – are very useful, as long as you’re aware of all the caveats and issues mentioned above. And as long as you have a decent imagination. Pick whichever tool you want – let’s say screen-resolution.com. You know off the bat how your site will look in IE8 or below. Imagine removing about three of those bars (two above and one below) – now how much of your site will show? That’s the view for IE9 and also the one for Chrome. With Firefox – well, Firefox is complicated, considering how the standard toolbars have changed over the different versions (many of which are in active use), and how many toolbars a power user can add to Firefox, reducing the available screen for viewing webpages. You may have to take a guess there – I would currently use the screen-resolution.com view to estimate Firefox also.
Okay, so now you know how people view your site in different screen resolutions, even on different browsers. What do you do with that information? How do you know where on your page you can put that amazing video for maximum exposure?
Stay tuned for next week when we take a look at making a custom report in Google Analytics which will help you apply your newfound information to your site and your visitors – and come out with practical conclusions for design.
If you want to know when our new posts come out, subscribe to our blog via email or subscribe via RSS. You can also follow us on Twitter or Facebook and get updates that way. Looking forward to seeing you!
Update: here is Part 2 of Do You Know What Your Website Looks Like to a USR? Happy reading!