For work, I was tasked with implementing a design portfolio mini web site our creative department designed and layed out in Photoshop. The web site is basically a simple popup slideshow, and consists of a few navigation elements for the user to click back and forth between design showcases for each client. The requirements didn’t call for any web based content management system, so I just built out the site as a simple static HTML web site. Updating the web site would require manually modifying files in a text editor and re-uploading via FTP. Here’s the final web site, if you want to get a preview. Click the more link below to read a description of how the site was built.

To start off, I first broke down the web site into 4 distinct abstract layers:

1. Content - What’s the message (need to showcase screenshots of websites we’ve designed for clients)
2. Layout - Where the message should appear (in a popup, screenshots on the left side, a short blurb on the right side, and navigation elements across the top)
3. Theme - How the message should appear (which colors, images, and fonts to use)
4. Interactive - What happens when the user interacts with the message (programmatic logic to move to the next showcase when a user clicks a button)

These 4 layers combined together produce the final result. When you break down a web site into these 4 layers, things becomes extremely easy to manage. This also allows you to easily isolate changes. For example, if you want a different layout, all you have to do is modify the layout layer, instead of spending hours redoing the entire site. These layers are represented by just 4 different files (technically 5): index.html, layout.css, theme.css, and portfolio.js + common.js (which is just a common library).

I knew right away that this portfolio would have to be updated on a somewhat regular basis, so I made sure that the content layer is as easy to update as possible with as little markup as possible. The content layer is represented by a simple HTML file, with each client showcase represented with a single DIV element, which also contains an H1 (heading for the client’s name), P (clients description), and a DL (definition list for screenshots). Adding another client showcase is as simple as adding a new DIV with the appropriate elements inside. Here is the result of the content layer by itself, and if you do a “view source” you’ll see that it’s just a simple HTML file.

For the layout layer, I use CSS to position the various elements onto the screen. For example, navigational elements are placed at the top, descriptive paragraphs are placed in the right, and screenshots are placed to the left. Since there can only be one client showcase visible at time, I “stacked” each showcase on top of each other. Ordinarily, this would create a huge mess of overlapping text and images, so I simply turned them all “off” and made them invisible. Making them visible is then handled in the interactive layer, which will be discussed later. Combined with the content layer, you can start to get a rough idea of how this site should look. For the purpose of this demonstration, I manually turned “on” the first client showcase. Here’s the CSS file used to layout the elements.

Next up is the theme layer, which very simply applies colours, textures, and various font properties to the site. Here’s what happens when you combine the content, layout, and theme layers together. Again, the first client showcase is turned on manually. Here’s the very simple CSS used.

If this web site was purely static with nothing to click, then the web site is essentially done. However, the requirements called for interactive elements which allows the user to navigate between different client showcases with next / previous buttons and with a selection dropdown widget. I won’t get into all the details of how exactly the JavaScript works (it’s actually not too bad), but the short version is that when the page is first loaded, the JavaScript scans through the content layer (the HTML file) and retrieves a list of all the client showcases into memory. It then populates the selection dropdown and navigates to the first showcase and keeps a pointer to the current showcase.

When the end user clicks a button to show the next client showcase, all the showcases are switched “off”, and then only the appropriate showcase is turned back “on”. Since I had stacked each showcase on top of each other in the previous layout layer, this very simple procedure works quite well. Any showcases that are off are not visible, and any showcases that are on, of which there can only be one, will be visible.

Voila! A simple client showcase portfolio. Here’s the final result of combining all 4 layers together.

Moral of the story? By breaking down a web page and separating out it’s core components into different layers, you can very easily create web pages that are easy and simple to maintain. Even people who are not too familiar with HTML can easily maintain and add new content to the design portfolio web site, since the maintainer doesn’t have to worry about messing up any layout, theme, or interactive code.