After seeing the web site that we made for Torah Montessori Nursery in Hove, England, where she was working at the time, Montessori teacher Roberta Frosolini reached out to Engaging to create an online resource for the modern Montessori nursery — today’s Casa dei Bambini, to use Maria Montessori’s own term.

In Montessori education, activities are presented to and undertaken by children individually; Roberta pours a lot of energy into developing such activities, aiming to stay true to Montessori goals and values while extending the repertoire beyond those originally conceived by Maria Montessori herself. Roberta sought a showcase for those activities that she and others develop. She also wanted a platform for articles on Montessori-related issues. Hosting such a community would meet Roberta’s third goal: to raise her profile in the global Montessori community. We reasoned that if and when the site grew we could perhaps add more features, such as a jobs board and a listing of professionals.

So we arrived pretty quickly at what should constitute the site. By focusing not on Roberta herself but on Montessori activities in general we would follow Benjamin Franklin’s advice as he recounted establishing America’s public libraries: stay in the background and don’t hog the credit; time will eventually out the boon’s true author.

Scheming for colors

Having coalesced on the project’s direction and scope, we then came to terms over project pricing, and the next step was branding. What sort of look and feel was Roberta seeking? She came with praise and example paintings for autumnal colors; as a Frank Lloyd Wright devotee I was happy to pursue this direction — Mr Wright invariably went for such a muted yet verdant atmosphere. Ultimately we came to a more cheery yet still earthy palette (names by Coolors):

• Yale Blue: #094d92
• Chinese Red: #a73820
• Smokey Topaz: #983b4c
• Copper Red: #c9774f
• Brown Sugar: #b46a46
• Dark Blue Gray: #6761a8
• Wild Blue Yonder: #aca8cf
• Fire Tip: #fdcf58

This scheme reminded me of Wright’s Samara House, where the client Catherine Christian wanted brighter colors and the great architect was persuaded to hand over color work to his wife Olgivanna.

How do you name a site about Maria?

Now for a name. The first serious candidate was “Montessori Days”, the word “Days” being short, bright and straightforward in contrast to the lengthy “Montessori” itself. But due to echoes of the phrase “school days”, which at first seemed a benefit, this name felt too nostalgic and backwards-looking.

Next, “Montessori Mornings” kept the freshness and lost the nostalgic overtones and had the benefit of alliteration, but seemed too much a mouthful, and why mornings anyway and not afternoons? We went singular for a while with “Montessori Morning”, which seemed more like a publication’s name, a newspaper, which we quite liked.

Meanwhile, trying various typefaces, Hoefler & Co’s Cyclone took hold as soon as we saw it rendering the word “Montessori”. Hoefler describes Cyclone as either “edgy or earnest”.

Interestingly, deciding on Cyclone may have helped us find the name itself. “Via Montessori” is Italian, just like Roberta and Maria Montessori herself; it’s extremely short; and it echoes the most famous educational brand ever, namely Sesame Street. We half-heartedly tried a few variations on the street-name idea — “Montessori Garden”, “Montessori Square”, “Montessori Circle”, “Montessori Lane”, “Montessori Road”, all of which added other connotations besides, such as botany or geometry; and also “Montessori Post” and “Montessori Space” — but none seemed better than “Via Montessori”.

Various types of typography

The choice of typeface for “Via” came down to either a classical uppercase serif to echo a Roman street-sign slab, or an exaggeratedly heavy playful serif. Other attractive options rendered the three uppercase letters “V”, “I” and “A” gorgeously thin and geometric, but seemed more appropriate for a fashion label. We went with the playful option: Hoefler’s Whitney at its heaviest.

Type set, we sculpted it into a Western USA-style street sign for the logo, echoing Sesame Street but less ornate. Hence the final color in the palette being more primary than the others: Office Green: #007f00.

Finally, for a contrasting serif to use within Whitney-faced body texts — such as to display the names of works cited — we went with Sentinel, also by Hoefler.

All decked out

On the homepage, links to activities are presented as cards set diagonally, representing the Montessori pedagogical concept of children simply picking whichever activity they fancy. To reinforce the card notion, as well as to add some delight, activity cards brighten and rotate when hovered. In addition, the blurb texts within both activity and article previews are hidden unless hovered in order to both reduce cognitive load and emphasize the hovered item.

