Brian Kadar

I’m really proud of the latest site I worked on, Daffys.com. It’s bold and simple, but has a lot of interesting work under the hood. I thought I’d discuss some of the development process behind the site.

When creating a site with dynamic content, I always try to fully digest the designs before I start writing a line of code. I want to extract the rules and systems found in the design and convert them into code that can make the development process easier and more streamlined.

In the case of the Daffy's site, the composition was different for each section, but there was a common thread across all of them. The rules are simple, a group of rectangles are positioned relative to one another with a constant padding between them. Content would be added and removed, and each change would affect the visual composition of the site based on these rules.

I created a simple XML structure that defines a relationship between two objects by their anchor points and x/y spacing. Think of it as a non-linear linked chain. In the example XML below, rectangle B’s top-left corner is relative to the rectangle A’s bottom right corner. The offset node translates (x/y) the relative position.

The XML establishes the abstract relationships in the chain. By assigning an actual view (i.e., MovieClip) to each link in the chain, I could use the size data (concrete) in combination with the relationship data (abstract) to find the coordinates I needed to position the elements.

This linkage system is used on every single section of the site. In some cases, rectangles are shared across multiple systems, like when transitioning from the homepage to an interior section, the menu block is transferred from the homepage system to that of the incoming page.

Now when I want to add a new section, all I need to do is write an XML file. Form follows function.

Below is a very simple example of the linkage system in action. Roll over the rectangles and drag the corners to change their size and see the relationships. Click “Show/Hide XML” below to toggle the associated XML, which is color-coded to the rectangles in the example.

Show/Hide XML

Tweet This Post