Web Design IS the Code


Just finished reading Other Flexible Media: balloons and tattoos, which fits right in with the thought process below. This always happens, I start on a train of thought and I find others writing in the same vein.

Just sayin’

“good” design is to succinctly take a concept and translate it into a tangible form through color, shape, type, and image

and our tools for that interface on the web are html, css, javascript. Which is why I am a big proponent of working in the browser, from the beginning. Use the tools that are developed for the medium.
Photoshop mockups have a place in print publication. The medium is static, and the expectation is that you will get exact color and positioning from the static mockup to the print piece.

That NEVER happens in web design, due to the technical differences inherent in the various browsers and an ever changing landscape of devices. It is counter-intuitive to use a tool that was developed as a digital photo darkroom tool to create web interfaces. I’m not saying the tool is not good, it is just not appropriate for developing interactive, responsive web interfaces where (in most cases) there is little to no image use for the architecture, and the typography cascade in the structure is important.

It’s not until you put that design in the browser that it becomes a “web design”, therefore the pursuit of “pixel perfection” in a medium that is not the intended environment is futile.

Web design is in the markup, that is where I start. It is easier to do web mockups and editing in markup. You can show clients working interfaces in the browser. When you are done tweaking you have your product. Rather than spend months in photoshop, then start the whole process over in markup.

Webkit, Firefox, Opera and even IE, all have their own web development tools and that’s the correct way of viewing real-time adjustments to CSS before deciding the final CSS needed for the layout. You can make sure of the correct font size and placements cross-browser. You can test the differences that specific design decisions will make to the site performance.

With CSS3 effects in the browsers, you do  not even need photoshop for a color palette. Webkit web development tools include the color palette for each individual color value. And they show interaction states. And they are getting better as web design/development tools all the time.

Which also brings up the debate…do web designers code. My short answer is “Yes”. You would be hard pressed at this time to call yourself a “Web Designer” if you don’t have at least HTML, CSS, and javascript in your toolbox. If you do

There, I said it. And if you want to hear from some experts in this field:

Repurposing Photoshop for the Web

Web Designers Who Cant Code

From this article:

However you feel about the concept of designing in the browser, the reality is that more and more designers are adopting this as part of their workflow. Some, like Andy Clarke, treat it as the biggest part of the design process, allowing the client to see flexible layouts, type, and rendering engine treatments on the fly as a design comes together; others, like me or Mike Kus, use it as an extension of our Photoshop work: initial design is done offline and is completed by filling in the gaps while in the browser. It’s certainly not my intention to write about the merits and pitfalls of designing in the browser here, but the key point is that if you don’t know how to writeHTML and CSS, it’s an avenue that’s completely closed off to you. The design process can begin and end entirely in your graphics app, but because websites will not (and should not) look the same in every browser, the design will not actually be complete until it’s coded.

Should Web Designers know html and css

How Much Code Should Web Designers Need to Know?

With the in browser boom, is Photoshop dead to you?