We’ve been adding functionality to the Christian Schools of Florida’s web site gradually for years — Susan Taylor, now Director of Accreditation and of Professional Development, refers to the site as the organization’s workhorse. But until recently the site’s design (I use the term loosely) remained stuck back in the early 2000s, while the piecemeal-added functionality rendered the site increasingly unwieldy.

In 2016 CSF’s executive board instructed the executive team to make a change: the site must also be an attractive, intuitive showpiece. I’d been saying something similar for a while — that without a more mindful design it wasn’t even a very good workhorse — so was excited for Engaging to undertake the redesign.

One first principle: Like Frank Lloyd Wright says about the inside of a building determining its outside, the elements of the extant member functionality should reverberate out to the public site. Integrity, Mr Wright called it. To me it’s always seemed obvious that an organization’s internal and public-facing web sites should be one and the same, merely with varying access privileges for the various audience groups.

And one particular long-standing peeve regarding the old site: its navigation, a lengthy and uncontrolled hierarchical list down the left side of the page, jumbled and confidence-sapping. We were determined to redo it as something manageable and visually integrated. The result, as featured in the site header: just four items, the organization’s main areas of activity:

• School Accreditation
• Professional Development & Teacher Certification
• Meetings & Workshops for Educators
• Education News & Legislative Updates

It was gratifying when CSF’s new Executive Director, Dana James, requested that we bring this header over to CSF’s paper letterhead.

O reason the needs

Since such overhauls are relatively infrequent and set the stage for a web site for years to come, they are rare and vital opportunities to step back to basics. What should the site be? What should it express? Who is it for and what should it do for them?

We laid out the various target audiences and what they would like to be doing at the site. Admittedly there weren’t too many surprises here, but having the user scenarios centralized in front of us let us rank them, which is vital because it is to this prioritized list of user needs that the entire design is a unified and aesthetized — that is, organic — response. One user scenario was for newly-relocated families to identify Christian schools. This is a wide shallow user group — possibly many people who will only use the site relatively superficially — so the design answers their needs fairly prominently and immediately.

The executive team also provided adjectives to describe feelings they want the site to convey. This aspirational mist of emotion constitutes the vital flipside of the design brief, complementing the nitty-gritty of functionality and business goals. Now we could embark on the first two steps of the implementation: selecting the typefaces and the colors!

Typography

A recent blog entry at Hoefler’s typography.com, Fonts that Clash, speaks of the possibility of using more than two font families on a project. Emboldened, so to speak, I thought: okay, let’s use three here. Prudence and file-size limitations prevailed however and this dropped to 2½ as one of the font families appears in uppercase only: Gotham.

Gotham addressed CSF’s desire for a typeface that exuded well-establishedness without seeming staid. The site displays not only CSF’s name this way but also that of any institution — mainly other schools but also such things as hotels in the Meetings section. The lowercase never appears, isn’t even loaded.

Gotham was perhaps an obvious choice, but its conventionality — Hoefler refers to it as “unmannered” — allowed us to get a little riskier with the contrasting fonts. We chose Hoefler’s Operator, “a meditation on the technical aesthetic of the typewriter”, because it was new, which answers the brief’s demand of being up-to-date; because it’s exciting, especially the exuberant italic; and most importantly because it is designed for editing, for writing at least as much as for reading. And that’s how it’s used on the site; it’s on the myriad forms and dashboards built for logged-in users — this site is a workhorse remember (though now also a sleek racehorse, and we hope a showhorse, a thoroughbred).

There is also presentational content and reference materials on the site — stuff to read, not to write — that warrants its own font family. We went with Ideal Sans, “a sans serif that renders a Humanist framework with handmade gestures”. When large for titles and dropcaps it has great flares, and when small it’s a pert but sensible option for reading. In the abovementioned “Fonts that Clash”, Hoefler notes that Ideal Sans and Operator work surprisingly well together.

To tie things together, one font may appear sporadically within a contrasting sea of another. Uppercase Gotham is used for highlights and headers in Ideal Sans-rendered texts; Operator Italic is used for system messages.

