Over my career, I’ve worked with some great print designers. The work has always been fun, but often difficult; the Web is a very different medium than print when it comes to design. For designers used to the print world, moving to Web design can be a frustrating experience. It’s not that the Web is an inferior platform compared to print, it just has different rules and limitations. Understanding the limitations of the Web will help you design more effectively for it. And you like a good challenge, right?

Don’t expect print precision
The most frustrating thing print designers encounter is the lack of print-like precision when rendering Web designs. Because of the different browsers, OS platforms, and screen resolutions, it’s nearly impossible to place design elements at an absolute X, Y coordinate. When designing for the Web, don’t design for, or expect, exact pixel perfection. A single Web page will look slightly different on different browsers. And that’s alright.

Be Fluid
Print is a static medium – once you’ve placed the text on a piece and printed it, that’s it. It will never have more or less text without someone manually adding in the text and printing another copy. The Web is a different story. The best sites will have frequent content additions. The best designs will accommodate that content with ease. Text areas should easily scale for shorter or longer pieces of copy. That’s not to say you can’t define a static width and height for a block of content, but you should always consider what happens if the copy for that area exceeds those dimensions. For that matter, will the length of the content for that text area ever change? If you were putting in a place on your design for a Twitter feed to be displayed, you know that your content will never exceed 140 characters. Information like that is important when you design. Don’t just design for the initial content you’re given. Anticipate what future content may look like, and make certain that your design can accommodate that.

Fixed-size elements should always be evaluated when designing for print – will the content within these elements ever be longer or shorter? How will the element handle that change? Most of the time, there are simple solutions to allow great designs to also be fluid.

Fonts are a scarce commodity
Designers love fonts. And why shouldn’t they? The perfect font face can make a design. Unfortunately, fonts are limited on the web. When laying out copy, keep in mind that the user has to have the font you’re using on their computer or they won’t see that font when they visit the site. Typically, in order to avoid this kind of issue, I recommend using fonts that are common to most computer users. Arial, Verdana, and Times are some examples of common fonts. You can find a complete list here.

So how do you get pretty fonts on the web? Graphics. That being said, making entire blocks of copy into a graphic is a bad idea. It makes the content impossible to edit short of creating a new graphic. It also makes pages that can’t be indexed very well by Google or read by screen readers. Copy placed into graphics should be limited to headers and integral design pieces. Body copy should almost always be plain HTML text. One benefit of the Web is it’s easy to specify another font as a substitute for a missing font. For example, if you wanted body copy to be Helvetica, the site could be setup to “degrade” to Verdana, then Arial, and finally any sans-serif font the user has. It’s one way to get back some of the control over fonts that you lose on the Web.

One more thing to keep in mind when bemoaning the poor font support on the Web – most users don’t notice or care. Make the text look appealing and easy to read. The site visitor will rarely care what font you use.

Hitting a moving target
With print, you know virtually all your variables: how large of an area you’re designing for, what colors you can use, etc. It’s easy to create tight layouts in print because you know exactly how it will be presented to the viewer. Web pages are the exact opposite: users will have different browsers, screen resolutions, and even fonts available to them. On top of that, they can even enlarge or shrink the text to suit their preference. To combat this, your design should include a certain amount of flexibility – text areas shouldn’t be viewed as rigid blocks of content but dynamically sizing areas. If a user increases the font size, will that break your design?

When you take your design to be cut up into an HTML-based design, expect it to look a little different. Once your design is in HTML, you can work with your developer to tweak it as you see fit. In the end, the Web design will be somewhat different from your original PSD, and that’s not a bad thing. You should look at the transition from PSD to an HTML-based design as another design revision, not the trashing of your work.

While there are obstacles, most designs can be cut up into HTML-based designs while still retaining most of the designer’s original intentions. Knowing the difficulties facing a Web design – and being prepared to deal with them – makes it that much easier to reach the look and feel you want without tearing out your hair in the process.