Web Design Mechanics Understanding how pixels, colour and resolution work together is important for any web designer. Paying close attention to such details allows for the creation of a well made web site.
Fortunately, in the last couple of years, with advancements in bandwidth and computer monitors makes these concerns somewhat less bothersome. Of course, we would be remiss to discard this information completely, and by following the rules provided will ensure your sites are optimized. Some Definitions
Pixels - a word derived from picture element. A discrete unit, having a location and a value. When you look close at a picture tube and see the little dots... each dot is a pixel.
Color Space - a system used to describe all available colours graphed on a set of axis. RGB, CMYK and HSV are examples of color spaces. RGB is additive colors, that is, when all colors are combined on a monitor, they produce white light.
Resolution - the number of discrete elements per unit of measure that make-up an image.
Vector Graphics - Image information is stored as numerical information referencing points along an X,Y axis. File sizes are small compared to bitmapped graphics. Vector graphics are not resolution dependent in that they are infinitely scalable.
Bitmapped Graphics - Image information is stored for each individual dot of colour information. The larger the image, the greater the amount of information to be stored. Files are large compared to vector graphics. Bitmapped graphics are resolution dependent in that the quality of the graphic will change as size is increased or decreased.
Rule
The maximum dots per inch (DPI) on a computer monitor is 96.
What does that mean? If you were to count the number on pixels on a one inch line on the screen, you would never have more than 96. Therefore, if you are scanning images to be used for the web, do not set the scanning resolution beyond 96, in fact, set it to 72. 72 is the rule of thumb for on screen resolution. Scanning at any higher resolution will only result in a larger image file size which is unnecessary.
Rule
All the sites you design should be viewable properly at 800 x 600.
What does that mean? All computer monitors display information at at least one resolution. Depending on the video card and the monitor, many different resolutions may be supported. You always want to design for the lowest common denominator, to support the most basic user. These days, chances are few people will be working with a monitor that does not support at least 800 x 600 resolution.
When we refer to 800 x 600, it means 800 columns of pixels x 600 rows of pixels.
Rule
800 x 600 is not always 800 x 600.
What does that mean? Although you may be designing for 800 x 600, the amount of real estate (space available) for your content can be considerably less than that. This is because user interface items within the browser itself can eat this space up. Things like navigation bars, button bars and scroll bars will all take up room. As well, there is a margin surronding the inside edge of the browser window that forces the content slightly away from the edge. This is called the offset. You can control the offset by specifying what the margins should be within the BODY tag.
Example: -
The Solution - Determine what platforms and what browsers (including versions of browser) you feel your users (audience) are most likely to be using. Take screen snapshots of an oen browser window for each browser and on each platform you wish to design for. Ensure you have all navbars and user interface elements on that the user is likely to have displayed. From the snapshots you will be able to determine the amount of space (in pixels) you will have to design from.
It is most important to consider width, as you are not likely to want your users to have to scroll horizontally to see the content. Height is also important, as you want the user to be able to view all navigation interface items without having to scroll vertically. It is of course acceptable to have the user scroll up or down to see content, but they should be able to at least see all navigation items without having to initially scoll down.
| | | | Site designed for | 800x600 width | 800x600 height |
|---|
| | | | All browsers, Mac and PC | 723 | 390 | | |
Rule
Always use web safe colors.
What does that mean? Beyond supporting various resolutions, monitors (and video cards) can display a variety of colour levels. Earlier monitors could only support 256 colours. Today, monitors support that plus thousands (High Colour) or millions of colors (True Colour). So ensuring that you use a web safe colour palette is much less of a concern today.
Web Safe Colours - The way the 256 colours are arranged on a Mac is different from how they are arranged on a PC. Not all 256 colours are the same. In fact only 216 of the colours match, or are indexed to the same area. To ensure images and sites in general appeared the same on both platforms, care had to be taken to only use those particular 216 colours. These days, this is much less of a concern, as odds are the viewers of the site will have monitors at least capanble of viewing at Thoudsands of colours.
Rule
Always compress your images to the smallest possible file size.
What does that mean? Typically, images account for the largest portion of the time requred for a full HTML document to download. Clearly, ensuring that your images are as small as possible is extremely important. When we discuss size, we are refering to file size, not the actual dimensions of the image. As mentioned above, images should not exceed 72 dpi. Also, they should be of a file format that allows for maximum compression yet still be of a quality acceptable for your purposes. Also, as with all content, images should have a purpose and reason for their use. Don't just throw in images because you can.
With increased bandwidth provided through ADSL and Cable modems, larger file sizes can be used effectively. To ensure your sites(s) work the most effectively, you should adhere to this rule.
Rule
Black is black... White is white... Blue is ??????.
What does that mean? In the case of black and white, they will appear as such on any given monitor. This nis not the case for other colours though. Various monitors will display colours differently. That perfect shade of blue you have may be a horrid green on a different monitor. Beyond the montors, users have various preferences and may have the brightness and contrast set to unusual levels. When it comes to colour, it is hard to count on. Your clients should be aware that their logo's proper colour may not look the same on every monitor. You should still try and match it to the best of your ability. As well, the Gamma (brightness) on a Macintosh is brighter than it is on a PC. Therefore, if creating graphics on a Mac or a PC, ensure you check them on the opposite platform.
modifed: 2007-04-18 |
|
