Lapham’s Quarterly

A few dev notes on the recently-launched redesign of Lapham’s Quarterly:

  • The site was designed and built by Bluecadet (with the exception of the online store, for which we only did the design templates). Design was led by Theresa Decker. Will Vedder and Greg Sarault handled most of the development. Kevin Zakszewski did a lot of early responsive prototyping during the wireframe and design phases. Rebecca Smith handled both content strategy and project management (!). I did technical strategy and a few tricky Drupal/JavaScript pieces.
  • It’s a Drupal site. Drupal can be a sprawling beast sometimes, but it was a good fit for this project because of the complex relationships between issues, contributors, and individual articles.
  • We built and deployed the site on Pantheon, which allowed us to open up the CMS to content authors in one tier while we developed/tested on the other tiers.
  • A lot of Lapham’s Quarterly’s content requirements involved some form of what we internally dubbed “sophisticated whimsy” – Essays and Voices in Time on the issue page had to be pulled randomly, for instance. We ended up doing a few compound views to achieve complex layouts.
  • Artwork and quotes that appear on Essays and Voices in Time are not directly related to the piece itself (carrying over a hallmark of the print quarterly). For the website, however, Lapham’s Quarterly wanted the artwork and quotes to also be random, lending the piece a slightly different look each time it was loaded. Content authors choose the point at which they want to insert an instance of one of three types of content: a column-width image, a widescreen image, or a quote. These generate markup patterns that then replaced with a random instance of artwork, pulled from the available options for that issue (each issue has a bucket of artwork/quotes).
  • Each issue that Lapham’s Quarterly publishes has a signature color. In the website’s design system this translates to a set of four hex values to cover different states: default, rollover, emphasis, etc. We wouldn’t be able to treat those colors as Sass variables, since we didn’t want to have to add to the stylesheet each time Lapham’s Quarterly published a new issue. So they are injected at the page template level, based on the values set by content authors for that issue. The styles … cascade.
  • Lapham’s Quarterly needed a way to designate an issue as “Coming Soon”. This meant that any content associated with that issue would not be displayed/linked from the archive pages. We had to write a few hook functions to filter taxonomies prior to display.
  • Handling BC dates turned into more of an interesting development problem than we anticipated, because we wanted to keep the actual date value different from the display, to make sorting content by date easier. We ended up writing a small custom module to transform BC dates for display.
  • There was a lot of iterative design and development for this project. One example is the slide-out tab allows you to get back to the main issue page. That was originally visible at all times, but as we started testing content we realized that it obscured the widescreen images. So we turned it into a little pull-tab.
  • There’s no single workflow technique that emerged from this project, just a general feeling that team conversations around a whiteboard are rarely a waste of time. In most cases we arrived at a faster, more bulletproof solution than if we had sealed ourselves off to work in isolation.

We’re still fine-tuning thing under the hood, but I’m very happy with how the project turned out.

Mavericks and Apache/MySQL

I finally upgraded my office machine to OS X Mavericks, and as a result had to reconfigure both Apache and MySQL.

This post covers most of the relevant info for dealing with Apache: remapping your default web directory, enabling PHP. This post deals with setting index.php as a default document if a directory is requested.

MySQL was a bit trickier. I had installed it using Homebrew, so I had to uninstall MySQL, upgrade Homebrew, and then reinstall MySQL.

One random note: Launchbar’s ClipMerge feature stopped working, and it turns out that was because Mavericks resets the Accessibility options. I had to go to System Preferences > Security & Privacy > Accessibility and allow Launchbar to control my computer.

Using Adobe Edge Inspect with Local Virtual Hosts

At Bluecadet we like to review responsive prototypes and site builds using real devices. One of the tools we use is Adobe Edge Inspect, and it’s always worked well for previewing sites on public URLs. We happen to do a lot of development on our local machines, however, and we’ve never been able to load those via Edge Inspect. Despite the cryptic “Localhost Support” in the product bullet points, we couldn’t find much documentation out there on how to actually do that.

This blog post is old (it still refers to Edge Inspect as “Shadow”) but proved to be extremely helpful. The missing piece turned out to be xip.io, which allows you to map an IP address to a domain name. That domain name gets added as a ServerAlias entry in my Apache virtual hosts config:

    <VirtualHost *:80>
        DocumentRoot "/Users/bcideveloper/Sites/localproject"
        ServerName localproject.local
        ServerAlias localproject.*.xip.io
    </VirtualHost>

So now when I browse using Chrome to the xip.io url the connected devices can load the site running off my local server, provided all the devices are connected to the same local network.