Differences between web and print design

Written by Brian Ledebur

1. Control Over Layout

For those of you familiar with print design, the first thing you will notice how your ability to control the layout of elements on a Web page in Dreamweaver is different from typical design tools like Photoshop, Illustrator, and QuarkXPress. These programs allow you place text and graphics with perfect precision exactly where you want them. If you change your mind or wish to experiment, you can simply drag or nudge these elements around until they are where you want them.

Unfortunately, because of the nature of HTML and tables, that same flexibility does not really exist. Try to think of the elements of Web pages as blocks of, say, Styrofoam in a pool. We all know Styrofoam floats and will rise to the surface. If there is a second block below our first, the second will rise up and butt against the bottom of the first block. Successive blocks will stack up toward the surface in the same manner.

Tables, and any other HTML element for that matter, will by default rise to the top of our Web page in the same manner. Additional tables or elements will rise up and butt against the bottom of our first as well. This stacking order is appropriately called the document flow, and governs our ability to layout our pages. In the scheme of things, this isn’t particularly a problem, as we want our pages to naturally appear at the top of the browser window to prevent unnecessary scrolling. Just remember, however, if you have an element that you want to appear exactly 300 pixels to the right, and 200 pixels down, it isn’t as simple as dragging it there in Dreamweaver.

2. Design Restrictions Inside the Table

In addition to our document flow, we must understand the nature of what happens inside the table. Remember, by their very nature, they are made up of rows and columns of rectangles that hold information. As a result, our Website designs must have the ability to be divided into similar rows and columns of rectangles.

Organic designs, angular designs, and designs that include lots of overlapping elements may be very difficult to reproduce. This doesn’t mean you have to avoid these design styles at all costs. Many times these designs are still possible, just more difficult. As we begin building our Web pages we will understand when and how can use these design styles. When you create your mockups in Photoshop or your favorite graphics program, take a look and see if you can divide your designs into a series of horizontal blocks. If so, you most likely have a good start. If you can divide those subsequent blocks vertically as well, you are in good shape.

3. Browser and Operating System Issues

Remember from our brief history lesson that there are many different browsers and many different versions of each browser. Each of these browsers may render our HTML differently – whether it is a little or a lot. To further confuse matters, the behavior of the some (I.E. 5 on the Mac vs. the PC for instance) will render differently depending on which type of computer you are working on. Knowing the why and how of these annoyances only comes with practice and experience, but the method we will use to create our Web pages in this class will do a good job of avoiding most of them.

Imagine you design an ad to appear in Time Magazine. You create your design and prepare and submit it for printing. A week later you take a look in Time and there’s your ad, just as you intended in all its glory. A month later the client wishes to use the same ad in Newsweek. With your work done, you simply submit that ad again to be printed. But guess what? Newsweek has its own way of interpreting your ad design, and now it looks completely different! This is one of the toughest things to come to terms with, especially if you come from a print background. We are used to designing print ads, posters, magazines, etc. and having them look the same for everyone, regardless of who is looking at them. The same thing is not true of the Web. As Web designers, we are forced to surrender a bit of control in our layouts, and accept the fact that some may see them not quite as we intended. All we can do is minimize these occurrences.

4. Computer Monitors

Using that same analogy, let’s say Time has an 8 ½” x 11” page size. So we make our designs to be 8 ½” x 11” and expect it to fit on the page of every Time Magazine that’s printed. But wait! Some people subscribe to a 6” x 8” version of Time Magazine, and still others subscribe to the monstrous 17” x 22” version as well. Now our ads are either hopelessly cut off, or tiny and surrounded by unexpected white space for these subscribers.

Such is the Web. Everyone has a different monitor size, and more importantly, has them set to a different screen resolution. This resolution is the amount of pixels that fit across and down their screen (instead of using inches, we commonly use pixels do define our measurements on the Web). The two most common resolutions people use are either 800x600 (about %25), or 1024x768 pixels (about %55). The vast majority of the rest have their screens set somewhere higher. The amount of users with 800x600 screens are shrinking in number, but ¼ of all Internet users is still a significant number. One thing we want to avoid in our pages is horizontal scrolling, so we are still forced to cater to this lowest common denominator. No big deal – we just set up our documents to be 800x600 and go from there, right? Not so fast. Although their screens may be 800x600, our browsers are not full screen, but include menu bars, buttons, address bars, scrollbars, borders, and status bars. As a result, this shrinks our available space down to about 760x420, which is considered to be the standard. (For reference, the available size for a 1024x768 monitor is about 955x600).

Although we want to avoid horizontal scrolling, vertical scrolling is not a big deal – we see that all the time. Don’t think you have to shrink and cram everything into a 420 pixel height. But do remember to keep your important elements like company logos, items of emphasis, your main navigation, and the start of your main content area “above the fold”.

5. Color Differences

