Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > Q: If I ask ten different web designers what pixel dimensions to use for web pages and whether to make them fixed-width or "stretchy," I get ten different answers. What's your answer, and why?

Q: If I ask ten different web designers what pixel dimensions to use for web pages and whether to make them fixed-width or "stretchy," I get ten different answers. What's your answer, and why?

The short answer is fixed at 974 pixels (px) wide.

The slightly longer answer is whatever it takes to get the job done.

The long answer is that asking a Web designer what size a Web page should be is like asking a painter what size a canvas should be or an architect how large a a building should be. While it’s not purely a matter of taste—there are certain physical and ergonomic constraints—personal preference accounts for the wide variety of answers you might hear.

Most designers prefer to work with fixed widths and fluid heights. That is, they like to set a specific width to the content of the page, but allow the content to flow down, using as much height as is needed, even if it requires vertical scrolling.

“Stretchy”—or fluid—pages are not as popular because they require designs that can scale based on the current size of the browser window, which can be trickier to accommodate, and most Web users today are not as comfortable with scaling content.

Although there are plenty of guidelines to optimal page design, the exact format and size you should work with will depend on three important factors:

  • The audience: Who is the intended viewer and what are their expectations?
  • Their screen resolution: Notice that I don’t say “screen size.” The specific physical dimensions of the screen isn’t nearly as important as the actual dots per inch the individual user has it set for. The higher the the DPI value, the more information fits on the screen.
  • The needs of the project: Consider what the best solution will be for the individual project. A news or corporate Web site will probably benefit from a fixed and solid-feeling layout, whereas music and art sties can push more boundaries with fluid designs.

Once you have considered these three factors, then you need to decide which layout format you need to use:

Fixed Width/Fluid Height

Using a fixed with and a fluid height is the most common format for modern Web sites. It provides a certainty to how the content is placed that many designers-- especially those used to print--will prefer. The width you choose will depend a lot on the size of the monitor you think your audience will be using. The general agreed upon standard today that will allow the majority of users to see all of your design without having to scroll vertically is 960-990px. The lower end leaves some breathing room on the left and right margins, while 990px ensures a snug fit if the browser window is open to full width.

If you are dealing with a potentially older or less tech savvy audience, though, you will probably still want to design an 800px screen resolution.

Monitor Resolution (width)

Page Width

800

750-760px

1024

960-990px

Example: Like many Web sites, Design By Grid uses a fixed width for its content.


Fluid Width

One of the most important differences between designing for the Web and designing for print is that with a Web browser, the screen can be resized on the viewer’s whim. Designing to allow content to make the most of the available width can be tricky, but ultimately more responsive to the user.

The problem with fluid width designs, though, is that reading very long lines of text tends to tire the reader's eye more quickly. One way to get the best of both worlds is to use CSS to set the minimum and maximum width of the design, such that it will never compress or stretch beyond certain points.

Example: The World Wide Web Consortium has a fluid width for their Web site, with the center column growing and shrinking as needed.

Fixed Dimensions

Setting a specific width and height to your design creates a fixed “stage,” generally centered in the middle of the browser window. Any extra space is filled with a solid color or pattern. These designs are most often used to contain all of the content of a given page in a single area so that scrolling is not required.

Example: I use this technique for my own portfolio, Bright Eye Media.

Fluid Dimensions

Allowing the design to scale its width and height to the maximum width and height of the browser window can have a high visual impact, but is difficult to achieve with Core Web Technologies (HTML, CSS, and JavaScript). You will generally see these types of designs using Flash, which can dynamically scale.

Example: The Netherlands site Summer Festival uses fluid dimensions to create an immersive 3-D experience.

Ask Me a Question!

Do you have a question about Web standards, CSS, JavaScript, Ajax, interaction design, user experience, or Web typography? Maybe you just want to know "How'd they do that?" Submit your questions, and each week I will select a question to answer via this blog. 

Win a book! Each week the person whose question I choose will win a copy of my new book Speaking In Styles. Ask your question now at http://www.peachpit.com/askweb.

Comments

comments powered by Disqus