Print designers moving to web ... what do they need to know?

Question

I'm trying to compile a guide for students used to publishing in print who are learning web design.

Some obvious things which web developers know but they don't:

• You can't rotate graphics in HTML
• All objects have to be rectangular, you can't have a circular DIV
• Many typographical effects in their repertoire can't be achieved

Some things which are tricky are:

• Can they have variable opacity? Well, yes and no.
• Can they have rounded corners? Maybe.

Some things which aren't technical difficulties, but which are problems:

• Image file sizes: I have a student who wants to have a different large graphic header on every page of their site; that's not technically a problem, but it will mean a visitor has to wait for a new graphic to load every time they navigate
• Accessibility: "why not just make everything a graphic, to overcome the limitations of HTML?"

Please help me fill out my list and add any hints or tips for people making this transition.

Answer 1

web is not print

• Layouts can be fluid.
• elements don't have to be absolutely positioned
• web pages need to be checked in several browsers for compatibility
• avoid divitis; from experience people coming from print into this field do everything by brute force instead of trying to think of elegant solutions for optimization and semantics purposes
• print is consumed visually - the web is consumed by people with visual impairments as well. Don't forget lynx users no matter how small the market share is :)
• semantics is important, learn about them

thats all i can think of right now...

Answer 2

Some broad points:

1. Print is static, the web is interactive.

The essence of a print project is a fixed point in time, an idea captured on paper or some other substrate. Web projects are moving, changing experiences that represent both the ideas of their creators and their users.

2. Everything is uncertain.

You mention typography in your answer, it's probably worth broadening that to cover all aspects of appearance. The variety of operating systems and hardware available mean that its hard to determine how all your audience will experience your final design. Whilst some things must be compatible across all browsers, sometimes it is not worth the time and effort needed to make something pixel perfect in all systems.

3. Learn about programming.

Unless you've an aptitude for it, you don't need to learn how to program for the web. But it would still be a big help to gain some familiarity with web programming, as if you can't code, you'll need to work closely with someone who can and you need to be able to communicate effectively with them.

4. Create working prototypes

When something is static, it can be designed using a static format. To design something interactive like a website, you should be making use of moving prototypes that represent the kind of behaviour the final design will have. You can use paper to do this, or more sophisticated mockups using xhtml, css and javascript, or a dedicated prototyping program.

Answer 3

Coming from someone who has done both print design and web design (and done a decent job at both, I think), it seems like you're off to a good start. Other thoughts:

• Darko Z mentioned this but I think it's worth stressing that browser incompatbilities must be recognized and dealt with. In the print industry there are standard formats like PDF which guarantee that things will come out in print the way they look in design; besides, many publishers will directly accept the native file formats of the most popular design programs, like Adobe InDesign, Quark XPress, even MS Word (for the cheapskates ;-P). The point being that print designers are used to a "set it and forget it" approach where they assume that once they design something a certain way, it will stay designed. The fact that there are different web browsers which render the same web pages slightly differently is likely going to be a major pain in the butt for people used to the print world.

• Addendum to the above: fonts. You can't use (or at least can't rely on) uncommon fonts in web design, for obvious reasons.

• Screen real estate has to be used effectively because there's a limited amount of it. And I mean really limited - no matter how hard you try, you can't write HTML that will make someone's monitor expand 5 inches or put another screen on the back ;-) It's not like in print where people can peek back and forth between different pages of a book. Reading web pages is kind of like looking at parchment through binoculars; you have to design the pages with that limited field of view in mind.

• Web page designs are dynamic and transient; they stay up for a while, they get boring, they get recycled/replaced with new designs. So you're not stuck with mistakes. But it also means you need to design with future changes in mind, e.g. by using CSS so you can change the look of whole classes of elements easily. There is some use of styles in print design but nowhere near as much as online.

Answer 4

Fonts and Text