Beyond this, we implemented something rarely seen but a vital navigational as well as aesthetically enriching design pattern: semantic typography, that is, giving a content type the same font treatment no matter where onscreen it appears. I already mentioned Gotham uppercase for institutions; there are a number of others, most excitingly very bold italic uppercase Ideal Sans for people’s names. This is particularly nice on photo credits, where the preceding “Photo by” text is rendered in the contrastingly thin Operator Italic used for system messages — as Hoefler writes, “A family’s most extreme weights often have the most personality.” This level of typographic detail has navigational benefits and reassures the user’s subconscious that the site is very much under control, thank you.

There’s another rare typographical refinement: Adobe’s Balance Text plug-in for jQuery. How many times have you seen 3-line centered lead-ins on beautiful pages but with a dozen or so words on the first two lines then three, two or even a single solitary widow word on the final line? This imbalance is unnecessary: the plugin, which re-renders whenever the screen width changes, adds breaklines so that all constituent lines are as similarly wide as possible. It’s so important for titles and blurbs. As its author Randy Edmunds explains in his Balancing Text for better readability blog post, he hopes it’ll become part of CSS. [Update 2019 Dec 23: It’s part of the W3C Working Draft CSS Text Module Level 4 as text-wrap: balance.] [Update 2024 Sep 12: And it's happily now a part of CSS as text-wrap: balance!]

Further typographical refinements, set per content entry, help make a page’s title, blurb and photo credit more visible against the varying background of hero images. The title color can be varied from among a handful of choices; the blurb and photo credit can be black or white; and a semi-transparent black or white box can surround either the blurb alone or the entire top of the hero image, enveloping both the title and the blurb. One further trick for legibility is adding an outline around the title text — a hack of four single-pixel text-shadows.

Actually we have one further font face used throughout: Fontawesome’s icons. These appear within link buttons as prefix and suffix icons, and behind titles semi-transparently as larger glyphs. In fact, Susan Taylor, my patient, creative and insightful collaborator throughout this job, didn’t even notice they were there — now that’s what we like! Together with semi-transparent SVG patterned backgrounds, these icons contribute to a visual depth and richness.

The header

So much for the typography; let’s scroll back up to the header. It introduces, as it should, not only the fonts but also many of the site’s design patterns. Its background pattern — the rather stately repeating chevrons — appears in various permutations around the site. Its background color, Payne’s Gray, is the site’s color anchor. And its feature colors are two of the site’s three link colors.

• Anchor color: Payne’s Gray #4B6876
• Lighter link: Dandelion #EDD42A
• Medium link: Neon Carrot #FEA139
• Darker link: Ginger #BE6500
• Accreditation: Rackley #5B85AA
• Staff training: Deep Chestnut #b23a48
• Member-related: Coyote Brown #735F3D

Within the logo, the traditional straight blue and red have been replaced with two dashboard colors (the blue for accreditation and red for staff training). Shade tweaks notwithstanding, the logo has remained unchanged for many years. For continuity’s sake and to celebrate its longevity and suggest the organization’s own, it appears centered rather than on the more usual left. Because everything in the header flows from it, the header as a whole becomes classically symmetric.

CSF has a motto, but as Steve Krug points out in his classic web design book Don’t Make Me Think, a motto isn’t exactly a tagline; it’s more about the organization’s values than its activities. So we moved the motto down to the footer and CSF Chief Executive Director Ken Wackes wrote a more direct and descriptive tagline, which appears to the right of the logo, thereby completing the masthead, which also has the organization’s name to the logo’s left. The “About Us” menu link appears as a kind of postscript to the tagline — an obvious choice that in retrospect I’ve not seen done before.

Putting “About Us” here had been the solution for keeping it out of the main menu, where the client had originally wanted it. This new position was fine with them, an encouraging first victory in the resistance against menu creep; momentum was with us!

As mentioned above, fixing the navigation—that interminable list that the menu had become on the old site—was a priority. The main menu in the header is now just four top-level “what we do” listings. Each of these reveals, as expected, a pulldown menu, but what’s a bit different here is that the menu doesn’t open below but surrounds and amalgamates the menu item. In a unique refinement, the titles split apart when opened, so for example “Education News & Legislative Updates” becomes just “Education News” followed by a list of news items; then comes the “Legislative Updates” header followed in turn by those updates. The opened menus are rounded-edge boxes with borders that hopefully create a graphical, almost comic-book feel when appearing superimposed over the current page’s contents.

For a dozen years I’ve liked the design pattern of a tab bleeding off the top left corner of the screen to pull down a map, and “Find a School” was just right for it here. So good we named it twice, a second tab reveals a version of the map filtered to only show those schools currently hiring. Nice! So we tried a third tab to pull down a list of only those schools with news to share, but the school news is of less immediate interest than the school jobs, and the top-left corner was now getting a little crowded, so we left it at two tabs. These also serve to introduce the Operator font family in the header, which otherwise only has Gotham for titles (the masthead and menu items), Ideal Sans for texts (the tagline).

Balancing out these two top-left tabs is the top-right icon for the user login, which is the conventional place for it — moreover it’s displayed using the conventional user icon. Following convention here improves the design by enabling the eschewing of disfiguring signposting, and more importantly helps the user by meeting any unconscious expectations. Conventions are a designer’s best friends; we need not fear being cookie-cutter providing we are building in huggingly close response to a functional brief.

Once logged in, the user icon gains a circle around it and the user’s name appears next to it; obvious choices. Unlike the menu items, the user menu opens with a click rather than a hover. If logged out it reveals a login form and a link to the registration form; if logged in then two consoles are displayed, one listing the user’s roles, the other a handful of links for account management. Its background is the chevron pattern but unlike the header’s Payne’s Gray is in member-related Coyote Brown, the contrasting stroke also whiter than the header’s as a visual suggestion that it’s closer to the viewer than the header beneath it.

The header comes in two flavors because the site’s screens do: brochureware screens have white backgrounds so get the dark header, while working pages have color-coded darker backgrounds so get the light header, this contrast serving as a navigational cue. One deliberate exception here is the homepage, where the dark header is immediately followed by the dark news area (the two are separated by means of the header’s chevrons ending). Again the purpose here is as a navigational cue, to quickly signify that one is on the one and only homepage.

The one and only homepage

The header may be classically symmetric, but on the homepage at least it is immediately followed by the news area, which breaks the symmetry by dint of the golden ratio (see Possibly the Best Rectangle in the World, a fun video on the topic at Aeon Magazine). The larger 61.8% on the right has the slideshow, the smaller 38.2% on the left is divided in turn into two equal columns. On the slideshow, headlines are bottom-aligned and balanced for line length. This is a fairly conventional news area layout but it’s an innovation for this site because previously the homepage had no news at all.

As we scroll past the news, the background alternates to white and we’re presented with a slideshow of the member schools themselves. This is followed by the map view, alongside which is a list of all of the schools, sortable either by school name or city. Together, the map and the list — two semi-transparent white boxes appearing on top of a dark background with a faint pattern — foreshadow a design pattern used throughout the site once logged in.

Next as we scroll, the background reverts to white for two presentations: “CSF for Transformational Education” and “CSF for Accreditation”, aliases for the header’s “About Us” and “School Accreditation” areas. Their illustrations are taken from their first articles, their texts comprised of the blurbs of their five articles. We noticed that these blurbs read remarkably coherently as a single 5-paragraph text — more encouraging momentum!

Closing off the homepage is the Job Opportunities section; perhaps these should instead be on a dedicated page, but we haven’t yet come up with a definitive argument either way. Like the map and accompanying list, they introduce the dashboard layout, a centered collection of white semi-transparent boxes that wrap to fit the screen on a colored graphing paper background. Each box or console is a bit like a desktop window, with a minimize/maximize icon in its top right. When minimized, a box is semi-transparent and only its title is visible; when maximized it is fully opaque. To treat the job opportunities equally, they all have a fixed width and height; other instances of boxes, such as when used as consoles on an administrator’s screen, maximize to a size dictated by their content. Collectively, when minimized these form a visually interesting symmetric collection of varying widths.

And that is our homepage, serving to 1) introduce the organization and its members schools, 2) provide an overview of the site, and 3) establish a myriad of design conventions. It also presents what will generally be the freshest public information: news and job postings.