If you’ve done a lot of print projects, you are used to the CMYK color model. This works great, as our print jobs are made up of cyan, magenta, yellow, and black inks. But since Websites are viewed on a screen, we use a different color model: RGB. If you were to look closely at your computer monitor, you’d see that each pixel is made up of a red, green, and blue bar packed really close together. Thus when we design our sites, our document and its colors are set up to use the RGB color model. This is very important, as there are significant differences in what colors each model can produce, as you may remember from previous courses.

Normally, an RBG color is made of a set of three numbers from 0-255, each separated by a comma (i.e. 220,168,19). The Web uses a different method of defining colors, however, called hexadecimal notation. A hexadecimal color looks something like this: #38AEB4 (each two characters represent one of the RGB values). If this looks confusing, don’t worry about it – most people can’t really read hexadecimal numbers, either. When you sample the colors you have used in your favorite design program, it will give its equivalent Hexadecimal value anyway, allowing you to cut and paste this number into your HTML.

6. Font Limitations

One great aspect about print design is the use of typography and the various fonts we have available to us. On the Web, when we want to show text, we basically have two choices:

  1. Render our text as an image, save that image for the Web, and drop it into our Web page. Since the text in this case is a rendered image, we can expect our text to appear in exactly the right font and size for everyone, although the text is not “live” and can be read only by human beings that can interpret the shapes of the letters.
  2. Use “live text” by simply typing inside our HTML page and allowing the browser to render it when it is viewed. Although it may not look as fancy, and you may not have the same control over fonts and sizes, it can be interpreted by people, machines, text readers, etc. We can distinguish live text by highlighting, copying, and pasting it into a text file.

Wondering what the big deal is, then? Here it is. When we use live text, we are leaving it up to the browser to choose the correct font on the user’s computer and render it accordingly. But unfortunately, there is only a small selection of fonts that we can assume everyone has. If we use a rare font not installed on someone’s machine, chances are it will render in some ugly default font for them, and make our design look bad. Here are the common fonts we can reliably choose from:

So here’s an idea: why not just make all of our text a graphic? Then we can use any font we want, and drop the resulting image into our HTML file and be done with it? Lots of reasons:

  1. File Sizes: As we will find out shortly, file size is another major concern in Web design. If we make all of our text images, our file size will bloat and take a long time to download.
  2. Search Engines: If our text can only be interpreted by people, search engines can’t read it, and won’t index our Website.
  3. Accessibility: What about people with disabilities that rely on screen readers? What about people with images turned off in their browsers to save on download time? They can’t read our Website either.
  4. Maintenance: It’s much easier to simply make a text change in our HTML than to have to pop open Photoshop, make our text edits, and resave every time we find a typo or wish to update our content.

There are more reasons, but just remember that we want most of our text, especially our main content, to be “live”. So what we usually do is render our headers and graphic elements as images when needed, and bite the bullet and use one of the five above fonts for the rest of our site.

6. File Sizes vs. Image Quality

In print, file size isn’t much of an issue, as long as we can actually get our files to the printer. The more detail, the merrier, as it will ensure a higher quality job (up to the limitations of the medium, of course). We commonly create and submit 10 MB, 20 MB, even 100 MB files. But transmitting a 100 MB file over the Internet would take hours, perhaps even days. Most of our users are not willing to wait that long to view a Website.

One thing we have going for us is resolution. For print, we are asked to make our images 150 – 300 dpi (or even more at times). This contributes greatly to file size. On the Web the documents and images we create are always 72 dpi – never more, never less. Using RGB instead of CMYK also helps somewhat, as it is one less channel to worry about. Another great tool at our disposal is image compression – mainly the JPEG and GIF file formats. Remember how you are never supposed to use these formats when creating print jobs? It turns out the Web is precisely what these formats were created for, and what browsers work with best.

Regardless, we still need to be wary of how much the Website we are designing will take to download, and be careful not to rely on images too much to recreate our designs on the Web. Even though an increasing number of users have high-speed Internet connections like cable or DSL, a large chunk still surf the Web the old-fashioned way – through basic phone lines. As a general rule, if we add up the sizes of all the images we use on a page, we would like – on a typical consumer site – for that figure to be somewhere near or below 50 – 60 KB (that’s roughly 1/2000 of our 100 MB print file!).

In Conclusion

Yes, this is a lot to consider, especially when we are just starting to design our Websites. And it seems awfully constrictive. Is there still any room left for creativity? Of course there is. This is a beginning class, so we are not expected to nail each and every one of these considerations on the first go. If there is a particular issue that violates the above rules, they will be pointed out, and you will have opportunity to improve and/or correct them by Project 2 and beyond. But once you understand what you cannot do, you’ll be surprised at how much freedom and creativity is still left to pull from. And by the end, these rules will be second nature. Just get in the mindset that Web design is a different beast from print design, and you must think of it as such.

For Further Reading:
http://www.wpdfd.com/editorial/articles.htm
http://www.umext.maine.edu/webauthor/lesson3.htm
http://www.digital-web.com/articles/form_follows_function