The web is a world of constraints, the materials of HTML and CSS flex and give in ways that encourage particular styles. And being able to understand and bend within that scope is what makes a design feel native. Designers who work directly with the materials rather than through simulated environments like Photoshop are at a distinct advantage for making that happen.
If you’re working on a Flash game or a media campaign to introduce a new watch, you can afford to disregard that advantage. That’s when the graphical prowess of a completely blank canvas, sky’s-the-limit approach is exactly what you want. You want dazzle and glitz. Making something that’s native to the web doesn’t really matter.
But barring that niche, designing for the web is a lot less about making something dazzle and a lot more about making it work. The design decisions that matter pertain directly to the constraints of the materials. What form elements to use. What font sizes. What composition. What flow. Those decisions are poorly made at an arm’s length.
I’ve worked with many web designers in the past who only did abstractions and then handed over pictures to be chopped and implemented by “HTML monkeys”. It never really gelled well. The things that got strong attention were all the things that Photoshop did well. Imagery, curvy lines, and the frame. All the around stuff, never the it stuff.
That’s why all the designers at 37signals work directly with HTML and CSS. We simply don’t consider designers who don’t get their hands dirty with the materials relevant to the kind of work we do.
If you’re a designer working with the web who still doesn’t do your own implementation, I strongly recommend that you pick up the skills to do so.
Brade
on 05 Jun 08But a photoshop designer and a html/css designer working in tandem can make the impossible possible. You would be leaving a lot of great designers out of the loop if you forced them to understand the insanity of browser CSS compatibility. And they shouldn’t have to—I think most people would agree that html/css is not for the faint of heart. I know several great designers who have provided fantastic work for our company, and we use our expertise with html/css to get those designs working cross-platform. I’m pretty sure that’s a normal occurrence in the industry. Along with your recent “anti-photoshop” post, you guys are starting to seem a bit out of touch with the design side of things.
DHH
on 05 Jun 08Brade, you don’t necessarily have to understand all the intricacies of cross-platform compatibility. You can certainly have someone who knows all the tricks help with that. It feels like HTML/CSS is has been inflated to somewhat of a rubber dragon at this point.
Also, I consider being out of touch with industry norms to be a feature, not a bug ;)
Christophe Maximin
on 05 Jun 08I’m following Brade on this. “You would be leaving a lot of great designers out of the loop if you forced them to understand the insanity of browser CSS compatibility.”
However, the designer should understand sometimes that “this is a bad idea”, “that will be a pain in the ass to manage in the future”, etc.
Thomas
on 05 Jun 08Spot on!
I recently worked on a project where I had to code the HTML/JS/CSS based off of a mockup from a designer. As nice looking as it was, it didn’t account for how it would be used. Graphical touches upstaged the purpose of the application.
Aesthetics of web app design should stem from how it works rather than what attracts the eye.
Travis
on 05 Jun 08I’m not sure how having designers that at least have some idea of CSS and browser inconsistencies is leaving them out of the loop. They should be encouraged to learn and adapt within their chosen field, if it’s web design, learn as much as you can about the materials you’re building with.
Architects are required to understand materials, not always to the level of a civil engineer, but enough to know what works when building something and what doesn’t. Their designs are better for it, rather than just drawing houses, the architect designs a possible house.
A similar analogy was described to me when I was studying audio production and sound design. You don’t need to know a thing about music to produce an album, but it sure helps a hell of a lot to produce a good album.
Glenn Batuyong
on 05 Jun 08Most of the best web designers I know have an intimate understanding of HTML/CSS because they understand the process involved in site architecture. Without knowing the idiosyncrasies of the web and the users who ultimately have to interact with it, designers may create impractical site designs which are difficult to maintain or impossible to implement.
Rik
on 05 Jun 08Man, I couldn’t agree more. Doing both design and code gets the best results. To much is lost in the translation when it’s handed off to a code monkey (no offense), plus you can also be refining the design when you are coding as well.
Jeff White
on 05 Jun 08While I agree completely with you that designers need to know how to build their own HTML and CSS, I think you guys are missing the point. As I wrote yesterday, there is no one right way to work.
Photoshop is a tool, just like any other, and just like was mentioned yesterday, no it doesn’t fit the needs of 37S. There are plenty of people for whom it DOES fit the process.
There is no one correct process. It’s naive to think that everyone should work exactly the way you do.
Jacques
on 05 Jun 08First, let me say there’s not much I disagree on with your philosophies, in fact I’m trying the skipping photoshop method for a current project I’m doing, but through my personal experience I have to disagree with this recommendation. I’ve worked in a 7 different web agencies, with 7 different work environments, over the past 10 years and found that the agencies that hold creativity in high regard succeed with their execution more when they employee a designer that has no knowledge, nor desire, to learn html and css.
We all know that the web world is a mix of different skill sets and interests, so from one shop to another the same environment will not work, and for 32signals, I would say that creative expression is second to programmed functionality, thus, you reasoning is sounds. But for the shop that gets it reputation from the creative, and usable, work they produce this method can become somewhat of a suffocation to their process and products.
A shop with good communication can easier get past educating a non-css speaking designer of “bad ideas” than they can with trying to force a CSS programming to understand great design philosophies.
designslave
on 05 Jun 08Good print designers will have a strong knowledge of the strengths and limitations of the printing process. And they will strive to have good communication with their printer. But they don’t necessarily need to know how to run the printing press.
designslave
on 05 Jun 08.. having said that. I’m a web designer who does all his own html/css :-)
Sal
on 05 Jun 08Design isn’t only about look and feel. A big part of UI design is behaviors. While I agree for the most part with the post, there is also a danger that designing under the constraints of HTML/CSS can lead you to take the path of least resistance instead of fighting for UI behaviors that result in a better user experience even if they are difficult to implement.
Jim Jeffers
on 05 Jun 08I completely agree. This is a school of thought that so many designers need to get past. This needs to happen on both sides. Developers tend to approach HTML/CSS from a counter productive viewpoint. Many see it as a means to an end for an implementation of a design rather than the creation of an actual resource.
Jared Christensen
on 05 Jun 08I am a web designer that now rarely codes his own work, but has come from a front-end code background. I think it’s better to say “Web designers should understand HTML/CSS.”
Jin Y
on 05 Jun 08i agree with OP. however, i’ve read a few blogs recently on this very topic.
it got me thinking: where do we draw the line? should a “designer” also code his own javascript too? (or at least has the ability to implement existing js libraries.)
if a designer is to code his own html/css, should he also know about doctype, xhtml format, 508 compliancy etc etc? you see where i’m headed. this isn’t 1995 anymore, where html was, just html. front end coding for the web has become quite complex these days.
Mike Swimm
on 05 Jun 08I completely agree here.
@designslave I don’t think that comparison is the same as web. Most anything designed for the web in another tool will need to be made in html. With print design the photoshop file does not need to be remade in the same way to be printed (assuming modern machinery).
Ben
on 05 Jun 08I think the all or nothing approach is flawed. Having a designer who is well versed in HTML/CSS will certainly help if you simply want to crank out designs that are easy to implement but I don’t think that’s what a designer’s job should be. A designer should be designing/creating a beautiful interface that is clear and easy to use (from the user’s perspective). They shouldn’t be worrying about what is “easy” or “safe” for a developer to implement.
It’s the developer’s job to transform the flat design into a working site/app. It’s also the developer’s job to push back when the designer has created something that is simply impossible to build (or not worth the time it would take to do it). The key is in the communication between the two.
If you design without thinking of what is “possible” to build you’re more likely to come up with a fresh idea or perspective rather than the same old boxy look. Trust me, as a developer there’s nothing that bugs me more than getting a design with rounded corners and drop shadows over gradient backgrounds (or some other element that is a complete pain to implement cross-browser) but that’s what pushes us to try and find solutions that work. If every design we had to work from was easily implemented things would stagnate fairly quickly.
Charlton
on 05 Jun 08I worked with a very good designer a few years ago. He started his designs in Photoshop, and did all kinds of neat gradient stuff and mockups there; this was very good for client relations, because no client I’ve ever worked with has been able to understand “this is a prototype system, we still have to build the back end.” The clients saw the Photoshop comps, and liked them; and then, this designer would slice and dice and recode his designs himself in good CSS. By the time I, the programmer, actually had to deal with the designs, the HTML and CSS were done.
I’d trade every “it looks pretty in Photoshop, what more do you want?” or “what do you mean, we can’t develop the whole site in Flash?” developer I worked with before or since to work with him again.
Andrew
on 05 Jun 08I don’t think you’d call yourself a web designer if you didn’t touch html/css would you? Maybe a graphic designer.
Knowing only one portion of any job does not benefit anyone. You can be responsible for only that one thing but having an understanding is essential to communicating with others in the team.
Photoshop is just one tool. To continue the analogies, it’s like a mechanic in a shop using only an air wrench. Damn, he’s good with that thing and it makes a cool sound but why take the tires off when the car really needs an oil change. OK, maybe not the best analogy.
Having the knowledge of the in-between bits are critical and sometimes the most difficult to understand. Time, money, and frustrations are saved when more people understand everyone else’s role in a project.
alsomike
on 05 Jun 08I agree! Most developers can’t turn in a decent HTML/CSS design to save their lives. Sure, maybe they can make it semantic and well-formed, but can they make it follow basic design principles? No.
Design, user experience and visual aesthetics are the foundation of web design, and you’d think that a web developer would care about what really matters instead of focusing on what Ruby and PHP does well, clever code tricks and “optimizations” that are undetectable but show off obscure programming trivia.
Why developers refuse to get involved with the basic materials of web design is beyond me, but if you want something done well, do it yourself.
Jacques
on 05 Jun 08I think the one large thing I’m seeing in everyone’s opinion about this topic is that you have a designer and a programmer. But with this viewpoint you’re missing a key element. The web is no longer a two part team. You don’t just have a designer and a programmer, what you have is a designer, a HTML/CSS developer, and a programmer. Each skill set, to be truly great, requires an amount of focus solely on that skill.
Yeah, you can have people who can do two or even all three, but to have an efficient shop that provides great creative, great cross-browser support, and great functionality you need one member of your team focusing on their one area.
This of course requires that all three can talk to each other, which not being able to is a unfavorable stereotype of web developers, but if you have a team that can focus on their parts and communicate, you can tackling anything project while producing some of the greatest work on the web.
Barbara Ling
on 05 Jun 08I totally agree. I design my own graphics, hack my own code, and because I can turn on a dime, don’t have to wait for anyone prior to wanting to implement any change whatsoever on my blog.
It’s very beneficial.
Data points, Barbara
Derek Nelson
on 05 Jun 08I think this article makes a good point but the phrasing makes it seem as though this is gospel and most designers are lost if they don’t fall within these parameters. As with the article, Why We Skip Photoshop, this seems like something that has more to do with your personal experience with designers rather than the common consensus.
While having a good understanding of the process involved in final product that will be produced is good practice, saying the designer should also be doing the CSS implementation just doesn’t make sense at all times.
You’re going to have “good” designers and “bad” designers, so if you we’re to define a bad designer as one that doesn’t do his own CSS work, then you’d be missing the point. A bad designer that does his own CSS is just going to create a poorly thought out design and then some equally poor CSS.
There are plenty or great designers that aren’t doing their own coding but have the common sense to approach projects from a well rounded perspective of design and functionality.
Learning CSS won’t teach common sense.
I think it’s worth saying that the title of the article should be, Web designers should define the “It” before jumping into Photoshop or CSS. Actually, that’s not very catchy. ;)
Riddle
on 05 Jun 08David, I agree completely, but only after reading your 1st comment. Please, make an update to the post, because now it sounds weird. ;-)
Front-end developers must know a lot more than what is float and how margin works.
Tor Løvskogen Bollingmo
on 05 Jun 08Web designers should know the in’s and out’s of HTML and CSS, but they don’t have to code everything, aslong as the have the mindset of a HTML/CSS coder – and know whats possible or not. This is where print designers gone web designers often faces failure.
Jacques
on 05 Jun 08Tor, I would have to say that you are partly right. I’ve seen some of the best web designers come from the print world.
I would say the reason they fail at being a web designer more out of bad management than to lack of know-how.
8500
on 05 Jun 081. Interaction design 2. Information design 3. Visual design 4. Interface engineering
All are unique skills that may be combined in one talented person or distributed across several positions but my experience, very few people are excellent in all 4 of those areas.
Keith
on 05 Jun 08Hi…I’m Keith…and I’m a recovering graphical mockup guy…
I always loved to jump into Fireworks to hammer out a “rough sketch.” Turned out my “rough sketch” though quick was getting in the way of me thinking about the actual use and design.
Since I embraced the whole wireframe concept in conjunction with paper prototyping I’ve managed to create a much richer UX right out of the gate. Things that required many more costly iterations post development and launch are addressed when I’m doing everything with paper and pencil.
Further, I can point to statistics showing how people used the existing site (usability study), how they reacted to the paper prototype (paper prototyping), and how they use it post launch (redeliver the initial usability study).
You’d be impressed at how people react when you show them quantitatively how their old site stacked up versus their new one. Likewise, you’ll be impressed at how “design rivals” in your workplace quiet down when you prove your ideas are correct!
Jenn
on 05 Jun 08@Jacques – I tend to disagree. It’s not a cut-and-dry topic of print designers can never understand the web, and web designers can never understand the print, because deep down we are all cut from a similar mold.
Where I feel this article has it right that web designers should understand code, is that print designers (from my experience) tend to get hung up on very minute details that neither enhances the user experience, nor does the user even notice is there. I’m talking about the “move this line 2 pixels to the left” sort of edits, which I unfortunately deal with on a constant and continuous basis.
To the point of, is it really worth extending a deadline to make sure the actual website is pixel-perfect in its “dazzle” elements to the Photoshop file, even if it does hinder some of the usability? That is the part where I see an enormous benefit to web designers understanding the limitations of basic HTML and CSS. Then, we could better determine how far we would like to push these limitations on the smaller-budget, faster-turnaround projects, and save the stickier tricks to the larger clients.
David Andersen
on 05 Jun 08I think any designer who knows the capabilities and limitations of the material he is designing with is at an advantage over one who does not. And while there is no substitute for first hand experience, it is possible to learn this indirectly. Collaboration with the physical implementer is key.
James Frost
on 05 Jun 08The designer we work with doesn’t touch html and css. But he has worked with us long enough to have a good understanding of what is and what isn’t possible with html/css, and what the restrictions and benefits of the medium are.
On the other hand, the benefit of someone with limited knowledge of HTML/CSS can be that they produce something that challenges you to produce something you’d otherwise dismiss as too hard and complicated in CSS and HTML.
So it works both ways really…
Tor Løvskogen Bollingmo
on 05 Jun 08Jenn, sometimes pixel perfection is important. Too much visual “left hand work” can make the site lose the feel of craftmanship. This is one of my points on why I use Photoshop, because I think it’s really hard, if not impossible to create real crafty web work with only code.
john herr
on 05 Jun 08If you want to be a stud, you’ll do all three: HTML/CSS/JS (funny nobody mentioned this…), Photoshop design, and Code (RoR, PHP, C#, Java, blah).
See, the code guys will always have work. Always. Until AI.
The designers will have work for a long time, but only the best of them. The rest will fade, do spam, or bulk mailers. Those without HTML / CSS will become unemployable.
And, finally, print designers typically make the WORST web designers, unless they are “into” the web.
john herr
on 05 Jun 08edit @Jenn: print designers are not cut from the same mold. culturally they are very very different. MOST cut their teeth pre-web. For those who did, the transition, IME, has been almost impossible. Old dog, new tricks. Possible, but rare.
Chris Jones
on 05 Jun 08this and the whole attitude from programmers that they shouldn’t be responsible for making things look and function well beyond the code constantly annoys me, have some damn pride in what you do!
Jeremiah Staes
on 05 Jun 08I can say that in general, print designers miss the boat completely on interactive. I run into very few who get it – they treat the page like a printed piece and do stupid things like stick a drop down navigation at the bottom of a page below the fold. 9 of 10 times, we have to completely rework a site if it has been already mocked up by a print designer.
Print designers rarely understand IA – Information Architecture – and it’s value to the equation. They’re used to and have worked with, sometimes for decades, a linear medium and do not travel well to online.
That said, I am not a print person because I have trouble with that linear ability – I can tell you what will happen with what code, but don’t ask me about how paper stock and ink thickness with affect the final product, because I’ve not lived and breathed it for a decade like I have online.
Roby Fitzhenry
on 05 Jun 08I didn’t have time to read everyone’s post but I did realize one thing wasn’t mentioned .. a REAL designer shouldn’t have to know CSS/XHTML to deliver a site design that caters to users, directs them with solid user paths and focuses on delivering a message that is catered to them. Regardless of the design discipline, designers should focus on the purpose of each project, it’s target audience, what makes it unique to other projects and how to keep the message clean and consistent. Yes, a designer who is laying out site sketches should be familiar with ALL web technologies, their limitations as well as their major benefits. They should be able to speak to a developer in a language they can both understand AND the developer should be able to do the same. Don’t get me wrong .. there are a lot of designers who are really good at design and development but not always.
I’ll end with this .. design is universal. Design is creative problem solving. A good designer should first understand the entire problem (i.e. web limitations, user expectations, project goals, etc.) before attempting to solve it.
Awesome post though :)
GeeIWonder
on 05 Jun 08Can I ask my Opera-Font question here then? Is the way SvN title fonts look on that browser (pixelated, like wayyyy pixelated) a conscious choice given the relatively rarity of Opera (about 5%, except on mobile devices) or something else? HTML/CSS guys should know…
Eric Peacock
on 05 Jun 08The web is interactive in a way print is not, so a print designer need not know a printing press – but they should understand the folds or perfs in a brochure – that’s how it will work and part of it’s message. To me that’s not all that different than a web designer making a page look and work well by understanding both CSS and HTML. You don’t have to be an expert but knowing your medium is always going to make you a better designer.
My employer hands me designs done by non-web designers that I don’t have any input on and expects me to make them work in not enough time – though I can do this I hate every moment of it. I’m always on the lookout for a web job that understood the difference between a web designer, developer, programmer or information architect.
It does seem that we’re still battling the misunderstood roles that web workers have (see Zeldman)
I’m a hand-coder and designer who started as just a designer. Wanting to do really challenging designs led me to learn how to ditch the WYSIWIG editor and do it right. Post web standards “getting there” I got into hand-coding in a huge way and that’s where it’s at.
Steve Pinkham
on 05 Jun 08I’d summarize my feelings on this topic this way: Great artists must know their medium.
My wife is a painter who works primarily in oils. Sometimes she sketches and paints in water colors or acrylic, and some of her skills transfer, but not all of them. In order to be a great artist, you must know the conventions of your medium, the way people have been trained over their life to look at and understand that medium. You must also know how to use the materials to get the effect you are looking for.
It is possible for a designer to know the medium without being strictly fluent in all the technical details, but the more they know, the better they will be. What’s more important then having them actually getting their hands in the code is having them be technically astute enough to recognize 1) First what the user expects, and 2) what is common today and 3) what the limits of the medium are. Balancing out those factors depending on the purpose of the site and the intended effect on the user is what makes a good designer.
Spitshine
on 05 Jun 08Interesting article, and some great comments here regarding both sides of the fence… As someone who considers myself a designer first, and a coder second, I think I’m on the side of a designer needs to UNDERSTAND coding, rather than know it intimately. As I learn more and more about CSS etc., I’m finding that my designs are improving as a whole. Not just visually, but usability and structure. I work with a creative dept that 1/2 are primarily designers (i.e. Photoshop mockups of pages), and 1/2 are designer/developers (i.e. mockup in PS, and modify more than code from scratch), with a development team that codes the pages. In both instances, the job gets done to expected results, however the ones who UNDERSTAND the development side better interact better with the developers and the projects go smoother and are finished in less time.
That said, I do believe there are times where you need to let the designer design and the developer develop.
Jake Rutter
on 05 Jun 08I completely agree with this article. I call myself a web designer and developer because I strong believe that you cant have one without the other. You need to be able to understand how the code works and the limitations at hand before you can build your mock in photoshop. Where I work we have a mixed bag of strictly designers and coder/designers. At previous jobs I have always done both, design and code, now Im as you stated an “html monkey”, which Im not too happy about. I miss the challenges of design.
Dale Sande
on 05 Jun 08I, for one, do not really understand the recent attacks on photoshop? It is a great application and has been adopted in millions of work environments.
That said, the only correlation I will bring the conversation is, and I may get flamed for this, but ‘print’ designers are not typically good ‘web’ designers. Print designers want to design a page with hard boundaries and limitless possibilities with color and type. Web designers need to understand that there are limitless boundaries in a flexible layout, but colors and type is restricted. And most print designers are not really on the pulse of interactive concepts.
In my office when hiring a new designer, there is not an absolute dependence on that new hire knowing everything about CSS. That is what a UI integration developer is for and OJT. BUT, that new hire should understand the basics and be willing to learn. A designer that only wants to live in a Photoshop world and let the developers solve all the problems that they may have created (i.e. the client approves the UI prior to developer review) is not the way to run an office.
Photoshop is a great tool and allows for unbridled creativity on a project. Create in photoshop, develop in HTML/CSS/XML/JS/AJAX, etc . . . support in Omnigraffle.
sykes
on 05 Jun 08Though I’m actually agreeing with you about designers should have a look at what’s behind html + css, you surely have a completely different approach to design matters in your projects. Your applications mostly consist of html + css – you’re rather focused on functionality. Therefore you’re much quicker by working things out by just modifing your code. But this doesn’t really work for projects which consist of both a lot of graphics and functional aspects. In that case that whole Web 2.0 world actually splits into 2 ones: The designer world and the programmer world. It’s like 2 completely different spheres, which sometimes even fight against each other, but together they have the power to create those genious projects and websites, we all love so much. But that means that it depends on who out of these 2 spheres comes to work together and how good their skills really are. We all know that a product is still useless if it doesn’t work though the people who created it made it shine and glitter – and vice versa. Or is this something new to you?
AJ Kandy
on 05 Jun 08I started on phototypesetting (briefly) before our college paper moved to PageMaker 1.0 back in the late 80s. I did print for a long time, but I started playing with HTML in the mid-90s and eventually became the de facto web designer at a company I worked for.
Yes, the first sites I did were terrible; big jpegs with imagemaps.
But, to quote Monty Python, “I got better.”
I know what good XHTML/CSS/JS can do. I keep up with the Cool Stuff that WebKit can do.
I don’t code it, though, because with all the changes happening on the technical side of things, I prefer to keep my focus firmly on usability, legibility, and accessibility, and being a “user advocate,” fwiw.
I do design with code in mind. But I live in Photoshop 24/7 and I couldn’t do my job otherwise.
There’s a lot of snobbery flying back and forth in this post—I notice that the 37signals bunch, purposefully or not, tend to engage in sweeping generalizations and provocatively absolutist points of view. For every terrible print-first designer I’ve met, I’ve also met a lot of Asperger’s-y engineer-coders who think tables (yes, with the clunky bevelled edges) are perfectly fine for layout.
Paul
on 05 Jun 08I haven’t read through any of the comments, but I think it’s funny that these last couple posts are advocating HTML and how much you (37S) love it, and yet you are still using the Transtional Doctype with hundreds of errors. Not to mention the HTML and CSS markup is pretty bloated. I think if you start off with a clear direction (mockup, or something) It’s much easier to build Valid HTML and CSS designs, that are far less bloated.
Morning Toast
on 05 Jun 08I agree entirely with David. I use Photoshop for almost every project I work on, but then I’m also the one that takes those graphics and does the actual building. I’m too much of a stickler to just let someone else code my page.
Designing for the web is more than just “looking correct,” and I always have a problem with clients/managers that are just happy when something “looks good.” As the old saying goes, you might be able to polish a turd but in the end you still have a turd. Clients might like shiny things, and managers might like shiny things, but if customers/visitors don’t get any value out of the shininess, then what’s the point?
In my world, Photoshop is a tool that supports web products and pages, not the other way around. I would rather have someone that can Photoshop and code because then when they’re designing they know what is practical in a web environment. If you just take a designer’s pretty graphic and slice it up to match, you/they haven’t really thought about the web and how people interact with it - in that case, you’re just treating the web as a billboard, which is dumb.
jan korbel
on 05 Jun 08And just to be absolutely clear, by “designer” here you mean the person who is doing information architecture / interface design of the project not the “graphics person” who is putting a facade on prototypes given to him, right? (I know it is probably one person in 37s who is doing both at given app but that is surely not the norm)
The latter does not necessary need to know HTML/CSS as he is (should be) handed working HTML templates.
The information architect / interface designer should definetely know HTML/CSS to the extent that he is capable to build those prototypes.
alsomike
on 05 Jun 08As much as I appreciate everyone’s ecumenism and cooperative spirit, is that really appropriate forum for that? Clearly, the tone of this post (and others like it) is encourage everyone to pick a faction and characterize people who don’t share your skillset or do things differently as outsiders who are fundamentally irrelevant to the process, and probably harmful. I think you are all forgetting that me and my side are vital to the success of the project, while your side are mere doodlers who could easily be jettisoned at any moment!
brent
on 05 Jun 08David: Hell yes.
No
on 05 Jun 08I’m excited to see 37signals learn the definition of hubris!
Oh, wait – they never will.
Christine
on 05 Jun 08As a front end coder who specializes in HTML and CSS I would love, love to get designs from a web designer who understands the basics of how the system works. Print designers know how to work within the limitations of their system and web designers need to know the same. Trying to explain why something is a very bad design idea from a coding point of view can be very exasperating.
Jeff Croft
on 05 Jun 08I’m with Jared Christensen: Web designers should have a solid understanding of HTML and CSS; whether or not they actually do their own HTML and CSS is irrelevant.
I like the architecture analogy someone made earlier. In order to be a good architect, you definitely have to understand materials. Period. You just have to. However, I don’t know many architects that actually do the construction, and it seems to work out just fine for them.
So I think I agree with the general point you were trying to make, David—that web designers need to understand the materials. But, I think the title of this post is overstating the matter a bit.
GC
on 05 Jun 08Thats where HTML/CSS still sucks. As others have mentioned designers should not need to know how to program in HTML/CSS, there should be a UI painter – maybe this is where tools like Flex and maybe WaveMaker start to become popular.
designslave
on 05 Jun 08@Steve Pinkham
I agree. “The medium is the message”.
pete k
on 05 Jun 08It’s become abundantly clear that 37 signals it not a fan of Photoshop and possibly Adobe in general.
It would be my guess the ratio of programmers to designers at 37 is similar to the ratio of Republicans to Democrats in the inner circle of GW Bush.
Good luck with abandoning graphics in your web design – Jakob Neilsen might love you but many users might click right past you. ;)
Joshua Shovan
on 05 Jun 08I agree, every time I have had another do the design and I have done the xhtml and css, it just does not turn out the same. when I am designing all of the web constraints are in my mind and my design works perfectly, I don’t have to go back to the psd to make changes or add and remove element or reduce images that can be repeated with css.
Kai Chan Vong
on 05 Jun 08Interesting article. Are you saying that photoshop shouldn’t be used to mock something up? And instead it should all be done in HTML/CSS?
I work for Justgiving.com and am the design lead that covers both design in photoshop and HTML/CSS – however I know that my markup and thought process is far stronger than that of the other designer who, to his credit is an awesomely gifted artist/designer.
I used to think the same way that working in HTML/CSS was good. Having tried both… I’d say separating the process of design from implementation is SO very important so that you don’t just work inside that box.
Having said that I really believe it’s important that the design stage is done by a designer that understands HTML/CSS very well in terms of repeating layers, accessibility and more.
Jesse
on 05 Jun 08Web designers are fortunately they can completely work within the medium, with all the tools and materials. An architect isn’t really so lucky most of the time.
Being able to hand roll your own HTML/CSS from your design(s) (whether it’s PS, paper sketches, chalk outlines or an Etch-a-sketch) gives the designer the opportunity to leverage craftsmanship, discover “happy accidents”, make refinements based on the real experienced gained.
“Web design” involves working within the browser at some point, at some level, to understand the design and it’s successes and failures. Especially for larger scale, ongoing sites, no?
Grant
on 05 Jun 08Like the “skip photoshop” article it seems like most commenters are taking this too literally. Should web designers do 100% of the coding all the time? Probably not. But I wouldn’t want a designer who wasn’t at least skilled in coding to design for the web any more than I would want a print designer who knew nothing about the printing process doing print design. Just seems like common sense to me.
Jason
on 05 Jun 08Without reading the comments, I’ll provide my initial reaction to this: 1) I disagree with that you need to actually build the CSS for every project in order to be an effective designer. However, you should be able to build something with CSS or at least know the limitations and opportunities. I routinely design comps in x product and hand them off to a development team. About 90% of the time they come to me asking how to implement something, to which I point them to an example or explain it. I DON’T need to code it for them. 2) Excluding designers who don’t build every project is your choice, but I think it is a bad one. You should at least consider designers who can use the technology and keep their knowledge base up to date. I honestly wouldn’t want to wear the developer hat because I’m interested in making great designs.
Florent V.
on 05 Jun 08GeeIWonder: obviously there is no CSS property that says “render this text as some pixelated bunch of letters”. My uneducated guess is that this is an Opera rendering bug. I have witnessed it on Linux (other people have witnessed it too, and found a fix), but never on Windows if I remember correctly. So this might be related to how Opera handles some font formats, and whether it uses system libraries for handling them or not.
Now back on topic: if I had to choose between a designer who knows HTML and CSS and a designer who knows (at least the basics of) Web usability, I would choose the latter. Mastery of HTML and CSS (and advanced topics such as formatting contexts, hasLayout, display modes…) is only required if you need your designer to act as a front-end developer as well.
Of course, when you have two different people doing the design and the front-end development, you may get unsatisfactory results. But this is a matter of communication and management.
Brian Reindel
on 05 Jun 08I will be the first to say I completely disagree with the post and the majority of comments posted here, even so far as to say that the best Web designers I have worked with have no understanding of CSS and XHTML. Let me put one caveat on that statement, and that is that the information design is complete by the time the designer begins comping. They are working within a well defined scenario, and that is the only constraint ever put on them.
In my experience the designers who code, are often leashing themselves to an academic notion of validation. For those of you who design and code, tell me I am wrong. When you design, are you thinking about opening the door to new possibilities, or are you wondering if your rounded corners will require an additional nested div tag? Do you back down from layouts that break the grid, or are you grinding your teeth at the mere thought of how IE will render the page? If you are not, then tell me why you need to concern yourself with CSS and XHTML?
If there are elements of the design that are simply “not possible”, then myself and a designer work through the options before a client ever sees the finished product. Most client-side coders fear this mentality because they are challenged to build something that does not fit within the confines of some ridiculously bloated CSS framework or template. What happens is that frustration mounts, and creativity is stifled, because designers keep hearing, “Well, that just is not possible.”
What you end up with is a large subset of designers who decide to code, not because they truly enjoy it, but because they want to eliminate the possibility of losing control. Seriously consider everything we know and love about design on the Web today? The best do not follow a strict pattern, but they often break rules that are enforced by a governing body that propagates “standards of mediocrity”. This will ultimately be the death of design.
Your friendly… software engineer.
Billy Girlardo
on 05 Jun 08You know that’s right! I do everything from scratch, with Notepad++.
I got turned down at my last interview a year ago because I don’t use DreamWeaver, and that’s when i realized I didn’t wanna get back in a cubicle anyway.
Cristina Calder
on 05 Jun 08I could not agree more with this post.
An artist does not conceptualize a painting and then hand it off to someone with the technical skills to put paint to canvas.
In the same token, a designer is no less creative for having a mastery of the tools at their disposal. CSS is a tool, just as Photoshop, InDesign and paper and pencil are just tools. On their own, someone who “knows photoshop” is no more of a designer than someone who “knows CSS”. There is far too much emphasis lately on what makes a ‘designer’ great. I am a designer… from conceptualizing original creative, right down to CSS and HTML, I have my hands in all stages of a projects workflow.
Making usable, beautiful sites that translate across all browsers is just as much a fulfilling creative challenge as conceptualizing the first drafts of a design. Making something that works everywhere, for every user, that is beautiful and usable and fulfills a clients objectives is the ultimate goal that makes being a designer worthwhile. I would be loathe to hand off a concept and hope that someone else could fulfill my expectations by translating a flat picture into a living breathing site.
Britt
on 05 Jun 08I don’t allow computers in my web design shop. We dictate our code to assistants who type it out on manual typewriters. They mail it to a place where it is scanned through an OCR system, saved as the proper file type, and uploaded to servers.
GeeIWonder
on 06 Jun 08@Florent
My question, though, is where the design decision for the CSS/HTML was made. Obviously you can embed, or use known safe fonts (as many do), or initialize differently, or even test in each browser. The decision flow is the interesting point to me at least. Besides, it’s not a *X problem at all, as I can replicate it on FreeBSD, Linux and 3 different XP systems.
Ryan Cannon
on 06 Jun 08I think the reason so many people are up in arms over this article (and the reason I was initially filled with bile) is that it casts front-end development as an obnoxious secondary skill that a designer should be able to learn enough on his spare time to push out a product.
But designers shouldn’t have to write great code. They shouldn’t keep up with the browser quirks. Or front-end optimization. Or object-oriented JavaScript. HTML/CSS/JS has matured enough as an application platform that if you expect your designer to do it, you probably get something second rate.
Designers need to know how typography works on the Web. They need to know about font scaling and how image compression works. They need to understand the difference between native controls and custom ones, and the usablility, accessibility and findability implications them.
If you expect designers to be writing production code, then you’ll be making trade-offs elsewhere: accessibility, maintainence and performance.
Dylan
on 06 Jun 08There’s no need for extremes, find a balance. Both processes have benefits and can support each-other’s weaknesses.
sb
on 06 Jun 08Letting Photoshop, Dreamweaver, or anything else write your code for you, which is the way I read the headline, is a mistake. But the post seems to be speaking more to the whole theme of actually doing your design work as you code “No Photoshop”.
While it’s rare that I disagree with the posts on SVN, this whole “No Photoshop” thing really stinks of one size fits all being applied in the wrong place. At 37 signals (or any other product oriented company) your design decisions are your own. You decide what to do, push it out, see how it plays out, rinse & repeat. The right way to go? Absolutely… for you. Any experienced, savvy, and/or successful web company executes product development with some variation. That decision process is internal, controlled, and closed. My issue with this post is that the decision process is vastly different in client (service oriented) situations and not compatible with designing by code.
For web development shops out there still doing client work, the dynamics are just too different. We “comp out” most of our work before we “code it out” or we end up coding it out several times before we even get to the point where the client “thinks” it’s ready to step through. I don’t think it makes our shop anything special that we are able to show the client photoshop mock ups that we can then easily produce a true end result of via code. It’s really about communicating with the client in a way THEY can understand and end up with the result THEY were expecting, as close to every time as possible.
Anybody reading SVN knows that the web, at it’s core is all about function, but the facts on the ground are that many of the clients that pay our bills not only don’t know that, but will refuse to accept it at any cost. Clients want to “make the logo bigger”, end of story. The quick answers to all that is: “get better clients”, or “learn to educate/communicate with your clients better”. Maybe you could elaborate on why you no longer do client work?
Alfonso
on 06 Jun 08BS argument, to say the least. Tools don’t make the designer, as much as writing code doesn’t make good or appropriate design. To say that the only way to come up with good web design is to write code and refrain from ever opening a graphics program is infantile and misses the point of design completely.
Great, useful websites are all about the design thinking applied to the different aspects of the user experience, not about which application was used to come up with its look and feel. Just as great, useful ANYTHINGS are all about the design thinking applied to the different aspects of the user experience.
This vaguely militant little rant (dressed up as some sort of “wise words of experience” manifesto) reads like nothing more than the ignorant ramblings of a disgruntled code monkey.
Jesus A. Domingo
on 06 Jun 08I don’t think it’s really necessary to for designers to do their own HTML/CSS, BUT, i think those who do are more able to make smarter decisions in their designs and the elements that they use.
HTML/CSS-conscious designs usually end up leaner and more accessible. Knowing about sprites, the complexities of doing rounded corners, semi-transparent layers, and other things in HTML/CSS helps the designer know when and how to use these elements better in their designs.
Michael Bykow
on 06 Jun 08sir, i’ll have you know. i just registered htmlmonkeys.com and plan to put it to good use.
all the same, a web designer can step back from the daily coding grind every now and then and put monkeys to good use. specialists in the art of html voodoo, can save a lot of headaches and help deliver things on time.
but point well taken, know your web. get your hands dirty. but once you have become enlightened. the zen energies of the designer can be focus on higher and more valuable problems than coding…
that’s why handcodedcss.com exists and so many others.
Eric G
on 06 Jun 08Way to bring up the old designers vs. developers argument again. Perhaps next week we can rehash IT vs. Marketing.
Well-rounded is the key phrase here, along with curiosity and empathy. There are also developers who don’t care as much about aesthetics.. which is fine, actually, I prefer it… just as I don’t question their database design. But I mean there are ones that just really don’t care how our final product looks either and they should… just as they should understand the company’s business model.
If your site consists of something more than just colored boxes, wireframing and photoshopping are quite helpful. And its a lot easier to move things around and tweak items then trying to get it right in the browser before the client has signed off on the layout—we had spent more time than we should have trying to get some styles to work IE for a client to preview, before they even signed off on the layout.. that’s wasted time.
These guys used to be the voice of web design and structure .. I’d like to hear Jason Santa Maria’s thoughts on this topic.
Pavel Pichardo
on 06 Jun 08I agree with Brade. I think a web designer should be capable of do the HTML / CSS, but is not always necessary, at OnClick Studio we have a designer and another person translate the design to html/css. This let the designer with enough time to move on another project that needs his attention while the second person do the html/css.
Josh
on 06 Jun 08I agree with this article 100%. At my job our designers are native print designers. Print and web are completely different and it just drives me crazy when I get design comps that are so over designed I don’t even know where to start. Not to mention I usually don’t get all the pages at once. So each page tends to be a slightly different layout, off by a few pixels or a completely different type hierarchy. I have found it nearly impossible to work like this. Web designers must know how to code html/css. And for god sakes quit making graphical headings!!! HTML text is gorgeous.
andjules
on 06 Jun 08I’d echo what a lot of people have said – not necessary to know every loop; important to communicate and understand limitations/functionality/UX at a high-level; and yes, in some nirvana, it would be ideal to have designers who do their own XHTML/CSS.
But here’s the rub: You could probably count the NUMBER OF TRULY GREAT DESIGNER-CODERS (with the emphasis on ‘designer’) on the web on two hands (or at least your hands & feet). There is something about the kind of brain that likes the abstraction of turning something visual into sequenced code, like DNA. And that kind of brain is almost never the kind of brain that has truly visual ‘vision’ & ‘flare’. When you encourage designer-coders, you end-up encouraging geek-brains to try (rather hopelessly) to find an artistic side; and you discourage truly great artist-brains – “You can’t join our club unless you have a software-engineer’s mindset…”
You use terms in the post above that liken XHTML/CSS to artistic medium – using the ‘materials’, etc. But that’s not fair. Code is not a ‘hands-on’ medium, it’s a mental abstraction. And the particular kind of abstraction is really not suited to most of the great visual artists I’ve met.
AJ
on 06 Jun 08Ok, I’ve re-read the piece and all the subsequent comments.
“Only a Sith deals in absolutes,” a wise man once said, and I think that kind of applies here.
A need for absolutes comes from a fear of being wrong. 37signals is in an interesting position, if I can indulge in a bit of meta-analysis here. They’ve got some products that defined a market category (Basecamp) but they are hardly without competition.
I love (and have internally adopted) many of the design patterns that 37signals used in Basecamp, where I find them useful; I don’t actually use Basecamp all that much anymore except when I have clients who use it.
Something about, well, all that text just put me off. I remember emailing Jason Fried ages ago about how useful some data visualization might be (Gantt charts? I mean come on!) and I got a brush-off about how they didn’t see the need for it. (Everyone I’ve ever met who’s used Basecamp wants Gantt charts in it.)
It seems that the 37Signallers are really just very graphics-averse. And when they diss people who use Photoshop, they’re trying to tell us that graphics and visuals are unimportant, and that people who think and compose visually, as opposed to theoretically and structurally (textually) are somehow inferior.
I don’t buy it. I smell fear.
Seen Google Finance? Now that’s data mining made elegant.
Tim Jahn
on 06 Jun 08I agree that a lot gets lost between the designer designing the site and the ‘code monkey’ cutting it all up into HTML/CSS. But I do feel that a designer has a special eye, an eye that might be more valuable if it sticks to design and knows nothing about HTML/CSS (or at least very little). The ‘code monkey’s job is to translate that beautiful vision into the word of HTML/CSS. They are the mediator in a sense.
Chris
on 06 Jun 08I have to agree with a lot of the commentors above. Web Designers probably SHOULD understand the basics of HTML/CSS. Not necessarily doing all the HTML/CSS themselves, but to understand the limitations of the Web as it stands, and keep that in the back of their mind when designing.
You should, however, still have a solid understanding of HTML/CSS if you intend to actually put out a product by yourself. Now there are designers (like myself, although I’d have to say I’m more of a code monkey that’s starting to learn design principles, not vice-versa) that can do both effectively, and there are some people that should stick to their own sides.
Bernhard
on 06 Jun 08Not only designers but programmers too should have an understanding of html and css when they output work for the web.
Example: A typical archived page of any Google Blogger blog produces 300+ validation errors. 290+ of which are produced by malformed comments in the provided templates. The rest is stuff like bare ampersands and prematurely closed elements introduced by the backend via widgets and such.
Anybody who codes for a shop like Google should really know that “XHTML strict” does not allow iframes and URIs opening into new windows.
Wrote to them about it and showed em how a little clean up could solve the problem. Never had a reply from the sad bunch.
N
on 06 Jun 08Re the opera font story: compare with Dave Shea’s “Readability” notes in this post.
For interesting associate reading, also read his post on Designer/Developer Handoff
bbx
on 06 Jun 08I can’t imagine a web designer NOT doing its own HTML/CSS. Design and coding is completely related. I never work on a design without thinking about how I’m gonna code it. On Photoshop, you can easily put rounded corners, drop shadows, cool text effects… But it represents much more work when you have to put it in HTML/CSS.
kathryn
on 06 Jun 08i completely agree that designers of HTML/CSS pages should get comfortable with how those technologies work. but i disagree with the idea that designing for flash is not designing for the web. flash is entirely native to the web. similarly to HTML, designers of flash sites should have an understanding of what is possible and sensible in the medium. just as print designers need to understand what happens on press.
Kiwi
on 06 Jun 08A designer who doesn’t understand the strengths and limitations of HTML/CSS will be hard pressed to design web pages that can be coded. Or at the least coded in a reasonable amount of time and work across the industry standard browsers.
I worked my way though University as a carpenter for a company that did a lot of high end custom houses. We were frequently asked to build things designed by ‘designers’. The designs would often include features that could not be physically built. One specific designer was so bad that we took to calculating the number of anti-gravity units required to actually build her designs.
I wonder what is the average number of anti-gravity units required for the typical Photoshop design.
Ross
on 06 Jun 08At a group I work with we have a design team and a coding team to do create free template releases.
I’m a member of the coding team and this issue came up yesterday: “are our designs too complex [for coders]?”. This came up because a few designs weren’t getting coded – partly our (the coders) fault, partly because these were some very detailed designs and were being ignored in favour of simpler templates.
A couple of ex-members of our design team knew basic layout skills with HTML/CSS and I found these designs relatively easy to code. Sure, they weren’t as spectacular as others but they were neat and transformed well into code.
I think that having your designers have knowledge of basic (tableless) coding capabilities is near essentail – but at the end of the day designers design and coders code. Seperate the workload but make sure each employ’s the other’s skills.
Dave Rosen
on 06 Jun 08Disagree.
HTML/CSS is an art-form in itself, and referring to it as “HTML monkeys” shows an undervalue placed on it.
Especially as the web becomes more semantic, HTML/CSS is more important than ever, and not necessarily a natural fit for many great designers out there.
Use whatever tools you are most comfortable with. Spend your time on your skills you most enjoy. Make your daily workflow optimized so that your loving each hour. Focus on what you love as it’s so easy to find colleagues to help you in the areas your not passionate about.
I think saying web designers should do their own HTML/CSS is really saying web designers should all fit into a certain mold – whats next? Web designers should do their own JavaScript?
wenbert
on 06 Jun 08So let’s say I work for 37Signals as a web designer (and use Photoshop – probably in another dimension because 37Signals skips photoshop). I should cut-up my design and do the HTML/CSS too?
While in other companies, I just send the sliced images over to the next guy while I explore more on my artistic side and extract all those creative “juices” for the next project without worrying about cross-browser compatibilities and such?
Doesn’t make sense. But you’ll get the idea.
37Signals is not a “graphics”/”design” company. So what’s up with the posts about “Skipping Photoshop” and “Web designers doing HTML/CSS” ?
Dave Rosen: LOL Web designers doing their own Javascript. If I were the designer, I would be careful in what I design—God knows what will happen if I do this and that in JS.
Things aside, this would limit the creativity of the artistic graphics-dude—one way or the other.
Ryan
on 06 Jun 08A lot of people seem to think design is drawing pictures. Why?
Dante
on 06 Jun 08I like how Alan Cooper puts it, when he talks about “Design Engineering”: software is the only medium where the construction materials can be entirely the same as the design materials.
So, why not use the same materials?
Cody
on 06 Jun 08I think that if your going to design for the web (interfaces) you should at least be able to do some CSS and HTML.
If your designing for print then it’s absolutely fine to not know CSS or HTML.
Michael Dick
on 06 Jun 08Go back to print design, this is the web. (A little harsh, I know.)
Todd
on 06 Jun 08The web is a cross discipline media. In the future, the lines between developers and designers will become even more blurred—I believe the term ‘devigner’ (designer + developer) is gaining some momentum.
Today, I think the argument comes down to what kind of work you are doing: is it a web application or a client’s brochure site? For the former, I would want a ‘devigner’. For the latter a simple, traditional designer teamed with a HTML/CSS dev would work.
WEBCSS
on 06 Jun 08I think you haters are all crazy. Having the ability to do both Design and Programming makes it all the better. Understanding how these technologies works makes you a better designer.
Good Read.
Jin Y
on 06 Jun 08reality alarm: a pure graphical designer who doesn’t know html/css costs business more money. the company has to hire an additional person to do html/css.
a large company may have the luxory to keep graphics designers around. however, as soon as downsize happens, you’re the first to go.
honestly, learning html/css isn’t hard.(and it’s not programming). don’t argue. plan your career ahead of time. years down the road, how will your manager justify keeping you, instead of some fresh design school grads for cheaper price?
think of yourself as a commodity. the more well rounded, the better off you’re.
Dan Volkens
on 06 Jun 08If you’re a web designer, you should know html/css and cross-browser/cross-platforms intricacies like the back of your hand. Bottom-line.
Why? Because the Web is your medium, and as a designer, you need to understand your medium so well as to know what the rules are, what can bend or break, and when/why to bend or break them.
A designer who does not intimately understand the medium they work in will never be able to advance to the point of the one who does, and will not be able to provide a better solution than the one who does.
After this post and the previous one about skipping photoshop, I’m frankly frightened and disturbed by the replies from people in our industry. I have always run on the assumption that designers/developers understood the delicacies of their industry far more than they obviously do. It seems that we have a long way to go yet in gaining true knowledge and understanding of our work.
Do I handcode my html and css? Yes. Did I always do that? No, but we’re talking about maybe the first year or so of my experience around 1997 where I was familiarizing myself with it. Then I made the leap to handcoding and have never looked back. I now can create far more powerful solutions than I ever could by letting the tools do it for me. Or someone else for that matter.
Matt Radel
on 06 Jun 08Stands up and applauds
I couldn’t agree more David. The web is about making things work as much as it is making them look good (I know, that’s a bit of an over simplification for designers – please don’t crucify me).
I think that HTML & CSS knowledge should be listed alongside Photoshop as requirements for any web designer, period. I personally enjoy the balance of code and design – the two really feed each other. Frankly I’m embarrassed that I don’t have a full working knowledge of Javascript.
That’s not to say that you can’t be a successful web designer without knowing HTML & CSS – but picking up the skills will make you more valuable and a happier designer.
Dom Herrera
on 06 Jun 08JinY
“a large company may have the luxury to keep graphics designers around. however, as soon as downsize happens, you’re the first to go”
I agree that improving yourself, is a benefit.
However the quoted statement is not correct. A designer needs to understand the product, the market, and be proficient at producing those ideas. It takes natural ability and talent to be a good designer. It would be inherently easier to outsource code. The talent is not natural, its book derived. Anyone with a book can write and code html/css. So it would be in its best interest for a company to keep a talented designer as opposed to a button pusher. I mean no insult by the term button pusher. What I’m trying to explain is that someone can be taught to be a great programer, without natural skill it’s impossible to be a great designer.
Ethan Gardner Web Design
on 06 Jun 08I think the ability to understand the HTML and CSS ultimately leads a cleaner implementation and a quicker development time. When I design a site, I am able to think ahead to the implementation and account for any pitfalls before they happen.
On the other hand, if I am given a design from someone else that doesn’t have the HTML and CSS skill set, I often have to find workarounds to complete the site as it was intended in the original concept.
Marty Stake
on 06 Jun 08In total agreement with designers knowing the reality of making their designs live and breathe. The architect analogy is spot-on.
So, what if it’s the other way around? I’m a top-notch HTML/CSS/JS coder who can’t “finish it off” with inspiring, earth shattering design. Should I go back and learn the other side of the table?
The flip side is that sometimes not knowing the medium (html/css) is what pushes the boundaries of designing something that has never been done or thought of. In many cases, you need an outside viewpoint to remove yourself from the box.
FWIW I am in a team where the designers and coders are separated – we take photoshop designs and make ‘em real. It is our job as developers to communicate what can and cannot be done – and as we have informed the designers, their designs have evolved.
Jin Y
on 06 Jun 08Dom,
being a good designer and a decent html/css coder are not mutually exclusive though. having the knowledge of front end coding doesn't take a designer's artistic talent away, only compliment it. and i see the term "programming" comes up in a lot of comments in this post. html/css isn't programming. they're markup language. programming is only when you get into scripting(front or backend). the "web design" field is becoming quite complex and ambiguous as far as role goes. the need to be well rounded is more important than, say 5 years ago. I remember back in the mid90s, there are 2 roles for a web development, the "graphics guy" and the "code monkey." now, from the ui end, you have graphical designer, user interface designer, information architect, user experience expert, front end programmer etc.Stephen
on 06 Jun 08I wish my professors would read this and not think that designers can be clueless when it comes to HTML/CSS Every classmate of mine created a Flash based website for their portfolio. Are you kidding me? I wish they would earn HTML/CSS
dave
on 06 Jun 08It seems many people here like to imagine there own technical shortcomings as proof that they are ‘true artists.’ They may be. But theres no need to try and lump those with additional skills into some ‘geek’ class.
As the photographer must know his camera: as the architect must know the properties of building materials; and so on, so to the web designer must know what this stuff is all made of: code. The more intimate this knowledge is, ONLY the more it can help.
Design without a care for code must eventually be interpreted. Whereas when a designer can work congruently in both creative and technical mindsets then the they will take the most efficient path to the end product. Which is important in today’s competitive market.
Great art always pushes the medium. What can you do with the tools at hand? Understanding the medium can only help you to evolve it.
Alfonso
on 06 Jun 08I see some people seem to agree based solely on what seems to me like bad experiences with mediocre designers. Josh, the fact that the designers at your company don’t understand typographic hierarchy and fail to make aesthetic or funtional decisions with any consistency at all has nothing to do with their coming from print, or otherwise having no coding experience. They’re just mediocre designers. And they’ll be mediocre no matter what applications they run to design websites.
As a designer, understanding CSS, HTML, PHP and even Perl has helped me to better understand the capabilities of web technologies and to better communicate with programmers when the time comes to collaborate with them on a website design. And, of course, I understand that this has led to better web design on my part. But to presume that programming knowledge is the key to end all keys to good web design is silly and ignorant.
Design thinking trascends tools, materials and environment. One can’t achieve good design by concentrating exclusively on any of these things.
Bob Monsour
on 06 Jun 08Then, of course, there’s this (http://tinyurl.com/4qemu4) bass-ackwards way of going about it.
Chris
on 06 Jun 08This is the ancient “form vs function” debate and it’s much older than the web. Obviously they work together but the real balance has always been a challenge. Those that master that balance excel.
“Function” people usually tend to look down at the “Form” people because they feel that form should be secondary, but it really depends on the project. The needs of the product/client/user etc should decide which side takes priority.
Just to fan the fire…if designers should be coders as well, shouldn’t coders learn graphic design?
Todd
on 06 Jun 08“Just to fan the fire…if designers should be coders as well, shouldn’t coders learn graphic design?”
^ Best comment on this post.
David Ray Carson
on 06 Jun 08Dear 37 Signals:
Please make a WYSIWYG tool that outputs perfect code.
There is no reason this is not possible.
Paul Souders
on 06 Jun 08Jenn said:
I’d argue that print designers and web designers are, in fact, cut from the exact opposite mold.
Print design is all about aligning output with expectations, and thus appeals to highly detail-oriented personalities. To wit: Carson’s desire for a WYSIWYG tool that outputs perfect code (with a link to “Getting your onscreen type just right,” natch.) I think this is why graphic design education is adjunct to fine art.
Web design is all about anticipating failure, because we can’t control the browser environment (This is the reason a “WYSIWYG tool that outputs perfect code” is not possible. Perfect code for Firefox would bomb in IE6, and a voice reader strips it to the bare metal regardless.) Web design appeals to people with malleable expectations, and emerges from a tinker or craftsman personality.
The analogy I’ve used is that web design is like making clothing (and not so much like carpentry, architecture, or construction, the usual analogies). There’s a linear gradient between DIY blouses from a McCall’s pattern (=Myspace) to boutiquey one-off designs by three-guys-in-a-loft (=any superhero movie website) to fully industrial production with enormous divisions of labor (=NYTimes.com, Amazon).
Some designers love the feel of the fabric (HTML) and spend all their time at the sewing machine (typing code and nudging CSS). On industrial scales, they see the prototypes as the sketches.
Some designers love pushing the envelope, and do all their work with a proverbial (or literal) sketchpad (Photoshop), and leave the part where you stitch up prototypes to someone else.
But if you were a clothier - of any scale - would you hire a designer who didn’t know how to sew?
Sebhelyesfarku
on 06 Jun 08Bullshit. UI design != HTML coding.
Chris
on 07 Jun 08Interesting to note with all this talk about print design – The same issue exists in the print world – there are designers, who create the color, type, layout, vision etc… and there are the production artists, who make the designs ready for the press, with all the mechanical limitations and physical requirements.
You could argue all of the same points in that industry. But the separation between the two disciplines has remained pretty consistent – for a long time.
Anonymous Coward
on 07 Jun 08Hello
David Ray Carson
on 07 Jun 08Paul Souders, please.
Perfect code = non-bloated/standards compliant. Perfect code = code that works (i.e. layout + functionality) in the browsers that you want it to. Perfect code ≠”I want my type to be 23pt Black Extended Bold +20 tracking 28pt leading and if it’s not I’m gonna wet my pants.”
If you can hand code it, a machine can replicate it.
I hear a lot of sqwaking from code-lovers like “it can’t be done” or “it’s better by hand.” Bull. I smell market opportunity for a tool that doesn’t suck for layout and that sucks in/spits out perfect code (dreamweaver ain’t cutting it)...just look at the length of this post’s comments.
Btw, I’m not talking about witchs’ brew-custom-back-end-database stuff. I am talking about layout.
Just look at Mac OS X and compare it to command-line linux. The underpinnings are similar, but the interface that tweaks the underlying text files is vastly different. I argue that the visual interface is what is best. You move something, or specify something to stretch, and it does vs. figuring out quirks mode for X and geeking out in code.
Paul Souders
on 08 Jun 08@David Carson:
Ah I misunderstand. I took your requirement for “perfect code” + accompanying link to reflect a (common) desire for a tool that provides predictable output.
A tool that can produce the code you desire may be possible, I really dunno. My personal feeling is that it’s easier to learn HTML than to learn to use a tool that produces HTML.
But that’s kind of beside the point, because the lifeblood of a moneymaking website is a) fluid user interaction and b) the witch’s brew custom back end database stuff. So I don’t really want a web designer who knows HTML, I secretly want a web designer who knows interactivity and orthogonal application architecture. In that context, hand-coded HTML is just a shibboleth.
HTML (or, more generically, structured markup) is the fabric of the web. Hiring a code-phobic web designer is like hiring a wood-phobic cabinetmaker.
Lloyd Jacob Lopez
on 08 Jun 08It’s skill to design and code it to look exactly same across all the browsers (background image). There are guys who can do that and they are the “Web Designers”.
Making a design in Photoshop is something. It’s important for the designer to know what is possible and not possible with basic HTML, most of them dump the hard work on the HTML guy and escape.
The so called Web Designers make sure you know the basic stuff.
CJ Curtis
on 08 Jun 08Very short-sighted and oversimplified. Functionality and design are always a balanced mix… based on your client, your audience, project goals, and so on.
Making blanket statements that designers need to design in CSS (or know CSS), skip the Photoshop process, etc., is absolute bunk.
It all depends on what you’re doing and who you’re doing it for.
Debbie Campbell
on 08 Jun 08I’m a designer (formally trained) and front-end developer (self-trained) and I find that working at both ends of that spectrum gives me both a better understanding of what’s feasible on the the development end and how to improve the experience through aesthetics on the design end. I’ve always done both, and in my smaller market most of the designers are also developers.
I’ve worked with strictly Photoshop designers on several occasions and found that during the few times they’ve presented me with things that were not necessarily a good idea when it comes to the web, they’ve been flexible with their designs. But I think a large part of that was due to the fact that they knew that I’m also a designer, and wasn’t just telling them ‘no, you shouldn’t do that’ without any basis.
Being a designer and developer suits me very well but I know it’s not the standard in the industry and most likely never will be. They’re two very different disciplines. But I agree that for any designer who creates websites, not knowing just the very basics of HTML and CSS seems like a good way to waste time on a project.
xioSlayer
on 09 Jun 08I initially thought you were condemning photoshop, and all I could think was “You heretic!” haha. However, I continued to read, and realized that I agree with your points. I’m just really tired though, which is probably why I thought that.
Daniel Craig Jallits
on 09 Jun 08I used to do rough sketches in Fireworks/Photoshop, but have sinced moved to HTML/CSS mock-ups with the Blueprint CSS framework. Since my designs are more focused on the use of typography rather than imagery I have found this to be the most efficient use of MY time.
smartscript
on 09 Jun 08the coders of perl/cgi /php writers are humble in there work but yet i cant understand why most “graphic designers” who only know photoshop think they are gods among real web designers / developers when that is the only thing they know..
its like a insult or a smack to the face of real devheads!!just my take ..
palsh
on 09 Jun 08As a designer, understanding the build is as important as understanding the design. i can do the CSS/XHTML when needed. in saying that; i prefer a professional to code since understandably they will have more experience with standards or lack of them.
This works especially in the print and packaging design world. knowing the tech specs of the printer. ie: die cuts, varnishes, 4 color processes vs. digital prints.
side note: just because you have a copy of photoshop doesn’t mean you know how to use it. i say use your tools appropriately. photoshop for images layout in illi. just a thought.
MichaelD
on 09 Jun 08Damn, you stole my blogpost! Yes, I am a XHTML/CSS/javascript designer basically because of Jeff Zeldman. But I recently had the opportunity to make a good semantic webpage out of Photoshop comps and I’ll say it drove me nuts for the following reasons:
1. The web is basically text – and only a handful of fonts, Photoshop text is shite and encourages poor usage. 2. Photoshop does not have text styles, and does not enforce any sort of consistency amongst headings, emphais, as in point one.. 3. 70 photoshop layers does not communicate flow, just lots of variants of something that someone has to figure out, otherwise hello 40-50 photoshop files for one site.
No blaming Photoshop, but its as bad as using Word to create webpages, it was not designed for the job, so why would it produce decent results?
I’l try to not procrastinate next time in posting my thoughts, but cheers for the debate – I would be lucky to get comments in the single digits!
Matthew Lindsay
on 10 Jun 08I have to disagree. I’ve worked for years as a designer on the web. A designer’s primary concern should be look & feel & innovation. A great designer knows how to design within the limitations, & a great code Monkey knows how to push the limitations. Equals innovation!
Ever heard the saying: Jack of all trades & master of none.. What an idea! Let’s let coder’s be designers too, just like it was back in web Zero.negative!. There has to be something said for 2 specialist’s in their field working side by side to create something.
I agree designers need to be aware of the constraints & functions of all parts of how a web site is built & works. Design is meant to push the boundaries. True innovation comes from bright ideas being collaborated on until the final product is visualised.
Isaac G.
on 10 Jun 08Great article and for the most I agree with you. I have improved my CSS skills dramatically by spending more time in textmate than in Photoshop.
Although if my design skills where as good as Veerle then I’d probably spend more time in photoshop :)
For all you web designers who like to hand your CSS – you might find this useful. It’s a simplified html version of Adobe Kuler’s site. I put together using their API’s and PHP.
HTML Color Scheme Explorer
Eric Carl
on 10 Jun 08Coming in late on this one so I haven’t read all the replies, but I’ll just say that my initial reaction to reading this was something like:
“There’s web designers that don’t do HTML/CSS?”
Maybe I just haven’t been working in the right places, but in all my experience (granted it only includes 2 full-time positions over the last 5-6 years), I’ve never heard of a web designer that never left Photoshop. The idea of web design always seemed to entail a combination of a design sense executed in Photoshop and a technical sense executed in the code to make those designs work.
Maybe it just goes to show how widely varied the specific skills involved in the concept of “web design” can be.
Eric Carl
on 10 Jun 08Ok, couldn’t help myself and had to read all the comments here.
I’m left wanting to say, its interesting all the talk about designers vs. developers here. It’s been said before, and I totally agree:
HTML/CSS is not programming.
Programming begins when things start getting conditional. Otherwise you’re talking markup language, which is how things look (visual design!), not how they work.
Anyway, I don’t know how any self-proclaimed web designer can survive not knowing HTML/CSS. What happens when you bring on a freelance project to build a smallish site? Blow the budget up and hire a second person to take over your design’s implementation?
As a primary visual designer, I got neck-deep into HTML/CSS and then into ActionScript and a little Javascript out of necessity. I wanted to make the cool shit work! If I ran into browser bugs, it was a new learning experience, and I’m a more capable web designer for all of it.
But I guess it all comes down to your work environment. If you’re surrounded by specialists for each niche discipline in a giant design department, I’m sure life is easier. I’ve personally never been in that situation, always worked alone or then into small shops, and had to learn everything I could to build a deliverable product.
Matthew Lindsay
on 10 Jun 08OK. Some of you out there are ‘freaks’ when it comes to coding & designing. All the power to you! However, as a designer, I myself don’t want to get bogged down in code. I feel a true designer should focus on the visual. Sure one working in web should know what’s possible and what’s not. Just as a print designer must know what’s possible in their field. However a print designer’s not down the press, inking up the plates, and stapling magazines together & taking them around distribution them to newsagents. Are you kidding me? That about sums it up. A visual designer is just that, visual. A great visual designer should be across all mediums & able to communicate over web, print, animation, even object design. In this day & age we have specialists in their fields. CSS/HTML is a field. It’s called programming & although it’s good to know both design & code, I hope we won’t make it a pre-requisite. I couldn’t bear to see the web all looking the same, like all these Web 2.0 CSS programmed trash web generic, yes generic web albums. There is a CSS web 2.0 look emerging which is already ‘dated’ & without true visual designers out there, pushing the limitations & working with programmers, themselves designer’s of code.
Designing & Programming can live side by side. I know some designer’s are twat’s, but some of us want to learn & take things to the next level. I fully respect & admire great coders & have always had a great working relationship with specialists across all design mediums. Thanks for reading!
JY
on 10 Jun 08repeat after me:
HTML /CSS IS NOT PROGRAMMING. HTML /CSS IS NOT PROGRAMMING. HTML /CSS IS NOT PROGRAMMING. HTML /CSS IS NOT PROGRAMMING.
Jonny Haynes
on 10 Jun 08I’m a web designer that can code html/css without any worry. You don’t have to be one without the other. See live examples: Yes insurance, and Pru car insurance. Both designed and built by me – then handed over to a developer to do the back end code – the proper programming!
Roger Poole
on 10 Jun 08My concern here would be the web designer that limits his design to what he knows how to code.
BK
on 10 Jun 08Web designers should be understanding their job. This of course includes knowing CSS and HTML, as well as their platform (CMS or whatever). We’re architects. We need to know more than styling. Period.
(Who needs Adobe anyway? Not starting a new discussion here, but there are alternatives!)
Lindsey
on 10 Jun 08Wholeheartedly in agreement here. I’m actually a front end web developer at a marketing company and our graphic designer just doesn’t “get it”. She makes static sites (which are impossible to implement within the homegrown CMS we use for our clients) that can’t expand or flow to fit missing or extra content. It’s SO frustrating because even though she’s been encouraged for months now to learn HTML/CSS so that she doesn’t hold up our development process she pretty much refuses.
I know with just basic HTML/CSS knowledge – and getting into the mindset of realizing how images need to be sliced and the code that will be needed to translate her design to a fully functional website would infinitely increase our production time and ease the development process on me so I don’t have to redesign every single design that is handed to me.
So yes, you guys are 100% right, all web designers should definitely have a basic grasp of HTML/CSS!
smartscript
on 11 Jun 08i like what JY said: HTML /CSS IS NOT PROGRAMMING
repeat after JY LOL!!!
Noel Jackson
on 11 Jun 08I wrote a very similar post over here: http://eight6.com/2008/05/22/you-should-code-too/
[email protected]
on 11 Jun 08HTML /CSS IS NOT A VISUAL LAYOUT TOOL. HTML /CSS IS CODE.
HTML /CSS IS NOT A VISUAL LAYOUT TOOL. HTML /CSS IS CODE.
HTML /CSS IS NOT A VISUAL LAYOUT TOOL. HTML /CSS IS CODE.
Matt Radel
on 11 Jun 08@Roger Poole: Ah, but isn’t that incentive to learn? As a (web) designer, you should be constantly looking for ways to grow and push your boundaries. Comfort is the enemy of creativity.
TruthCheck
on 11 Jun 08Designers make $80+ per hour and are outsource-proof HTML/CSS people can be easily outsourced to India or elsewhere for $10-20/hour
If you’re going to have the designer spending their time on HTML, you might as well have them do the sweeping and window washing for the office, too. Division of labor is important.
Anonymous Coward
on 11 Jun 08For myself, I find the page sketch to HTML/CSS the best approach because end product demonstrates how someone is going to actually ‘interact’ with the page. Static images don’t get at what will happen if for example User A select drop-down menu B then clicks Continue. Only after completing the HTML/CSS prototype do I begin to apply graphic elements to frame, highlight or emphasis content, navigation and functions.
Carla Alvarez
on 11 Jun 08The fact that you refer to the layout code as an “HTML monkey” implies that they weren’t all that skilled to begin with.
If you are converting a mockup to a layout, then you have be able to look at it and see what will work in an actual site environment and what won’t.
A designer creating the mockup should understand that as well, and hopefully they don’t create something that is impractical to implement. I don’t think there is a problem with someone focusing on the creative as long as they understand what works on a web site and what doesn’t.
It’s not just the overall layout, but the integration into whatever platform it is going on as well.
This discussion is closed.