How Tall and Wide Should I Design My Website?

Wednesday, August 15th, 2007

Categories: Web Design, Web Usability

RSS Comment Feed

Trackback

AddThis Social Bookmark Button

Web Usability Series It seems that this often comes up in discussions, talked about by amateurs and professionals alike. Sometimes, you just aren’t sure what the best dimensions (width and height) should be for the website you’re designing. You could be designing a content-driven site, or you could be designing a one-pager using Adobe Flash, whatever you’re doing, this is important information to know. Please keep in mind that this information is regarding fixed width websites. This advice does not apply to fluid layouts.

What Should My Webpage’s Width Be?

Let’s get right down into it. Your webpage’s width should be as small as it has to be to fit comfortably in your viewer’s smallest resolution without creating horizontal scrollbar. Users generally do not like having to scroll through a page horizontally. If they’ve been scrolling vertically for most of their web browsing lives, why make it complicated and add a second dimension? You need to set your width so that this is prevented.

What Resolution Is Your Audience Using?

This is the biggest question you should ask yourself before designing your website. There are users out there that still use 800×600 resolution on their desktops. As an example, the library down the street has 30+ computers, constantly in use by students and seniors, that run at 800×600. Are you attracting a very broad demographic? What age group are you targeting? What kind of content will you have?

Given those questions, you have two options:

  • Design for users with a resolution of 800×600 – This is your very broad audience. Nobody is forgotten. Everyone will be comfortably able to see your website.
  • Design for users with a resolution of 1024×768 – This is riskier, but is considered the standard by most. If you aren’t targeting those broad ranges of demographics, go ahead. You gain a lot of content room and room to play with. As long as you use it to your advantage.

How Many Pixels Wide Should My Website Be?

Now we’re getting into specifics. If your site is exactly 800 pixels or 1024 pixels wide, there are a few issues that come into play:

  • The Vertical Scrollbar – Even if you don’t plan on having content expand vertically past the viewable section of the website, some browsers (IE6+) have the vertical scrollbar turned on by default.
  • The Browser’s Border – Even in full-screen mode, some browsers (IE6+) have tiny borders that line the sides of the screen.
  • Not Really in Full-Screen – Not everyone is as computer savvy as you and I. Some users may have dragged the corners of their browsers to take up the screen, leaving even more borders to the left and right of your website that you need to consider.

As a conclusion, I suggest that if you’re going for a specific width on a website, the maximum width’s for your website should be 745 pixels for 800×600 resolution and 970 pixels for 1024×768. Of course, you can probably go about + or – 5 pixels, but that’s up to you.

What Should My Webpage’s Height Be?

Please note that this section applies only if you’re building a website and you don’t want the user to vertically scroll, for example, a flash site, or an design/art oriented website. This also applies if you want to optimize your website so that your most important content is above the fold (in the browser’s viewport before a user has to scroll).

What Resolution Is Your Audience Using?

This section applies exactly the same way it did for determining your website’s width. Will your user’s occasionally be viewing from an 800×600 resolution? or an 1024×768 resolution minimum?

How Many Pixels High Should My Website Be?

What you want to figure out, is how much height (in pixels) is left after OS and web browser take their own space. There are a few issues that come into play:

  • Start Bar – The Windows Start Bar is displayed by default, most people don’t turn on Auto-hide. It’s also possible that some users have stretched this so it spans two rows.
  • Browser Components – This includes: Tabs, Title bar, Status bar, Back/Forward/Stop buttons and Navigation.
  • Toolbars – Google toolbars, MSN toolbars, Firefox extensions, etc. All of these can also take up space.
  • Not Really in Full-Screen – Like discussed when trying to determine the width, some users may have dragged the corners of their browsers to take up the screen, leaving even more borders to the top and bottom of your website that you need to consider.

As a conclusion, I suggest that if you don’t want a vertical scrollbar, the maximum height for your website should be 330 pixels for 800×600 resolution and 500 pixels for 1024×768. Of course, you can probably go about + or – 5 pixels, but that’s up to you. These are also the heights (in pixels) of the pixel length of the content that will be definitely be viewable when a user enters your website, without having to use the scrollbar.

Hope that helps for some of you designers out there. :)

I’m very aware I’m not following my own guidelines, but I don’t want to sacrifice line length for the sake of filling up a page.

Bookmark this blog using any bookmark manager!
Subscribe to Pat-Burt.com via RSS
Tnx.net