• Read more about Scripting for Web Designers

This month, I started teaching at the Washington, DC campus of Boston University's Center for Digital Imaging Arts.

Specifically, I am introducing aspiring web designers to HTML forms, JavaScript, PHP and MySQL — the technologies that will make their websites do something.

The consequences of techies not understanding design are humorously well-documented.

Less well-known, though, is the equally unfortunate phenomenon of web designers who don't understand the underlying technologies that make websites possible. It may not receive the same mockery, but I know I am not the only engineer who is frustrated when designers hand off a Photoshop file, instead of HTML/CSS.

CDIA believes this sort of cross-training should be part of every designer's education, and I wholeheartedly agree. Here's a partial list of why web designers really should know how to code:

• Curiosity: The first reason is probably the most obvious — education is, in and of itself, a worthwhile endeavor. Software development requires a certain mindset and will teach you to approach problems from a new angle.
• Communication: A great deal of the perpetual conflict between designers and developers can be attributed to a communications problem: the two groups often don't "speak the same language." By understanding web technologies, you will be better equipped to understand what your techie colleagues are saying, and more able to communicate your needs to them.
• Respect: "Wait ... you're a designer, and you know how to hack?" Rest assured that engineers will feel more confident you understand their concerns.
• Self-Reliance: Often, it's quicker (and cheaper) to do some things yourself. Adding a "contact us" form to your website shouldn't entail hiring a software developer.
• Career: It's important to differentiate yourself from your peers, especially in a down economy. By being a designer with scripting skills, you will stand out from the rest of the pack.

And, who knows? Maybe one of the students will be inspired enough to change their focus from design to development. (Hey, a man can dream!)

So, when offered the opportunity to teach web designers some client- and server-side scripting, I jumped at it.

And I'm similarly excited for the upcoming training Intridea will offer in 2009. Stay tuned.

• Read more about What the World Needs Now is CSS3

The discussion around HTML 5 has been heating up recently, with people advocating to get it finalized and implemented sooner rather than later (and lamenting the ulterior motives of major browser vendors in lobbying for specs). I simply can’t get passionate about this fight, much as I’ve tried. While some of the things that HTML 5 offers will certainly be a boon for web developers, by and large the issues that it addresses (in terms of interactivity) are surmountable simply by using the excellent Javascript libraries we’ve all become dependent upon. The next version of the CSS specification, however, is an entirely different story.

I recently started a new project and as an experiment decided to play with using the non-final border-radius implementations available in Firefox and Safari. After using it for about 15 minutes, I decided that I would simply forgo rounded corners in the interface for Internet Explorer. After using it for three days, I am wondering why every designer and developer on the internet isn’t simultaneously demanding immediate forced adoption of CSS3.

Styling is Fun Again

Our interfaces and style tastes have grown much more complex as the web has grown up, but the tools we use to implement those styles haven’t been keeping up. It shouldn’t feel like a trip to the dentist just to get a box to have some rounded edges. It shouldn’t be a nightmare to try to use translucent pngs for overlays (admittedly this has nothing to do with CSS3 and everything to do with IE6, the browser that won’t die no matter how much we pray).

I can tell you that styling on the edge doesn’t just feel good, it feels amazing. I’m able to implement in a few seconds what I might otherwise spend three hours styling while polluting my markup with hack tags.

Rounded Corners: Nemesis of Designers Everywhere

There is no good way to make rounded corners. The javascript libraries are buggy, images are limited in practicality, and getting it just right in all browsers is downright painful and usually ends up with markup something like this (and a whole mess of CSS to go with):

<div class='rounded'>   <div class='tl'>     <div class='tr'>       <div class='bl'>         <div class='br'>           So much for semantics...         </div>       </div>     </div>   </div> </div>

In the CSS3 specification, the same effect is achievable like so:

.rounded { border-radius: 10px; }

But it’s not just a convenient way to shortcut the hacks to which we’ve all grown accustomed, it opens up entirely new possibilities for design that would simply not be worth the effort to hack without it.

Lead By Example

Let me explain what I mean by example. Form design has always been one of the trickiest parts of web design, what can we do with a little CSS 3 magic? Let’s say we have a simple form that takes a person’s name:

