Tuesday, May 22nd, 2018

Brighton, England

Torah Torah Torah!

 

At the Torah Montessori Nursery here in Brighton & Hove (well, Hove actually — the part of town where most Jewish familes reside), Manager & Head Teacher Penina Efune sought to raise the nursery’s profile in order to grow attendance.

Marketing consultant Gary Weston advised Penina to form a digital team, its first task being to improve the nursery’s web site. Despite my doubts that a site alone can today raise an enterprise’s profile, what with the dominance of social media and sector-based platforms, I agreed to redesign it. My kids attend the nursery part-time and I thought to do my bit.

  • Client
    Torah Montessori Nursery
    Brighton & Hove, United Kingdom
  • Services
    Web Design

Homepage at the new site for the Torah Montessori Nursery in Brighton & Hove, England

 

The main marketing issue was whether welcoming non-Jewish children is sufficient to attract them. Perhaps the nursery’s religious/ethnic roots should be downplayed? Apparently one nearby Christian private school successfully shed its religious image and grew attendance only by being ruthless; a very qualified headmaster was not hired because he was also a reverend. And people may be especially unlikely to send their children to a Jewish institution given the fear of terror attacks. However unlikely here in Brighton, why take the risk?

But as a Lubavitcher it’s in Penina’s lifeblood to be encouraging Jewish practice among Jews. And the children’s days at TMN do after all involve Judaism and prospective parents must know that and be happy about it.

Tagline

After bandying about a number of taglines, Penina settled on one from me: “Tomorrow matters now”. It suggests that parents should not consider nursery mainly a convenience for themselves but rather a vital stage in their children’s development. It also serves to remind Jewish families that the future of their local minority community depends on kids imbibing it from a young age.

We were excited that the tagline’s acronym TMN is the same as the nursery’s, so paired the corresponding words in the masthead.

Colors

The color palette was easy: we used the seven colors from the logo, a great design by one of Penina’s children depicting a cuddly blue Torah surrounded by multi-colored geometric shapes. These six stylized children suggest diversity and also form in marvellous negative space a curved Magen David (Star of David). I did do away with the nursery name encircling the logo; enjoyable 1970s throwback notwithstanding, the sideways lettering was hard to read and moreover shrank the great graphic within.

In addition to the logo colors, OFSTED’s purple serves as background for the menu in order to integrate its badge within the menu area and simplify the header.

The colors are further expressed by patterned backgrounds around the site. These are SVG graphics adapted from Steve Schoger’s invaluable Heropatterns collection.

Typography

Bright colors and polka-dots bringing good cheer, typography was liberated from the cliche of nursery website childish lettering. Instead, Hoefler & Co’s classical Sentinel handles the titling and makes the case that tomorrow matters now. We soon noticed that Sentinel is the title typeface for Brighton & Hove Council itself.

For the contrasting body text, Whitney somehow evoked to me the gracious wooden Montessori materials themselves. Only later did we realize it’s also the Council’s body typeface!

Similarly, I spotted the site’s faint grey rainbow pattern background adorning a Brighton bus! These uncanny visual tie-ins with local municipal institutions were somehow reassuring.

A third Hoefler typeface, Archer, renders people’s names; it seems especially jolly alongside Sentinel.

Everybody loves bubbles

Although the site began conceptually as a one-page scrolling affair, Penina worried that her target audience would require the reassurance of a menu. Relenting, I attempted to educe from a site menu something novel, arriving at a series of thought-bubbles. A disc separates each top-level item; then, when an item is hovered, an interim disc appears to the left-hand disc’s bottom-right; and to the bottom-right of that is the pulldown, not in the typical shape of a rectangle but as a circle. Hopefully these thought-bubbles tie in with the multi-colored circles in the logo.

(Centering a dynamically-generated list of varyingly-lengthed items within a circle was tougher than I expected; it’s achieved with Javascript, probably rather clunkily. I thought Keeping aspect-ratio with HTML and no padding tricks by Noam Rosenthal might help but couldn’t make it work.)

Welcome video

Completing the homepage’s welcome area is the introductory video. In researching competing nurseries’ websites we decided we liked these; a video needn’t be sleek nor even professional to serve as a strong and helpful introduction — just competent and heartfelt.

