I used to work in Pre-Press for a long time. Longer even now than I’ve been working on the web. I was in and out of InDesign documents all day every day. I’m not an uber-pro, but I know my way around pretty well. Recently I’ve been finishing up laying out my new book Digging Into WordPress (which you can buy now!) and during that time I was thinking about some of the ways working in InDesign is similar to CSS, and some of the ways it’s not. Let’s have a look.
Print documents are of a fixed size. Web browsers are fluid.

In print, you declare the width and height of your page and you can absolutely count on that and design around the edges. In web design, the only edge you can count on is the top edge. If you go left-aligned, you can count on the left edge too, but that’s it. The possibility for bleeding (having graphics / colors flush against the edge) is a lot stronger in print.
Dimensions in print are generally fairly standard. Dimensions in web design are generally tall and narrow.

In print, ultimately a viewer picks up and holds the material in their hands. A print designer takes that into account and makes sure the final product is well handle-able. On the web, our designs can scroll, and users aren’t afraid to do it. That means the dimensions for a complete web page are often really tall and thus relatively narrow. On the web we don’t use images that are 10,000px tall, as we need to consider performance, visible area, and fluctuating content.
Using paragraph styles in print is like setting block-level CSS.
In InDesign (and other major layout programs), you can select a block of text and apply a Paragraph Style. For example, you’d create a Paragraph Style called “Article #1 Text” which you would apply to all normal paragraphs of the first article you are working on in a magazine layout. This Paragraph Style has lots of options you can set. You can set font family, style, and size. You can set colors. You can set indenting and spacing, which controls how the paragraphs interact with each other on the page.

This is a lot like using CSS, and setting styles for block-level paragraph (<p>) tags. The same things you might do as a Paragraph Style, you might do like this in CSS:
p {
font: italic 16px/1.5 Georgia, Serif;
margin: 0 0 24px 0;
text-indent: 24px;
color: #222;
}
In both cases, this is a smart thing to do. It means that if you need to make changes later, you can change things in one place and that change is reflected across the entire web page (in the case of web design) or the entire document (in the case of print design).
Using character styles in print is like setting inline-level CSS.
Similarly, in InDesign, you can select text and apply character styles. With character styles you can also select font families and colors and things like that, but you cannot alter spacing. This is like styling an inline level element in CSS like a span, strong, or em element.

In print you absolutely know what the end result will look like. In web, you just hope for the best.
In print design, you get proofs of your documents that your printer provides that you sign off on if everything looks exactly perfect as you want it. If you are a really dedicated print designer, you’ll even be there at the printer when your design goes to press so you can ensure the final product is perfect.

“press check”
In web design, the best we can do is cross-browser check. But there are so many different browsers, different platforms, different monitors with different calibrations of different sizes. We can check as many as is reasonable, and check the most popular combinations, but otherwise we just need to use our professional judgment and experience in saying the design will look acceptable in all environments.

Adobe Browser Lab
WYSIWYG tools are ideal in print, and garbage in web design.
The tools of print design are far superior to the tools of the web designer. In InDesign, you click and drag boxes around and they stay where you leave them. Need three columns of text instead of two? It’s only a few clicks away. You get pen tools and pencil tools and resizing tools, all of which behave like the metaphor that they are.
Adobe tried to bring these same metaphors to WYSIWYG web design tools like Dreamweaver, but it doesn’t hold up. You can’t just draw a box on a canvas and drag it around and expect a program to turn that into perfect HTML and CSS. There are too many other factors that come into play. The result is either going to be exactly how you drew it and full of terrible inflexible code, or not at all how you drew it.
If you are coming to web from print, don’t expect to use the same tools you did before. At least not in the same way. Prepare to code, but don’t worry, it’s really not that complicated.
If you are coming from print, you aren’t gonna love the font situation over here.
To be fair, it’s getting a ton better. But print designers really have it made. Any font in the world can be had and used. On the web we deal with a very limited font set, expanded only by bad techniques (e.g. using images), fancy paid-for technology (e.g. TypeKit), or licensing problems (e.g. very few decent typefaces are legal to use with @font-face).

