At the Torah Montessori Nursery here in Brighton & Hove (well, Hove actually — the part of town where most Jewish families 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 pro-bono 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.
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 nursery cliche of childish lettering. 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. Needs revisiting with some recursion for the adjustments.)
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 — (Burns himself says of the effect: "I don’t want to be pejorative about it. It does what it’s supposed to do. I have saved millions of bar mitzvahs and weddings and vacations. But it’s a very superficial version of a very honorable attempt on my part to will old photographs alive.”) — yet after capping it all with a delightful musical number of a visiting parent's violin recital from Vivaldi's Four Seasons, 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. 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. Update 2018 Aug 5: Done!
Other pages
The 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, once moved to its own dedicated page its layout was hampered by the masthead. 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 the Sentinel font!). 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 germinates the notion for the site owner 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. Update 2018 Sep 27: Done!
The site has won praise from stakeholders. Time will tell whether it fulfills its main task: bringing more prospective parents to visit the nursery.
Responsivizing (added 2018 Sep 27)
Well, it's a few months later, and making the site responsive to accommodate small mobile screens is now done. As is often the case, the most difficult element to make responsive was the header, as it's a wide design; the body is easy as it's a single column even on the desktop, and the footer is typically simple, with some boilerplate text that can be easily rearranged.
Responsivizing the header was easier this time, however, by dint of flexbox, the new(ish) CSS directive. Items within a flexbox have an order directive to arrange them from within CSS. This is a huge help. Previously I appended, prepended, inserted, and removed elements using a series of simple JavaScript functions called whenever the screen width changes. With flexbox, elements are rearranged using a method deeper within the browser tech stack, which is much more efficient and robust and feels more natural.
The responsivizing challenge on this site's header was its menu bar across the top of the screen. We could have wrapped the bar to fit, keeping it visible at the top of the page, but I chose instead to hide it behind a new mobile-only component, a menu reveal. While perhaps an imperfect solution, losing the visible menu until requested does emphasize the phone number up top, which is surely appropriate for phone viewing.
When requested, the menu now appears vertically rather than horizontally, and offset from the screen edge to be clearly floating above the goings-on. The sub-menus are unfortunately currently not displayed as circles, like on the desktop, and probably should be (probably when I revisit the circle-forming script and improve it with a bit of recursion).
The mobile version has turned out to feel at least as exciting as the desktop, despite its relatively tiny dimensions. I believe this is due to the detail of the components designed for the generous desktop—on mobile they are a concentration of riches.