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.