Font Explorer X
Even with the situation getting better on the web (hey, we’re even getting ligatures!), the control is still going to be pretty bad for a long time. Print designers are masters of kerning. Kerning is pretty tough to do on the web. Want to apply a stroke to letters on the web? Good luck with that.
Print is a 300 DPI world. The web is a 72 PPI world.
PPI meaning pixels per inch, DPI meaning dots per inch (although when working digitally with print, you’ll be working at 300 PPI) To be fair, digital printing these days doesn’t really need 300 DPI anymore, but it’s still a valid point. And, for the record, many computer screens are higher than 72 PPI, but you’ll still probably work in Photoshop at 72 PPI. Print designers may enjoy coming over to a world where they can work in Photoshop at 100% all the time. What you see in Photoshop is what you see in the browser. File sizes are smaller and so Photoshop is far more responsive. The clip art you download is way cheaper too!

Both can be frustrating.
Once you get used to working in one or the other, you’ll surely find certain things frustrating in the other. Why can’t I set a background color, padding, and rounded corners on character styles in InDesign. Grrrrr! Why is it so hard to make a full size background image on the web. Grrrrr!
The fundamentals are the same.
Line, shape, color, balance, texture, contrast, flow, affordances, the gestalt… What ultimately makes a good web designer is the same thing that ultimately makes a good print designer: fundamentals. You just need to know what looks good and what looks bad and have the time and patience to get to good. Knowing your tools helps, and definitely makes you faster, but are just a tiny fraction of what makes a good designer.

I meet print designers all the time that talk about how they want to get into web. Awesome. Both are cool but the web is definitely the medium of the future. If they are already a great print designer, I already know they’ll do well in web. If they are a print designer because it was an easy major in college and are just trying to learn web because they are nervous about losing their job, I worry.
ha ha quality article. I came from print myself and a lot of this rings true. It’s a big leap, but you never look back!
Hey Andy,
Let me ask you this…as a current print designer looking to make the leap to web, would you suggest I learn via Dreaweaver or doing the coding manually?
haha, that’s got to be a no-brainer. Learn the code manually, otherwise you will never really understand what you are doing. It’s good to at least have a basis of understanding. There are so many resources out there too, it would be silly not to take advantage.
I find DW to be pretty good at organising sites and helping me out with CSS, the visual editor leaves something to be desired of it, but you have code validators, and refference books on most things you may need to know.
I would not recommend you learn dreamweaver. You can use it to code and it helps a little but the visual design is horrible.
I’d suggest you skip DW all together if you are on a Mac. There are plenty of less expensive tools that are faster, have better live previews and are way less bloated. I recommend using Coda and CSSEdit.
I reccomend learning the code manualy as well – but dont discount DW for all it can teach you. One of the ways I learned HTML Waaaay back in the day was to take the source code from a site that did soemthing I liked or was confused about, and opened it in an editor like DW (BB edit back then for me =). Learn the basics, learn the rules, learn whats what, and you will be faster – but DW can be a Good tool for teaching you.
TL;DR – DW can be a good teaching tool.
I think You should start with DW to get the grasp of what’s going on. In DW You can quickly switch to see how Your code looks like in “reality”. Once You get to know Your code – switch to Coda or Notepad++ and force Yourself to try to write code by hand. After a while DW will not only stop to be needed to code but it will even become harder and much slower to work in DW.
Cheers.
I strongly recommend to learn coding by hand first. Then you can decide what software will help you and where will you let it help you and what will you always want to do yourself.
I teach webdesign coding and in nearly all cases start with notepad coding HTML and CSS using the web browser as preview. I feel it’s better to learn that way than to learn a software and some languages at the same time.
Once you know the code, you can do what you like. If you are always relying on software… not good…
I would recommend starting with DW. It will give you the visual perspective that you are used to looking at from being a print designer, but then you can also switch to code view and see what’s going on behind the scenes. Once you get comfortable with the code then switch to something like Coda.
I agree Landon. After playing with Coda and Expresso I still came back to DW and I learned to code in notepad… DW just helps me speed through the selections of divs and nested tables (yes I still nest tables for email design) in the design mode. DW is still a POS program when it comes to FTP and also errors out if I have more than 10 pages open at a time, but for what it is, I think you would be foolish not to consider it the standard for html dev.
I’m a fine artist that became a web developer during the boom and is now enhancing my skillset with a graphic design degree. For coding:
1. Learn to code HTML, XHTML, CSS, and XML BY HAND. No IDE. Just use notepad.
2. Learn how design and normalize databases. Free ones: MySQL, SQLExpress, Oracle Xpress etc. Or Access comes with Office.
3. Learn 2 server side environments, 1 primary and 1 secondary. I recommend PHP and ASP.net.
4. Learn project management. Prevent scope and feature creep. Get your projects done on time and within budget. Get to know UML and Usecases. Plan plan plan then plan some more. Measure twice cut once.
5. Don’t forget JavaScript. Very important. You don’t need always need to be an expert, but you’ll need to know how to manipulate it.
6. Flash and animations are their own monsters. Get to know them too.
7. Always lots to learn, and you’ll always be behind the learning curve. Find what you love to do on the web and make it your strength. Then spend the rest of your time reducing any weaknesses.
I’ve just been playing around with @font-face for my site.
Fontsquirrel.com has some nice fonts that are available, they even include a downloadable pack so it’s completely cross-browser compatible.
I was using TypeKit, but I’m really put off by that jarring moment when the javascript kicks in.
Font Squirrel is indeed AMAZING. And I agree about TypeKit. I also found it didn’t work at all sometimes, although I do still think it has great potential. Some of the other font embedding services don’t require JavaScript at all, and thats probably ideal.
Nicely put. There’s a small typo in the Paragraph Styles section – first paragraph, last sentence.
I started out with Dreamweaver (well, I started with print). I never thought about it much before, but I think that starting with a WYSIWYG program makes it more difficult to learn good coding practices and really understand how things work on the web. At least that was the case for me. Now I still use DW, but I spend a lot more time in the code, building from there rather than using it like InDesign. Good insights.
Got it, thanks.
Very nice. I made the switch straight out of college. I had a hard time with it… i felt so limited… and it effected the quality of my work some. What helped me make the transition into making better designs in web was understanding how the code works. Now, as i design, i can think through how the design works. it can be a real hard transition. Thanks for the article, Chris!
p.s. my favorite:
“In print you absolutely know what the end result will look like. In web, you just hope for the best”.
Brilliant.
Nicely done! Great to read your tuts as always.
Nice article.. I also taught myself Dreamweaver back before DW MX. I’ve always been in print. I’m taking xhtml/css classes now to learn coding and I cringe when I’m in Dreamweaver CS4 everytime I instinctively look for the DW tool to do what I’m trying to do. I’d rather code it now, so I have to stop myself, which is sometimes painful but I know in the long run I will benefit.
It is tough to get rid of that print mentality and give up your sense of layout control…
also, typo: Need three columns of text instead of three? (“three” twice?) fyi :)
I’m literally (as of a few days ago) looking to jump ship. I’ve been an ATL art director for the past 13 years and now I want to add the world of being digital art director to my bow of strings.
I totally get the difference, I’ve even built my own website in Photoshop and Imageready (uploading via Dreamweaver) but my question is I’m still a little shaky as to how to make the leap and do it as quickly, painlessly and professionally as possible.
Would taking a Dreamweaver course be of benefit to help me understand how websites are designed?
Marie Poulin mentions learning code manually? What’s the best way to go about this and are there any good books you can recommend?
All hints/tips and advice would be greatly appreciated.
Regards
Craig
Don’t bother with a Dreamweaver course, its a bloated inefficient program. If you are on a Mac try Coda and CSSEdit. Here is a book I wish I had starting out http://www.sitepoint.com/books/cssdesign1/
It will really show you whats possible.
Thanks for the tip Joe. I’ve just downloaded the sample PDF and it looks like a very good book. making very simple understanding of the key features to design any website. I’ve a very basic knowledge of what HTML is so this should start getting me up to speed.
Reading the posts on this site have also shown me that more and more designers are excited about designing for the web than they are for print. This is very encouraging.
At first I was unsure about this article but it’s really well written, especially the closing paragraph.
What I love about the web over print is that you actually get something to work and function. Surely that has to be more satisfying than creating a printed document that gets sent out to a client?
Is there anyone who has gone from print over to the web (successfully) agree with that statement?
Great article Chris! I just sent this around to everyone as work – great way for print designers to relate to web design.
You seriously spent some time thinking about this.
I think one of my favorite parts about web design is you line – “In web, you just hope for the best.” The hope for the best part that comes into play when laying out a web page is half the fun!
But when IE gets in the way!!!!! grrrrr….!
Nice Article.
Screen is 72 dpi is pretty old statement, now most screens are more than 90 ppi and lcds in laptops are even higher upto 150 ppi.
That’s a lot of active fonts you have there, do you find yourself running into conflicts? I work in a print design house and we tend to activate fonts on a job-by-job basis to avoid conflicts and lost fonts.
Could you give us a list of “valid” web fonts? I know there are lists all over, but I’m always interested in comparing lists.
I wouldn’t really go so far as to disagree with your point about fixed size vs. fluid size with print and web, but I do want to point out that really most web viewports for most users are similar in size. Still, fundamentally, the size can be changed dynamically by the user for the web and not for print, obviously.
Wow this is great and came just in time. I am an adjunct teacher at a design department at a University that is pretty print heavy. They are very aware of their need to emphasize web more and are taking measure to provide more for the students including through my class. I teach a design applications class where I introduce to them Photoshop, Illustrator, Indesign. This is my fist time and they asked me to ad in DW. While I am not a web designer I have took it upon myself to learn ALOT about HTML and CSS in the past 4 years (much through your site Chris)
I know enough to know I dont want to teach these students the wrong stuff WYSIWYG. So I have decieded to take this portion of class to teach the very basics of understanding first the internet, then how webdesign works, that coding is involved, that there are limitations and that learning to do it the right way is best. etc.
The first part of this section is in 1 hour and I plan on reading a portion of this post about WYSIWYG. Thanks!
I think the future is COPE (Create Once Publish Everywhere) (http://tinyurl.com/yh9bz3d). Learning curve may be steep, but oh so much easier when we get there.
“If you are coming from print, you aren’t gonna love the font situation over here.”
Haha, I love that line. You’re right, though, it IS getting better. Besides the emergence of @font-face use, I see many services (like Typekit) opening in the future.
We just need something added to the HTML spec (or just apache itself) that lets us use custom font files without being able to load that font file directly in the browser and download it. Something like how .htaccess files work. Obviously they are being used by the web server, but (as long as your server is setup right) you can’t download that file or see its contents.
Cool article.
I used to work in print, but much prefer working in web now! so much more freedom in my opinion, no fixed sizes and don’t have a brief set in concrete from the client most of the time unlike in print where there was set sizes etc. Everything should be on the web, save paper save trees!!! lol
Great! I love the comparisons. I used to be in love with print, but slowly but surely, I am starting to love web design.
In print you have dpi (dots per inch) and on the web you have ppi (pixel per inch)… It’s different measurement unit.
By the way great article!
Great article (as per the norm with you) But I am supprised you didnt point out Pixel vs. Vector differences more. I have taught a few cross overs, and they always try and design a layout in Illustrator, and have a hard time understanding the cross over. I know it’s good for “some” (obvious is obvious) layout stuff – but it’s a Whole different world.
Excellent primer on some of the differences between the print and pixel worlds. As someone who’s coming from a print background, I relate most to the WYSIWYG editors.
I took my first steps with web back in the days of DW 4, got frustrated with the interface, and quickly dropped it. Ended up picking back up just over a year ago, and learned to code everything by hand. Couldn’t be happier with that decision, and highly recommend it to anybody that wants to learn web design and development.
Thanks again, and keep good stuff like this comin’
In print you know absolutely know what the end result will look like? Hah! If that were true, i’d probably be a print designer instead of web. Well, maybe not – but i find print to be much more frustrating on that level than web.
The key difference between print and web is that print is – for the most part – inherently usable. The designer who lays out a magazine never has to run a usability test.
This is what truly separates web from print – we have to think about how it works as much (if not more) then how it looks.
Hi Chris,
Nice post, once again.
The new comment style is great except (a) IE6 displays the avatars atop the text, instead of left, and (b) i forgot to put in my name/email after typing up the post and had to re-type the comment from scratch.
Cheers
Chris (from OZ)
I work in prepress too, but I have to say, that for most part it is a very dull job. Unlike what you mentioned, I don’t really get to play around with anything, be it font, layout etc. If it does not match customer’s proof, very rarely they let us make any significant adjustments. They prefer to supply new files. Web is so much different. It may be limited in some ways (fonts, images – need to watch sizes etc), but it is so much more alive and interactive. Printing (Prepress) is just staring on someone else’s design and following instructions. Certainly, there is not much room for creativity in Prepress. But for now it pays majority of the bills. Once the situation shifts and my freelancing will take off, I will happily leave Prepress and won’t look back.
I used to be a print designer too but this is the one that causes me the most trouble when dealing with other print designers who are new to the web design game and who still demand exact pixel rendering of their layouts in all browsers and waste time obsessing over it when they should instead be working on ways to improve the usability of the navigation or forms.
And I use DW on Windows and think it’s a decent tool with some time-saving features but I always use it in code view and came to it after having used other text editors for a while.
Hey that was a really nice post… I work in a website designing company and appreciate it a lot…
I’m also from a prepress background and came to webdesign out of curiosity a few years back… all of this rings a (sometimes painfull) bell :)
I work part-time in a print design studio (rest of the time freelancing) that wants to open up to web design services, so i’m kinda of the in-house webguy.
I’m trying to teach the basics of designing for the web to my fellow co-workers, but when I ramble about all of the constraints (looking at you IE), good practices, semantics and whatnot and they see the underlying code they go crazy and say stuff like “this is not for me” or “I thought webdesign was simple but now that you pointed that out, I think print design is SO much easier”. Looks like I’m in for a tough ride converting them :p
This is my exact experience as well. My day job is still in InDesign, but I do a lot of web work as well.
What you forgot to say is that if you make a mistake in print (and nobody notices it until after the book is printed) it’s there for a loooooong time. On the web, you can change it before anyone notices :)
Great breakdown I recently worked with a designer who specializes in print and we where designing an eblast, and they where astounded at the unknown variables and lack of character by character control over the typography. I explained that designing for the web and more so eblast your are designing for the masses, a common element that you hope goes through…
This article I believe will help him see the differences
—
Thanks and Regards
Noel for Nopun.com
a graphic design studio
I’ve came from print and learned html/CSS in DW but never used the WYSIWYG tools, I’ve always used DW as a text editor. Now I am using Notepad++ and sometimes DW as well.
Great article, Chris. I know some people who believe that print designers cannot be web designers, and yet they ask web designers to do print. This kind of thinking makes me crazy. I wholeheartedly believe that talented people can make the switch and, in many cases, do both well. Sure, there are differences and limitations with both mediums, but understanding and embracing those differences is the first step to being successful.
very goo article.
Graphic design crosses all platforms. If you are a talented designer you can work in any format. As long as you understand the principles of color, typography and layout, you will do fine. Of course every medium has it’s own rules and uses varied software, but those can be learned. If you have the inspiration to cross over, you must try!
I was actually curious to know if you used InDesign to create the new book. Glad to have the answer. :)
awesome site, awesome articles, awesome author!just awesome man! your insights and knowledge are both true, informative and yet humorous… very very not boring to read… im surely going to buy your book. now my dream is to be as good a web designer as you are someday…
awesome site, awesome articles, awesome author!just awesome man! your insights and knowledge are both true, informative and yet humorous… very very not boring to read… im surely going to buy your book. now my dream is to be as good a web designer as you are someday… and oh im still a student… so pls give me some advice…
One more big difference, You see every thing in print documents at a time but in web browsers you scroll down/up to view whole page. And one more thing that you can view/read print documents as long as you want but its a bit difficult to keep your eyes on the screen.
According to Adobe InDesign product manager Michael Ninnes, in a recent presentation at MAX, 72 dpi for the web is a myth. Resolution for web images doesn’t matter. What matters is the pixel dimensions. Look at the image size dialog in Photoshop. In the upper portion of the dialog – relegated to web images, there’s no resolution box.
Our agency has been around since 1990. I’ve been involved in print design and production since 1982. We’ve (I’ve) traveled through all the great improvements in our industry. This is the latest amazing advancement. I help our “print designers” understand the shift by saying “the computer/web is the new printing press”. Even though our designers can’t run a printing press, they know exactly what will come off the business end of one from the files they submit for production. They know how the variables of paper selection, ink density and bindery impact the outcome.
They need to understand web programming to the same level. They don’t need to be the programmer, but they do need to know enough to be fully aware of what the outcome of their designs will be once programmed. Another good analogy is directing photographers. The art directors and designers on our staff have the photo vision in mind upfront. They can’t shoot the photos themselves but they clearly know what’s possible, what they want and what their limits are.
The shift to web design comes from applying the same in-depth study and dedication, that’s brought them this far in their career, to this new “printing press”. There is no silver bullet or short cut. Its yet another call for hard work and dedication to their craft.
Great article. A lot of designers I work with are only experienced in print, so it takes a bit of work to get them versed in what can and can’t (or shouldn’t) be done in web. Coding print designer’s PSD can be a nightmare.
The leap from print to web is GIGANTIC. the web is harder to design for, no doubt. Basic design principles still apply but that’s about it. -dp
Great article. Along the “should I use Dreamweaver or not” argument. I use BOTH dreamweaver and more “hand code” tools. The longer I work (many years now), the more I use hand coding. But, I still go back to a tool like Dreamweaver for certain situations.
Nothing will get you started like DW, but it’s ease of use is also it’s downfall. There’s so much more you will want to learn and do.
Thanks for the thoughts.
Fort Wayne Web Design
Thank you Chris, for a great article. I’m a print artist/designer from way back (when we used to glue the type down onto artboard) and made the switch to web design/coding a few years back. It wasn’t an easy transition.
In fact I was so worried about my first website that I constructed it in (gulp) QuarkXpress6.5. Needless to say I regretted that in later months. I still use DW, but am much more interested in the code these days. Being used to Quark Style Sheets was a great help in understanding (some of) CSS.
I want to say thanks, as well.
Great piece.
I come from the print world myself (designed and built newspaper sections and an occasional magazine), and while I was still in the print world did a web site in DW (maybe 9 years or so ago) using layers that I’d convert to tables and then back again to tweak it and then back to tables. (I was pretty much a dunce at the time. :-)
I absolutely hated tables and didn’t do much web work after that. I knew QuarkXpress really well and later replaced it with InDesign (was a real whiz with styles in both) and even taught them to designers and production folks and even college kids.
Then I got laid off a couple years ago, discovered CSS and hand coding (I have DW but hardly ever touch it) and the world is rosy again.
Sure the web has all these quirky things that drive us all nuts (pick a version of IE, for example) and you have to teach clients about all the uncertainties and differences between print and web, but oh gosh, what fun…mad, crazy fun.
Every day is this wonderful challenge and Chris, with articles like this, you help us all through it.
This one really hit home with me. Thanks again.