|
||||||||
 |
||||||||
Once you start to seriously consider designing your Web page, rather than just throwing up a bunch of links in a bulleted list, most Web designers start to worry about what resolution to design for. And what this really amounts to is trying to decide how wide to design your pages. Resolution In 1995, 640x480 resolution monitors were about the best you could get without draining your bank account. This meant that Web designers focused on making pages that looked good in Web browsers maximized on a 12-14inch monitor at that resolution. In 2004, 640x480 resolution makes up no more than 1% of most Web site traffic (verify with your server logs to be sure). Instead, people are using computers with 800x600, 1024x768, and 1280x1024 resolution in greater numbers. To be most accurate, you should check the server logs for your Web site, but if you don't have that information, designing for an 800x600 resolution screen will work. Browser Width But before you go off thinking "okay I'll make my pages 800 pixels wide," there is more to this story. One often overlooked issue when deciding the width of a Web page is how big your customers keep their browsers. Specifically, do they maximize their browsers at 800x600 (or higher) resolution? Or do they keep them smaller than the full screen? In an informal survey I did of 12 of my co-workers (all using 1024x768 resolution laptops, because the company standard is 1024x768), 2 kept all their applications maximized. The rest had different sized windows open for various reasons. Now, this isn't a scientific survey, but it does show you that if I were going to design the company intranet at 1024 pixels wide, 85% would have to scroll horizontally to see the whole page. Once you've accounted for customers who maximize or don't, you need to remember the browser borders. Every Web browser has a scrollbar, and borders on the sides that shrink the available space from 800 to around 740 pixels or less on 800x600 resolutions and around 980 pixels on 1024x768 resolutions. Fixed or Flexible Width Pages The actual numerical width is not the only thing you need to think about when designing your Web site's width. You also need to decide if you'll have a fixed width or flexible width. Fixed Width Fixed width pages are exactly like they sound. The width is fixed at a specific number and doesn't change no matter how big or small the browser is. This can be good if you need your design to look exactly the same no matter how wide or narrow your readers' browsers are. But this method doesn't take into account your readers. People with browsers narrower than your design will have to scroll horizontally, and people with really wide browsers will have large amounts of empty space on the screen. To create fixed width pages, simply use specific pixel numbers for the widths of your page divisions. Flexible Width Flexible width pages vary in width depending upon how wide the browser window
is. This allows you to design pages that focus more on your customers. But the
problem with fixed width pages is that they can be difficult to read. If the
scan length of a line of text is longer than 10-12 words or shorter than 4-5
words, it can be very difficult to read. This means that readers with large or
small browser windows will have trouble. Mixed Flexible and Fixed The best solution for most Web pages is a mix of flexible and fixed widths. This allows your text boxes to be a fixed width for easier reading, while the other divisions on the page can flex in size to accommodate larger and smaller browser widths. To create mixed pages, use specific pixel numbers for your text divisions, and percentages or ems for the rest. My Recommendation I would advise that you design for a minimum resolution of 800x600. I would assume that people using that resolution will be maximizing their browser windows, so a minimum width of 760 is acceptable. Then, I would use flexible widths, centering your main content in the middle of the browser window and making the text content a fixed width of no less than 400 pixels. |