Harking back to the old days of patterned backgrounds on the web, and mindful of the seminal 1856 reference work The Grammar of Ornament by Owen Jones (as referred by Mr Wright), Via Montessori — like all recent Engaging sites — gains character from a performant and flexible SVG background. Appearing with subtle variations throughout the site, it’s an Aztec-inspired pattern by Steve Schoger at Hero Patterns.

While editing the activities, which comprise the heart of the site, we saw they require an organizing principle: the learning areas into which a Montessori nursery itself is divided. We massaged Roberta’s college notes into Learning Area primers, each listing its related activities.

In an attempt to de-label and de-clutter the site, it sports no functional menu, only a topical one, namely these learning areas. As such, for the template displaying learning areas themselves we thought to avoid repeating the title, which already appears on the menu; instead, we enlarged and slightly grayed-out the currently-selected menu item. On mobile the size change was awkward so instead the color difference is further emphasized. Omitting the title led to bumping up the blurb’s font size to serve visually as a stand-in title. Avoiding any repetition makes for an elegant Learning Area screen.

Articles do however need their titles. To visually balance these we added a dropcap to the body text on the Articles template, echoing the very bold title. Further down the screen a graduated background color subtly lets the reader know when they’re approaching the article’s end.

For individual activities themselves, the template follows through on the card theme introduced in their listing. Within the mock card, the layout is like that of a recipe.

The fourth and final template is for a profile page of an educator. This screen borrows its background from the primary green used in the logo, reversing the text to white.

For readability, text blocks in all these templates have a maximum width at all screen sizes: 44rem, that is, about 60 characters, or 12–13 words.

For usability, I mentioned that we minimized the number of links appearing onscreen simultaneously. The two lists of articles and activities that appear on the homepage do not wrap (internally we call them the ActivitiesDeck (as in a deck of cards) and the ArticlesRack); rather, they extend horizontally offscreen and are accessible by scrolling in that direction. This balance between scrolling down for new types of content and across for more of the current type seems to me a universally applicable design pattern (though admittedly scrolling horizontally is still somewhat awkward for people lacking both trackpads and touchscreens). One important advantage is that the screen works the same whether it’s a large desktop or small mobile; indeed, hopefully the user might become oblivious to the giant discrepancy in screen size and not even remember which device they used to view the site.

For those desktop users however who do prefer to see all the content laid out in front of them, each of the horizontal scrolling areas has a toggle at top-right to switch between wrapping and non-wrapping layouts; CSS’s flexbox enables this easily.

We have reached the footer, which sports an homage to Maria Montessori in the form of an album of various international commemorations of the great lady, such as currency notes, postage stamps and magazine covers. All texts in the footer are sticky-spaced in order to wrap nicely at various screen widths. The site’s tagline appears here as well albeit omitted on the homepage, where it has already appeared in the header.

Days of future componentization

Unrelated to the mission of the site, Engaging is migrating from the monolithic ExpressionEngine content management system on the LAMP stack to a more modularized setup on the MEVN stack comprised of the Nuxt framework for Vue and the self-hosted headless content management system Strapi, the two connected via GraphQL using the Meteor group’s Apollo Client.

One major benefit of this new method is a better way to build web sites: single-file components, wherein the HTML, CSS and JavaScript for each site component are combined in one file and only later compiled into separate files. Single-file components make it easier to both write and read those CSS media queries that make a site responsive; writing them, only a light touch is needed to responsivize a particular component; reading them, they are fewer and closer to the HTML to which they apply. Being compiled also allows such niceties as CSS pre-compilers.

The site’s code is viewable at Gitlab — see the /layouts, /pages and /components folders for the templates and components; the /assets folder for sitewide CSS; the /queries folder for the GraphQL; and the nuxt.config.js file for sitewide configuration.

Meanwhile, elsewhere

We first built a version of the site at Medium in the expectation that development would take longer with unfamiliar new tools. Medium is perhaps the most WYSIWYG editor available: there is no cpanel, no edit screen, just the document itself that can be edited on the same screen as where it’s viewed. This ease-of-use helped Roberta gain confidence in becoming an online author. Additionally, Medium promotes stories, so posting content there could boost awareness of Via Montessori. For additional promotion Roberta is also cross-posting her content as LinkedIn articles.

The site is now built and running to the client’s satisfaction, though it’s too soon to tell whether it will meet its goals of forming an online Montessori community and raising the profile of its host. But so far so good.