iPhone 12 Pro Cinematic 4K: New York by Andy To. Make sure to watch at full resolution.
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.
Life Center, The
, United Kingdom
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.
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.
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:
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:
column-break-inside: avoid !important;
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
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.