Converting QuarkXPress pages into Web pages used to be a big deal. Client demands for Web versions of flyers and newsletters forced designers to think more creatively than ever before. Moving graphics from high-resolution CMYK to 72-dpi RGB pushed designers to the limits of their tools and patience. Moving text was a tedious process of copy, paste, reformat, and repeat. Aaahhh, how we miss the good old days of last year.
The era of converting documents has ended. Now clients start with a Web site, and want supporting materials to match. Experienced clients have a comprehensive media plan that coordinates Web and print. In both cases, the print version is a part of the finished product, instead of the source. Designers need to think about HTML and CMYK in parallel, not sequentially.
Unfortunately, our tools haven’t caught up with our clients. GoLive and Dreamweaver have no clue how to handle CMYK, much less imposition or trapping. QuarkXPress (without the aid of XTensions like Extensis BeyondPress) has no idea what a hyperlink is, or the difference between DHTML and Java. Both tools are optimized for their own particular world, but neither has enough sophistication to cross over.
However, there are some things you can do to make this type of job easier. Unfortunately, there aren’t any tools to help Web-authoring software be print-savvy, so in this article we’ll stick with the traditional “print-to-Web” workflow. We’ll give you some tips and pointers on this process, and briefly discuss some tools designed to make QuarkXPress more Web-savvy. In some cases, these tools can be used to create the finished Web page. In most cases, you’ll want to combine their use with a Web layout application.
Picking the right tool
The simplest and cheapest tool you should have is the HTML converter XTension from Quark. It works just like any other text export filter; select a text box and export. The file it produces is simple, clean HTML. Quark recently posted a tutorial on its use; you can find it on their Web site at www.quark.com.
Another tool that’s available for converting documents to HTML is Extensis BeyondPress. This XTension to QuarkXPress takes a standard document and converts it to the best possible HTML approximation. Unlike the Quark HTML filter, BeyondPress converts the entire page or document, maintaining the position of text boxes and images and produces a Web page that looks as close as possible to the printed page.
BeyondPress also has the ability to include URL hypertext links and image maps, and can export images as either GIFs or JPEGs. It can be downloaded from Extensis’ Web site at www.extensis.com and used for free for 30 days.
Like it or not, if you’re going to design for the Web, you’ll need a working knowledge of HTML, as well as an HTML editor. Shop the bookstore for a book that you can understand, and download demos of several Web-authoring programs.
Shifting your paradigms
Efficiently designing for both print and the Web means that you need to step back and look at the big picture. You’ve probably become accustomed to thinking about things in terms of the mechanical requirements of a printing press. CMYK, resolution, and typefaces are all chosen in respect to this.
For example, you wouldn’t pick a light cursive face if you’re planning on printing to newsprint, simply because the fine lines of the face won’t hold their shape against the massive dot gain. You don’t want to lose this sensitivity to print, but instead build on it to account for idiosyncrasies of the Web.
So a light cursive is a bad choice for newsprint. But suppose you decide to go with a coated stock and a larger point size? That solves your print problem, but, as you can see in Figure A, when you take the same job to the Web, there are other concerns. You either lose the face entirely because it isn’t supported by the browser, or if you convert it to an image, you have to deal with the limits of a 72-dpi display.
Figure A French script doesn’t translate well to HTML, and creating a graphic from your text can leave you with jaggies and increase your file size.
Tips for type
The first brutal reality of the Web is that all the fine nuances of type are usually lost. Different browsers will show faces too large or too small. Your thoughtful choice of one face is trampled underfoot by the browser that might substitute a generic serif font, or might substitute Hobo Bold because that’s what the user specified.
Typographically, you’re being forced to use a duller set of knives, so plan to be less subtle. Use larger jumps in point size, or depend on styles (bold, italic) instead of faces. There are a lot of tricks to having better type online– but they’re different than what you might do in print. The point is, don’t create a delicate, subtle typographic treatment of your subject matter and expect it to translate to the Web.
Tips for images
With images, it becomes particularly important to plan ahead. Remember that both color and resolution will take a massive slap in the face when an image goes online. If you think doing justice to Ansel Adams is difficult in print, try getting his work onto a Web site. There just isn’t enough tonal gradation to make it look right. So as with type, you must accept a cruder representation, and you have to plan for it not only when you’re scanning an image, but also when you’re choosing the image in the first place.
The upside is that even if your printed piece is going to be a thrifty two-color run, the online version can be full-color for no extra cost. Sounds great, but good black-and-white photographs don’t necessarily get better by adding color. Conceptualize your design so that you’ll have a wide range of images to work with, some that look good on clay coat in black and white, and some that look good at 72-dpi in full-color.
How this works in real life
Recently, an industry group has decided to use several methods of notifying its membership of upcoming meetings without using traditional printed material. The challenge is to design and implement a visual theme that works consistently. Their promotional package requires:
- A Web site with three pages of details and images, including color, graphics, logos, and hyperlinks.
- An email sent to members announcing upcoming meetings. The content is similar to the front page of the Web site, but contains no images and no color– just ASCII type.
- A single page fax sent to members without email addresses. The content is the same as the email, but the appearance is similar to the first page of the Web site, only it’s black and white and low resolution.
- A PDF of an appropriate printed version. This is downloadable from the Web site, and is used by anyone who wants to print a poster for display within their company. The PDF must be in color and have enough resolution to print well on a high-quality color printer. Obviously, it should show attention to typographic and design considerations.
The solution is to design a basic piece that can be used in all situations. This means compromising, but in exchange, you save a boatload of time.
For example, the Web site shouldn’t use frames or scrolling text boxes, and should essentially be in an 8.5 x 11-inch format. Stay away from a lot of fonts. Also, design a logo that’s bold enough to withstand faxing, as well as conversion to a 72-dpi GIF. Use a minimum of Web-safe colors, and choose colors that reproduce well on both color and black-and-white printers. Finally, build this page in QuarkXPress and use an XTension like BeyondPress to add all the required links.
It’s just a frame of mind
Doing this type of work isn’t impossible, it just means that you need to step back for a brief moment and think about the whole job. In your not-to-distant past, this only meant talking with your printer. In your not-to-distant future, it simply means considering multiple media, instead of just one. In this article, we discussed some of the considerations for designing with print and the Internet in mind, and showed you a real world design problem and its solution.
Copyright © 2000, Element K Content LLC. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of Element K Content LLC is prohibited. Element K is a service mark of Element K LLC
This article was last modified on March 12, 2022
This article was first published on August 4, 2000
Commenting is easier and faster when you're logged in!
