« Classic and Contemporary | Home | Recently Tweeted »

Sharing Content Between Print and Web

Posted on Wednesday, July 28, 2010 at 2:51 PM

Some tips for formatting content in print and online.

By Lynn Riley

In today’s economy, it’s more important than ever to make the most of your budget. One cost-effective way to stretch your budget is to make content do double duty by offering it in both print and electronic formats. Successfully converting print copy to electronic depends on making the right choices. Here are some tips to guide you.

The goals of both print and the Web are the same: to present content to your audience effectively. To achieve that goal, both formats require a clean layout. But that’s where the similarities end. The available space to create your design and layout differs for print and Web.

With print, you have a finite, predetermined size and shape for presenting the content -- an 8.5 x 11 sheet of paper, for example. Everyone who sees the print format will see the same thing. Web-based products are more challenging. Readers are using different computers, browsers, and monitors. The publication has to look good on all of them.

Creating a Digital Edition from Print

If a print publication is your starting point, you won’t need to alter your images for the digital version. But if you’re starting with a standard-resolution PDF for the Web, and want to take it to print, it’s not so easy. You will need to obtain the original, high-resolution images from your source -- whether that’s stock photography, your archives, or elsewhere. An image can be downsized from 300 dpi to 72 dpi, but not vice-versa. Color is another issue. A computer monitor displays color in RGB, so if you’re starting with an electronic version and converting to print, all colors will need to be converted to CMYK for printing.

One of the most common digital formats is the flip page book model. Others include e-books (good for mobile media), HTML viewers (which can only be viewed on a website), and PDFs (which can be printed out or read on a computer monitor). The digital provider typically uses your press-ready PDF files (the same ones sent to your printer). There’s no extra work on the designer’s part to prepare these files. When working with the digital provider, however, the editor may instruct the provider to hotlink certain images or boxes of information.

A Word about Digital Providers

Very few organizations have the specialized in-house resources necessary for digital publishing. The vast majority of it is outsourced, most often to a specialized digital provider. Your printer may also offer these services. When you outsource this job, seek a provider with industry experience who can make your job easier. Ideally, your digital provider will be a good communicator and become a trusted partner. Keep your publication staff in the loop as well, as they may have valuable input into the final product. Make sure the provider can accommodate your schedule. In most cases, you’ll want your digital edition to drop well before the print version.

The Successful Downloadable PDF

Many publishers choose the easiest option, a printer-friendly PDF version of the publication available on their website. Here’s what you need to know to ensure a quality PDF. For graphics, decrease the size of each image to 72 dpi, or “save/optimize for Web” in Photoshop. Higher resolution won’t make it look any better, but it will create larger files with longer download times.

If your graphic consists primarily of line or flat colors without gradients, such as logos and line drawings, use a GIF format. JPEG graphics are best for photographs or images with fine tonal variations. Choosing the right file format is not only important for the quality, but also for keeping the image's file size to a minimum.

The two images below are best in GIF format:

These two images are best in JPEG format:

Save your pages in standard resolution mode. This will create a document that is much smaller than its high-resolution counterpart. Adobe Acrobat will automatically make hyperlinks out of all of the email and Web addresses. It’s a good idea to make your links stand out with color so the reader knows they are active.

Choosing a Font

The best typefaces for the Web are different from those for print. If you know ahead of time that your publication is going to be in PDF, then choose typefaces that display well on the Web.

Sans-serif typefaces for Web applications:


Serif typefaces for Web applications:

ITC Charter

Other fonts, like Minion or Helvetica, are either too small and delicate or too thick and chunky to read easily on a computer screen. Keep in mind, too, that while the fonts listed above work well on the Web, they may look awkward or amateur if used in printed versions.

The best fonts are specific to either print or Web. In most cases, you should create two versions to better serve your readers -- one print and one PDF. For the Web PDF version, choose from the Web-friendly fonts listed above. For print, use a typeface from your association’s branding guidelines or go with your designer’s recommendation.

Design Software Recommendations

For the first 15 years of my career, I used Quark. Then, in 2005, I switched to InDesign. I never looked back. InDesign interfaces beautifully with two other popular design software programs, Photoshop and Illustrator. The ease with which you can copy and paste graphic elements between the Adobe family of products is a dream.

The process for creating PDFs from InDesign files is simple. Ask your printer or digital provider for a script to automate this process. These days, InDesign is more prevalent among designers and is fast becoming the industry standard.

Remember This...

In summary, here’s what you need to keep in mind: High-resolution graphics are needed for print, but electronic applications should use lower-resolution images. The best fonts for print publications don’t usually work well on the Web, and vice-versa. Using the right software and finding the right digital provider can make the job much easier.

Lynn Riley, of Lynn Riley Design, specializes in design for association publications. Visit the firm's website at www.LynnRileyDesign.com or email her directly at lynn [at] lynnrileydesign [dot] com.

Add your comment.

« Classic and Contemporary | Top | Recently Tweeted »