Trainers Talk Tech

I've been working with some print designers on making the transition from print to web media. I realized that many instructional designers may be facing the same situation, so I thought I should post about the differences between designing for print display and designing for web display.

The main difference between the two media is the way in which size and dimensions are measured. For print, the units of measurement is points and inches - on the web, its all about the pixels.

For your print work, you measure out your page size (8.5" X 11") and you know that a 4.25" image will take up half the page width and display at exactly 4.25" wide. On the web, you don't have that level of control. You have to set your picture to display at a certain size (400 pixels wide), but that's about all the control you have about the way it displays.

Let me talk a little bit about pixels for a second... A pixel is a single square of color, arranged on a grid - it is the smallest unit of measurement on a computer screen. The challenge we face as designers is that that the actual "unit of measurement" changes size based on the computer screen used to display the image.

Your typical computer laptop displays at 1280X1024. Do you ever wonder what that means? That means that there are 1280 pixels going lengthwise on your laptop screen, and 1024 pixels going along the height of the screen.

You probably know that the higher "resolution" is better, but all you are doing when you increase resolution is increase the number of pixels that are crammed onto the screen, resulting in smaller graphic files and smaller text and icons. Also, you may experience a distortion of your images on monitors that are working hard to display at a higher or lower resolution than "native" because it has to compensate for resizing the pixels.

An image that is 400 pixels wide will take up half the screen size on a monitor set to 800X600. An image that is 400 pixels wide will take a little more than a third when displaying on a monitor at 1024X768. The same image file will display differently depending on the computer screen that displays it.

That can be very frustrating to designers used to the concrete measurements of print. It is almost impossible to set a screen layout to display "a 1 inch border around the outside of the main content on the page." Instead, its possible to say display "a 100 pixel border around the outside of the main content on the page." That can be set easily, but know that depending on the user's machine and resolution settings, those 100 pixels will take up a lot of space, or just a little.

If you are a print designer, getting used to the abstract medium of pixels over exact measurements can take a bit of time. Know that getting it to look perfect on your screen can create a mash up of ugliness on a different screen. Experiment with different resolutions to ensure your final product looks close to your final vision.

Of course, users can change their browser settings to display different font types, turn off images and flash objects and disable link functions when surfing into your pages, but that's a topic for another time!