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


Related Posts


Subscribe to this Post

21 Responses to “How Tall and Wide Should I Design My Website?”

  1. Michael Ott Says:

    Designing web sites for fixed width is a pretty dated approach now-days. Fluid is the better approach. Use CSS. Fluid will fit regardless of desktop or hand held device resolution.

    This blog for example, has no reason in the world to be fixed width. Why not fill the screen? Keep your right column fixed to it’s current width, but the main content area should be as wide as the browser will allow.

  2. Diogo Stuart Says:

    And when using CSS the em unit is also a fantastic solver of different platform resolution because of its size hierarchy.

    I find it very useful using CSS and modular designs that work on different resolutions and can be flexible enough to work with web apps. Of course saying it and doing it are two different things.

  3. Adam Says:

    Thanks for dropping by my blog. I have to agree with Michael. Fluid templates will solve the problem of different screen resolutions. However, my own blog uses a fixed width and I am facing some problems changing the template to a fluid width.

  4. Patrick Burt Says:

    @Michael + Adam

    Thanks for the comments. The main reasons I use fixed is because long line lengths hinder readability and if content is filling 100% of the page, I can’t help but feel stuffed up or overwhelmed. But yes, you do bring up a good point. Sometimes users will solve the problems i listed themselves by resizing their window.

    @Diogo

    Thanks for the comment. That may be the solution we’re looking for. I have some research to do. :)

  5. Alix Axel Says:

    Good tips, fluid layouts are great tho! ;)

  6. Make Money Blogging Says:

    Unrelated to the topic…

    Why don’t you have a blogroll or favorite links section?

    No love for other bloggers?

  7. Patrick Burt Says:

    No friends. :(

  8. Brown Batch #19: Link Love Fiesta » Brown Thoughts Says:

    [...] Burt – How Tall And Wide Should I Design My Website? Sometimes, you just aren’t sure what the best dimensions (width and height) should be for the [...]

  9. cooliojones Says:

    Oh Pat, you’ve got friends! Don’t give me that. Your blog looks great and has good info. You can be friends with me and Make Money Blogging! :D

    My New Hustle | Make Money Online
    Be the man, stop working for him.

  10. Patrick Burt Says:

    That link looks familiar! You’re from One Year Goal!

  11. Patrick Burt Says:

    Hey all, I made a new post comparing fluid to fixed layouts. Check it out, tell me what you think. Be critical. :D

    Fixed vs Fluid website Layouts

  12. Thomas Says:

    Overall I think width and height are important, however, set vs fluid…I think the line is getting thinner. Sure it’s spiffy to have a site that is fluid, however, the majority of people are getting larger and larger screens…so, what’s gonna happen when screens want sites wider than 1024? LOL Now you’re really in for it. Fluid now a days looks great when it scales down, what about when it scales up? Great post, good stuff.

  13. Patrick Burt Says:

    Good points Thomas, appreciate the comment. :)

  14. Robberto Says:

    Shouldn’t your last header “How Many Pixels WIDE Should My Website Be?” be changed into “How Many Pixels HIGH Should My Website Be?”

  15. Patrick Burt Says:

    Good catch, thanks Robberto.

  16. Sefer Says:

    An old post I know, but I’m wondering how wide is this page? No one ever mentions how wide their own pages are when they’re writing about width!

  17. Patrick Burt Says:

    970px…

  18. David Uno Says:

    Thanks for the info. I will be updating my website thanks to your info.

  19. masterpapers.com Says:

    Fantastic goods from you, man. I have be aware your stuff previous to and you are just too magnificent. I actually like what you’ve received here, certainly like what you are stating and the way in which wherein you say it. You make it entertaining and you still take care of to keep it wise. I can’t wait to read far more from you. That is actually a wonderful site.

  20. OPatrick Says:

    good article, but it is now 2012 – how have the statistics changed as far as % of users using 800 x 600? Is 1024 x 768 the new 800 x 600?

  21. Property Directory Says:

    Unquestionably imagine that which you stated. Your favourite justification appeared to be at the internet the simplest thing to be aware of. I say to you, I certainly get annoyed even as other people think about worries that they plainly don’t recognise about. You controlled to hit the nail upon the top and also defined out the entire thing with no need side effect , folks could take a signal. Will likely be again to get more. Thank you