To design it we produced a sketch using Balsamiq Mockups. I like this software because it produces cartoon-looking images that clearly demonstrate to the client that they’re looking at the thing’s structure, not its look & feel — indeed, it demonstrates to them that there is such a split. We held to Engaging’s bottom-up/inside-out approach of postponing the homepage’s actual development as long as possible, this to express designs that had solved problems on inner pages. While these inner designs did not directly result in the homepage’s news area and the “CSF for…” presentations, the bottom-up/inside-out approach nonetheless did help with them, lending content and design inspiration.

Text Pages

Which brings us to those inner pages. Articles follow through the symmetry of the header with a centered title, blurb and column of body copy. The title and blurb appear superimposed on a fullscreen bleeding hero image (though there’s a switch field to reduce it to a smaller non-hero image if a bleeding image doesn’t make sense, such as for a graphic or diagram instead of a photo). The page title’s symmetry and colors integrate it with the sitewide header, its maximum width narrower than they are, so that the sitewide header and the page title can be seen as a unity pointing down to the content that follows.

The hero images are perhaps extravagant and might be looked back upon in future as an idiosyncrasy of the times, but they look so dramatic and exciting! This depends on the photography of course; we’re finding unsplash.com a great resource. I’d originally intended to use my own photos, but we found ones on this site that worked so much better. Also, Ken knows a Florida photographer, Jon Mark, who kindly offered to let us use his images on the site.

