Blog

Designing Web Sites for Monitor Resolution

Monitor Resolution, Shmonitor Resolution

If you’ve been ignoring the effect monitor resolution has on your Web site designs then it is time for you to pay attention.

You can witness endless design horrors on the internet but one of the most annoying is lack of concern for monitor resolution. It has to stem from the “my monitor must be the norm” syndrome, which affects nearly everyone in the Universe until they see a familiar web site on someone else’s machine. It slowly dawns on them how different a Web site can be from machine to machine.

When I run across these types of websites, my first thought is that the designer didn’t know about monitor resolution. That can’t be true, can it? Everyone who makes Web sites knows about resolution.

Don’t They?

If you don’t know, here it is: monitors have different display resolutions that can be changed by the user willy-nilly. Some standard resolutions are 640x480, 800x600, and 1024x768. There are many others.

Your Web site looks different on each of these resolutions. Goodness help you if you’ve made your site too large for a particular resolution because people hate to scroll left and right.

You need to pick a minimum resolution before creating art for the web site. It’s a real pain to try to retrofit a site to a smaller resoluton. The current resolution Way Cool Web Design uses is 800x600 if no other size is specified by the client. A number of web sites keep some statistics on monitor resolutions used by their visitors. You may find these useful.

• Chuck Upsdell’s Browser News
• Web Usability Study

800x600 is not 800x600

OK, so you’ve settled on a resolution to design for. You hop into Photoshop and create a new 800x600 document and start designing away, right? Ugg... not really.

Sure, you can go ahead and make the doc 800x600 but don’t use the whole space because “designing for 800x600” does not mean creating art that fits into 800x600 pixels. Browser chrome (that useless stuff on all sides of the browser like navigation bars, scrollbars, etc.) eats away at your design space.

Set some guidelines up at the "safe" dimensions for 800x600 — you can determine that at Web Monkey. Way Cool Web Design uses 744x410 as a starting place, depending on project requirements.

“Above The Fold” Is Below The Belt

To add insult to injury at having to use such a small width, there’s also “The Fold” to deal with. Although it sounds akin to an Organized Crime Family, “The Fold” is actually instead what the height guideline at 410 is for. That guideline marks the area where a user will need to scroll if items exist below it. It’s fine and dandy to have content below the fold, just know that a user who has his screen set to 800x600 will have to scroll to see it.

Resolution To This Article

There you have it, folks. Monitor resolution for the masses. If you didn’t have this weapon in your Web design arsenal before, now you do. So please stop making me scroll left and right!

Vector & Raster Are Not A Type Of Dinosaur

I still run into lots of folks who don’t really understand graphic image formats and image resolution. It can make a big difference in how images appear in their final form. It sure was confusing for me when I was starting out. Here’s the lowdown.

There are 2 main categories of electronic images:

• vector
• raster

Vini, Vidi, Vector

Vector images are fomats that use mathematical equations to represent the lines, curves, etc of your image and therefore are much lower in size on your hard drive than a raster image. As long as you keep the image as a vector format you can resize it with no loss of clarity, over and over again.

Adobe Illustrator is one example of an application that produces vector images. Vector images are great for images that have more areas of flat colour. Passing your logo around as a vector image is good because people can resize them and it will remain crisp when printed or exported. Vector images are not good formats for images like photographs, which don't often have areas of flat colour. Common vector image file types end with these file extensions:

• .EPS
• .AI

Rast, Raster, Rastest

Raster images use dots (ink dots when on paper, pixels on your screen) to represent your image. Raster images describe every dot of your image as a colour and a bit depth and where it is in relation to other dots in the image, so it is therefore much larger than a vector image. Raster images get "fuzzy" when you make them larger than the original because your computer has to guess (interpolate) what dots should come between the other dots to make the new dots it needs for the larger size. Raster images are generally OK to shrink down, though if you have an application that allows it you should "sharpen" the image after shrinking to make it crisper. Adobe Photoshop is one example of an application that produces raster images, though it also now incorporates some vector formatting. On a PC, Paint is a raster application but it doesn't have many tools because it's free. Raster images are great formats for photographs. Common raster image file types end with these file extensions:

• .PSD
• .TIF (or .TIFF)
• .BMP

Rast, Raster, Rastest

.GIF and .JPG are special raster formats. They are compressed formats and should not be used until you are ready for the final stage of image processing. For example if you've been in Photoshop touching up a photo you should be saving that file as a PSD (Photoshop document) then when you are ready to put that image on, say, a web page, you save another version out as a JPG or GIF. Often, photos generally save out for the best as a JPG, and vector images as GIF, though that’s far from a hard and fast rule.

Every time you re-save a JPG (or GIF if you choose less colours than the original GIF) you re-compress it, lowering the quality. That’s why these file types are best when created from the source document. JPG and GIF are not very good files to use as original source images. One exception is that some JPGs are saved out with very slight compression, set to 100, which compresses the image just enough to bring the file size down to a more acceptable size but also does not ditch too much data. Another exception would be if your original has 256 or less colours, in which case the GIF format could save it out exactly as the original.

Here's a more detailed look at image types.

American Tree Farm System (ATFS)

The American Forest Foundation (AFF) is a nonprofit 501(C)(3) conservation and education organization that strives to ensure the sustainability of America’s family forests for present and future generations. The organization's vision is to create a future where North American forests are sustained by the public which understands and values the social, economic, and environmental benefits they provide to our communities, our nation, and our world.

ATFS was in dire need of an online method to track certifications and inspections, formerly a paper system. The task of designing the visuals was awarded to our Friend, Apt Media, Inc. Translating the tracking system to digital presented many challenges, including developing designs of the utmost ease of use since maintainers of the system were volunteers.

Once the designs were in place it came time for the HTML/CSS, which we provided. The challenge here was that the system was large and needed to be kept modular so code could be reused when possible. Combine this with lots of tables to control input fields and one could easily end up with a mess.

Through planning and code vigilance Way Cool Web Design and Apt Media were able to deliver a lean, smart, sexy new tracking system.

HTML / CSS

If we had to choose one web development service as our forté it would be HTML/CSS. We're HTML coding monsters, chewing through the toughest designs to bring you web sites that look fresh and clean, and best of all, just like the design mockups you approved. We use the latest tableless XHTML so your web site has great experience cross-browser, cross-platform.

Tired of bad code or sites that don't look like approved designs? Our HTML/CSS code is the web development service which receives the ravest reviews from our clients.