“…basic front-end knowledge should be possessed by anyone who calls themselves a web designer”
— Elliot Jay Stocks
Web designers who can’t codeIn this post…
Most web developers, including myself, have gone through the experience of working with a web designer who is completely unfamiliar with web development. The comps arrive as an EPS at some random screen resolution with instructions to use the latest trendy and obscure typeface for every word of text (why must our SEO efforts so often be sacrificed to the god of Brand?).
Although the pursuant interaction is usually positive, there are some frustrating moments as the submitted design is kneaded into a more usable format that will translate onto the web. Which brings me to a question that myself and others have asked; should web designers also be advanced web developers? And I don’t mean the server-side stuff, just the client-side basics.
Unfortunately, it’s not a simple question to answer. Web designers don’t need to be advanced web developers, however, they should have a basic understanding of client-side development.
Why wouldn’t a web designer want to understand web development?
A web designer who understands web development is only going to find it that much easier to find a job. Simply put, web development skills are a good resume builder. I would guess that most creative agencies who employ web designers are going to agree that the web designer with development skills is the more attractive candidate. At Pelago, where I work, we would never hire or subcontract a web designer who did not “get” the basics of web development. In the interest of self-preservation and career advancement, web designers should be learning as much as they can about web development. If only web designers were as eager to learn web development as developers seem to be to learn web design, Web 2.0 wouldn’t be synonymous with bezels, drop shadows and gradients.
An understanding of both web design and development does not equal mediocrity
There is a myth that someone can’t be good in more than just one thing. That if you are going to learn both web design and web development you will have to settle for mediocrity in both. Any freelancer or anyone who has ever run a small business and has had to wear multiple hats can tell you this is wrong. Besides, no one is saying you have to be an expert in both. A web designer can still be a rock star while dabbling in web development. It’s always good to have a core competency, whether you are an individual or a small business. But it also helps to cross train in areas of proximity to your expertise. Web designers don’t need to be experts in web development, they just need to understand the basics of how the web works.
Why a basic understanding of client-side development is necessary
The analogy of the print designer works well for explaining why web designers should understand basic web development concepts. Print designers work against physical limitations of the client’s budget and the printing process. Good print designers work very closely with printing companies and have a good understanding of how the printing process works. Print designers will use this knowledge to squeeze the most visual appeal from the client’s budget. They will make a two-color design look like three or utilize different paper stocks, such as cardboard, to an advantage. Web designers have limitations, too. They must design within the constraints of the square pixel, screen resolutions and image sizes. When these constraints are ignored the web designer will end up with a web site that is extremely difficult to build with HTML/CSS or that is too large for anyone to wait around while it loads into their web browser. In the end, the effect on the client’s budget is the same. It runs out before the project is completed.
What is the bare minimum a web designer should know about web development?
There are a few basic things about web development every web designer should know:
- Pixel Resolution
The target pixels per inch (ppi) that web designers should work with is 72ppi. This is similar to dpi, except that you can’t really squeeze more pixels into a one inch square on the screen like you can on paper. More importantly, the web design should fit the desired screen resolution, whether that is 800×600, 1024×768 or higher. The elements in your design should take up the same amount of pixels as they would on the finished web site so that there is no need for scaling up or down during development. - Image Optimization
Take a moment to read up JPG, GIF and PNG image formats and when it is best to use each one. For example, JPG uses a lossy compression and is better for photos where the compression is masked by the details of the image. GIFs and PNGs, on the other hand, use a limited color pallet and work better for illustrative images and rasterized text. Learning how to optimize images for the web — and achieve that perfect balance between low file size and high image quality — will go a long ways in designing for the web. - HTML Basics
Get to know the basics of HTML, how web pages are structured with markup language. It also helps to know about some of the basic HTML elements such as headlines, lists and paragraphs. A simple understanding of how the web design will be translated into equivalent HTML tags will help web designers take full advantage of the medium. - CSS Basics
CSS can do a lot. It gives us leading (aka line height), pixel precision over type size, and more control over layout. What it does not give us is control over widows and orphans, kerning or tracking (letter spacing in CSS never looks good in my opinion). CSS works best when the web designer tries to control it less. It’s the nature of the web that browsers will do what they want with the content on a page. If you don’t like the way the type looks, blame the browser, not the developer, and please don’t try to fix it by forcing line breaks or replacing elements with graphical equivalents.
What about web developers? Shouldn’t they also learn web design?
Yeah, but that’s another blog post I’ll have to write another day. Or you could just take this blog post and invert the references to web designers and web developers and there’s your answer ;)
Unfortunately it seems that webdevelopers need to know webdesign… which is no good for us non-artsy types.
Yes the web designers need to know web development as well as seo
SEO. Yes, that is an entirely different can of worms. I’ve written a little about web designers and SEO best practices as well:
Search engine optimization (SEO) tips for web designers
Web design and the influence of metrics
When don’t “web designers” need to know “web development”??? Have you seen job postings lately. It seems you need to know every Adobe program, PHP, mySQL, JavaScript, and let’s throw in Flash/AS3 for good measure. Oh, and PowerPoint too.
I can understand HTML/CSS. Of course you have to understand that and know how to do that. Maybe the workings of a CMS. That seems reasonable. I would like to know what “web designers” are getting away without knowing HTML. Sign me up!
Now HTML5 and CSS3 are getting even more “programmy”. I didn’t spend ten years to learn Illustrator to program animated squares on or create gradients in CSS3. Jeez. I knew I should have taken that BASIC class in 1983.
To us designers, it’s constantly “you need to know…”
Ok, well, what EXACTLY does that include? I can never get a clear answer on this.
Exactly what VERSIONS of the x software or x programming language should I know? BLANK.
How do these all work together?? BLANK.
Can you refer me to a book that would teach me x programming language? BLANK.
Is there some sort of syllabus that I could follow to learn all of this to meet industry “requirements.” BLANK.
It must be over 5 years now that I FINALLY found a book that has really taught me HTML. YES, JUST HTML!! Under time pressure, I was going through Quick Start books, lynda.com videos and the result was a worthless smorgasbord of information. I never learned the concepts until I hit the OReilly Head First series. I wish someone had put that book in front of me years ago. So I am about 10 years behind and all I hear is (you’re so stupid — is this all you know????) you should know this and that and that list changes every day.
I hold 3 degrees from a top 10 university. My design background was accomplished with pencil and paper and ink. I speak 5 languages. So, it’s not because I’m stupid that I don’t know web development as a tool for design. Trust me, design is its own discipline that one may or may not truly develop until years later after a training in concept, simplicity, historical analysis and reference, problem-solving and process. I have yet to meet A SINGLE web developer or techie who can even SPEAK to these areas. And in their work, this lack of design training ALWAYS SHOWS.
So why wouldn’t a web designer learn web development? Well, I can say I’m on the easier side of the fence on this one because the real question is why wouldn’t a web developer want to learn about design? It may because they recognize they have no capabilities or talent when it comes to even the most basic design skills: color theory, composition, simplicity, repetition, picture box, art historical reference.
In sum: as a designer, I don’t appreciate the patronizing tone of this article. Although I agree that know-how of technicals is important as constraints to the design of a project, good design is much more than about HTML. It is unfortunate that in this age, true design has been subsumed in the flash of artificial magic of gadgets. So if you want us to work with you, please specify what is truly required and how to go about obtaining that knowledge. It takes more than just saying “you should know” this and that. Believe me, that statement can go the other way as well. Even the title of a good book would help.
new_york_night,
Thanks for the feedback.
One of the best books I have ever read, and which most of my article is based on, would be Web Design in a Nutshell by O’Reilly (http://oreilly.com/catalog/9781565925151). The sections on GIF, JPEG and PNG compression are especially valuable. As a web designer it is important to know which items of the web design should be GIF, JPEG, or PNG and this book does a great job going into that. The book covers most other technical aspects of web design and development as well.
I get the designing with paper and pencil side. I, too, studied Graphic Design before computers played a big role. And that was as recently as 1998. My professors had me rendering entire typefaces with pencil and paper, sketching out comps with color markers, and roughing out thumbnails.
But I also took the time to learn the technical side of web design, and got a degree in computer science. So now you’ve met someone who can speak both sides. I’m as equally passionate about the design and development sides of building a web site.
To be realistic, a web designer is going to have some technological knowledge of web site development, or they are going to be passed over in the hiring process for someone who does have these skills.
I’ve had the privilege to work with several web designers who are talented in both the design and development side of the business. One designer in specific would be Jesse Bennet-Chamberlain. His work at http://www.31three.com/ is expemplary of a good web designer versed in both design and development.
I tend to agree with Mr. Reeve about the need to know basic development. But, as a student in early CS, VT, and IT classes I see professors and students dividing and categorizing people all the time. So, I disagree with the premise of this article.
My programming instructor has made comments like:
“Sorry if you’re bored, we have to take this slow because this class is required for VT students.”
Did my teacher really need to apologize? He understands that people have different aptitudes but he failed/fails to understand that this kind of talk can be derogatory. It is judgement and it divides CS and VT students. Like new_york_night said, it is patronization, and it isn’t just one professor. My VT instructor is one of those that can do it all. He is very knowledgeable about coding and design. But, he fell into the same trap. He said:
“You CS students should team up with a VT student to help with design.”
While this may be true for many CS students, he is judging them before seeing any designs. This kind of thinking is everywhere. PC VS MAC is another example. Half my life I’ve heard Macs are better for artists, they do graphics and video better. I’m no expert, but isn’t the power in the software? Can’t you get the same software on a PC? And the hardware has been blurring for a long time. Who makes the processor in your Mac? Isn’t it easier to build a powerful PC? It’s like people need to have some need to be on a team.
To me, dividing the world into teams isn’t fun, because it always ends up going to far. Now, I don’t think Mr. Reeve’s article is as harmful as a professor apologizing for dumb’ing down his class, but why pit designers against developers? Maybe new_york_night and I (a CS major) are being too sensitive, but I think bringing people together is better than pushing people apart.