Photoshop, HTML & CSS: Web Designers, Know Your Code

Designers don’t code. Coders don’t design.

At least that’s what I’ve been told throughout most of my career. The debate over whether web designers should be able to code is an ongoing one, as old as the Fireworks vs. Photoshop discussion.

What is the right solution? Is there a right solution? Can web designers call themselves web designers without knowing how to code?

Know the Basics
Modern web designers should know front-end HTML, CSS and some JavaScript — at the very least. They should be able to understand these technologies, speak to them when designing and know the limitations they impose on designs. The best interactive designers are the ones that understand how code impacts usability, and how to address the challenges of unique audiences.

For example, if you’re tasked to craft a web banner, don’t build it in 300dpi, InDesign or CMYK. Open Photoshop (or, if you’re so inclined, Fireworks) and Flash and understand how and why these programs work together. It’ll make you a stronger — and smarter — designer. The more designers get their hands dirty in HTML, WordPress, Flash, etc., the more they’ll understand the hows and whys of the ever-changing digital medium.

Designers and Developers: A Match Made in Heaven
In companies that can afford to have a designer and a developer on the team, it’s crucial to find a balance and to define roles and responsibilities. Digital teams often make the mistake of leaving developers out of the initial scope discussions, brainstorms or design reviews, leading to problematic designs that don’t translate well online. Along these same lines, designers should work closely with developers, asking how they can help prepare files, write clean front-end code and assist with slicing images.

Final Words and Useful Links
The debate may never be resolved, but in an industry that is constantly shifting and expanding to assimilate new technology, it’s crucial for web designers to not only keep up, but also gain as much knowledge as possible to stay relevant and smart. As for the Photoshop vs. Fireworks debate, I’ll leave that discussion for another day.

For more tips, tutorials and information on how to get started doing front-end coding, check out:

World Wide Web Consortium (W3C): The headquarters for web standards. Also, it houses great tutorials and lessons, as well as ways to validate your code.

Lynda.com: Expansive library tutorials on every web subject under the sun. Ask your company for a membership, or if you’re a freelancer, it’s worth the fee.

Smashing Magazine: My favorite site for resources ranging from best web designs to time management to coding. Their Facebook page constantly updates with fun and useful links.

Peachpit Press: Every designer (either print or interactive) should have a library, and Peachpit books were the gateway into Flash for me.

A List Apart: One of my favorite blogs/sites for people who make websites, with some interesting articles on web design today.

Preparing Phototshop Files for Developers: An informative article with tips on how to make the best transition.

Webdesigner Depot: 6 Reasons Why Designers Should Code: It’s not just me that believes designers should code!