Web Designers & Coding

by Jin, 03-02-10 // 33 comments
Should web designers code?

The dead horse in this case is the never ending debate of whether a web designer should code or not. To clarify, “code” in this context refers to converting a graphical mock-up to HTML/CSS mark-up, not programming. Recently this debate came up again. Many designers wrote, and tweeted their opinions. It started with a tweet from Elliot Jay Stocks:

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.

Mike Kus wrote a supporting entry listing five reasons why web designers should code. Elliot later posted in detail to further explain his thoughts on the matter. I share the same views as them, so I won’t regurgitate what they already wrote. I recommend you go read their blogs and the comments they received. Here’s the gist: being able to code your own design makes you a well rounded web designer and you have more control over the final product’s look and feel. You’d also make it easier for the programmers.

I’d like to add some of my own points.

A Little History

I think the problem is because of the murkiness of the title “web designer.” If it was so clearly defined, then we probably wouldn’t be debating about who should do what today. When the web first took off in the mid 90s, there were basically two types of people putting content on the web. Old school Perl/C programmers and print/media designers. Both claimed expertise in their own field, with a “specialty” in web design. I’ve seen web sites with very ugly layout, colors, typography and clip arts done by programmers, and one giant GIF flyer styled pages done by designers. I remember the debate back then was who was the real “web designer.”

The web design industry today is so much more specialized. We have information architecture, user experience, marketing/social media/branding, front-end development, graphical design, SEO etc. Who is the “web designer” really? I feel if I get into it, I’d just be arguing semantics. So instead treating the matter as tasked based, let’s take a step back and look at the whole picture of a web product cycle from a front-end’s POV.

The Big Picture

Theory, Concept, Execution

Theory

Initial phase involves requirement gathering, research, planning, IA, establishing goals, and campaign.

Concept

The “creative” part: sketches, story board, wireframes, personas, copy and graphical mock-up.

Execution

Converting concept to reality. HTML/CSS/JS for layout and presentation, JS for interactions.

“Design” is about problem solving AND providing a good user experience. It means function and form together. This is why I think a web designer’s role is to be able to conceptualize AND implement. Just doing graphical mock-ups is only half of the job. That’s why they’re called a “mock-ups,” not the real thing.

What about designers in other fields? Do industrial designers need to craft their own chairs? Do architects need to construct their own buildings? This type of analogies come up a lot during the debate. No, they don’t have to because the nature of their fields is different from ours. The analogies simply don’t apply, despite how sound they are.

Complacency

It’s easy.

That’s right: writing HTML and CSS is so easy, that there’s actually no excuse not to learn how.

- Elliot Jay Stocks

This is the main point I want to stress: IT REALLY IS EASY. Some designers say that they have a good set up going: they do the graphics, their partners do the HTML/CSS. But what’s stopping them from learning new things? Personally, I haven’t met a single person(regardless of their profession) who is good at what they do if they’re complacent. To me, refusing to learn shows an aptitude problem.

Web design/development is a very fast paced field since it’s technology based. The best web designers I know are those who keep their skills sharp and are constantly learning new things. The graphical design aspect is more timeless since it’s based on long established principles. But the technology side is constantly changing. This is why, to me, being a web designer is exciting.

You Are Dispensable

Let’s talk about practical stuff. Different web design shops big or small may operate differently, however they have one thing in common: Budget. If you cannot code the design, then they’ll hire an additional person do that job. It costs the company extra money. Once you’re done with your graphical part, when you’re idling with downtime since you can’t do anything else, you’re wasting company’s money. If there’s cash flow problem, you’d be the first to let go. If you freelance on your own, you’d increase your income by not splitting the pay with another coder. The more skills you have, the more valuable you are.

Gray Area

Despite my strong belief that web designers should code, there are exceptions. If you have moved onto a new role, say a creative director then I don’t think it’s necessary for you to keep up with every single new HTML spec that comes out. By then, you hopefully will have able web designers working under you(who can code).

In Closing

This isn’t the type of article I like to write. I definitely don’t want to come off as a snob. It’s not an “I know how to do it so should you” type of thing. As I pointed out, writing HTML/CSS is EASY. There’s just absolutely no reason for not knowing it. It is an integral part of our job. Of course, I can only speak from my personal experience. If you think there’s a case where a designer absolutely needs no knowledge of basic coding, please let me hear it.

33 comments

also feel free to contact me on twitter or via email
Markus Thömmes 03-02-10

Pretty good article!

But I have to say: HTML/CSS is not easy at all. It is easy to learn, and it is easy to understand. But to implement a whole design with all the tricks an experienced developer knows is a bit harder!

existdissolve 03-02-10

