Designing for the Web – Print vs. Web – Inches, Pixels, DPI, Oh my!
At Babyface we find ourselves working with many creative graphic designers coming from the "print" side – they're used to designing for print and not the web.
I've decided to do a number of posts on this topic of which this is the first, helping print designers make the transition to the web side of design.
One issue of confusion is how to convert inches to pixels or a 300 dpi design to a 72 dpi website.
The issue of 300 dpi (dots per inch) vs. 72 dpi is that many designers – especially print designers – are accustomed to designing at high resolutions – resolutions that are required for quality printing.
What's more, many artists, I find, don't even think in pixels but in inches.
Computer monitors really only display graphics at 72 dpi and developers think in pixels – not inches – so there's often confusion over how to design in inches at 300 dpi so when you hand off your masterpiece to a web developer and they convert it to 72 dpi, it resizes properly.
We currently spec sites for a minimum monitor resolution of 1024 pixels by 768 pixels.
When a browser is maximized on a monitor set to this resolution the viewable area is 1000 pixels wide. This is because the right hand vertical scroll bar eats up about 16 pixels and we round down to a nice easily divisible number. You can factor 1000 by 2 to get 2 columns, 4, 5, 8, 10, etc.
Some designers/developers round down to 960 pixels because it factors evenly by more numbers (2, 3, 4, 5, 6, 8, 10, 12, 15, etc.). But I like 1000.
The height of the viewable area varies depending on how many toolbars the user has but is often around 578 pixels to 600 pixels. This elusive dimension is known as "the fold" and we don't know exactly where it will fall and we can't control it so we design to accommodate scrolling. Sometimes I like to design totally ignoring the fold but that's another topic.
If you to design at 300dpi the width conversion calculation is as follows:
1000 pixels wide / 72 dpi = 13.89 inches
So make your design 13.89 inches wide at 300 dpi. To convert that to pixels:
13.89 inches x 300 dpi = 4,167 pixels wide
Your design should be 4,167 pixels edge to edge. You can always make your art board bigger (say, 4,500 pixels) so you can get an idea of what the design will look like with blank margins but restrain the actual design to 4,167.
When handed to a web developer, its best that you make the conversion to 72dpi so there's no misinterpretation and voila, your hires design is sized ready for the web.