Is there a standard webpage size?

[wildbill]

I'm using dreamweaver to build my site and i've been told by some that they cannot see the entire index page without scrolling left to right. I've made it on my 20" widescreen so it works fine for me. It's got me thinking: what's the standard size page if there is one that would be best for the vast array of monitor sizes out there?

ie 1248 x 878

vinny

 

[Dave Parker]

Well many eons ago, (about 5 years) we used to do them at 640 x 480, My wife currently runs our web business with over 400 websites to her credit as of this last week, and she still optimizes every single one at 800 x 600 and never has anyone complain they have to scroll, we as photographers work as higher resolutions than the mass majority of the normal web surfers hence the higher optimized size, but I would recommend either 800 x 600 or 1024 x 768 and you will not have to many problems with anybody seeing your website correctly.

Dave

 

[roteague]

That is way too wide. I would suggest designing your page for 1024x768 - make the page no larger than 1020 pixels (4 pixels for the border, is what IE likes).

 

[Gordon Coale]

I optimize all my sites for 800x600. There are too many people still using that setting.

 

[juan]

My company had it's website redesigned and the designer made it 1024x68. The boss looked at it and had a hissy fit. She, of course, insists on keeping her screen resolution at 800x600.

There are still a lot of folks who use 800x600 (aging eyes) so the general recommendation is to use that size.
juan

 

[Lee L]

There are ways to make your web page width dynamic so that it looks good on a wide variety of screen resolutions. I usually view APUG on a monitor set to 1600 x 1200, but it also looks fine at 800 x 600 with no horizontal scrolling because APUG uses CSS to scale dynamically to the viewer's screen size. I manage a small web site using CSS (Cascading Style Sheets) that scales appropriately to the monitor being used across a broad range of resolutions, and is fully usable with a text only terminal browser.

This isn't the place to go into detail on the methods, but look at www.csszengarden.com and click on the various style choices to see what can be done with layout and design using CSS that scales properly. The content on the home page for that site doesn't change, but the layout and "look" varies radically depending on the style sheet used to format the content. Try it on different resolution screens to see how it scales.

I don't like pages that are locked into a single resolution, as they look good only at that setting, and progressively worse as the viewer gets further away from a locked in default setting. I often run across pages that have a fixed width and dark left border. The border repeats at somewhere between halfway and three-quarters of the way across my screen, obscuring text content. I consider that poor design.

Any recent version of Dreamweaver will do CSS, and a good Dreamweaver book will give you the basics on it, so you should be good there. You can also find free CSS templates on the web (search with google) that you can modify for you own purposes. With CSS, if you ever want to change the look and layout of the page, all you do is change the style sheet (in essence the "layout"), not the page content. You can even give viewers a choice of style sheets, just as they do at zengarden.

Lee

 

[bill schwab]

HEy WildBill,

I have to be one more vote for the 800 pixel width. All my sites are designed this way. Unlike when using CSS, you can still control the final look and layout of your design no matter which resolution your viewers are using. With dynamic sizing, things change from screen to screen.

Best of luck,

Bill

 

[rbarker]

Has anyone mentioned 800x600? (lol)

Personally, I think the best approach is to consider the preferences and likely screen sizes of the primary target audience of the site. If the target audience is strictly graphics pros, 1024x768 is probably reasonable. For "consumers", however, assuming a smaller monitor and 800x600 is probably better. Plus, not everyone views a page at full-screen size. For "casual browsing" my browser width is usually set at about 2/3 screen width, for example.

 

[frugal]

I have to be one more vote for the 800 pixel width. All my sites are designed this way. Unlike when using CSS, you can still control the final look and layout of your design no matter which resolution your viewers are using. With dynamic sizing, things change from screen to screen.

Personally, I find it really annoying when I go to a site and find it forced to a specific size.

I happen to have a widescreen monitor so I have a pretty wide browser window (not the full width) so it really doesn't make use of my screen real estate. But, there are other reasons as well. For instance, designing around a fixed width also means you're probably using fixed font sizes which can really impact the usability of your site for visually impaired people or for those running at a high resolution (I find 12pt looks too small at my screen resolution).

Usually this mentality of having absolute control over the web page comes from people with a background in paper graphic design. The fundamental difference is that HTML is supposed to leave the final rendering of the document up to the user's browser. Sadly, that original intent was diluted severely and a lot of design elements crept in. Fortunately, CSS has allowed things to get back closer to the original intent where HTML just describes the structure of the document.

However, I still think that when designing for the web that it's important to recognise that viewers will be using a wide variety of browsers and will be viewing your site in a number of sizes. Expecting all of them to conform to one specific viewing standard really goes against the whole intent of the web. I think it makes far more sense to accept that using a fixed size layout works against the media you're working in, not to mention the host of problems it can create with differing levels of CSS support, and instead focus on the content and then use a style that can work in as many viewing environments as possible.

 

[srs5694]

There are ways to make your web page width dynamic so that it looks good on a wide variety of screen resolutions. I usually view APUG on a monitor set to 1600 x 1200, but it also looks fine at 800 x 600 with no horizontal scrolling

Indeed; one of the original design features of HTML (the coding scheme used for most Web pages) is that it was resolution-independent -- a user could have a browser set to 640x480, 800x600, 1024x768, 900x1200, or any other resolution and still read the page. (Well, within reason; a 1x1 browser window won't be very useful, for instance.) Cell phones and network-enabled PDAs also have tiny screens. There are even non-GUI Web browsers, such as Lynx, that display Web pages on text-mode screens. For the most part, you're out of luck with graphics with text-mode browsers, of course, so they're not good choices for browsing many photography Web sites.

Unfortunately, people with backgrounds in paper publishing have a tendency to try to force particular resolutions on their Web pages, and certain Web publishing packages encourage this bad practice. This wreaks havoc when users don't conform to the designers' expectations. If I encounter such a site, 9 times out of 10 I'll just move on, so the site's designer loses out, to the extent that the site's designer wants readership/viewership. A well-designed Web page can be viewed at any resolution, and IMHO if you have to ask what your target resolution is, you're designing the site in the wrong way. I'm afraid I can't offer you much specific advice on using your software to do it the right way, though; I code my HTML by hand and eschew the latest Web gizmos.

One big exception to the above is in the size of graphics. Although programs like Photoshop obfuscate matters, bitmap graphics are sized in pixels, and when you include images on your site, those images must necessarily be set to a particular size in pixels. These graphics can be resized by the browser under certain circumstances, but in the end you must decide on the size of your graphics. For this, I recommend keeping the graphics small -- certainly no wider than 800 pixels. If you want to present something larger than this, do so optionally by creating a smaller image that serves as a link to a larger version of the image. That way, your readers can view the small image and, if they're so inclined, click the link to view the bigger version. Note that the graphics size has to do with both the size on the screen and the size of the file that the reader downloads; too-big (in pixels) images also tend to be big in terms of bytes, and that translates into a sluggish Web page, particularly for readers who are stuck with slow dial-up connections. Of course, you can use JPEG compression to reduce the size of an image in bytes without reducing its size in pixels, and you should probably experiment with compression settings for your images to determine where the quality starts to degrade beyond your liking, and see how that translates into file size in bytes. Also, don't put up a big image and use HTML codes to resize the image to something smaller. Although that may work fine when you review your site locally, if a reader is stuck downloading multiple 2MB image files that are resized to 640x480, the reader will likely become annoyed and move on.