The original idea was to use a fairly randomly-selected different set of creatures for each section, such as birds for accreditation, reptiles for teacher certification, etc, and a freely-selected image for news items. But there was opposition to some of our choices for the About Us pages, for which we chose images of insects following on from the inevitable butterfly for Transformational Education, and we strayed from the theme, which is perhaps a shame.

Some of these images are rather spectacular on a nice big screen. I particularly like the one for Biblical Justifications for Accreditation — it’s a bird buzzing in a flower for nectar, like a soul feeding off the Good Book.

Of consoles & dashboards

After the chevrons in the header and the topography on the map, the site’s third SVG patterned background is graphing paper, introduced on the homepage behind the job opportunities and used mainly on member roles screens to display their various consoles.

Now, I hadn’t thought to name the practice, but André Oliveira calls it Scalable Design, and it’s vital particularly to web design as opposed to other media. Web designs are leveraged to be used repeatedly for various scenarios; they must accommodate all the possible variations. Similarly, a grouping of items should be able to handle any number of entries. We web designers do this pretty much automatically, it’s in the nature of the environment, like gravity. Sometimes though our scalable design patterns are particularly pleasing, and the embrace of the constraint provides an important part of the site’s personality.

Here we have it in our solution for displaying multiple consoles for logged-in users’ role screens: the white boxes on a colored graphing paper background. There can be any number of these boxes/consoles and they can be any width or length, based on their contents. To keep them manageable, they first appear minimized, using the familiar icon for minimizing and maximizing windows. They can wrap to the next row, as dictated by the user’s screen width. And they are centered. This combination of tight and relaxed rules, of going with the flow of CSS, creates workhorse screens nicely balanced with tight symmetry despite infinite width variation. Frank Lloyd Wright spoke of the folly of avoiding the machine and the resulting new possibilities, such as smooth straight lines and precise repetition — which can augment rather than decimate style. So we let the computer do the centering, which it’s good at, while we create the varied individual consoles that it must center. This design pattern allows for a large amount of information to be quickly and easily available in an obvious and dare I say sometimes beautiful way.

To introduce this, we brought a hint of it to the homepage: the links in the “CSF for Transformational Education” and “CSF for Accreditation” presentations appear beneath an image as little rounded text boxes in this variable-width, centered layout. And below that, the job titles across all schools close out the homepage as a console display on an engineer’s grid, albeit at a fixed width since they are a list of similar items.

Further, the console design pattern is reused and modified — ie introduced — on other more front-facing pages, such as news stories, affiliate organizations, staff members and job opportunities — though again since these are lists of similar items their widths and heights are fixed (in golden ratio with their heights, naturally).