• You are limited to a small subset of fonts
• Fonts are viewed at different sizes
• There is a readability limit for how wide paragraphs should stretch (in a fluid layout)
• Write for readers of all types - Some will skim, others will read in detail

Images

• Sites are viewed at different resolutions and screen sizes - Design accordingly
• To achieve transparent backgrounds in IE6, use PNG8 with alpha (IE6 doesn't support varying levels of transparency, it's either 100% transparent or it's opaque)
• Use CSS sprites
• Images should not be used in place most of text
• The img tag should be used for images with semantic value and all layout images should be CSS images
• Every img tag needs to have the alt attribute to validate

(X)HTML and CSS

• Browser rendering varies greatly
• Validate CSS and (X)HTML for a greater probability that the design will be cross-browser friendly
• Don't use CSS hacks
• Use the proper semantic markup
• Pages should be able to work without JavaScript enabled
• Read Yahoo's guide for performance and use YSlow
• Dreamweaver's design mode doesn't reflect how a page will appear in real browsers

General Design

• Simpler is often better in terms of usability, accessibility, design, and download size
• Lists of greater than five or six items should be broken up visually
• Consistency is important - Don't change your navigation, etc without an extremely good reason
• When choosing colors, keep those with color-blindness in mind. This will affect how you choose to convey meaning by color.
• Place the most important information above the fold (the part of the screen that shows without scrolling)
• The web is interactive. This drastically affects how you consume and display information. You can hide and subsequently display information using tabs, accordion, and similar methods.
• Think in terms of primary and secondary calls of action. What do you want the user to do? Where do you want them to go next?

Answer 5

Remember to save your jpg files in RGB format not CMYK format. I regularly get sent jpgs that won't display on a web-site and every time it's because it's been saved in the wrong format from Photoshop.

This will become less of a problem as browsers support more image formats, but considering that 20%+ of users are still on IE6 for the sites we develop this will take a while to go away.

Answer 6

• The user controls how they want to see content on the web, not you. Your design will not look the same to all people because some people may make it different on purpose.
• Screens can be arbitrarily large or small
• The web is interactive: usability trumps pretty-lookingness
• Your page will be read by machines: make sure the data is easy to get at by scripts that can't read images / large blobs of text (aka "be semantic")

Answer 7

A given color or font will render differently in different browsers.

Especially when one browser is on Windows and the other is on Mac or Linux, etc.

Answer 8

Thanks everyone for your help, that's really useful.

Answer 9

I wrote a blog post about this a while ago - http://aloestudios.com/2008/08/dear-print-designer-doing-web-design/

So did my friend Mark - http://www.visual28.com/articles/tips-for-better-web-design

Answer 10

A lot of these are good rules of thumb for print designers who want to learn how to actually markup HTML and write CSS. But as a Web developer in the past, I'd frequently just take a designer's template and write the HTML and CSS for them. Whether or not that task was simple or difficult depended on the designer's awareness of the capabilities of CSS.

There was one pain point in particular that kept coming up. So for print designers moving to the web, the absolute number one rule to remember is:

Don't design any element to have an explicit, pixel-perfect height. You can restrict the width all you want, but changing fonts, preferred font sizes, and different text strings being pulled from the database on different pages means that text needs to be able to flow vertically without generating hideous, hard-to-use overflow scrollbars.

Designers who remember this can usually conjure up designs that are easy to cut up and integrate in a mostly semantic manner. Designers who forget this sometimes end up creating designs that have to be shoehorned into a 3 inch by 3 inch box, and that's when I reach for the vodka.

Answer 11

Jeffery Zeldman's book Taking Your Talent to the Web is specifically targeted to the question you have asked. It's been out for a few years...not sure if there's a 2nd or 3rd edition. Check it out.

My main advise is that you need to recognize that while you have dot precision in print applications, most of the time in web design your focus is to design and code a site that will accomplish your content and layout goals for any number of platforms, resolutions and color depths. Color depth has become less important than it was in the past.