Yes, coding HTML/CSS is easy. Coding it PROFICIENTLY is an entirely different matter…

I’ve worked with far too many graphic designers AND web developers who can “do” HTML/CSS; however, what they produce is hardly what a good web designer would, and can actually create more headaches than they resolve by being able to “do” HTML/CSS.

And really, if you’re a good enough graphic web designer that you can land a job where you don’t need to be able to code, chances are your job has enough graphic design work to keep you busy all the time; otherwise, they wouldn’t hire you to begin with.

On the other hand, I completely agree with you. Having knowledge of HTML/CSS is very helpful [read necessary] when graphically designing a web site because this knowledge will give you insight into what is and isn’t feasible when transitioning from the beautiful boundary-less wonder that is Photoshop into the limitations of the boxes and straight lines of the web.

Janko 03-02-10

I completely agree with you Jin. I would go even further – today designers need to have broader knowledge the entire design process that includes not only visual design and coding but also (at least basic) understanding of elements of ux.

And yes, it is easy.

Legos rocks!

mattwdelong 03-02-10

Hey Jin,

I agree with some of your points but I will throw this out there.

I am a programmer, and I admittedly suck at design – no question about it. I also think that good design is something you can’t be learned, unlike programming. I see many people who claim to be designers, but their designs are just as horrible as mine. Anyone can learn photoshop ( I can even use photoshop).

I think if your skill as a designer is good enough (and you find yourself at the right company) – there should be no reason you have to learn programming. Do what you are good at and keep pumping out the design as programming CAN/IS taught and there are enough people who do it well enough, that they are a dime a dozen. Of course this could also bring us into an argument of good vs bad code. (Which might be another reason aforementioned good designer shouldn’t be programming)

Ideally, you want a designer and can design and a programmer who can program and then make them work together. They do their own respective tasks and pump out top notch content – no need to half ass it. Division of labour is efficient.

Dmitry 03-02-10

“What about designers in other fields? Do industrial designers need to craft their own chairs? Do architects need to construct their own buildings? This type of analogies come up a lot during the debate. No, they don’t have to because the nature of their fields is different from ours. The analogies simply don’t apply, despite how sound they are.”

I think the analogies apply, just that the examples provided are wrong :)

The architect needs to have a grasp of structural engineering when designing their buildings to ensure they don’t collapse, otherwise he’s just an artist. They also need to base their work on their users’ needs — i.e. plan the layout for convenient and logical access to all the rooms, otherwise they’re just drawing a building — again, more artist than architect. In the same way a web designer can draw the site in Photoshop, but this is only half the story since the Web is an interactive medium so they only create one dimension of that experience.

The thing is — you don’t really *have* to code, in the same way you don’t have *have* to be a web designer: you can be a “designer”. A designer in this context could create the images; a web designer would create the images and implement them for the medium they work with, which is HTML/CSS.

dcave 03-02-10

Great points. I started out just doing designs but there was not enough money in it for me and also once I learned HTML it was easier to upsale websites to my graphic design clients. If you do graphic design full time and only design websites here and there then you may not need to know html. But if you only design websites then not knowing html is only hurting you.

Its like knowing how to start a car and give directions but not how to drive.

Victor Boba 03-02-10

“The more skills you have, the more valuable you are.” Why people don’t increase their skill set I’ll never know.

The more you learn the more you can demand in $$$. Pretty simple concept.

Great post Jin.

Dmitry 03-02-10

Matthew: HTML isn’t a programming language, it’s a markup language. CSS isn’t a programming language, it’s a style sheet. Coding sites isn’t programming, it’s marking up content and styling it. This doesn’t make it easy by all means, but it’s definitely not in the same league as programming the back-end with PHP, Ruby, Python, whatever.

If you’re a ‘designer’, create the images. If you’re a ‘web designer’ your medium is the web, so mark up and style your work with HTML/CSS. After all, you’re not creating flyers, you’re creating interactive sites, which means there’s more to it than just Photoshopping the layout.

Andris 03-02-10

I think basic HTML/CSS is pretty easy to learn. But like anything in this world HTML and CSS got its tricks. So I don’t think a Webdesigner has to know all the differences between browsers and operating systems and how to make websites work in all browsers.

A Webdesigner should know there are limitations. Since we don’t wanna have full flash website, don’t we? So he should know basic HTML/CSS. But not all the tricks.

Omer van Kloeten 03-02-10

I think it all boils down to the one before last point you made – it’s a required role.

Every project needs:
1. Someone to plan UX.
2. Someone to plan/create UI.
3. Someone to create the HTML/CSS.
4. Someone to create the application layer.

