The Well-Designed Web
Recently 37Signals posted an article on why Web Designers Should Do Their Own HTML/CSS. I’ve been thinking about my reaction for a few days, and have finally come to a conclusion. I feel they’re putting way too much emphasis on the designer.
Knowing HTML/CSS Can Help Designers
Knowing the particular constraints, as well as strengths, of the medium you’re designing for is never a bad thing. It helps make a more informed designer, and a more thought-through solution. But did we expect Andy Warhol to weave his own canvas? Or Bob Dylan to sing well? Knowledge of implementation details isn’t required to create great works of art.
A Few Points
In my experience, good web designs come from good designers who know the web, regardless of their skills in a text-editor. 37Signals argues:
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.
Their reasoning why this didn’t work is:
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.
My response to this is two-fold. First, if you’re not getting good designs from your designer, than they’re probably a poor designer. Pretty pictures does not a good web design make. And that’s all there is to it. Take a bad designer, teach them HTML/CSS, and you’re still going to get bad designs.
Secondly, and much more importantly, if you are getting good designs from the designer, but they’re just not translating well to the markup and styles, then that’s the fault of your “HTML monkey,” as described. If the person doing your XHTML/CSS coding doesn’t ‘get’ your design, or your designer, than you’re going to end up with a poor product, no matter how good or bad the design is.
The Cornerstone to the Well Designed Web
So the cornerstone is the developer, not the designer. If you have a good developer who understands what makes a design good, understands user interaction, and has a sense of aesthetics, you’re going to get a good product. Yes, it’s important for your designer to have an understanding of how to build a website. But it’s much, much more important to have a developer who understands what makes good design.
Post and Author Info.
Published June 19, 2008 by:
Commenting is currently off for this post.
So far there are 29 comments.
My thoughts lie in the middle. I understand what you are saying, but at the same time (as you point out), you have to have a designer who understands the context of the web. Andy Warhol understood the context of his artwork. He knew his canvas, even if he couldn’t make it himself. He understood its purpose and how to translate his work to that canvas.
There are many good designers out there, but they fail at designing for the web because they don’t understand the context. I have seen this before where print designers try to translate their print items directly to the web. The web is a different medium and context. This needs to be understood by the designer.
June 19th, 2008
Well said sir. ...but isnt the whole point of their argument that you should ditch the PSD all together and build your mockups?
I happen to agree with them up to a point. I use firebug most of the day to make changes, and use screen grabs of those to show others. This is incredibly more efficient. However, I am not re-inventing the form of the site everyday. Just adding bits and pieces.
What came first, the PSD or the Page? They are just saying that the process should be much more mixed. I agree with you as well – a great team that understand the web can work just as efficiently.
June 19th, 2008
From my experience managing and working with designers, I’ve seen two prevalent cases. I’ve had designers that were very talented but did not really grasp the concept of user interaction and total experience of what they were building. At first, I attributed to the struggles between their design and the “HTML Monkey” (often me) as that the designer needed to understand HTML better to know the constraints and best practices. Now I look back and know that is wasn’t that at all – even Flash couldn’t have helped those woes, as visually appealing as the design may have been.
More recently I worked with a designer who knew even less than the one above, but made brilliant designs because he understood the way a user would interact with it – regardless of the technology used to build it.
So, I’m in agreement with Steve here. Knowing a bit about how HTML/CSS works shouldn’t hurt, but a great visual designer does not a great visual interaction designer make in all cases.
June 19th, 2008
@Nate: I very much agree, but I suppose my point is that knowing HTML/CSS doesn’t make a better designer. If knowing CSS made a good designer, Eric Meyer’s site would be gorgeous. :) If your designer doesn’t know how to design for the web, that’s an entirely different problem.
@Jeremy: Only designing in the browser is great for tweaks, etc. I’ll defer to Jeff Croft’s response to complete my opinion on that matter.”
June 19th, 2008
When designers don’t have a comprehensive HTML/CSS knowledge, the design they come up with is often a nightmare to code because they don’t think “what will happen when this background needs to repeat?” or “how will this work when we need an interactive element here?” The onus is not on the developer at this point, unless the design is to become a collaborative effort between the two specialists. And it goes beyond the designer being familiar with the medium; it is much nearer to being intimate with the medium.
When your designer knows CSS intimately, the design will play to CSS’ strengths and work around its weaknesses from the beginning. A developer putting a design to a web page has layout constraints that a painter does not have. Again, unless the design becomes a collaborative effort, which is not always practical or possible, it becomes the designers responsibility to understand these things.
June 19th, 2008
@Chip: You got it. Good design comes from understanding the problems, and the medium with which you’re working. Implementation proficiencies are a whole different skill-set.
June 19th, 2008
@Rex: While I don’t disagree with some of what you have to say, I will suggest that if your designers and developers are not in constant communication, then something is broken. If two disciplines are working together to create a product, then there has to be some ebb and flow to the production.
And to state again, an intimate knowledge of what is possible in regards to user-interaction, usability, and simplicity is far more important for a designer to understand than the specifics of repeatable background images.
June 19th, 2008
If the environment can afford it, a rigidly segmented and tightly integrated team is the best approach. That means a designer for graphics who works closely with someone else who implements those graphics on the web in the XHTML/CSS context. In many shops, it boils down to the fact that there isn’t an affordable solution for rigid segmentation of the team. And I don’t think it is a massive reach for a designer to learn XHTML and CSS. I certainly followed that track.
Today, I think I’m more of a coder than a designer. But I also believe my skills as a designer have been affected by my knowledge of XHTML/CSS. In some ways, having the full context has positively impacted my design approach. At other times, I feel like I limit the design based on constraints I know exist in the code side.
June 19th, 2008
@David Russell: “At other times, I feel like I limit the design based on constraints I know exist in the code side.” I think that’s a great point. Some of the more creative designs I’ve ever worked with came from designers who couldn’t code their way out of a paper bag.
Though I’m not sure about your point of communication being cost-prohibitive. I would think it far more risky and expensive to have strict, clean-handoff separation between these disciplines.
June 19th, 2008
At my company, I’m a designer and a front end web developer. In those cases where we get a design delivered from a design bureau, they’re usually not that good because they’re not designs for a web page – they’re print designs.
Designers who are going to do web designs need to know what limitations there are for the web, or that know how to balance form and function. So, it certainly is better for an “HTML monkey” to do the designs themselves, if they’re good designers! Otherwise, you need to have a designer who knows how to make web designs, and doesn’t create absolute abstract crazy things that just won’t work on the web.
Imagine a designer delivering a design that has crooked text – text that’s supposed to be generated content. Obviously that’s not the developer’s fault – that’s just moronic web design. Best thing to do, when you get such designs from a design bureau, is to just let them know right away that this is a design for the web, not print. Developers can do amazing stuff on the web these days, but there’s still limitations to what can be done, unless you’re just going to do the whole damn thing in Flash…
June 19th, 2008
@Rex – I’d prefer that designers push the limits and developers figure out how to make it happen. If designers always stay within the box, nothing new will sprout up. Working within the box never leads to innovation.
June 19th, 2008
Most of my experiences with designers who don’t know how to code have been negative. This isn’t to say their layouts aren’t attractive – they are – but often too much effort is spent dressing up the frame of the design (header, navigation, menus) and very little on page content. The result is a bang-up job on the least important part of the interface, from both a business and user perspective.
June 19th, 2008
@George: Yes, designers who deliver web designs need to know the capabilities of the web. But knowing HTML/CSS doesn’t mean they will make better web designs.
@Geof: Then that is a bad design. If a designer is delivering bad design, teaching them HTML isn’t going to help.
June 19th, 2008
@Steve Smith: Allow me to clarify. I think that many companies look for the all-in-one guy or gal—someone who is mostly fluent in both disciplines. Generally, I assume they do this because they cannot afford to hire two experts in both areas, so they are willing to except hiring someone who can cover it all. Perhaps it’s a poor assumption, but I feel like there is a level of accuracy in it.
I did not mean to infer that it was cost-prohibitive to have players interact with each other. It would indeed be quite risky to have too much separation between the disciplines.
June 19th, 2008
Being a developer myself, GUI design (including a web-site) requires both sides. It’s not hard for a developer to imitate a design into code. The developer’s main responsibility is the functionality behind it. Good design requires a good designer.
My view on 37signals stance, is that a designer does not need to do his own xHTML / CSS. I offer to slice templates for designers. Why would you take someone with a creative skill, and require them to exercise logical skills? They shouldn’t take the time to code it, they should move on to the next design and do what they’re good at. HOWEVER, I think a designer should be able to code his own weird, impressive design if need be. The reason is sometimes I get designs from the designers, and they’ve done things that HTML can’t reproduce, and then comment about how I haven’t reproduced their design.
I feel the flip side is true also. It takes me a while to make anything look good in Photoshop. But I have good design sense for GUIs, and that ( I feel ) makes it better when a certain details isn’t clear in the design and I must make a choice myself.
June 19th, 2008
I agree with 37s. Anyone designing website comps should be able to build out their concepts in HTML and CSS. I’ve built out more than enough site designs from print design agencies who don’t know HTML to tell you that ignorance costs everyone time, money and headaches.
As you said though Steve, the developer is the cornerstone. The process of turning a design comp into HTML used to be described as slicing. These days, that process would be better described as a translation. Every translation process requires one of two things: One person who is extremely fluent in both languages, or two people who know enough of both languages to communicate.
The finger-pointing that goes on between “HTML Monkeys” and designers is really a shame. The bottom line is that knowledge is the answer. We all need to forget about our left-brain/right-brain presuppositions and gain some crossover knowledge.
...and this is where I shamelessly promote my book: http://www.principlesofbeautifulwebdesign.com
June 19th, 2008
@Jason – The problem is not that the print design agencies don’t know html, it’s that they don’t understand the web. Would you require an architect to do the plumbing and electricity of each building they design? Designers only need to understand the medium, not the ins and outs of how it happens.
I do like that you described the process as a translation though. Spot on.
June 19th, 2008
@John – I don’t believe your analogy is entirely correct. Of course I wouldn’t expect an architect to actually install the plumbing and electrical components, however, I would expect them to understand how they will be installed by a plumber/electrician. A building cannot be properly designed without knowing the constraints of the building process. If that was not the case, schools of architecture would simply be part of schools of fine arts.
It’s not possible to truly understand a medium without knowing the ins and outs. However, knowing the ins and outs, and being a master of implementation are two different things.
June 19th, 2008
For a small static site, I agree; the designer should just design. But for larger web apps and CMS driven sites there is way too much stress put on the developer to make everything work and I don’t think it’s too much to ask for a designer to learn some HTML/CSS to contribute a little more.
I’ve been on both sides of the fence for this debate, designer for some projects and developer for others and in my experience, the developer’s job is much harder (for the complex web apps).
June 20th, 2008
@Tim – Agreed. There is definitely a difference between designing websites and web apps. I’d still probably lean towards more of a combo developer designer for web apps rather than teach a straight up website designer how to code.
June 20th, 2008
as long as designers understand layouts then i will gladly cutup a psd for them.
although, taking a brochure designer and saying “make a website” is a horrible decision and i have dealt with their designs. it is a headache and the designers i worked with were hard-headed about their work. needless to say i quit that job in 6 months.
the last 3 years i have seen a drastic change in designers attitudes and work. they are getting the KISS (keep it simple stupid) concept more and that is making it easier on developers. the less time i can cut something up the more time i can put into making a better application (the guts of the site).
June 20th, 2008
Full agree for a little website, but for bigger websites you don´t need only a good design, there are so many things you have to remember.
June 21st, 2008
I did a pretty good job of offending our designer when I sent him that 37Signals article.
Being a front-end developer with design chops, it’s nice to see some backup.
Cheers :)
June 23rd, 2008
I think at the end, if we need a good a product, we need a good designer who is also very knowledgeable in both markup and usability, and has enough knowledge of OOP languages, being Actionscript or Javascript, so he can implement the interactive parts himself, or can properly communicate with a developer.
June 26th, 2008
I’m a non-artist who knows how to use Photoshop. That means I can take art from someone and fiddle with it. The most success I’ve had going from flat art to interactive web page is working with a designer who understands the principles and general workings of the web and css and gives me art that works well with that. Then I use my Shop skills to slice it and make it into css beauty. Jason Beaird mentioned this option as one of two successful ones, and I like it best. It means I get to do the fun stuff. :)
June 30th, 2008
I completely agree with you Steve. Knowing markup or programming is not related to a designer’s ability to create good web designs. While it would be nice to work with someone who could both design and write his own markup, the need to support multiple browsers while implementing complex layouts requires plenty of skill and experience. Also, I would rather that the designer would not be limited by his knowledge of markup when making design decisions. Often what seems impossible to implement is just a clever CSS technique away.
July 8th, 2008
Here’s how I see it. 37Signals found a process that works for them. (Way to go!) But when they went to go tell everyone how awesome and easy it is to “skip the PSD” it really came off as them preaching from their soapbox about how web develepers need to fire their designers.
Look, use a process that works for you or your company. That’s it.
@Steve: It’s “then”, NOT “than”. You did it twice in your blog post. For all the programming languages you know, you never bothered to learn English.
July 12th, 2008
GOOD JOB !!
July 13th, 2008
I think it’s just a matter of having one person for the job instead of two. Experienced programmers can be expensive, so why pay them to do all the front-end development when you can hire a designer who knows both?
I imagine 37Signals believes in their designers learning XHTML/CSS to help save some money on hiring more personnel. At least they aren’t suggesting that designers learn SQL and DBA.
July 16th, 2008