First time visitor? The tutorials start here.

Screen Resolutions

One thing you always need to keep in mind when designing a web page, is that it will never look the same size on everyone else’s screen as it does on yours.

What’s that? You read me right. Never. Yes, it will look the same for many people, but not even nearly all. Not only do you have different browsers to consider, but you also have things like mobile devices with their tiny little screens, as well as different screen resolutions and ratios. Here, I will focus on screen resolution just to keep it simple.

I’ve seen it so many times around the web. Some websites have a background image that is 1024px wide, which can often look horrible in larger — and sometimes even smaller — resolutions.

I recall one website in particular that had a background image which was supposed to basically frame the rest of the page, but I had to make my window smaller in order to see that effect because the background image was left-aligned with the page instead of centered on it, and it looked like it was designed for a 1024px resolution while mine was 1280.

Another website I recall seeing several years ago had an image chopped into three parts, which were all supposed to come together to form one larger image. One was absolutely-positioned at the top left of the page, another at the bottom left of the page, and the third at the bottom right of the page. This looked fine in one specific resolution, but at larger resolutions those three images were separated, and at smaller resolutions, they were all bunched one on top of another.

That said, it’s good to know what screen resolutions are out there and which ones are most common, so you can make sure your pages look their best no matter what resolution they’re being viewed in.

Most Common Resolutions

It used to be that 800×600px was the most common screen resolution out there. Now, it appears that 1024×768 may be the most common or it may be larger, depending on the source, but many people today still use 800×600px. As technology advances and larger screens become available more affordable, the most common resolutions are expected to increase along with those advancements. So, not only do we need to account for the smaller resolutions, but we also need to account for the larger ones and plan ahead for when they become even larger.

Whew! It’s a good thing we’re designing with CSS these days instead of tables, because it would be a nightmare having to re-code every page of our websites every time technology makes an advancement.

Target Audience

Many website developers say you need to know your target audience in order to determine what resolution to design for. But if you ask me, that’s taking the lazy way out. Sure, it might sound like finding your target audience’s most common resolution would take a lot of research — and it very well might — but come on. If 75% of your visitors are using a 1480 resolution and 20% are using smaller resolutions, do you really want to make that 20% of your visitors scroll sideways to read everything on your site?

No. That would only chase many of those 20% away, and may even cause some of them to say something bad about the design of your site.

Flexible-Width Layouts

Flexible-width layouts are designed to adjust to any screen resolution and/or window size, and will get wider or narrower as you re-size your window.

The width of a flexible-width page is defined in percent (%).

Pros

  • Will often fit any size resolution

Cons

  • If the resolution is wide, it can be difficult to follow from one line of text to the next while reading.
  • Can provide a false sense of security for the website designer, since large images will still create a horizontal scrollbar in many cases.

I used to be a firm advocate of flexible-width layouts a few years back, until resolutions started becoming wider and wider, and until I discovered how easy it is to break a good layout with an image that’s too wide for a smaller screen resolution.

I may go back to flexible-width layouts eventually, once older versions of Internet Explorer get phased out completely so we can start using min-width and max-width to get around those issues. As it stands, there are too many old browsers out there at this point that don’t recognize those CSS attributes.

While flexible-width layouts may or may not be the best (they are still great for many layouts), it’s always good to remain flexible in your way of thinking, in order to keep up with the ever-changing technologies.

Fixed-Width Layouts

There are two kinds of fixed-width layouts. You can define the width in pixels (px), or you can define it in em.

Defining a width in pixels is about as fixed as you can get. A pixel is a pixel is a pixel, while an em is relative to the font size on the page. Whatever font-size you have defined for the body, that is how wide one em will be when you’re defining the width of the page.

Today’s browsers have various sizing methods. It used to be that Internet Explorer wouldn’t let you resize text if it was defined in pixels, but they finally heard the visually impaired and made that possible. Now, not only can you resize text in many browsers, but you also have the option of resizing the entire page, including images.

So you need to ask yourself. When someone enlarges the text only, how will that look in a px-width layout? Will it put one or two words on a line before going to the next? And if someone needs to resize the entire page to see your images, how far sideways will they need to scroll in order to read your content?

This post isn’t to tell you which method to use, because different methods are better for different layouts, so there is no one rule to cover everything here. What this post is designed to do is to get you to understand what to look for, and plan for the different possibilities. But if you’re currently working on a layout and you have a question about the best sizing method (or width) to use, by all means, post a link to the page here and I’ll be happy to take a look. 🙂

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Comments (4)

CybertronicApril 21st, 2009 at 2:34 am

Screen resolutions (and IE6 lol) have always been really annoying for me. I’m sure people have a good reason to use 800×600 screen res, but I hate trying to design for it. It’s so much more easy to design a site for 1024×768 and up, and that is what I think I am going to do once I start coding again. On my linux machine I could set my screen res to 320×175 could you imagine having to always code for that? lol.

Anyway I was just bored and thought I’d come say hi.

LesaApril 21st, 2009 at 10:40 pm

Welcome, Cybertronic! 🙂

I agree with you there. It can be a pain designing for something as small as 800×600, and if I don’t think I’ll have a lot of people with that res, I’ll just make sure each column is small enough to fit inside that resolution. At least that way, people with such a small resolution can still read the content without constantly scrolling back and forth, and I don’t have to make the whole page quite so narrow.

Although I have no problem creating stylesheets for mobile devices, I can’t imagine making the main layout fit into 320×175. Wouldn’t it be nice if we could have a separate stylesheet for such a small resolution on a desktop (like we can now have a second one for mobile devices and a third one for print) without having to use javascript to sniff out the resolution? Or maybe browser developers will do something that makes it follow the mobile stylesheet after certain conditions are met… There’s an idea to pass along to w3c, if they haven’t thought of it already. 🙂

Pastor RickApril 22nd, 2009 at 12:28 am

With screen resolutions changing every two years or so I decided to use a flex-width design solution based on the middle ground 1152 x 864 screen resolution for most of my projects. The flex-width elements of design allow the project to look decent in the 1024 and 1280 resolutions.

LesaApril 23rd, 2009 at 7:22 am

You’ve done quite well with it, too. You have some nice designs. 😀

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.