If you satisfy more than one level of this hierarchy as a professional, chances are you will either get paid more, be more in demand or both.

I, for one, despise having to deal with HTML/CSS/JS and cross-browser oddities, but that’s a personal preference for me and a luxury.

As far as how much of an added bonus having HTML and CSS as a skill is for those who come from the world of UX/UI, I can’t tell because I come from the other side of the spectrum (dev).

jhoysi 03-02-10

I couldn’t agree more. The designer MUST KNOW at the basic level what HTML and CSS are capable of producing, and what is involved in getting it there.

I’ve worked as developer on web projects that were designed by print designers. There is no end to the amount of frustration I’ve felt when I needed to go to the project manager and tell them a client-approved design is not feasible for the web, or that flat-out certain concessions must be made in order to get the site to work in the way they expect it to.

True, designers can turn to a developer to actually produce the markup of a site, but it’s still their job to know how those markup languages affect the usability, functionality, and what is possible in the design.

Bobby Borszich 03-02-10

Jin,

Great article and sometimes it is necessary to beat a dead horse to make sure people have not forgotten about it.

I am at my core a programmer who enjoys doing web coding and flirt very dangerously with design (meaning it is not my best skill).

While pure designers (no coding) have their place I feel it is very lazy to not understand more of your craft. I have been doing a few side projects and can clearly see the difference between a designer who just ships a Photoshop file and one that can code (html/css).

The one that came as a Photoshop file had many missing elements that weren’t discovered or thought of until coding. This made for many adjustments that were a waste of time because I had to go back to the designer to understand what they actually want. It is even worse when these people have some html/css background. Because they think they know how to do it but their knowledge is outdated.

On the other hand the designer who delivered the Photoshop file with two sample pages coded in raw html and external css already had all those questions answered.

The first type of designer will quickly find that they are not competitive and are not providing real value. While the files from the second designer weren’t used directly it was a tremendous jump start in order to start coding. All but the simplest sites end up in some sort of a web framework or CMS which don’t use raw html files. This can be WordPress, Sitefinity, Ektron, php, RoR or any other of the various web languages. At this point elements of the raw html files need to be distributed in and around the web engine you chose.

Further most sites are being based more and more on client side interaction using Javascript or a related Javascript frame work [such as your hide/show comments ;) ]. I think Javascript is much more programming related than web coding and is a good handoff point between the designer and the coder.

Simply producing two or three html files does not make a website, but just slapping together the various programming languages doesn’t either.

A good designer that provides solid html/css comps to the programmer will find that programmers will continue to work with them. Further a programmer that can implement from those html/css files and make them come to life will find that designers will continue to work with them. It takes both to make something great!

ATW 03-02-10

Nice post, and some good points. I generally agree w/ the notion that someone designing for the web should have a knowledge of css/html.

However, I do know that there is a difference between a front end coder and a web designer. A front end coder is not expected to know how to design.

A web designer who has even a basic sense of css/html will produce designs that are easier to implement.

Russell Bishop 03-02-10

The true problem here is simply the definition of the title “Web Designer”.

Should “T-shirt Designer” know how to print t-shirts? What is a T-shirt designer? It’s all specifics.

Jin 03-02-10

@Markus, @existdissolve, @Dcave Knowing all the tricks of HTML/CSS is a long process. Learning Browser compatibility, SEO, writing semantic code definitely etc take time. It’s easy to learn the basics, but not impossibly difficult to learn more advanced techniques. Especially considering how much online resources there are these days on web design and development. Learning how to code HTML/CSS gives you a new perspective on interaction, limits of the technology, than merely creating something that’s static.

@Janko, I remember reading your article where you touched up on the subject of exploring new skill sets. I think people working in the web field, designer or programmer need to be multi-disciplinary. Focus on one specialty, but have knowledge in related areas. Great programmers I know personally also know about networking, database, back-end and fron-tend coding etc. At the end, it’s about motivation.

@mattwdelong Thanks, but I’m strictly talking about HTML/CSS here. See Dmitry’s response to you below.

@Dmitry, I see where you’re coming from and I agree with everything you said. However, I meant in a literal sense that the architects don’t have to mix the concrete and lay the bricks to do their job. Of course having the knowledge of the materials, ergonomics etc is part of their profession.

My main point still stands: Why not to learn new things since it’s an integral part of our jobs as web designers? What’s so hard about it? To me it’s a motivation issue.

@Victor, @Omer, thanks!

@Jhoysi, I have many programmer friends. I hear your story way too often. A web designer who can code makes your job a lot easier.

@Bobby, really appreciate the long reply. I didn’t mention Javascript(programming) because that’s another can of worms I don’t want to open. :) Again, it’s about what you want to learn.

