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. 🙂