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.



Posted By: PixelHead on 03/31/08

I love the Fixed width left align with the photo...really sweet layout.

Posted By: Steven Snell on 03/31/08

I have never really paid much attention to the Dreamweaver templates for some reason. In fact, I didn't know the existed for a long time. I'll take a look at them because if they are good they could definitely save some time.

Posted By: E. I. Sanchez on 04/01/08

Matt, I know this is not related but - what about writing some free HTML Editor overview - DreamWeaver is great but most of us can't afford it.

Posted By: on 04/01/08

I'll definitely consider that for a future article, Edgar. I can see where that would be beneficial. I'll have to do some research first, though, because it's been awhile since I looked around at the free HTML editors.

Posted By: Lapland Holidays on 04/01/08

Great article, thanks. What do they call the design where everything is based on em's? Was is it liquid? Or fluid?

Posted By: Johannes Neumeier on 04/01/08

"Posted By: PixelHead on 03/31/08 I love the Fixed width left align with the photo...really sweet layout." second that - also my favorite, visually judging.

Posted By: David at WebModia Studios on 04/01/08

Great article. I have in the past favored the fixed-width centered layout option, but it is feeling a bit stale and certainly not always the best option for every project. I think the key point which you made was that the solution obviously needs to be tailored to the design AND content requirements of the project or client. One other route to go here is to use a small bit of unobtrusive JavaScript to serve up a tailored CSS layout depending on your visitor's screen resolution. I�ve recently started using this technique for projects that require a bit more flexibility than the methods you�ve touched on above. I won�t drop any links here :) but do a google search... The concept is generally referred to as �dynamic layouts� �adaptive layouts� and �resolution dependent layouts� � there are a few published variations on the technique.

Posted By: on 04/01/08

The em based layouts are usually called "elastic layouts".

Posted By: Chris on 04/01/08

Nice article. Been reading this blog a while now, but this is my first comment. Yay. Anyway, good info here. I'm mega-new to web design and I've already had to implement the first solution a couple of times. The other solutions are definitely something I will have to remember for the future.

Posted By: on 04/01/08

Thanks for the comment Chris. Glad to have you here.

Posted By: Jermayn Parker on 04/02/08

Yeah I agree with others. I really like and am impressed with the left aligned layout. I have never actually designed anything like that before. Now im curious...

Posted By: Stever on 04/02/08

I don't know what you call it, a variation on the fixed width centered with background perhaps, but I like making the header and maybe footer be allowed to expand to the full width while their contents remain within the fixed width. Of course the body of the page remains centered. Kind of like what you have going on here in your blog.

Posted By: on 04/02/08

Stever, yeah as far as I know there's not an official name for it, but as you can see, I think that layout works well also.

Posted By: Richard on 05/04/08

If you go through the trouble to detect the user's screen resolution; other than just adjust the layout; why not also adjust the font size. So that not only can a user with a low resolution can read the text; but also someone with a "high resolution" can read it.

Posted By: on 05/05/08

Richard, yeah, I briefly mentioned the EM based layout. I'll probably be posting a tutorial in the near future.

Post Your Comment

Comments are closed.