To help emphasize the differences among the various role-based dashboards, each has a different background color, generated by Coolors based on the site’s anchor color, Payne’s Grey. They’re a nice bunch:

• Manage SESIP: Rackley #5B85AA
• Manage Early Childhood: Antique Fuchsia 916C80
• Manage Staff Training: Deep Chestnut #b23a48
• Manage Teacher Certification: Shiny Shamrock #49a078
• Inspect a School: Ginger #BE6500
• Manage CSF Membership: Coyote Brown #735F3D
• Manage My School: Dark Purple #36213e

Ports

Every form on the site — and some logged-in users get many depending on their roles — is displayed the same way: labels and legends in the smaller golden ratio column on the left, fields in the larger one on the right. Since these forms are increasingly viewed read-only, they were renamed as ports. When editable, the background is dark and semi-transparent, the text white; when read-only, the background is white and the text dark.

Like article titles, port titles integrate across a background divider starting as part of the header and ending as part of the body.

The web virtues

For any web site to succeed, it must be both functional and delightful, that is, it must enable its users do what they came to do and please them as they do so. For functionality it must be both fast and clear; for delight it must be both fast and aesthetic. So both needs — functionality and delight — are met by speed. And both clarity for functionality and aesthetics for delight are met by consistency. (This needs a diagram, doesn’t it?) Luckily for our medium, consistency makes a web site not only easier to consume but also easier to produce. Moreover, by enabling the re-rendering of the same things repeatedly, consistency can also improve speed.

Personality

There’s arguably one further virtue: personality, which can emerge when a critical mass of design patterns is used consistently. On this site, what with the three contrasting font families that we don’t usually see together, the variety of colors, and the SVG geometric patterned backgrounds, we have acquired something rare: oodles of personality.

But does the site express the personality of the organization? It’s difficult to say because CSF has no physical premises anyway. In fact, the web site is a sufficiently significant aspect of the organization’s branding that it isn’t just expressing the organization’s personality, it’s contributing to it.

Performance

We’ve discussed aesthetics, now what of the need for speed? To quote industry dean Jeffrey Zeldman: “Nobody waits. Speed is to today’s design what ornament was to yesterday’s.” If it ain’t fast, well, it ain’t pretty.

But ExpressionEngine (EE), this site’s platform, is far from new technology; the LAMP stack is now beyond venerable; the PHP language and the MySQL database are most likely not what we would choose today to build a system like this. But it was simply too tall an order to redo the backend as well, at least for now. We worked with what we’ve got.

Native EE tags are excruciatingly, unhappily slow on sites of any complexity (at least on relatively inexpensive hosting); indeed this has been a problem for years. One solution Engaging relies on to keep EE viable is Aaron Walden’s CE Cache add-on. EE does have caching, but only for individual tags or for the entire template, and flushing is only time-based; for a complex site like csfla.org, this is close to useless; instead, caches must be chunked up and flushed according to rules based on content changes, or else the caches will be constantly unnecessarily flushed. So CE Cache is pretty much an entire layer of development above the site’s templates.

All well and good, but what about those times when the cache has been flushed and we now need to access actual data? Any EE tags involving relationship fields — whether the first-party Relationship fieldtype or the well-known Playa add-on — generate terribly slow and complicated queries. Furthermore, not only are they slow, they are limited, forcing us to pass values to further tags embedded in deeper templates, slowing things down a lot more. To avoid all this, Engaging sites bypass relationship tags by using EE’s query tag to access the MySQL database directly. This can speed up uncached areas of the page by more than an order of magnitude. We’ve done it throughout csfla.org.

And for a tremendous perceived performance boost, the entire site uses PJAX, a method of only loading that part of the page that needs to change, but which nonetheless maintains browser history and loads the full page if required, such as when loading into a new tab or coming at the page from an external link. Given that we have a Google Map permanently hidden away above the header waiting to be pulled down, we don’t want to be reloading the entire page each time we navigate around. It’s like old-school frames for the 21st century.

As a loader graphic for the interstitial time between PJAX pageloads, we went with a beating heart, since a heart is part of the CSF logo. It’s proving to be the site’s most beloved feature.