@ATW, @Russell, “web designer” is an ambiguous term. I can only give my own interpretation of it, with my reasoning to back it up. Thanks!

Jenny Messerly 03-02-10

I agree with Victor:

““The more skills you have, the more valuable you are.” Why people don’t increase their skill set I’ll never know.”

If I didn’t know how to code my own designs I would have lost my job in this recession long ago. Knowing how to code makes you extremely valuable and I agree, it’s easy.

How many successful athletes don’t know the rules of their own game? How is web designer supposed to create a successful interface if they don’t know the standards of the web? It just doesn’t make sense.

Portman 03-02-10

Caveat Lector: I am not a designer, of any kind.

I’m not sure why this is a debate. It’s simple.

If you don’t code your own designs, then you’re delivering a graphic (Photoshop, Illustrator). You are, therefore, a GRAPHIC designer. There’s nothing wrong with being a graphic designer. No shame. But don’t call yourself something you’re not.

If you deliver HTML and CSS, then you are — again by definition — a WEB designer. End of story.

Mark Hayden 03-02-10

I agree completely with Victor. However, I believe there is no excuse for today’s designers to not have a firm understanding of HTML/CSS and more importantly the drive to continue to learn as the industry evolves. IMHO there is just no way a designer can create a functional, well thought out web design without a solid knowledge of what can be done and how.

That said I also think it is important for this conversation to go both ways. Developers should be driven to learn more about the front end and creative aspects of a site so they can interface with designers and increase their job security.

At the end of the day the more you know the better off you are and as the web evolves if you don’t want to grow with it the next generation of designer hybrids will wave at you as they run on by with your job(s).

Tjeong 03-02-10

I agree that as a web designer, we should understand the basics of coding. its a important part of designing for web, as well as UX ans UI. However, unless you have the luxury of working on one or two clients for a period of time (which i dont), or All you are doing is designing and code and not work the other aspects on the brand promise or the strategy (remember clients did not hire you because you are good coder, they hire you because you strategist and understand their brand.) I dont know where i would find the time to code the work. Furthermore, as an art director and a strategist, my job goes beyond designing websites. There is enough work for me to do. I do my due diligence to learn as much as i can.

nlsn 03-02-10

Humm…

Although I agree with you on the general opinion, I feel I must say that saying “HTML/CSS is easy” its like saying “javascript is easy, it’s like C”… its a dangerous statement IMHO.

You may learn the highlights of html and css in an afternoon, but REALLY understand all the nuts and bolts, cross-browser issues and specs may take some time and commitment.

SCOTTF 03-02-10

Honestly HTML and CSS is the very least bit of coding a professional web designer should know. I dont know how someone who didnt know html or css could successfully create a complex design and layout without understand what’s involved behind the design. Sometimes the design can be limited to possibilities of the code.

Tom Hermans 03-02-10

I agree with the fact that you are a webdesigner if you code, otherwise you’re just making graphics.

But, HTML & CSS is not easy at all imho. It “can” be, but with all cross-browser issues, box-model-hacks, absolute and relative positioning, weight of the used selectors, cascading of styles etc etc it can get very difficult to code “any” design. But by doing you learn.

Jeff Blick 03-02-10

If you’re using that logic, then you also believe:

1. Anyone who drives a car should know how to rebuild the engine from scratch.

2. Anyone who takes a picture should know how to build a camera.

3. Anyone who builds skyscrapers should know how to make a small planet to put it on.

You get the idea. Good designers don’t need to know code, good coders don’t need to know design. Build a network of talented contacts (or a team) whose skills compliment yours. You can’t master every skill.

AlchemyCode 03-03-10

Really nice article!

I’m a web-developer myself and I think that knowledge of HTML and CSS is important in communication between web-designer and web developer.

Apart from that web-designer with this knowledge will better organize layouts in a designing stage, without further corrections because it will look different if we cut this way.

ellentk 03-03-10

Here, here! Finally. @portman hit the nail on the head.

In addition, I think being a user experience as well as an information architecture is the role of a web designer as well. Unfortunately, the title has been cheapened, in a sense, by those who don’t know how to code or write CSS and are reliant on tools like Dreamweaver and Photoshop and call themselves web designers.
A good web designer knows how to design, code (from scratch), test, and implement how IA affects the design.
All important and simply designing graphics in Photoshop and dropping into Dreamweaver and not knowing the ramifications when it comes to browser issues is not a web designer.

Jin 03-03-10

@Jenny, Good point on the recession, even more valuable to be well rounded.

@Portman, my thoughts too.

