Wednesday, February 25th, 2015 (updated 7 Jun ’16)

adam@engaging.net | Brighton, England

Breathing new life into The Life Centre web site

 

The Life Centre needed a brand refresh, explained principal Elizabeth Stanley, because although they were the first yoga center in London and are venerable and well-known in the field, other similar establishments have sprung up in recent years and the Islington-based center needed to be perceived as contemporary in order to remain attractive and competitive.

For the rebranding they selected Mind Design, led by the very personable Holger Jacobs. Located in Shoreditch some two miles east of The Life Centre, Mind works in a variety of media, from packaging to print. Implementing the web site redesign that they mocked up was assigned to Engaging.

thelifecenter.com homepage

 

h2. Random logo phrases

Mind’s big idea for the logo was to eschew a graphic completely and express the brand using black and red typography for the center’s name, followed by a phrase; the logo then appears as a sentence followed by an m-dash and the tagline ”yoga for life.” So, for example: “The Life Centre brings you home to you — yoga for life.” Personally I find this unique and effective—you can see its physical manifestation on the sign outside the studio in the Google Maps Street View, with the phrase “is your retreat for self-discovery”.

But on the website the selected webfont’s m-dash wasn’t long enough for Mind’s liking—and getting this right was important because if there’s any graphic element in the branding, it’s this horizontal line. We tried different fonts at different weights and none matched. Eventually we had to resort to absolute positioning the m-dash as an image.

On the web site the logo phrase changes at random on each pageload. Moreover the phrases are categorized based on site section; for pages within the Teachers section, for example, there’s a pool of teacher-related phrases, such as “is home to world-class teachers and therapists” and “has been mentoring the UK’s leading teachers for 20 years”. Like almost all content on the site, these logo phrases have their own content channel in the content management system, ExpressionEngine, enabling staffers to edit and re-categorize them and add new ones at will.

Design patterns

Throughout the site, content is displayed in only two ways: either fully as a wide listing or as a preview in a narrow block. The homepage is composed entirely of these narrow blocks, as is the sidebar. These two design patterns enabled sitewide modularity, which is helpful both for the user by providing consistency and for the developer by allowing for reusability.

Vertical balancing

Unlike on pixel-perfect Photoshop mockups, once a site is displaying actual content, various elements end up being longer or shorter than on the mockup, resulting in pages that look out of whack. On this site the contents of the sidebar are independent of those of the main display, and sometimes could be significantly longer, leaving a big gap in the main display.

We solved this with some jQuery that measures the respective heights of the main area and sidebar and removes items from the bottom of the page’s sidebar until it’s shorter than the main area.

Handling 2-column flow

In print, content flowing across columns is routine. On the web however it is unusual, problematic to implement in CSS, and arguably also to use because, depending on screen size, the reader, after scrolling down, must scroll back up again to resume. Nonetheless, we did it. Here’s how:

In CSS:

.cols { column-count: 2; column-gap: 1em; } .cols p { display: table; } .cols h2, .cols h3, .cols p, .cols ul { column-break-inside: avoid; }

Even with these CSS methods however, widow control just doesn’t work well. We again solved this with jQuery, wrapping a div around any headers and their subsequent paragraphs:

$(".cols h3, .cols h2").each(function() { $(this).add( $(this).next() ).wrapAll('<div class="keep-together"></div>'); });

We then styled the resulting div with:

.cols .keep-together { column-break-inside: avoid !important; }

MindBody API

Like many other yoga studios, The Life Centre relies on Mindbody (no connection to Mind Design!) to power its class schedule, bookings, payments, and other back-office functionality. But to get any MindBody content onto a web site, almost all sites go through a very narrow tunnel called Healcode, a company that makes client-side javascript widgets to display Mindbody schedules, teachers and forms. These widgets are slow to load, requiring a call to Healcode’s servers for each pageload.

As well as being slow, the Healcode schedule widget was insufficiently flexible to display the schedule as Mind Design had mocked it up; to achieve this we needed to retrieve and serve this information server-side. Mindbody has a nice API and we wrote and released an ExpressionEngine add-on eeMindBody to pull in that data. The resulting weekly schedule is cached for 10 minutes.

Caching for performance

This caching is one aspect of an invisible but crucial design element: performance. To avoid multiple calls to the MySQL database to generate things dynamically, which can slow down the site when traffic increases, anything that can be cached is. In particular, the modular design patterns enable chunked caching, so that only the changed parts of each page need be generated dynamically—the rest of it can be served from static files. For these more complex caching rules we relied once again on Aaron Waldon’s CE Cache ExpressionEngine add-on.

Client-side processing to avoid flushing caches

To minimize cache flushing and the resulting performance degradation, a number of site features are handled client-side. All relevant logo phrases are loaded, for example, but the sole one that appears is randomly selected client-side using javascript. Similarly, all the dozens of pages featuring various permutations of the MindBody-based schedule—the main schedule page, both centres, and all teachers—grab the same cached file and filter it client-side in various ways with some javascript; a teacher’s page shows only those classes that he or she is teaching; a location page displays only classes being held there, etc. This helps with performance because the API call to Mindbody can be slow, usually being the bottleneck for the pageload; with dozens of teachers on staff, it would have meant calling the API for each one. This way the API call is never made more frequently than once every 10 minutes.

The resulting web site, thelifecentre.com, complements The Life Centre’s new branding and provides comprehensive information on all their offerings. Although they chose not to produce a mobile version nor a responsive site for now, the zippy performance makes the desktop experience pleasant enough even on a mobile device.