Introduction
Laying out for the web is a little different than laying out for the printed page. In some ways the web is easier; colors, links, and multimedia make it very easy to make engaging pages. However, the web also has some quirks that can be frustrating.
Pixels
Laying out for the web requires knowing about pixels. A pixel is one of the thousands of tiny dots that make up your computer screen. Because all computer screens use this technology, pixels are the one constant among all computer displays.
Normally we tend to think in terms of inches, centimeters, or other common units of measurement. Unfortunately, these units don't work out very well because different screens have different sizes. For example, a 14" iBook and a 12" iBook will display the same screen contents at different sizes (the 14" being larger). If we try to measure in inches, the question becomes: inches on which screen?
Pixels aren't perfect; different screens have different numbers of pixels on them. However, using pixels helps us predict how something will look relative to the rest of a user's screen. Both the 12" and 14" iBooks have screens that are 1024 pixels wide. If we make a picture that is 500 pixels wide, we know it will fill roughly half the screen, even though we don't know how many inches that will be.
To give you an idea of how big a pixel is, we've included the following graphic. You can see how it is marked with a "ruler" showing the sizes in pixels (the major markings are 50 pixels apart).
![[Pixel Demonstration]](../images/pixels.gif){kind=tracking}
As you can see, this picture is a little over 550 pixels wide, and just over 200 pixels tall. You shouldn't make pictures much bigger than this; if you do you it may be too wide to fit on some users' screens.
Positioning
Positioning is one of the most difficult and frustrating aspects of web design. Because each users' computer differs from the next, it's next to impossible to make web pages that will appear the same way on each one. Different computers, operating systems, browsers, fonts, and screen sizes all contribute to this effect.
In general, it's best to position elements in a very general sense. You can align text and images to the left, center, or right as desired. However, you should not expect to place images perfectly and have text wrap nicely around them.
If you have text that should all be on one line, make sure that the line is short enough so that it won't wrap on smaller screens. This may require using a smaller font to ensure that it fits with room to spare.
To format text, try to use the built-in abilities of HTML. HTML allows you to create bullet lists, indented quotations, and tables of figures. In general, these elements will appear similarly on different computers when the correct tags are used.
Hints
Your best bet is to create a layout that has some flexibility. A flexible layout will look good on several different configurations, even if they're a little different.
Aim to keep your pictures under 500 pixels wide. You can go a little larger if you need to, but only if you really need the extra size.
Don't create pages that require everything to line up perfectly in order to look correct. For example, don't try to make vertically-aligned text like this:
O T T F
n w h o
e o r u
e r
e
Getting the right number of spaces between letters is difficult, and the number of spaces will depend on the font being used (which your viewers may or may not have installed).
In general, don't try to cram too much information on any one page. If possible, break up pages by topic and provide plenty of links between the pages. Remember, the web is about letting the user choose how to navigate, so give them plenty of opportunities to move around!
When looking at your own pages, try messing around with your window to make sure it still looks OK. What happens if you make your window very large? Very small? Does the text look OK? How about images? Your users may have different settings on their machines, so do your best to cater to them.