To Photoshop or Not to Photoshop?
That is the Question
To photoshop, or not to photoshop: that is the question:
Whether ‘tis nobler in the layers to suffer
The marching ants and arrows of poorly rendered fonts and crashes,
Or to make raw css against a sea of browser bugs,
And by opposing end them? To draw: to code;
No more;
When I first began coding HTML—all the way back in 1995, children—I had a text editor and a browser at my disposal. I was content to type and refresh all the live-long day. When I decided that something was important enough that it outweighed conerns about bandwidth and called for a graphic, I called up my old friend… uh… GIFexporter? GIF something. It was a tiny application (we called them applications back then, not apps) that just let you paint, pixel by pixel and then save it in any format imaginable. And let me tell you, the diffusion patterns for GIFs were awful—if you kids even care about things like that with your fancy PNGs. We could do transparency back then too—yeah, maybe not alpha channels—but transparency. Pixel by pixel. I’m ruminating.
I didn’t see anyone first design a web page in Photoshop for years, but once I did, it suddenly became the defacto way of doing things, and as someone who could code HTML, I found myself on the back end of the creative process, having input only when designers could come down off their pedestals of grid layouts (i.e. tables in tables in tables) and font selections (make more GIFSs for titles!) long enough to hear you say, “That may look good, but it’s a bandwidth hog.” They would reply, “Bandwidth Hog? I haven’t heard of that band. Are they out of New York?”
Designing in Photoshop isn’t just unrealistic, it presents to a client a fiction of control that has never existed on the web, and in the end only hinders design that’s truly native to the medium. I remember presenting what I thought was a really forward-looking design to a client, not because of the aesthetics, but because of the novel way in which the content was categorized and even written, only to be told that 450 pixels was not a standard width for a web site design. I remember thinking, Standard? How do you know how big I make my browser window? The objection was irrelevant. And the colors and fonts… Remember when Roger Black said all web pages should be white? Sure, Roger, because staring at a naked light bulb is good for your eyes. And tiny, tiny pixel-sized fonts make for a great reading experience. That was before all these magical little devices occupied our collective pockets, so some of these beliefs were understandable, but some of us could see the problem on the horizon: standard, static sizes for web sites were bunk and a hinderance.
Frank Llyod Wright was a revolutionary architect because he was a decent engineer. I used to ask web designers—the ones who had primarily print backgrounds—who is a better print designer? The one who can use Illustrator, or the one that knows about paper poundage and the CMYK printing process and knows the difference between additive and subtractive colors? So, I ask the same question now, who is the better web designer? The one who can use photoshop, or the one who knows what CSS elements will render differently across different browsers, the one who works within the limits of devices because she is aware of the limits? Limits aren’t a bad thing, you know. Great creativity comes out of working within limitations.
I urge you, some time when you’ve grown tired of the boxes inside boxes inside boxes UI that is Photoshop*, open a text editor (or open Coda! Please! Open Coda) and type <html></html> and then open that document in a web browser. Breathe easy and gaze upon an unrestricted opportunity for creativity. Take stock in knowing that whatever happens next, what you make will be so much closer to the reality that your end user will experience and interact with. Give yourself over to the idea that using ems means that your design at the other end is not entirely in your control. And it shouldn’t be! People use the term “responsive” and I get that (and don’t mind it), but I still prefer “fluid.” Responsive, to me, implies a query and an answer. Fluid is just that, it fills the space. Web designs should be fluid, a half-measure of design that can get poured into unknown viewing vessels. But semantics aside, the point is, web designs should not be x by y pixels. And Photoshop, for all its brilliance, is a tool for pixel junkies.
With fantastic CSS frameworks like Bootstrap and Skeleton and even more powerful CSS tools like SASS and Compass you need never engage a Photoshop selection tool again. You can have a prototype responsive site up in minutes. And an added bonus: starting with HTML forces clients to focus on their content before a complete design needs to be in place. And content is king. I should know, I still can’t get the store hours for a shop that’s just down the street from me, though they have a (ahem) lovely web site with lots of hard-to-update JPEGs. Starting with HTML means never showing your client something unrealistic. (If nothing, else, consider the time you’ll save.)
So I say, the best web designer is the one who starts with <html></html>, not Photoshop. The age of unexpected devices is upon us, and the Web, your web site, will need to pour into that device, whatever it is when it arrives on the scene. Be ready for it by going back to the basics. The best design is in the code.
*And the requisite crashing.On that note, I have done away with Adobe entirely. If you’re a designer using a Mac, check out Sketch and Acorn. you won’t go back. And your wallet will thank me too.
