Launched my sister Sarah Peterson’s photography portfolio site today. Since it’s a photography website, I put extremely little work into the design and focused on simple navigation and organization.

The horizontal accordion slider on the main page was achieved using a combination of view templates, jQuery, and hSlides. There is at least one horizontal accordion module out there now, but it comes with a number of dependencies that seemed like overkill for such a simple project and it didn’t feel stable.

Everything else about the site is relatively straightforward. All of the images are dynamically resized with the usual trio of imagecache, imageapi, and imagefield. I modified node templates so that instead of displaying images, the images are displayed as the backgrounds of divs. This is to prevent users from easily saving images and using them elsewhere without permission. Obviously there are many ways still to get the files, but this inconvenience seems good enough to thwart most casual users.

Today, I launched the new and long overdue Quiet Company website. I’ve worked with them a number of times in the past, but this project was significantly more ambitious.

The goals for the site were essentially threefold:

1. Replace MySpace’s now largely irrelevant calendar feature with a centralized location for shows,
2. Integrate with the band’s already strong social network presence,
3. Give fans a centralized space to communicate and share content.

I was able to take the basic structure of the site from a previous Drupal band site, Weather Maps. The basic calendar functionality desired was already there, they just wanted an alternate “poster” view of upcoming shows in addition to the traditional “calendar” view.

The social network integration module landscape in Drupal isn’t very well documented, but there are a couple modules that proved at least decent. The Twitter module was difficult to set up, but once configured, worked very well (the problem in configuration came in its poorly documented dependency on an outdated version of the oauth module). I also decided to forego default Drupal comments in favor of Facebook’s social plugins, which are implemented quite well by Facebook Social. My primary complaint here, though very minor, is that “like buttons” can be configured to appear on nodes in the “links” section, while the “comments” box cannot and must be parsed manually from the node body when using a custom node template.

The most challenging part of the site was user uploaded content. Essentially, each user, designated a “fan” (by default), is allowed to create content of the specific type “fan content” for each show which has already occurred. I wrote a small, custom module to handle all of the subtleties of the form handling and built several views to display all of the contents of those nodes on the respective show pages (as well as the user’s page).

Last Saturday, Austin band Quiet Company held its first “Twitter show.” As seen in the photos above, all throughout the evening, tweets with the hashtag #QCatND were being live streamed on a large screen to the side of the stage. They asked me to help put it together.

As it turns out, there are already a number of services which offer basic live Twitter wall functionality. Rather than spending a lot of time duplicating code, I decided the easiest approach would be to just modify the look of one of the existing services. Twitter Fall, though aesthetically a little atrocious, has the ideal feature set and also a handy presentation mode. I wrote a quick and simple Chrome extension to take care of small issues like color, size, overflow, etc.

More interesting than the technical bits and pieces of the show though, was the tweet culture that unfolded. I’ve seen similar projections at other shows, but they tend to be completely anonymous, less conversational, and exclusive to the concertgoers themselves. This wall had participation from people as far away as Wales; anyone anywhere could follow along. As predicted, it turned very obscene very quickly. Still, by all accounts, it was an incredibly fun, interactive experience (I even had fun just reading the Tweets as the show unfolded).

There are a few venues in Denver where something similar could be a lot of fun, but I think the success of this event had a lot to do with Quiet Company’s large Twitter following and great use of the medium. As it stands, I’m not certain any bands in Denver have the same social media pull, and I’m not even sure there is enough crossover between Denver concertgoers and Twitter users in the first place.

Today, we launched Letters by Wordsworth, which is something of a combination blog/portfolio site for Cecilia Harris, an artist and calligrapher.

Another design by Kinsey Hamilton, themed and developed with a Drupal backend. While implementing this site was straightforward, I’m satisfied with a couple of aspects: namely, the borders around the landing page images, and how successful the fluid layout came to be.

While the borders probably could have been created using a fairly basic set of CSS3 rules, I recognize that its implementation is not yet standardized or widely adopted. We opted instead to make the whole border an overlay with a transparent center. Each image consists of three elements within a container div, whose position is set to relative, so that absolutely positioned elements within it are positioned absolutely relative to it. The three inner elements are:

• An anchor, which is set to display as a block, given a fixed width and height, and an absolute position so its z-index can be set high enough to display above the entire border structure,
• The border layer itself, which is just an empty div whose background is the border image, its width and height are fixed, and its position set to absolute so that it is positioned in the same space as the anchor and so that it can be placed in between the anchor and the image,
• An image, which is also positioned absolutely both to fit it within the border frame, and also so that its z-index can be set below that of the border and anchor layers.

<div style="position:relative;">
  <a href="" style="display:block; position:absolute; top:0px; left:0px; width:[val]px; height:[val]px; z-index:1;"></a>
  <div style="background: url(''); position:absolute; top:0px; left:0pz; width:[val]px; height:[val]px;z-index:0;"></div>
  <img src="" style="position:absolute; top:[offset]px; left:[offset]px; z-index:-1;" />
</div>

The fluid layout shines most on the same landing page. The obvious idea is to set each image block to float:left;, but this doesn’t allow the entire inner section to be centered on the page. Instead, each block must be set to display:inline-block;, which has the effect of giving each div block attributes, but positioned inline. The div containing the entire set of blocks must be set to text-align:center;. The problem with this is that if the last row has fewer blocks than there are columns, the grid is no longer maintained (because all content is centered uniformly in the container). The solution is to generate a number of empty “dummy” blocks (as many as the maximum number of possible columns) that have equal width to the grid blocks. Their height should be set to 0, however, because unneeded dummy blocks will flow below the grid; having an equal height to the grid blocks would create unnecessary blank space at the bottom of the page (equal to the number of extra dummy blocks divided by the number of columns possible in that resolution).