What is the Standard for Screen Resolution?
It depends on who you ask. College students studying web will tell you 906 million by 679 kajillion. Whereas my mother’s desktop would differ, with a whopping 800px by 600px resolution. Why? Because that’s how it came when she got the computer.
Now there are lots of compelling stats out there. For instance, w3schools has nifty screen resolution chart pulled from their web traffic. This would lead you to believe that the era of 800 x 600 is over. But, before you hoot and holler keep in mind knowing your end user is super important. Also keep in mind mobile is on the rise, so the small screen has come back for a sequel. That is unless the iPad takes over the world.
There Really Is No Standard? Right?
Too often students ask me “What resolution should I design for”? My answer usually falls somewhere between “it depends on what problem you’re trying to solve” and “Who is the target audience”? After they roll their eyes I usually direct them towards the nonstandard standard of 960 pixel width made popular in part by great resources like 960.gs.
Although a 960 grid is a great resource it only solves half the problem. What about the area of space before a user is forced to scroll? Sparking an entirely different debate. To scroll or not to scroll. I don’t intend on addressing that debate here, but it is good to know there are a few different camps out there. The pro-scrollers, The funny guys and anti-scrollers. Although the anti scrolling crowd is not well documented it usually comes as a request from your boss.
Lets just assume that scrolling is going to okay. So you’ve set up a 960 pixel wide document and well… you’ll figure the rest out later.
Don’t Cut me off!
As a result of figuring it out later I see many young designers create good concepts that stop right at the edge of the unofficial 960 width standard. It looks great in Photoshop, but inside of a browser it looks a little empty against a huge block of white poking around the corners. By this time deadline is quickly approaching so it’s time to just get-r-done and the typical next move is to reach for a background color or to create some sort of pattern. Both of which hurt the initial design concept and are forced to fit because of time constraints. Instead of force feeding design element why don’t you employ a Web Safe Area.
What is a Web Safe Area?
It borrows from video safe frames idea. Basically it’s a guideline identifying an action safe area and a type safe area for your television. Anything falling outside of those areas could be cut off on some TV’s. The use of safe frames in video is very interesting. Instead of cropping all of the footage to the minimum size, the video industry goes the other direction. If you have it, you can see it. So if you’ve got a TV that allows for viewing outside of the safe areas, then you’re rewarded with more of the picture, but the titles and action still fall within the guidelines. Now I know not everyone follows this rule, but if you own an HD TV you know exactly what I’m talking about.
A Web Safe Area is the same idea. Section off an area of your design that has all of the important stuff, like content and navigation. But don’t stop the design there. Allow it to spill out. It not only gives you a better idea on a safe height before scrolling, which is typically 600pixels, it can help you design in “screens”. Which is the idea of chuncking your design into scrollable screens. Apple does a great job at this.
Below the What?
Another really popular user interface design concept is the below the fold. This is relating the unscrolled area of a design to the front half of a newspaper viewed from a newspaper machine. Typically formatted with large images and headlines. Then as you “unfold” or scroll you get a sectioned off column based layout with features, links, and resources. The Web Safe Area can help with this philosophy as well.
In fact the visitphilly example, designed by the pros at Happy Cog, featured in the Web Safe Area document employs chunking and a below the fold feel. You can clearly see how their design continues past the “safe area” to really fill out the experience.
Where to Go From Here?
Download the Web Safe Area template and try it out on your next project. Experiment with creating a full browser design and track user feedback. You might be surprised at how much positive feedback you’ll get from addressing pixels that a limited viewer base gets to see. Think of it as progressive enhancement for design. Now I know It doesn’t really solve the no standard screen resolution size, but it’s a good place to start.
