Computer screen DPI myth and other misconceptions

Or, an arti­cle denounc­ing the “web is smaller” graphic design mantra. Appar­ently, it’s all about size…

Today I received an email from a graphic designer we’re [base10solutions, that is] col­lab­o­rat­ing with in build­ing a web­site, and this com­ment about source images and com­puter screens came up:

I know we said to make the flash ones a really hi res pic­ture… but you cant view more than 72dpi over the net anyway.

It’s not as though peo­ple who say this are just stu­pid: the whole “72DPI” myth has been prop­a­gated for… a bloody long time. It’s one of those things stuck in the col­lec­tive uncon­scious­ness of the world’s graphic design­ers, espe­cially those who have flirted with design for the screen only occasionally.

The designer we’re work­ing with is great… this isn’t in any way against her, but her email pro­vided an oppor­tu­nity to jump up and down, and there are two rea­sons for that.

Firstly, mon­i­tors don’t all dis­play the same num­ber of DPI, or, more accu­rately, PPI. I think the emer­gence of a plethora of dis­play tech­nolo­gies, as well as falling costs in recent years of all kinds of dis­plays, has meant that we’ve seen a huge move away from 15″ screens being stan­dard (I’m hard­pressed to find any 15″ CRT mon­i­tors new, and even the LCD mar­ket is shift­ing towards 17″ screens) — and “sen­si­ble” res­o­lu­tions on these (1024x768, max) have sim­i­larly been aban­doned. This means, of course, that the com­mon wis­dom regard­ing dis­play res­o­lu­tion has become irrelevent, and ulti­mately false.

Let’s do some maths for a sec­ond. I hate this as much as the next per­son, but… well, it’s required.

I’ve got a 1280x1024 screen. It’s roughly 13.3x10.6 inches in size (17″ diag­o­nally), which equates to about 96dpi. Try this:

1280÷13.3=96.2dpi
1024÷10.6=96.6dpi

It’s not hor­ri­bly com­pli­cated maths, but appar­ently much of the graphic design world hasn’t even both­ered to do that much for some time, instead accept­ing what Pho­to­shop or ImageReady says in all its wis­dom when it advises that “72dpi” is for the web. Yeah, okay.

Hav­ing said that, an image 600 pix­els wide will (in 90% of cases) always be 600 pix­els wide when pub­lished to the web. This means that it’ll always take up about 58% of an 1024 pixel wide screen… it also means that it’ll take up only 46% of a 1280 pixel wide screen. An image’s embed­ded res­o­lu­tion has absolutely no impact unless it’s being printed and the soft­ware spool­ing it to the printer under­stands this.

So, I sup­pose you could say I’m get­ting hung up over words (again) — but I’m not really. There’s a per­fectly valid rea­son to pro­vide higher res­o­lu­tion cre­atives to your web peo­ple (if you’re a graphic designer) — they want source res­o­lu­tion just as much as you print junkies do. For the web­site we’re build­ing, we were going to con­struct a Flash ani­ma­tion that had a spin­ning image in it. If we’ve got higher res­o­lu­tion source, it’s pos­si­ble to do more funky stuff with that (because, in this case, it really is purely about eye candy), just like it is in print (though with­out the sta­tic nature).

It’s worth remem­ber­ing (espe­cially when a web team are devel­op­ing end-to-end cre­ative deliv­er­ables) that the client is ulti­mately respon­si­ble to some extent for the qual­ity of the fin­ished prod­uct. An eye for design isn’t nec­es­sar­ily their sphere of influ­ence, but pro­vid­ing resources to facil­i­tate good design is. And good design is best achieved with good resources.

There’s a com­mon mis­con­cep­tion, it seems, that web design­ers only want cre­atives sup­plied in PNG or GIF for­mat. Most print design­ers realise JPEG images are fairly lossy, so that hasn’t ever been too much of a prob­lem (for me)… but cer­tainly the PNG/GIF thing is. At any rate, just so the world knows, us web peo­ple don’t mind more than sin­gle layer ras­terised images or mock­ups when build­ing sites.

And we cer­tainly don’t need you to splice the web­site up for us… that’s been another con­cern in the past. I’ve spent two hours piec­ing a sup­plied web­site design back together before I even start pulling it apart (again) for CSS treatment!

In fact, in my expe­ri­ence (such that it is), it seems that the less graphic design­ers think about the fact that the cre­atives they sup­ply are ulti­mately end­ing up on the web, the hap­pier every­one is. So here’s my rec­om­men­da­tion: don’t think of it as web any­more. Any web devel­op­ment agency worth their salt should know what to do with what­ever source mate­r­ial you throw at them, and if they can’t use it then it’s their job to say, not the designer’s to guess.

Why not to use prebuilt templates.

This highly respectable ISP has had their web­site designed by a highly respectable web design firm, and has con­se­quently come out look­ing sub­stan­tially dif­fer­ent from every other third– or fourth-tier web ser­vices retailer on the market.

A screenshot of their website

Note their won­der­fully orig­i­nal Flash ban­ner. Look closer. Right click on the movie and hit “Rewind”. What you thought you could see before but didn’t really want to believe any­one could be stu­pid enough to do has come true. For those who can’t be both­ered going to their web­site and/or don’t have Flash installed, observe my screen­shot above. Beneath their logo there is indeed text that reads “Com­pany Name.net”.

Charm­ing. But not quite so charm­ing as this lit­tle gem from Dri­ver Web Design­ers: “We offer our cus­tomers the ser­vices of a pro­fes­sional inhouse Graphic designer to give your Web­site the edge over the competition.”

Ummm.

Bet­ter than all that still, of course, is the fact that their brand name as proudly dis­played not only on their own ban­ner, but also on the Dri­ver Web Design­ers web­site, points not to their own web­site (which is switch.com.au) but rather that of Union Switch & Sig­nal.

Yeah, I used rel="nofollow" on some links in this post to pre­vent Google from count­ing them in its index. It’s because some stu­pid­ity doesn’t bear following.