@Mark, I believe it’s important for programmers to develop a taste, or appreciation for the aesthetics. I personally know many who already do. It’d be very beneficial to get exposed to fundamental design principles.

@tjeong, I think understanding branding, ux is part of web designer’s job too. Otherwise, we’d just be making things “pretty” without a purpose. And as I pointed out, if you’re in a director role, then you don’t necessarily have to know the grunt work. But knowing new things still helps.

@nlsn, @tom When I say easy, I meant it’s easy to pick up. Also, it’s easy to find the resources to learn. Of course to get to advanced level, it takes practice, but still not hard. There were many times I was pulling hair to fix CSS for IE6, but the solutions can be quickly Googled, or asked on Q&A sites.

@scottf I thought so too. But I’m surprised many don’t.

@jeff, thank you for offering an opposing view, sincerely. I think I know what you were trying to do with your analogies, but they’re not quite the same… To be clear, I’m talking about “WEB DESIGNERS,” there are graphic designers who specialize in icon, logo, illustrations. I’m not talking about them.

My main points still stand: 1). knowing HTML/CSS makes you more valuable. 2) Learning HTML/CSS is not hard given the resources available. Are you disagreeing with these points? If so, please explain your reasoning. From your URL I see you work at a web firm, please answer this question: if you have the budget only to hire ONE web designer, who would you hire? Persona A who can only do graphical mockups, or Person B who’s equally good at graphic, AND able to code?

@AlchemyCode thank you for your comment.

@ellentk web design field is exciting isn’t it? It’s constantly changing. Years ago SEO wasn’t a big deal, now any good designer should do that for their clients. We’re not just coders or pixel pushers. There’s so much to learn, that’s why this field is so specialized, and intertwined at the same time. Who knows what’s coming tomorrow?

Steven Clark 03-04-10

Jin, you raised an interesting point about architects (my partner’s son is an architect in Europe – currently working on Uganda / Rwanda high-end eco-tourism projects. Good architects get involved in the implementation right down to shovelling mortar. Or in the case of Ross, he’s hands on in Africa at the moment directing construction and logistics on the project.

In Australia he used to work for a guy in Sydney named Drew Heath, he does the same hands on work. When you run into this style of architect its a whole new level of experience (as opposed to the Zaha Hadid sweatshop)…

Steven Clark 03-04-10

So I think in all design there should be a strong tactile experience between the conceptualisation and implementation of design. Because what you learn about design from the building feeds into a knowledge base you can’t replicate in the sterile office environment. The feel and form of timber, type of brick, angle and light, etc.

CodeNamePapa 03-04-10

I’m a complete amateur regarding CSS/HTML/wordpress (and only 1% of what it’d take to be a “designer”) and I agree with Jin that getting the basics of CSS/HTML is really quite easy. It’s really just like basic math, or putting together a puzzle.

For me, the difficult part is the designing. If I could design site like Jin or Chris Coyier then translating it to working HMTL would definitely be the easy part.

Jin 03-07-10

@Steven, I think that goes to how far you want to be involved. Ross may have a option of not to get his hands dirty, but he chooses to. I say it’s all about his motivation and love for anything related to his main field.

@Codenamepapa, thanks. It’s just matter of time really. I’m glad there are so many resources around these days. Good luck on your pursuit in web design.

Webb Des 03-11-10

Wow, theory, concept and execution. That summarizes how everyone should be thinking about web design. Thanks Jin!

Murid Rahhal 04-29-10

Web designers should know how to code html/css.
HTML/CSS developers should know how to design.
So they can work together smoothly and fast, creating stunning projects.

EJelome 12-20-11

Hi everyone, I’m a Web designer. I’m doing XHTML and CSS (including Microformats) for 2 years now, so probably, I have a little bit of authority how and what a ‘Web designer’ should be and shouldn’t be.

1. Web design is not about graphics (graphics is a subset of Web design, but cannot be vise versa):
2. The word ‘design’ in Web design has brought confusion in the masses, they think that since ‘design’ is in the phrase “Web design”, they immediately assume it’s just another graphical work, only done in the web.
The problem arises when they actually begin the Web design process, which requires non-graphical concepts and practices such as Usability, Accessibility, IA, Semantics, Web Performances, Progressive Enhancement, SEO, etc.
3. The Web standards (which promotes Best Practices for building Websites) isn’t about ‘graphic’ designs either, but Semantic Markup and Separation of Structure (HTML), Styles (CSS), and Behavior (JS).
4. Print designs, when converted (or applied) to the Web tends to be impractical and inappropriate, therefore, users suffer.
5. Please have the time to read
Differences Between Print Design and Web Design and watch
Graphic Design vs. Web Design.