<form id='sample_form'>   <label for="name">First Name:</label>   <input type='text' name="name" id="name"/><br/>      <label for="name">Last Name:</label>   <input type='text' name="name" id="name"/><br/>      <button type="submit">Submit</button> </form>

Simple enough, this turns out looking something like this:

Now we can add some standard CSS to make it look a little more acceptable:

label {   display: block;   float: left;   width: 100px;   font-weight: bold;   padding: 4px 5px;   font-family: Verdana, sans-serif;   font-size: 12px;   margin-bottom: 5px;   clear: both;   text-align: right; }  input {   font-size: 12px;   margin-bottom: 5px; } button {   margin-left: 115px;   margin-top: 10px; }

And our result is a perfectly usable form:

But what if we use just a taste of what CSS3 has to offer? We can make a form that looks completely unique without using a single image:

label {   display: block;   float: left;   width: 100px;   padding: 4px 5px;   border: 2px solid #037;   background: #06a;   color: #fff;   font-family: Verdana, sans-serif;    font-size: 12px;   margin-bottom: 5px;   font-weight: bold;   clear: both;   text-align: right;   border-radius: 13px;   border-top-right-radius: 0px;   border-bottom-right-radius: 0px; }  input {   background: #fff;   border: 2px solid #8ac;   border-left: 0px;   padding: 5px 5px;   margin-top: 0;   margin-bottom: 5px;   margin-left: 0;   border-radius: 5px;   top-left-radius: 0px;   border-bottom-left-radius: 0px; }  button {   background: #080;   color: #fff;   border: 2px solid #060;   font-size: 12px;   font-weight: bold;   margin-left: 112px;   padding: 5px 10px;   border-radius: 13px; }

It’s a hefty chunk of code, but anyone experienced in writing CSS can knock something like that out in about five minutes. The result is well worth it:

This kind of styling opens up with the application of just a single new attribute from the CSS3 draft specifications. Designers have had to hack, cheat, and wrangle every semi-complex interface that has been developed in the last 5 years thanks to the limitations of CSS (and more specifically the limitations of Internet Explorer), but it doesn’t have to stay that way forever.

State of the Browser

The complete CSS3 spec is not coming to a browser near you any time soon (more accurately not all browsers), and that’s a real shame. It brings to the table powerful new tools that can really enable the kind of semantic markup that we all wish was possible with today’s browsers. Rounded corners are just the “tip of the iceberg”; once CSS3 sees widespread adoption, interface design will take a leap forward unlike any it has seen before.

In the meantime, keep an eye out on the WebKit Nightlies for cutting edge CSS implementations (just added: CSS Variables). Five years from now we’ll look at the troubles we used to have and laugh. Until then, a person can dream…

• Read more about The Importance of Aesthetics

The other day when Zoho People was announced I came to the realization that even though I had heard about Zoho in 20 different blog posts over the last year or so, I had never taken a moment to go check out what they were all about. With a full online office suite, it’s definitely something I’m interested in and could use. So why didn’t I take 5 minutes to explore further?

Their Logo. It had been attached to all of the posts about them, and when I see it I just instantly lose interest in the company and their products. This is not the logo of a company that wants to be taken seriously for a productivity suite, it’s the logo of some company that sells teddy bears online that you can customize…or something. It is such a stark disconnect from the target demographic that I really just can’t understand the thought process that went into it.

Now I may be shallow in writing off this company solely because I didn’t like the look of their logo (though I would argue that’s a perfectly reasonable thing to do), but the point is that it doesn’t matter at all what features, awesome back-end programming, and next-generation online collaboration Zoho offers. I never found out more about them because the image I was presented was not one that appealed to me.

The design of a company’s logo, its products, its website, everything, are not throwaway concerns. In a split-second, a person might look at your corporate website and decide “This company doesn’t look professional enough.” There is a critical period in the very first moments a potential customer sees your product that may well inform the rest of your relationship with that customer. Without an appealing aesthetic front, you will never make it to the meat of your pitch, because they have already written it off mentally.

This, I feel, was the largest gap between my college Computer Science education and the real world. I’ve always been a designer as well as a developer, but when there was absolutely no emphasis placed on the user experience or the aesthetics of the software that we were building for classes, I got frustrated. Not everyone has an eye for design, and that’s not a problem. But if a product is to be taken seriously, someone along the line has to take it and make it look good, because behind-the-scenes magic will always be just that: behind the scenes.