Mirificam Press

3 Layouts that Handle Screen Resolution with Dignity

March 31st, 2008 in Design Tips & Tutorials

by: Matthew Griffin

There's nothing more discouraging than watching your beautifully designed website load on a screen with a resolution it wasn't built for. And it usually happens  when you're unveiling your work to a client. Other than browser variations, screen resolution is the biggest unknown we face. It's also a dilemma unique to interactive design which makes it difficult for people outside the industry to understand. In fact, even designers working in other areas of design have a difficult time relating. So let's take a look beyond the simple fixed-width / variable-width decision and zoom in on three creative solutions that can make the process a little less painful.

Solution 1: Fixed-Width Centered Design with Background

This solution is definitely the most common. The idea is that by centering a fixed-width website, you can make it appear to fill more of the screen than it actually fills. Add a pattern or gradient background and this solution works pretty well on most screens. Also, it's important that your design isn't too wide or you'll end up with lines of text that are a mile long. The fixed-width centered design keeps width under control and a consistent look from browser to browser.

Ligonier Ministries standard resolution (1024x768)

Ligonier Ministries wide resolution

Although this is the simplest fix, it comes with it's sacrifices. If you choose to optimize your fixed-width design for a low resolution like 800x600, all higher resolutions screens will display huge empty bars of pattern background on either site of your design. On the other hand, if you built to suite the next level of resolution (1024x768) you'll probably run into some users that are still running the outmoded 800x600.

My approach to fixed-width centered design is to design at 850 - 900 pixels wide. This width looks great at 1024x768 and maintains just a little sliver of the pattern background on either side of the content. 800x600 users will have a little horizontal scroll, but not so much that the site becomes unusable (800x600 is dwindling to extinction anyway). Super-high resolution screens, while adding additional empty space on either side of the design, won't leave you with the impression that the design is being swallowed by background.

Solution 2: The Jello Layout

The Jello layout has become more popular recently as CSS and javascript fixes are now readily available to overcome browser quirks. The jello design maintains a maximum and minimum width for a design; effectively making it a compromise between fixed-width and variable-width layout. The strength of the jello layout is that you can make it look good on just about any screen resolution while the maximum width ensures there will be no mile-long lines of text. A good rule of thumb that carries over from print design, is to keep columns of text to four inches wide or less for maximum readability.

The weakness of the jello layout lies in the same place as its strength. The expanding gelatinous nature of the jello design makes it unpredictable and difficult to design. For example, if you have a client who likes sentences to wrap at very specific places, the jello layout is probably not a good choice for the project. You can put a fixed-width text box in a jello layout but it always starts to look funny when you get up to higher resolutions. Here's a good example of the jello layout applied properly.

Max Design at standard resolution (1024x768)

Max Design at wide resolution

The key to designing jello websites is making sure that your maximum and minimum widths don't deviate too much from each other. A jello layout works well when it's allowed to vary a couple hundred pixels. But if you get carried away with expandability, you just end of with a glorified version of the variable-width liquid layout. If you're looking for a good guide to the ins and outs of max-width and min-width, check out this article over on Stopdesign.

A similar layout that I won't go into detail about here is the elastic layout. In the elastic layout, column widths are determined by the width of the default text size of the browser (em width). This type of layout gives the visitor more control over how things look.

Solution 3: Fixed Width Left-aligned with Photo Background

The left-aligned layout has seen brighter days. It was a great way to go when 800x600 was all you had to worry about. Now, the left-aligned site is pretty rare. But there is hope for the left-aligned website.

The left-aligned layout finds its greatest strength in familiarity. Since our natural reading motion is from top-to-bottom and left-to-right, the left-aligned website is a natural choice. But a large and varying number of screen resolutions virtually guarantees that you will end up with a huge chunk of unused space on the right side of the display. The offset photo background is a perfect solution to this problem.

With ubiquitous high-speed connectivity, large static photo backgrounds are now a viable option. But applying offset background photos that extend out to the right can be tricky. You have to choose photos and illustrations that will look good with just a sliver showing (for the low resolution visitor) and with the whole thing showing (for the high resolution visitors). Here's an example of a site I recently designed.

PBAF.com at standard resolution (1024x768)

PBAF.com at wide resolution

The fixed-width, left-aligned layout won't be appropriate for every project. But when it fits, it does the job well. Adobe.com's latest theme is another good example of this layout.

One More Resource

These are just three possible solutions to the screen resolution issue. If you use Dreamweaver CS3 and you want to see more possibilities, I suggest browsing some of the page templates. I had never even looked at them until it was suggested at a SXSW panel. Deamweaver CS3 has pre-made elastic, liquid, and fixed width CSS layouts. Even if you don't end up using them, it's worth taking a look a the code.

Post Your Comment

Comments are closed.