It’s exciting to work on a web site that you already actually read. When Slant Magazine came calling to implement a redesign of their ExpressionEngine-powered online magazine (thank you Rumsey Taylor for the recommendation!), your author was already a reader; I’d come across the site regularly because their movie reviews are often among the first listed at IMDb.
Images, (differently-sized) images, everywhere
Co-editor/owners Ed Gonzalez and Sal Cinquemani wanted to refresh the look of the site and, more importantly, produce a mobile-friendly version in order to maintain their search-engine ranking after the Google mobile-friendly update. They commissioned Erik Lund to do the redesign. One design characteristic I was pleased to see was larger images; given the nature of the site—reviews of movies, music, television and video games—there’s no shortage of great imagery to use. The design dictated that these images be displayed at various spots around the site at various aspect ratios; for instance, on a review’s actual page the hero image is large and widescreen, whereas on search results its thumbnail is a small square. Now, cropping and resizing standard-sized images to these more extreme dimensions can be done automatically (we invariably use Aaron Waldon’s CE Image add-on), but this often results in sub-optimal images, with heads and whatnot chopped off.
The solution: DevDemon’s Channel Images add-on, which allows for the creation not only of a defined set of image sizes and dimensions but also a manual override, with resizing and cropping right there within the EE cpanel on the entry’s publish/edit screen. This way the site editors only need to upload an entry’s master image once, rather than once for each required image size, and only do a manual crop when the automatic crop results in beheadings and other injuries. This all improves the visual excitement of the site: big images are perfectly cropped by the editor’s discerning eye and small images can zoom in on faces so that they too have an impact.
Intelligent caching
A second vital add-on was CE Cache, also by Aaron Waldon. Previously the site was cached using EE’s built-in caching, wherein flushing is merely time-based. CE Cache allows for the chunking up of the homepage into separate caches so that, for example, when a film review is added or edited, only the homepage’s Film section cache is flushed (because it may now be appearing here). And on a single-entry page, only the related entries area cache is flushed whenever any other entry is added or edited (again, because they may now be relevant for here). CE Cache enables the optimal balance between site performance for users and immediate updates for editors.
DRY restructuring
When inheriting a site there’s always one more task than when starting a new one: deciding what to keep and what to jettison. We decided to build the templates afresh, with the assumption that for specific features I’d copy and paste liberally from the existing templates. Also, since all the review sections are essentially the same, We decided in the spirit of DRY (Don’t Repeat Yourself) to merge things at both the display and the storage levels. For display, the various section templates were merged into a small handful of master templates; for storage, the various channel field groups were merged into a single Articles group. This did require rather a lot of database surgery—the contents of various fields had to be copied into the new corresponding consolidated Articles field—but it enabled more efficient development and ongoing maintenance.
Some aspects of the new design required new fields, such as the nice new look for listicle items sporting a circular dot to display the item number. The Slant editors had been hard-coding lists into the main body field, but the new design called for more details. So we converted these listicles into grid form—again, more database surgery and some heavy cutting and pasting action.
The homepage slideshow needed to work on both desktop and mobile, so I entrusted it to Flickity, my new go-to slideshow script, which handles both. No problem.
On this site, article titles vary according to where we are—there’s a long version, a short version, a split version with a title and subtitle, and a version for the homepage slideshow. In ExpressionEngine this was a perfect scenario for a “title-logic” snippet, which loads once per template load and can be applied anywhere throughout the site.
Some real-world constraints
Ben Johnson of Stratechery wrote persuasively that web publishers are essentially at the mercy of their advertising networks. We experienced this first-hand here. Erik had designed the desktop version with a width of 1200px, but late in the day we discovered that Slant’s ad network, Crave Media, still requires sites to be a maximum of 1000px in order to show lucrative page-skinning ads—the skins are a fixed width and get hidden by pages any wider than this. It took a bit of reworking but thanks to the site owners’ good taste we were able to adapt to the narrower size without losing the spirit of the design.
And as a more contemporary alternative to pagination, we had developed a click-triggered infinite scroll for both articles and index pages, which succeeded in both being more user-friendly and in displaying ads more prominently. But the automated metric used by Crave wasn’t set up to handle it, so we had to revert back to pagination.
Even so, the new Slant Magazine is I believe a pleasure to load, look at and read on both desktop and mobile.