In addition, all images are lazy-loaded to help pages load more quickly, with a low-res version loading first followed after the pageload by the hi-res version.

Finally, almost all forms are submitted using AJAX, speeding things up there too. And some of these AJAX form submissions trigger updates around the screen. For example, when a user adds or removes a role for themselves, their roles list (which appears permanently in the header) is updated without the entire page reloading.

With all this use of PJAX and spot refreshes after AJAX form submissions, the site can approach the reactivity and usually the speed of a modern web app.

Testing

This is a complex, working web-based system, requiring much testing. I heard someone say on a podcast recently that software isn’t 90% development and 10% testing as you might think, nor even is it 50/50, but it may just require 20% development and 80% testing! An exaggeration perhaps, but it illustrates the point that we need more testing than we think.

Fortunately on this site we were building on something that already existed and had been tested and worked. Nonetheless, we were transforming things, and certainly much testing was still required, and we certainly haven’t caught everything, so sometimes the users have been the testers as they go about their business on the site.

Update 2019 Sep 30: I find some moral solace regarding this in Chapter 8 of Venkatesh Rao’s great Breaking Smart series, “Running Code and Perpetual Beta”:

Users expect good products to evolve rapidly and serendipitously, continuously challenging their capacity to learn and adapt. They accept occasional non-critical failures as a price worth paying … What makes this possible in software is that most software failures do not have life-threatening consequences. As a result, it is usually faster and cheaper to learn from failure than to attempt to anticipate and accommodate it via detailed planning (which is why the RERO principle is often restated in terms of failure as fail fast).

To appreciate just how counterintuitive the RERO principle is, and why it makes traditional engineers nervous, imagine a car manufacturer rushing to put every prototype into “experimental” mass production, with the intention of discovering issues through live car crashes.

Results

A job like this requires much collaboration with the client; that is how Engaging likes to work. In June 2016 we discussed the organization’s goals; in September we developed user stories and scenarios; and implementation began in earnest in November, taking about 4 months to launch.

“Truly exceptional,” Executive Director Dana James wrote after the switchover to the new site. “It’s beyond what I hoped and beyond what I expected.” At CSF’s Spring 2017 meeting, Director of Accreditation and Professional Development Susan Taylor demonstrated the site to the most involved user group: administrators at member schools. “Everyone was thrilled with the website,” she reported. “We had great reviews, and things worked well.”

Monolithic vs microservices

Discovery and architecture; design and implementation; ongoing development and testing: I have to admit to an intermittent crisis of confidence over whether a relatively small organization such as CSF needs a monolithic web-based system. These days they can get a web site that looks like what people expect to see from services such as Squarespace, Weebly or Wix. And separately, they may well be able to get the functionality they need or close enough to it from something like AirTable, Zoho Builder or Knack. True, these services didn’t exist when we started, but they do now. And true, the user experience would be more fragmented, and the site would almost certainly be missing the virtue of personality. But doesn’t the future entail picking and choosing from among services that do one thing well, spending any development time knitting them together with APIs and Zapier or the like? See James Lewis and Martin Fowler’s canonical essay on the topic, Microservices: a definition of this new architectural term.

I’m just not sure what the answer is here; perhaps what’s required is mixture of both — enough of a monolith to generate some gravity and personality, fused with microservices for temporary or new features (Lewis and Fowler cite The Guardian as an example of this). One thing that does make me think CSF needs its own integrated system is that they and organizations like them are being encroached upon by larger educational accrediting organizations, and the means whereby these hungry predators are absorbing others is technology, specifically web technology. So it seems that web competence is a vital survival skill, and having a web presence that beats others’ in terms of both functionality and design provides protection in the jungle. That said, the ability to integrate microservices will increasingly become a vital component of web competence.

Also, the grass is always greener; we are aware of the challenges we’ve faced, but not of the challenges and expenses of working with a variety of systems to achieve the same thing or even come close to it.

To be continued tiny…

You may have noticed a conspicuous omission in this case study: responsive design. How does the site look on mobile? Well, in the Engaging spirit of “mobile first second” (do the biggest screen size first with a mind towards how it will reduce), we haven’t done it yet. I’ll report back when we have.