As a web developer, I often collaborate with designers and agencies that have a great deal of expertise in design for print, as opposed to interactive media. This can sometimes be a challenge, because of the inherent differences between print vs. web design. By helping designers to understand these differences—and what to do about them—projects get completed more quickly, and the client ultimately ends up with a better website.

Here are some key tips for print designers who are branching out into web design:

1. Be precise, down to the pixel. When designing a website, pixels are the most important unit of measurement, so precision is essential. This makes Adobe Illustrator a less-than-ideal tool for creating designs for the Web. The most frequent problem arising from designing in Illustrator is that elements on the page often have blurred edges, or don’t line up exactly with other elements, if the design is resized or exported from Illustrator.

Although there are effective techniques for designing websites in Illustrator, you’re probably better off using Adobe Fireworks, which is geared specifically toward website design, or Photoshop. To learn why Fireworks is the best tool for web design, see: Is Fireworks Better Than Photoshop?

2. Don’t design yourself into a corner. Unlike a printed piece, a website will inevitably change, and the design needs to account for this. Specifically, make sure that you leave room for the navigational menu to expand, and that most elements likely to change aren’t dependent on graphics. And on that note…

3. Don’t use graphics when it’s not necessary. Unless you’re designing an entertainment- or consumer-oriented website, a website shouldn’t be as graphics-rich as a typical print advertisement. In fact, with the exception of photographs and logos, it’s possible to produce a great-looking website without images, using only HTML and CSS.

Why minimize the use of images on a website?

• Faster load time
• Greater ease of editing
• Better indexing on search engines
• Lower development cost

4. Design for different devices and monitors. Unlike print or even television, the user experience on a website can vary tremendously depending on the device (computer, smartphone, tablet, etc.) and the monitor resolution.

Because of this, it’s important to:

• Ensure that your design works on mobile devices, or at the very least, can be adapted without much difficulty.
• Make the design narrow enough to view on screen resolutions starting at 1024×768. Many designers prefer a page width of 960 pixels, which fits easily onto most screens and can be divided into 12, 16, or 24 columns. Alternatively, many websites (including Amazon.com) have a fluid layout that fills the entire width of the user’s screen.
• Consider how the design will look on longer pages. For example, what elements of the page will be anchored to the top or bottom of the page?
• Include the background of the page as part of the design, if the background is going to be anything other than plain white.
• Test the site on different computers and mobile devices, and using a variety of browsers. Remember, Safari can be installed on PCs, and Mac users can test their layout in IE using websites such as IE NetRenderer.

5. Remember that some design principles don’t always apply. Websites are meant to be interacted with, not just viewed. This means that:

• Rather than focusing exclusively on a call to action, your job is to keep people on the website. Generate interest on the home page, and get the user to click on something to learn more or to take action (e.g., contact the client, purchase a product, download a file, etc.).
• There is no fold. Internet users are comfortable with scrolling, at least vertically. (Make no mistake, though—the user should be able to figure out what your client does or sells in less than five seconds.)
• Keep in mind that, in general, Internet users tend to be less patient than the average reader of a newspaper or magazine. This means that you have less time to inform and motivate. Keep the design clean, organize information well, and don’t overwhelm people with too much text in one place (particularly on entry pages).

For a higher-level comparison of print and web design, see Jakob Nielsen’s article, Differences Between Print Design and Web Design.

6. Understand the evolving nature of typography on the Web. Typography has long been a problematic issue for web designers, because there are very few fonts that are installed on almost every computer, and it’s a pain to create an image for every block of text that appears in a non-standard font.

Fortunately, some options have begun to emerge, including:

• @font-face, which allows you to embed fonts directly on a site and declare them via CSS;
• Font rendering technologies such as Cufón, sIFR and FLIR; and
• Cloud-based font services such as TypeKit

7. Learn HTML and CSS, or outsource it. As a general business principle, it’s usually best to do what you’re good at and/or what you love, and to leave the rest to others. Building a website is no different. If you aren’t familiar enough with CSS to be able to convert a design file to standards-compliant, tableless HTML code, you might be better off hiring a developer to do it for you. CSS, along with proper semantic markup, has numerous advantages:

• It allows you to completely separate the design of a website from its content, improving the site’s accessibility and making it easier to redesign the site in the future.
• It results in smaller file sizes, and therefore reduces the site’s download time.
• It enables developers to more easily understand your code and make changes when necessary.
• It helps search engines to index your site more effectively.

Although print and web design are distinct and highly specialized fields, it’s possible to achieve expertise in both, with the right foundation and plenty of experience. No matter what your background is—or even if you’re new to design in general—understanding the differences between the two can improve the quality and efficiency of your work and, as a result, increase your value to clients or your employer.