Most websites today are quite graphical in nature due to better monitors, faster connections and increases in technology.  A website design will often revolve around a “branding effort”, such as a logo or other printed collateral that was created before the website was implemented.  Unfortunately, not all logos have been created with the thought of how they may display on a monitor, since they are frequently designed originally for business cards or stationary.  This can produce problems future problems if the logo contains finely detailed elements and/or a variety unique color variations.  The issue is that monitors consist of a grid (rows and columns) of square pixels.  Each pixel displays its own color to collectively produce the content that one sees on the screen.  Obviously, not every element on screen is “square”, so how are we able to see circles, curves and other none linear objects on a website?  The answer is pretty simple.  Graphical elements can display differently using a trick called “anti-aliasing”. 

Below are two black circle images on a white background.  The image on the left is “aliased”, the image on the right is “anti-aliased”’


Notice how the circle on the left appears jagged (also known as the “jaggies”) and the circle on the right appears smooth and round?

Now, let’s take a look at each image close up.  Below are parts of the same circles magnified.


The above image on the left contains only two colors of pixels, either black or white.  The image on the right contains 67 colors, all various shades between white and black.  While one can still see the square pixels in each image when magnified, at normal size, the eye will be fooled into thinking it is perfectly round.

Frequently, I am provided with artwork containing fine lines or very detailed fonts.  Depending on how large a logo is displayed on a website, elements can sometimes appear “fuzzy” due to anti-aliasing, when in print they are not. 

Colors used within a brand can also produce problems.  Print collateral is often created using the CMYK print process.  CMYK stands for Cyan, Magenta, Yellow and Black (K) and functions similarly to layering by partially, or entirely, masking colors on a lighter (usually white) background.  Monitors, instead, use RGB (Red Green Blue) by mixing these three colors to display images.  Because CMYK consists of four elements, whereas RGB has only three, information can be lost in a conversion between the two.  Often, a conversion produces a different, but similar color, usually appearing “brighter” than the original printed matter.  Therefore, the beautiful shade of teal blue on your stationary, that you spent hours on getting just right, may end up being far too blue, or green, or bright on a monitor. 

Granted, tweaks can be done to simulate a color fairly closely, but this still doesn’t guarantee a perfect match.  Monitor type, various video cards, different calibration settings, and whether the user is viewing the website on a Mac or PC, can all contribute to producing varying shades of the same “supposed” color.

The end result is that, while printed matter produces a product that is guaranteed to be viewed the exact same by all users (except for possible color blindness), the web has far too many elements that cannot be controlled.  Being knowledgeable of what you are up against, keeping your designs simple and clean, will provide you with a better chance of branding your business equally across all media.