Monitors and Resolution
Size really does matter!
What's a good starting size for a website layout? If your site is for the general public you may want to support the lowest common denominator of monitor resolution: 640 x 480 pixels (the typical 13" monitor).
If you were to take a good look at a monitor at the resolution of 640 x 480, while running a web browser, you'll see that the graphics of the browser itself hog a lot of screen space. You can count on about no wider a view than 600 pixels. The height is even worse: from 320 to 350 pixels!
Your best plan is to try to get the most important elements of your site within this area, particularly the navigation elements. Most people are accustomed to scrolling through pages so it won't be a problem if it's necessary. Try to hold it down to no more than three screensfull of scrolling, though.
If you know the size of your visitor's monitor, design for that size. This might be the case if you're creating a website to be used by coworkers only.
Dots per inch
Monitors physically display information at 72 dpi. This is called screen resolution. Web designers, a practical bunch, create graphics at the resolution of 72 dpi so that all the images are at a one-to-one ratio. Also there is less information in a low-resolution image so they tend to be small in file size.
Don't confuse the dots per inch a monitor can physically display with the resolution it is capable of displaying! It's confusing, I agree, and a verbal explanation is practically useless! Try looking at the same image at a variety of resolutions to see how an image appears smaller and finer on screen at a higher resolution but larger and grainier at a low resolution.
Unfortunately, you can't know what resolution your visitor's monitor is displaying. You can design for the lowest common denominator, 640x480, but you also need to consider what it's going to look like at a much higher resolution.
How life would be easier if we all had the same monitor!
Lots of folks use Macs and even more use PC's and there are hundreds of different brands of monitor! Try to look at your images on several different monitors to check their brightness level. Mac monitors tend to be brighter then PC monitors so what looks great on one can look washed-out or really dark on another.
|