Ah, that feels comfortable. Like a whirlwind travel adventure to a new place you’ve seen in lots of pictures, but never experienced for yourself, then returning home and being able to slip back into your own comfortable clothes, and collapse in your own bed. There’s a familiarity here with the markup, style, and templates that feels good.
I’m sure Dave will write from his own perspective, but I thought I’d offer up some answers, information, and details about yesterday’s mischief.
First of all, credit for the original idea goes to Dave. Contrary to what some people guessed, the idea was actually hatched long before SxSW. Dave proposed the swap back in January, and I immediately thought it was brilliant. That night, we grabbed each other’s style sheets and images, and applied the new style wholesale to our own markup as a test. We spent about 30 minutes each, making minor markup tweaks to fix over-obvious imperfections. The results we shared with each other were impressive, but weren’t good enough given the rendering problems caused by differences in our underlying markup structure.
We hadn’t done anything more with the idea or the files by the time SxSW came around. We planned to sit down at some point in Austin and discuss the idea a little more, but among all the goings on, we never really had time. A few days before April 1st, Dave gave me a head start by creating Mezzoblue-styled header images containing the Stopdesign logo and name. I created a Stopdesign-like version of the Mezzoblue logo for him.
As I mentioned above, the results of a straight CSS/image swap were interesting, but not convincing enough. The outer structure of our pages, the hierarchy of our headings, the type and order of navigation, the methods each of us use were different enough that convincing design copies would have required quite a bit of CSS trickery to pull off. We each conceded independently that it was easier to make needed changes to the CSS and the HTML.
In hindsight, I wish we could have done the swap without touching any of the markup. Had we both been using a standardized template structure, the swap would have been much simpler. But the differences in our markup would have meant a lot more CSS work, without as much payoff. In creating the Mezzoblued version of Stopdesign, I was able to keep some of my own markup structure by making a few extra tweaks to Dave’s CSS. The interesting adjustments and other related details include:
- Article navigation. Mezzoblue’s header displays image-based links to Dave’s latest projects. Those links appear toward the beginning of the markup, immediately after the top-level navigation. I used that area for promotion of recent articles instead. Stopdesign’s template lists the most recent article toward the end of the markup, styled to appear in the right column. I didn’t want to include the article nav markup in two different places. Since Mezzoblue has a fixed header height, I was able to insert the additional articles immediately below the existing article teaser in the markup. Then, I used absolute positioning to place the list at the top of the page.
- Entry headers. The headers for each entry on Mezzoblue use different heading levels, and appear in a different order than Stopdesign’s entry headers. Mezzoblue presents the entry title first, using the
<h3>heading, and<h4>for its date. Stopdesign presents the date first, using the<h2>heading, and<h3>for the entry title. I wanted to keep the date as a higher level heading than the entry title, but still mirror Mezzoblue’s design, which places the date below the entry title. The use of a negative top margin applied to the h3 allowed me to swap the visual order, rendering the entry title (h3) above the date (h2), even though they exist in the opposite order within the markup. - Primary navigation. Mezzoblue’s primary navigation uses FIR to replace a text-based list with fixed-width/height images. To do this, each anchor requires a nested span, which I was already using for another purpose. The replacement also requires a unique class be applied to each list item, so the correct background image could be used for each link. This was one instance, in particular, where it was much easier to change my navigation markup to match Dave’s, rather than trying to mimic the same effect by only changing the CSS. I decided to drop Dave’s MOSe menus for the sake of simplicity.
- Movable Type changes. At first, we were just going to replace static versions of our home pages, making the swap very simple. As we were creating altered versions of the home page, I realized the initial effect would be lost on anyone who followed a link from a news reader or from another site, skipping our home pages, landing directly on the individual entry page (which we weren’t planning to change). We both gave in the night before, and decided to change the individual entry pages too. This required creating duplicate archive files in Movable Type, so that the entry and associated comments could also appear in the altered design. For yesterday only, my install of MT was publishing two different individual entry archive pages, both updated at the same time with every comment added. One was published under shortname.html, the other under shortname2.html. I used a temporary .htaccess redirect to point any request of change.html to change2.html. The home page was also created with a duplicate MT index template, set to publish to /index.html, so that comment counts and Recent Links could remain updated throughout the day. The original home page template was temporarily disabled. Reverting back to the real design was a simple matter of moving all the original templates back in place.
- Content mods. Although each home page presents similar content, I decided to make some adjustments in what was presented where, to keep the content of Stopdesign the same, and in the same place. Mezzoblue’s rotating recommended book module became the About Stopdesign module. I decided to drop the doubled-up columns in the right column because my content didn’t play that nice in those extremely narrow columns.
- Heading images. Mezzoblue also uses image replacement for all the headings in the right column. Fortunately, Dave provided me with the original source Photoshop files, so I could create all the heading images needed for Stopdesign’s right column. Each heading needed a unique ID so the style sheet could apply the correct image.
- Unused CSS rules caused unintended effects. Since I didn’t know for sure which portions of Dave’s CSS I needed to keep, I didn’t delete any of the original rules at first. For about an hour last night, I struggled with what seemed to be a weird bug in IE5/Mac on the entry page. The right column content was getting pushed to the bottom of where the main column content ended. I tried playing with widths and margins. I tried deleting content from the main column, thinking it might have been something new introduced on the entry page. The problem ended up being one little
clear:left;property that Dave had applied to the generic<label>element for his contact page. Deleting that rule finally solved the problem. - That lighthouse photo. The photo was a last-minute addition as I was writing the new post. I needed some type of imagery to back up the bull I wanted to write about inspiration for the design. I was scrolling through my iPhoto library when I came across that shot of the Brockton Point Lighthouse (which actually was taken during my visit to Vancouver last year; more ironic since Dave lives in Vancouver). The colors weren’t originally a perfect match. So yes, the photo underwent a little Photoshop magic so I could match the its hues to Dave’s palette more closely. The photo complemented the deadpan description of the new design direction, and added to the initial confusion.
I’m glad so many people liked what we were able to pulled off. Thanks for putting up with our sense of humor. It was a good idea, one which I think ended up being well executed. The best side effect was the disorientation of those who were familiar with both of our designs, including myself. You’d be humored to note that I had a difficult time remembering which site I was viewing while reading the comments throughout the day.
As I mentioned to Dave earlier tonight, it was an interesting challenge to fit my own content into someone else’s design and use their markup. It was an eye-opener to take a different approach and force myself to work in a different style. It was fun seeing Stopdesign in an entirely different layout. But I’m happy to be back. Thanks for the idea, Dave.
Update: Dave also posted his follow-up thoughts on yesterday’s swap, including details on the markup structure, imagery, and MT customization.