When starting the WE Portal project we had no idea that it would become a beautifully blossoming beast with a deep variety of function and layout. With this came a need for many different buttons, calls to action, entry fields, touts, icons, and fonts at varying sizes. Up until recently Jeff and I (designers) would come up with these elements as we needed them. If we wanted a drop down we would make one; if we needed a new tout then we would make it — so on and so on. There is continuity throughout the site but by working this way it was still possible to have unique elements that the the front end team (James, Gorman, Jordan, Dan and George) would have to make every time they put these designs into production.

Until now.

We now have a marvelous document (thanks to Dan) that is a live functioning style guide. All the elements of the site and their on/off states, fonts (head, sub-head and body), size and color all live within this PSD to make everyone’s life easier. The designers no longer have to redraw elements. The front end team doesn’t have to cut out images and recut out images and recut out images.

As an example, let’s take this button (below) and walk through how this is applied to our work flow.

James (front end developer) took this button and made a sprite (below), a flat image that combines multiple segments to render a dynamic expandable shape by the browser.

The button is cropped to a predefined length that’s written into the div set around the button.

The sprite is then referenced again for the the button’s end cap and is aligned to where the button was cropped.

This results in a seamless button that can dynamically change length according to the text inside it.

If a 175 px–wide button says “DONATE TODAY”, but needs to be changed to “DONATE NOW”, we no longer design a new button — we simply go into the code and edit the text to say “DONATE NOW” and the browser automatically adjusts the button to 160 px wide, accommodating the new text.

Typically, with this many variations of a button throughout the site it would require lots of server calls for each of these images. Now this sprite is loaded ONCE and used again and again each time that kind of button is needed. This technique is used for all of the expandable elements on the site, drastically reducing load time and giving a clean, fast way to update.

A technique that I really enjoy using for rounding the corners of block-level elements is border-radius. This technique is used throughout the We The Media website (as you may have noticed). Implementing border-radius isn’t too hard, though the code is a bit heavy as different browsers require specific CSS (i.e. -moz- for Firefox and -webkit- for Safari/Chrome). I don’t want to get into the actual code for this, but good examples can be found at The Art of Web and The W3C.

I find this little bit of code very handy for easily adding rounded corners. In the past, I used to add extra divs to make rounded cornered boxes extendible in the code. The major drawback is that it doesn’t work in Internet Explorer browsers (big surprise there), but I am willing to have it gracefully degrade.

Ok, so this doesn’t work in IE, but the good folks at HTMLremix have been working on a solution for this problem. They have developed the “Curved-Corner” project that just requires you to add an .htc file and link it in the CSS (as far as I can tell), but I have not been having much luck (though I haven’t tried very hard yet). The .htc file is available at Google Code. If you have gotten this to work, feel free to drop a comment and share your knowledge. For now, I am not too worried about this working on IE (at least for this site).

According to CSS3.info, Microsoft does say that they will be supporting CSS3 in their upcoming Internet Explorer 9 browser. Let’s all hope, but for now we have plenty of other good browsers to use that support this cool attribute.

Todd Q measuring wood things

We launched the first WTM site in November of 2007, the night before we had a meeting with the fine founders of Odopod. We had to show them something to prove our legitimacy. Odopod threw us a quick Nike gig and the site did its job. Then it really didn’t change much after that. WTM however, did.

We’ve officially gone official; office, employees, clients, and project managers. Oh yes, AND creatives – but we always had that. Our old site reflected the ideals of a network of creatives. While the soul of that WTM still exists, the new WTM is no longer a loose band of merrymakers – but a tight one. We landed new projects; big ones. Projects that needed military-like precision. In essence, we had to grow up. I have no qualms, we’ve been extremely fortunate.

I’d like to talk more about the process in which this site evolved to it’s current state and how the office was built, but I’ll leave that post to Jeff and Todd, respectively. With the site I will say we took our sweet ass time and got it right. After all, that’s what it takes to do great work, and if anything we do great work.