Do Web Designers Need to Know Web Development?

September 16th, 2010 by John Reeve

“…basic front-end knowledge should be possessed by anyone who calls themselves a web designer”
— Elliot Jay Stocks
Web designers who can’t code

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 competent 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 competent 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 ;)

Tags: web design, web development
Related postsA Few Tips for Developing Web-based Applications (4)Five Reasons NOT to Redesign Your Web Site (3)Intervals Blog Listed in Top 50 Productivity Blogs To Watch in 2010 (1)Web Design vs. Print Design and the WIRED Interactive Magazine (3)Bootstrapping Your Creative Web Design and Development Ideas (2) Bookmark: