Converting static site mock-ups to code,
and solving problems when doing so

Online Reference: www.csszengarden.com/064

Evocative: Driving around the city shortly past dusk, with speakers crooning a John Coltrane sax melody, yellow lights blurring past the windows, rich blues of the sky overhead. Dave Shea set out to re-create the mood of a mellow summer evening in Night Drive.

A dark color palette sets the dim, warm tone. The dark orange used in the majority of text and imagery is balanced with brighter orange patches to keep the overall palette from appearing too brown. Both are complemented by subtle blue sprinkled throughout the text and photos to leave the color contrast purposely understated and tranquil, without appearing too monotone.

Photos were chosen for their color as well as their subject matter: While driving after sundown, you might expect to see blurred lights, glassy water, and a hazy blue skyline.

Visualizing Code

As Shea designed Night Drive in Adobe Photoshop, he paid little attention to how it would be coded. The visuals came first, so any implementation problems would have to be resolved later, as the code was built.

How does one take a flat mock-up and turn it into an interactive site? Various images must be saved as the design is divided into segments that will later be reassembled in CSS. There are no hard and fast rules about the process, and the key to satisfactory results is flexibility. Being aware of alternate methods ahead of time aids the decision-making process.

Choices

Consider the header of Night Drive-a series of joined boxes, overlaid with a beveled and shiny yellow badge (Figure 1).

Figure 1: Night Drive's header.

Two challenges are present: laying out the area with its mixed photos and lines, and then placing the badge on top using a transparent graphic. After some thinking, Shea arrived at two possible courses of action:

Slice the whole thing into one large image and save it as a very lightly compressed JPG to preserve the lines with a minimum amount of distortion, which would result in a large file size.
Slice the various graphical boxes into their own images, then somehow re-assemble by applying them to the various elements within #pageHeader and the #extraDivs at the bottom (placing the latter at the top using absolute positioning) (Figure 2).

Figure 2: The header sliced into individual boxes.

Shea ended up choosing the second method, with a twist of the first: Instead of slicing each box into its own image, he separated out the two photographs into their own JPG files (Figure 3). The "css Zen Garden" title text was saved as a GIF, and the entire boxy layout behind the other images became a single, highly compressed GIF. What could have been a messy jumble of code to keep the header together ended up being a clean mix of the possible layout methods, which use both the GIF and JPG file formats for their intended purpose.

Figure 3: Photos and text saved separately from the background.