Resource Center

When preparing for a redesign, one of the main issues that arises is that of screen resolution. So what's the best way to go? The easy answer is that it's a call you need to make on a case-by-case basis. While we agree with that, there's always one constant - keep the end user in mind.
Usability expert Jacob Neilson identifies the three main criteria in optimizing a page layout for certain screen sizes as:
Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a trade off between how many items are shown vs. how much detail is displayed for each item.
Readability: How easy is it to read the text in various columns, given their allocated width?
Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly -- that is, are captions immediately next to the photos, etc.?
Most of these points are on target, although the statement that users don’t scroll is a debatable one. Key information should be visible without scrolling, but secondary information can fall below the fold. If that's the case, there should be a visual indicator like a headline or image that leads users down the page.
1024 x 768 screen resolution is a bit of a misnomer. Almost all computer screens display at the equivalent of 72-96 ppi (pixels per inch). However, when most people refer to screen resolution they actually mean screen size, or the number of pixels that are displayed on the screen.
Back in ancient times, 800 x 600 was the most popular screen size, but over the past few years 1024 x 768 makes up the majority of the market, due in large part by the influx in widescreen laptops. This 2006 study shows the growth of 1024 x 768 and higher screen sizes.
It always comes back down to knowing your audience and designing accordingly. If your audience is a group of savvy gamers, go big and know that that experience is enhanced by that choice. If your audience includes even a small number of students, people with disabilities, or users on public machines, you’ll want to consider scalability.
So now that you have chosen the screen resolution ideal for your audience, you should be ready to begin designing to those exact parameters right? Not exactly.You can’t forget to consider things like the chrome of the browser that takes up 50 pixels of real estate. Also, despite the fact that many people have increasingly larger screens, they are less likely to view their web content on a fully maximized browser window.
Try using 1024 x 768 as a starting point, then design and code a site that can degrade gracefully to both 800 x 600 and 1024 x 768. Degrade, in this instance, means that areas of content shift depending on the size of the users screen. Using a “fluid” or “liquid” layout enables the user to maximize and minimize the browser window and have the content stretch to fill the page regardless of screen size. Positioning is set by percentage to ensure that relationships between elements within the design remain intact. This is especially applicable with the greater number of people viewing websites on mobile devices.
While it is relatively easy to design a text-heavy site to liquid layout, designing an image-heavy design is more difficult to execute. A great example of this done well is Vivabit. Notice how the image of the leaf recedes behind the copy when the window is minimized. Because of the variable nature of fluid/liquid layouts, it's important to plan how certain sections are going to stretch in every instance. It’s easy for content to wrap in unexpected ways.
Many sites have started creating different stylesheets for different media types (print, screen, etcetera). You can also use a unique stylesheet for different screen resolutions. Using JavaScript, you can test for resolution and then load the corresponding stylesheet. Modern web design has reinvigorated a typographic renaissance to a new breed of designers that embrace purist views on layout and grid usage in layouts. A growing number of designers are using 960 pixels as a benchmark to develop “fixed” layout grids systems from. 960 is conveniently divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16, making it a very versatile for creating grids. Fixed width means that the design is optimized for a specific screen size. If your audience is using a smaller screen, they will have to scroll horizontally to see all of the content. Fixed designs have several advantages over fluid designs when it comes to control and consistent legibility. 960 also tends to be compatible with most IAB banner ad sizes.
Even with current research showing a clear dominance of larger screens, it is still crucial to look at your analytics and learn about your audience and their habits. This will ensure that your design choices have meaning and that ultimately you have succeeded in meeting your users' needs.
Featured Download
Wacom products have become such an essential tool to digital artists. The company bridges the gap...