Penina had many photos languishing in various drives and devices that she’d been wanting to put to use. I introduced her to the Ken Burns Effect, which gives some motion to stills within video, and she was off! She created a collection of images that introduced the nursery, wrote a text to accompany them, recorded her narration, sourced some background music, and handed it all over to me to mix together.

I’m no videographer, and the panning and zooming is merely an automatic effect rather than compositions in motion, but after capping it all with a musical number — a delightful violin recital from Vivaldi’s Four Seasons by a visiting parent — the video serves as rather a nice introduction.

Work of the Week

The second and final feature on the homepage is Work of the Week. Hanging in the nursery hallway is a square noticeboard that Penina populates with drawings and artworks made by the kids and with post-it notes announcing their good deeds. It seemed an obvious candidate for displaying on the web site, demonstrating that the kids’ undertakings are taken seriously and keeping the website fresh with recent material.

So the digitized version of Work of the Week displays a photo of the noticeboard, individual works magnifying when hovered over (using the ElevateZoom jQuery plugin by Elevate Web Design), and an explanatory list of the works to the left and of the mitzvahs to the right. It’s all set off by a bright bubbly background in the site’s yellow and orange colors.

I like that we’re leveraging content already being created offline anyway that would otherwise be lost (not to mention craftily harnessing the little inmates to do the heavy lifting), and that we’re emphasizing both the Montessori (works) and Jewish (mitzvot) characters of the nursery.

One typographical detail is a tiny outline around the text of the sub-headers so that the polka-dots of the background don’t quite touch the letters. Also, the noticeboard image’s height can vary to accommodate the table below the noticeboard when it’s displaying items such as paper models.

After sufficient Work of the Week entries have been entered in the content management system we’ll probably convert this area into a slideshow so that site visitors can swipe back and forth in time.

Other pages

Tthe rest of the site is article-style pages handled by a standard template with an optional custom feature. Among the features are brightly-colored tables such as for Meals, Fees and the Weekly Timetable; a mason-style layout for Parents’ Stories; a Google Map for the Location page; and a list of the nursery’s Policies.

One exception is the Staff page. Originally intended to appear lower down the homepage, its layout was hampered by the masthead once moved to its own dedicated page. So on this page the masthead shrinks, its title and tagline appearing to the right of the logo rather than below.

As originally conceived, the bottom of the one-page scroller was to be a rather extensive contact form, complete with optional sliders to set values and let people express their preferences within them when choosing a nursery (any resemblance to the contact form at Studio.zeldman is purely intentional — and yes that site also uses Sentinel!). But Penina believed that adding fields to a contact form is merely complicating matters and would discourage rather than encourage people to make contact, so we abandoned the idea of sliders (for now!) and minimized the number of form fields.

I did though ensure that submitting the contact form creates an actual entry in the content management system, specifically in the Enquiries content channel, which shares all its characteristics with the Children channel so that an Enquiries entry can be easily switched over to a Children entry if the prospective child does join the nursery. This is kind of trivial to be sure, but does introduce to the site owner the notion that joining the nursery is a single process.

Software

As usual when made with Engaging, the site runs on EllisLab’s ExpressionEngine CMS. To reduce pageload speeds we’re using Causing Effect’s CE Cache add-on; Mike Tuupola’s LazyLoad; and — for the first time — Barba.js, based on PJAX, which we have used, but this feels even faster — basically instant — because it actually often is: hover over a link for 2 seconds and it pre-loads the linked page in the background!

Adobe’s Balance Text is our usual leg-up for nice typography; and Headroom.js by Nick Williams enables the header to slide down into view upon reverse scrolling (a usability idea taken from how Safari handles its chrome on iOS).

And as usual, though perhaps this will change, we approached the site “mobile first second”, which I must admit seems to resolve into merely “mobile second”. I’m finding this approach increasingly burdensome, in that adapting an original desktop design for mobile is difficult, almost like doing another site. We’ll leave optimizing the site for small screens for another phase, though of course I acknowledge its huge importance.

The site has won praise from stakeholders. Time will tell whether it fulfills its main task: bringing more prospective parents to visit the nursery.