News

 

For building web sites and systems Engaging has a mantra of “mobile first second” as a twist on the no-longer-quite-so-new paradigm of “mobile first”. Does Engaging proceed this way simply because its mobile designs derive from extant desktop sites? Not always. Then because your dear developer/designer has mental grooves for desktop now two decades high and has not yet adapted to a web increasingly dominated by mobile? Perhaps. Perhaps not.

  • Client
    Juan Carlos Bronstein
    Tel Aviv, Israel
  • Services
    Web Design

Works page at juancarlosbronstein.com, now responsive, with gallery walls by flexbox

 

In designing for mobile the web site of friend and painter Juan Carlos Bronstein, we pared down the existing site then fed this new streamlining back to the big-screen version. Until doing so we’d thought the desktop design was just fine yet if we’d done mobile first we might have had a better desktop site with less work.

For instance, in each painting’s description we removed tool lines that separated the various texts; it turns out that their varying typographic styles is enough to divide them. And on the Works page, which displays dozens of paintings, we removed the box around each painting. We also removed white borders from around the site’s menu items.

Doesn’t all this suggest we’d have been better off doing mobile first? Well, these are relatively trivial changes; the fact remains that the big screen somehow allows for more exciting concepts that can more plausibly be adapted for smaller screens than a small-screen design can generate big-screen concepts. That is to say: graceful degradation beats progressive enhancement, at least at the ideational phase (for actual CSS implementation the opposite may be true). Mobile screens certainly do have their own excitement, being less displays to look at than objects to manipulate; we hold them close. And I’ve often preferred the mobile versions of Engaging-made sites with their intimacy and immediacy. But that I believe is because they are a concentration of ideas produced for the larger version.

At any rate, it’s the fertility of design ideas and their adaptivity that are the proper criteria for deciding how to proceed, not the commonly cited method of estimating the number of visitors who’ll use which screen size and designing for them. This is because you will be designing for all screens regardless.

Which means that for responsive design you’re not actually doing mobile nor desktop first anyway: like 3-dimensional chess (whatever that is), you’ve internalized that every component on the site needs to work at every size; you want your site to remain essentially itself no matter its dimensions. So it’s really a matter of “components first”, isn’t it? Indeed the advent of React as the new paradigm for web development makes concrete this approach; it’s components all the way down.

For a similar discussion, see Mobile First Design: Why It’s Great and Why It Sucks by Code My Views. The comments there seem in alignment with my views here: go from big to small for ideas, then small to big for implementation, keeping both in mind throughout.

Since we’re talking about a painter’s site here anyway: how would a painter do it? How to paint ostensibly the same painting on a big and on a small canvas? The most clunky would be just to scale down. Slightly more sophisticated would be selecting one more or more highlights. Or else show something completely different that nonetheless has the same spirit? Maybe the analogy is worthless because each painting is unique, so it’s a different painting if it’s a different size, and the method for one painting has no bearing on another. Perhaps this in itself is instructive: there’s no one way to do it.

Flex to the rescue

But let’s get down into some reeds. On the Works page, when eliminating the boxes around painting entries, it became clear that on a big screen their white backgrounds could merge to form a continuous row, akin to a gallery wall. All entries were set to float: left but when the row’s last entry cleared to the next row, the wall-to-wall background did not reach the entirety of the screen width, even though the entries’ container div did. How to eliminate this gap at the right side of the wall?

The solution marked the first time I’d used CSS3’s new flexbox in the wild. Removing the floats and setting the flex container to justify content: space-between did exactly what was needed. It did require eliminating the fixed width for each painting entry and instead setting a max-width, thereby letting their widths vary, which means that paintings are not precisely lined up vertically down the screen, but for Juan Carlos’s Works page at least this is arguably a good thing — it’s a less rigid grid.

Flexbox also helped with the site’s menu. Previously its position was fixed at top left, but on the small screen this meant that the masthead to its right got messily hidden underneath it, so the menu now had to be part of the layout flow, floated left as the masthead floated right. The problem was that as the screen narrowed the masthead’s inner text wouldn’t wrap, forcing the masthead to clear prematurely. Nothing helped with this — except again replacing floats with flex.

The menu then got fixed onscreen not in CSS but in JavaScript with the excellent Sticky Kit plugin for jQuery.

Penetrable CSS

I don’t know about you but as I build a web site my CSS gets into a terrible mess, often ending with a shouting match of “!important”s. Once a site is completed it’s vital to take some time to prune, sanify and beautify all that. A nice clean slate is especially important before adding media queries (Did somebody say “mobile first second”?) for less struggle and fewer statements. After all, CSS is code too and deserves comments wherever helpful and logic that’s easy to understand.

Cool kids turn away now: there’s no CSS pre-processing here. For one thing, the CSS these tools generate is impenetrable (sure, today the browsers have great developer tools for insights, much more powerful than View Source, but still). On this site the CSS file is actually a template in the ExpressionEngine content management system anyway, so that the entirety of the PHP language is available within the CSS if needed — though nothing was for this site, even if a couple of variables could have helped here and there.

All that said, I do appreciate the nesting that SCSS affords (though this too can be problematic as it seems in tension with cascading) so I now use indentation in my CSS to follow along with the DOM structure. Also, each element’s properties are alphabetized. One other formatting choice is to not skip a line for variations on an element.

PJAX for performance

To help speed things up, the site makes use of the CMS’s built-in caching functionality. The next performance gain is achieved by applying PJAX.

So now you can get a nice fast taste of painter Juan Carlos Bronstein on a device near — even very near — you.

The redesign for Christian Schools of Florida...

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.

The csfla.org homepage, redesigned in 2016/7

 

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 what feeling they want 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 “established institution” 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 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 we hope also a sleek racehorse, 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 subconsciously 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 word on the final line? This imbalance, these widows, are so unnecessary: the plugin, which re-renders whenever the screen width changes, adds breaklines so that all constituent lines are as similar a width 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.

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. 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).

  • 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

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 as the client had requested. The new position was fine with them, so this represented 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 on 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) and Ideal Sans for the text (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.

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 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 generally have white backgrounds while working pages have color-coded darker backgrounds. The header is dark on white pages, light on others, the difference serving also 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 stopping). Again the purpose here is as a navigational cue, to quickly signify that one is on the homepage, a special page.

The 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 very new on 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 graphing paper pattern, introduce a design that’s used throughout the site by logged-in users.

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. Seeing that these blurbs read remarkably coherently as a single 5-paragraph text suggested we’d gotten things right.

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 the 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 introduce the organization and its members schools, provide an overview of the site, and 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 then held to our rule of postponing the homepage’s actual development as long as possible, this to be able to reuse 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 them 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, the site’s second SVG patterned background is graphing paper, introduced on the homepage behind the map and 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

Forms

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 views. 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, form 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.

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 Zoho Builder, Knack or Nintex. 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.

Slant Magazine goes mobile...

It’s exciting to work on a web site that you already actually read. When Slant Magazine came calling to implement a redesign of their ExpressionEngine-powered online magazine (thank you Rumsey Taylor for the recommendation!), your author was already a reader; I’d come across the site regularly because their movie reviews are often among the first listed at IMDb.

 

Images, (differently-sized) images, everywhere

Co-editor/owners Ed Gonzalez and Sal Cinquemani wanted to refresh the look of the site and, more importantly, produce a mobile-friendly version in order to maintain their search-engine ranking after the Google mobile-friendly update. They commissioned Erik Lund to do the redesign. One design characteristic I was pleased to see was larger images; given the nature of the site—reviews of movies, music, television and video games—there’s no shortage of great imagery to use. The design dictated that these images be displayed at various spots around the site at various aspect ratios; for instance, on a review’s actual page the hero image is large and widescreen, whereas on search results its thumbnail is a small square. Now, cropping and resizing standard-sized images to these more extreme dimensions can be done automatically (we invariably use Aaron Waldon’s CE Image add-on), but this often results in sub-optimal images, with heads and whatnot chopped off.

The solution: DevDemon’s Channel Images add-on, which allows for the creation not only of a defined set of image sizes and dimensions but also a manual override, with resizing and cropping right there within the EE cpanel on the entry’s publish/edit screen. This way the site editors only need to upload an entry’s master image once, rather than once for each required image size, and only do a manual crop when the automatic crop results in beheadings and other injuries. This all improves the visual excitement of the site: big images are perfectly cropped by the editor’s discerning eye and small images can zoom in on faces so that they too have an impact.

Intelligent caching

A second vital add-on was CE Cache, also by Aaron Waldon. Previously the site was cached using EE’s built-in caching, wherein flushing is merely time-based. CE Cache allows for the chunking up of the homepage into separate caches so that, for example, when a film review is added or edited, only the homepage’s Film section cache is flushed (because it may now be appearing here). And on a single-entry page, only the related entries area cache is flushed whenever any other entry is added or edited (again, because they may now be relevant for here). CE Cache enables the optimal balance between site performance for users and immediate updates for editors.

DRY restructuring

When inheriting a site there’s always one more task than when starting a new one: deciding what to keep and what to jettison. We decided to build the templates afresh, with the assumption that for specific features I’d copy and paste liberally from the existing templates. Also, since all the review sections are essentially the same, We decided in the spirit of DRY (Don’t Repeat Yourself) to merge things at both the display and the storage levels. For display, the various section templates were merged into a small handful of master templates; for storage, the various channel field groups were merged into a single Articles group. This did require rather a lot of database surgery—the contents of various fields had to be copied into the new corresponding consolidated Articles field—but it enabled more efficient development and ongoing maintenance.

Some aspects of the new design required new fields, such as the nice new look for listicle items sporting a circular dot to display the item number. The Slant editors had been hard-coding lists into the main body field, but the new design called for more details. So we converted these listicles into grid form—again, more database surgery and some heavy cutting and pasting action.

The homepage slideshow needed to work on both desktop and mobile, so I entrusted it to Flickity, my new go-to slideshow script, which handles both. No problem.

On this site, article titles vary according to where we are—there’s a long version, a short version, a split version with a title and subtitle, and a version for the homepage slideshow. In ExpressionEngine this was a perfect scenario for a “title-logic” snippet, which loads once per template load and can be applied anywhere throughout the site.

Some real-world constraints

Ben Johnson of Stratechery wrote persuasively that web publishers are essentially at the mercy of their advertising networks. We experienced this first-hand here. Erik had designed the desktop version with a width of 1200px, but late in the day we discovered that Slant’s ad network, Crave Media, still requires sites to be a maximum of 1000px in order to show lucrative page-skinning ads—the skins are a fixed width and get hidden by pages any wider than this. It took a bit of reworking but thanks to the site owners’ good taste we were able to adapt to the narrower size without losing the spirit of the design.

And as a more contemporary alternative to pagination, we had developed a click-triggered infinite scroll for both articles and index pages, which succeeded in both being more user-friendly and in displaying ads more prominently. But the automated metric used by Crave wasn’t set up to handle it, so we had to revert back to pagination.

Even so, the new Slant Magazine is I believe a pleasure to load, look at and read on both desktop and mobile.

A responsive redesign for The Auditor...

The Auditor is a UK-based company that examines a client’s cost centres, improves things where possible, and is paid based on a pre-agreed percentage of savings achieved in the first year.

  • Client
    Auditor, The
    Glasgow, Scotland, United Kingdom
  • Services
    Web Design
 

Engaging first built their company website way back in 1999, when they were called Cost Reduction Analysts. Amazingly, until now—even with the name change—the site had never been fully redesigned. That’s 16 years! Yes, we’d retrofitted a content management system, widened the display to better suit the bigger screens, and gradually added and removed some functionality. And yes, its longevity is arguably a testament both to the web as a medium and to the site’s initial design. But by 2015 it had been showing its age for a while.

Initially it had been a useful calling card for the business, demonstrating their tech savvy—it was, for example, probably among the first websites to have a sticky header menu. But more recently it had likely been doing the opposite, suggesting to prospective clients that the company had fallen behind the times.

So it was satisfying to finally bring theauditor.com up to date—redesigned, responsive and with webfonts. Company Director David Latter recently emailed that he and his team are once again gaining “much strength from [their] client-facing persona,” and that the redesign has given them a “new lease of energy”.

A brand new challenge

One challenge was that back in 2010 they changed the company name from Cost Reduction Analysts to The Auditor but still hadn’t fully let go of the former; the existing site showed both brands, and was therefore somewhat schizophrenic. The redesign was an opportunity to force clarification here.

Also, the client had recently become concerned that the old name actually explained their service more clearly than the new and performed better for them on search engines. And a number of taglines had accumulated over the years, such as “Make more money from the money you make” and “No savings, no fee,” each appearing somewhere on the site. Which to keep?

Our Gordian Knot solution was to eliminate the taglines completely and render the old name as the tagline for the new, resulting in: “The Auditor: Cost Reduction Analysts”.

How to scroll a header

The more square a logo, the more versatile it is, so we placed the tagline beneath the company name. But we didn’t want the sticky header containing the now taller logo to hide the content beneath. Our solution was to follow the current convention of growing and shrinking the header; upon scrolling, the tagline moves from beneath the company name to alongside it (absolute positioning proved the smoothest animation), and the company name shrinks. The scrolled header’s height is thereby reduced by about two thirds. With this we’ve tried to maintain the site’s traditional fun sticky header.

At mobile sizes, there simply wasn’t—and usually isn’t—enough space to display the masthead on the left and the menu on the right. The logo, tagline and a menu icon therefore abutt horizontally, and the vertical line separating the logo and the tagline is subtly overloaded; does it mean the menu belongs just to the tagline or does the tagline belong with the company name? Both.

Client endorsements

On the previous design, the client endorsement quotes were part of the header. Now they are paired with the client’s logo and displayed as notecards in a slideshow that dominates the homepage. The slideshow is powered by Flickity, my new go-to slideshow script, replacing the venerable Cycle. I like Flickity because it:

  • has momentum physics
  • works with no tinkering on mobile
  • behaves just as we expect a slideshow to these days
  • is being actively maintained, and the developer is asking for some money for it
  • was initiated by Paul Irish who seems to be behind the entire web these days
  • is reasonably configurable

The number of notecards displayed varies by screen size, from just one on mobile to three on the desktop.

Frank Lloyd Wright’s Unity Temple

I hope it’s not pretentious to bloviate that the unstated inspiration for the design was Frank Lloyd Wright’s Unity Temple in Oak Park, Chicago—what Mr Wright referred to as the first modern building. We pared back many of the squares and lines inspired by the sanctuary (as was vaguely intended), but one thing remaining is the matrix of client logos in the footer, inspired by the sanctuary’s ceiling.

These flipping logos

How to elegantly fit these logos of such varying proportions into a consistent square shape? Our solution was to align each logo to its containing square’s bottom right, setting the maximum height or width of the logo image—whichever is bigger—to 62% (the Golden Ratio) of the square’s side. Although some extremely wide logos (generally text-only ones) are therefore quite small, in all some 70 logos of varying shapes and sizes display nicely here. To help present each logo at its best we used one of its colors as its background whenever there was sufficient contrast.

On the narrowest screens the grid looked best with three columns, on the widest with nine; both looked best with three rows. So the number of logos displayed varies by screen size, from nine to 27.

Moreover the logos flip, showing a random new one each time. Although we haven’t seen this anywhere else, it just seemed the obvious way to display them and imply that The Auditor’s clients are many and equal. (I posted mechanism in more generalized form at CodePen, Random Card Flip from a Larger Set).

Colors to the fore

Among The Auditor’s virtues most appreciated by clients is their unobtrusiveness; despite the fact that they conduct an audit of fairly central processes, they are not an obvious, interrupting presence, and we wanted the design to convey this.

Hence the color palette is limited to subdued browns, with brighter colors coming instead from the clients’ logos, thereby placing The Auditor in the background and bringing the clients to the fore. True, the site’s contrasting blue—used for links and menus—is not quiet, but since it’s part of the logo it seemed the obvious choice for the site-wide highlight color.

Fonts of no-nonsense savvy

We rely on Hoefler & Co’s typography.com for typefaces, taking a leap of faith that limiting the choice to the output of one foundry maintains some subtle unity. To convey no-nonsense savvy, body text is in their Gotham san-serif; ditto Gotham Extra Narrow for the menus and headers. For the dropcaps and client texts their serif Surveyor provides a strong contrast from The Auditor’s own texts, and evokes pedigree.

Dropcaps are generated by Adobe’s dropcap.js.

Abandoned illustrations

The old site contained a number of stock images from the company’s successful initial branding push in the 1990s. As part of bringing things up to date we removed them all.

To replace them we commissioned the help of our painter friend Juan Carlos Bronstein to produce some watercolors to illustrate the various cost centers where The Auditor operates. Juan loved the secret Unity Temple inspiration, and produced three beautiful watercolors. However, the client decided they were too abstract, electing not to use them on the site. Perhaps we’ll eventually get them onto the site somehow.

The mechanics of responsiveness

Every element on the site is sized relative to a single constant: the body font size. Although now even font sizes can be set as percentages of the screen size by using the vw unit, we decided to retain some control over the font size. And although some exemplary sites such as theguardian.com elect to keep the body font size constant (and wisely don’t even set its size, instead allowing it to be determined by the browser default), we decided to step up the body font size to a maximum of 20px for the biggest screen sizes, and down to 14px for the smallest. If you gradually increase and decrease the screen width you’ll see the layout adjusting to remain itself as much as possible at all typical desktop screen widths, from 800 to 1900px wide, before beginning the more overt changes for smaller screens.

Why do some web sites feel more fun on the limited screen of a mobile device than on the capacious one of a desktop? That is how it feels, though I say so myself, at theauditor.com.

Introducing version 3 of painter Juan Carlos Bronstein’s site...

This one was a labor of love. It’s not the first web site marked Made with Engaging for my painter friend Juan Carlos Bronstein; back in the ’90s we collaborated on version 1, also with a dark background, also with some care about the typography.

But back then web fonts didn’t exist so we made the section titles with graphics instead, animating them with what we hoped was some Pink Panther-esque humor. Here are the Bath, Bed, Jug and Sandra title gifs:

Yes, I had a lot of affection for that site, and was saddened when a couple of years later Juan decided to redo the site on his own, learning the requisite HTML and CSS.

This second version of the site was altogether more sober — Mr Bronstein even eschewed the brief juan.net domain for the more grown-up juancarlosbronstein.com (the precursor to this sobriety was that he’d already replaced the animated titles on v1). Here’s v2:

So I was pleased when he asked me back to work with him again on a third iteration. We’ve kept v3 simple so far, with a splash screen featuring one recent painting, another screen displaying all his works, a third for his schedule, and a fourth to contact him.

The homepage at juancarlosbronstein.com, entitled “Now”

 

The works screen is filterable by technique and year. Thumbnail images are displayed to scale, and any that are too small to see expand when hovered. The site is currently desktop-only, but is responsive within that limited range, with the works page expanding to fill the screen’s width and each painting on its own dedicated page expanding vertically to fill the screen.

We utilized some modern browser functionality, such as rotated text. We went with a theme of rectangular boxes with a single rounded corner to be a little distinctive. And since this is Engaging.net the site runs on ExpressionEngine.

The background is still dark, though not quite totally black this time, and the fonts are Hoefler & Co’s Vitesse for the body and Idlewild for the titles in the hope that the panther is still pink.

Breathing new life into The Life Centre web site...

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.

thelifecenter.com homepage

 

h2. 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.

Design patterns

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.

Vertical balancing

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:

In CSS:

.cols { column-count: 2; column-gap: 1em; } .cols p { display: table; } .cols h2, .cols h3, .cols p, .cols ul { column-break-inside: avoid; }

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:

.cols .keep-together { column-break-inside: avoid !important; }

MindBody API

Like many other yoga studios, The Life Centre relies on Mindbody (no connection to Mind Design!) to power its class schedule, bookings, payments, and other back-office functionality. But to get any MindBody content onto a web site, almost all sites go through a very narrow tunnel called Healcode, a company that makes client-side javascript widgets to display Mindbody schedules, teachers and forms. These widgets are slow to load, requiring a call to Healcode’s servers for each pageload.

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

To minimize cache flushing and the resulting performance degradation, a number of site features are handled client-side. All relevant logo phrases are loaded, for example, but the sole one that appears is randomly selected client-side using javascript. Similarly, all the dozens of pages featuring various permutations of the MindBody-based schedule—the main schedule page, both centres, and all teachers—grab the same cached file and filter it client-side in various ways with some javascript; a teacher’s page shows only those classes that he or she is teaching; a location page displays only classes being held there, etc. This helps with performance because the API call to Mindbody can be slow, usually being the bottleneck for the pageload; with dozens of teachers on staff, it would have meant calling the API for each one. This way the API call is never made more frequently than once every 10 minutes.

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.

Florida Council of Independent Schools adopts CSF’s Master In-Service system...

In Florida, the Department of Education delegates teacher re-certification for each district or grouping of schools by means of a Master Inservice Plan. A while back, Engaging helped Christian Schools of Florida bring their MIP onto the web, saving the organization much clerical work. But CSF is not the only organization in the state that handles MIP for a number of schools, nor is it the largest.

MIP Director Susan Taylor told Dr Barbara Hodges, President of the Tampa-based Florida Council of Independent Schools, of CSF’s new web-based system, and Dr Hodges realized that FCIS could also benefit from such a system—moreover, while CSF has around 30 member schools, FCIS has around 160, so it could save them even more work. In coordination with CSF, Dr Hodges assigned Keara Danger, FCIS’s Director of Business and Operations, to work with Engaging to set up and adapt the system for FCIS.

  • Client
    Florida Council of Independent Schools
    Tampa, Florida
  • Services
    Web Development
 

We started development at mip.fcis.org with a depopulated clone of CSF’s MIP system, repopulating it with FCIS’s member schools and their 160 educational components. Each component has its own PDF, but these had become so inconsistent over time that we regenerated them en masse from the system’s content, complete with watermark.

The system runs on ExpressionEngine, and we also modernized some EE methodologies, changing for example all Playa fields to EE’s new native Relationship field because it has namespacing.

Then we matched the look & feel to FCIS’s main site, hosted and powered by Finalsite, utilizing that site’s header, footer and font styles, adding only a floating navigation box personalized for each logged-in user; all in all the visitor would be hard-pressed to suspect she has left the main FCIS site. (One clue that we’re not in ColdFusion-land any more is more meaningful URLs, ie, http://mip.fcis.org/roles/mip-coordinator/madison-academy instead of, eg, http://www.fcis.org/page.cfm?p=6). FCIS staffers also have a menu to manage the over 3,500 users, log in as one of them via an ajax live search, produce reports, and jump to the ExpressionEngine cpanel.

Launch in August 2014, the system uses roles and positions, the method already proven over at the CSF site to handle enterprise-level complexity, so is ready for expansion into other areas of FCIS’s activities whenever the organization chooses to do so. As Keara emailed a few weeks after launch: “Everyone loves the system. It is easy to use and very efficient!”

Bringing Christian Schools of Florida online, starring roles...

After working with Christian Schools of Florida’s Susan Taylor to bring online their Master In-Service Program, which previously required reams of folders and innumerable emails and phone calls, executive director Ken Wackes instructed Engaging to do the same for the rest of CSF’s activities and processes. Bring an entire organization online—now that is what Engaging was born to do!

 

h2. The accreditation process

At CSF’s heart is arguably its school accreditation process, involving a number of people over a span of years. A school prepares for its peer review by generating a handful of focus areas for improvement and by articulating its compliance with dozens of CSF accreditation standards. Every 5 years an ad-hoc team of peers visits the school to undertake a review. The review itself undergoes approval by CSF’s executive committee. Two years after the review, the school responds in detail with an accreditation progress report.

As member schools cycle through this accreditation process, various people require various levels of access to the various online forms. We developed and tested these privileges via marathon remote screensharing sessions using Skype—Ken in Crystal River, Susan in Fort Myers, Adam in Brighton. Ken and Susan became adept at logging in as different users on multiple browsers simultaneously in order to check the effects of one user’s actions on another’s view.

In a process I hereby hesitantly dub “organic agile”, having the client get so deeply involved in development turned out vital. Firstly, the job simply could not have been done otherwise—we had to role-play the organization’s activities in order to reduce them to business logic. Secondly, this involvement enabled CSF to get familiar with the resulting system and more naturally take ownership of it. And thirdly it served as training, as the site owners can publish and edit almost all the complex business logic rules in much the same way they do any other content on the site.

Complex access rules

Why complex? A new peer review can only be launched by the assigned peer review team leader, and only after the previous peer review has been addressed by the reviewed school, and that response approved by CSF’s executive committee, and the school has submitted at least two current focus areas and all eight standard compliances. Phew! A school head should not be able to see the peer review of her school until it’s approved, while an executive committee member should only see the peer review once it’s submitted. Meanwhile, peer review team members—as assembled by the peer review team leader—can access the review only until its submission — once it’s approved they’re off the case and no longer need access. Peer review team members also need to see but not edit the reviewed school’s submitted focus areas and approved annual reports. But a person can be on the peer review team of one school while on one or more focus area teams for their own school, and even be on the executive committee as well. In short, to model CSF’s accreditation process onto a system, each user requires some of four levels of access (publish, view, edit, submit) to multiple entries based on three criteria: a relationship field in the entry (relating to the school), the entry’s status, and which form is being used to access it.

All this requires orders of magnitude more complexity than provided by ExpressionEngine’s built-in member management, which allows a member to belong to just one member group. Moreover, even if a member could belong to multiple member groups—say both School Heads and Peer Review Team Members—now achievable with the HoobLong add-on, that too is insufficiently complex because she needs to be a School Head at only one particular school, not across the entire system.

Instead what we came up with is positions and their instantiations: roles. “School Head” is a position, while “John Doe = School Head @ Smith School” is a role. Once assigned the role, the specified person is granted the privileges of the specified position but only for the specified organization and for a specified period in time. Of course, a person can have any number of roles.

Role-based navigation

Roles turned out to be so powerful that for a logged-in user they became the obvious choice to supercede the site’s existing navigation. Now a personalized navigation area lists the user’s roles and team memberships, each linking to the role’s dashboard, as set by its position. For example, the School Head dashboard contains the following consoles, each with links:

  • School Details
  • Annual Reports
  • Accreditation Progress Reports
  • Approved Peer Reviews
  • Accreditation Strand Compliances
  • Focus Areas
  • Recent In-Service Activities

Meanwhile the School Head dashboard’s sidebar lists the school’s staff members, linking to their respective in-service records.

Note in the list above that the system also handles school annual reports, with the form calculating annual dues based on membership type, inspection visits, and number of part- & full-time children and students.

Collaborative editing

Interestingly, immersed in the content management system paradigm, we didn’t notice one major flaw until the system was tested in the field. Susan joined a team of peer reviewers during their visit to a school, where they were horrified to discover that as they saved in the online form they were overwriting each other’s work! They just presumed that a text field in ExpressionEngine was a collaborative document like Google Docs, while we just presumed they’d know that’s not the case. In a way their presumption was flattering! At any rate, we added a Google Docs ID field to the Peer Reviews channel and embedded an iframe containing the Google Doc into the peer review form to serve as a collaborative worksheet. We also had to limit editing privileges on the peer review form fields themselves to the team leader.

The introduction of roles and positions to ExpressionEngine has enabled csfla.org to function as an online organization of organizations. With over 1,400 people using the system, most have just one role, that of teacher, but the assignment of more than 250 other roles enables scores of people to work independently on their CSF-related tasks. The success of the system has led us to suspect there’s more to explore regarding role-based thinking.

ExpressionEngine add-ons required:

  • Assets (if only because the site operators wanted to be able to click on an asset to view it from the publish/edit screen — sheesh!)
  • Textile Editor Helper (we’re still sticking with Textile)
  • Zenbu (there are many types of entries and this lets the site operators find them)
  • Zoo Visitor (this is how we bring the site’s members into the fold of all the other content)

Music Box Theatre, powered by ExpressionEngine, gets an overhaul...

Since Engaging built out the Music Box Theatre and Music Box Films web sites in ExpressionEngine 1.x in 2009, not only have the sites grown but so have Music Box and ExpressionEngine themselves, to the point where it was time for an overhaul.

 

Back then Music Box was acquiring a fine new independent or foreign film every year or so; now they’re doing nearly one a month. The Theatre was holding a special event once in a while; now these occur regularly and are increasingly varied. ExpressionEngine has moved on from v1.x; now 2.x is the standard with a plethora of powerful and mature add-ons. And as the editors have requested new functionality, the sites have grown piecemeal, making the codebase more complex and the design increasingly haphazard.

Moreover, a couple of structural choices made back then were in retrospect mistakes. The two sites are powered by a single EE install using Multiple Site Manager, and because a film is a film is a film, we had a single Films channel to power both sites placed in the MBF site. But since posting new content to the MBT site usually requires posting new films, the editors had to switch back and forth between the two sites, which was irritating. So we began the overhaul by creating a new Films channel in the MBT site and transferred all films to it except MBF’s own. Since the two Films channels are in different sites they cannot share the same field group, but their fields can be named identically and thereby handled similarly in templates.

The second structural mistake was with film stills and reviews. Because each film could have a number of these, and in order to maintain maximum flexibility, we set Stills and Reviews as their own separate channels. Over the years however, despite many requests for additional functionality, there were never any for displaying reviews or stills separately from their film; this flexibility had proven to be overkill. And it came at a price: extra work for the site editors, who for each still and review had to think up a title (not even displayed) and select the film from among hundreds in the relationship field pulldown. For the overhaul, we replaced the Stills and Reviews channels with Stills and Reviews matrix fields within the Films channels.

The most significant development however has been what we dubbed the capsule codebase. The initial build had been quite complicated: There are screenings and there are films screened, and in most of the various lists of future screenings — Now Playing, Up Next, Coming Soon, Special Events, Midnight Movies and Matinees — we obviously don’t want to show every screening. Rather, each film should appear only once in the list, but we do want the sort to be chronological by screening and sometimes for each film to list all its subsequent screenings. Achieving this required a surprising number of embedded templates, and only Midnight Movies and Matinees shared code, so there were a number of somewhat complicated codebases to maintain. The new capsule codebase consolidated all these various lists of future screenings into a single extended SQL query. EE2’s new snippets functionality enabled placing the bulk of this query into a single snippet, leaving only the query’s final few lines, which differ for each list, in each list’s template.

The capsule codebase powers not only these lists but also Showtimes and the sidebar’s new Today’s Showtimes, which unlike the others do show every screening.

As well as making the site immeasurably easier to maintain and develop, the new codebase also hugely improves the site’s performance by relying on a single large query instead of the hundreds and occasionally thousands of smaller ones generated previously by the myriad of relationship fields in nested templates.

Innards done, we improved the presentation. We streamlined the CSS and strictly defined the various type styles for film titles, credits, showtimes, descriptions and collections. In order to promote MBF at MBT we changed the latter’s header, subtly mimicking the marquee outside the theatre itself. To better promote the theatre’s neighborhood partners, they now appear in the sidebar as a user-operated slideshow. And the codebase streamlining is carried through all the way to the presentation, so that film capsules appear consistently throughout the site.

With this overhaul, the code is now more maintainable for the developer; the system easier to operate for the editors; and the site faster, more informative, consistent and visually pleasing for users.

Third-party add-ons:

[Update, 2012 May 28] The Music Box Films site has been split off, redesigned by others, and is now no longer running on EE.

Backstage at the new US Sports Camps web site...

Sponsored by Nike, US Sports Camps is a fabulous, accessible nationwide directory of sports camps for adults, teenagers and children.

A page at the US Sports Camps site

 

Colorado-based OptiSite won the tender to redesign ussportscamps.com and migrate it from an ASP-based content management system to ExpressionEngine. As the data structure and screen output grew in complexity, OptiSite’s development partner, Vancouver-based vibe9design.com, contacted Engaging to assist with the EE backend.

The data challenge

The first challenge was to display a sport’s camps grouped by sponsor, program, type, region and city. The difficulty was the disconnect between the organizational channels (sports, sponsors, programs and camp types) and the geographic ones (regions, cities).

US Sports Camps: Channel Relationships vs Display Grouping

To get our set of camps, we looped through each program as determined by the sport and sponsor, then through each resulting camp’s type. But how then to display the selected camps by region and city?

By filtered loops. First, we got the set of all our selected camps’ regions and cities, then looped through the regions, displaying for each region any of its cities also found in our set of cities, then within each of these cities any of its camps in our camps set.

It worked, but was altogether a bit crazy, as we’d discover later.

The URL challenge

Another challenge was that the SEO-dictated URL structure for this particular site goes against the natural EE grain; instead of a URL’s segment #1 being the content type and segment #2 the particular content item, here segment #1 is the sport, #2 the sponsor, and #3 a particular camp, region or camp type. And if the camp in segment #3 does not belong to the sport in segment #1 and the sponsor in segment #2, then for SEO reasons the page redirects to the camp’s correct and only URL.

We achieved this URL structure by serving all pages from a single main site/index template that springs off conditionally to various embedded templates.

But this too created a major problem, as we’d also discover later.

Update 2011 Dec 27: Writing some 9 months later, after having worked with Structure, it’s clear that this impressive add-on would probably have been perfect for the URL challenge posed by this site.

The legacy challenge

The site has hundreds of legacy URLs to redirect to their new, SEO-friendly replacements. We automated many of these by having templates parse their URL query strings to derive and do the redirects. For the remainder we set up a Redirects channel.

Therefore the first thing that the site/index template does is check against all the entries in the Redirects channel. Only if there are no results does it proceed to serve a page, otherwise it redirects to a URL specified in a Redirects channel field.

Bill Blitz of OptiSite, pleasantly surprised that automated redirects could even be done, calls the setup “a thing of great beauty.”

The performance challenge

So what were the horrors that we came to discover? That some of this functionality comes at a deadly price: performance. Firstly, the server was overloaded by the many loops within loops required to display the camps by region and city within sport, sponsor, program and camp type. Derek Jones, EllisLab’s CTO, stepped in here, insisting that the efficiency simply had to somehow be improved. Secondly, the single template that enabled SEO-determined URLs violated EE’s template caching method, resulting in uncached complex pages that could take up to 20 seconds to load.

We solved the server load problem by changing our display method from filtered loops to extended objects; instead of gathering all the pertinent camps’ regions and cities and doing the loops and filters as described above, we extended the initial set of camps to contain their regions and cities and be sorted by them. This was achieved with a single SQL query, rather than the crazy 200 or so generated by the filtered loops method.

We then regained template caching by creating templates for each of the first and second segments in URLs, ie, the various sports and sponsors (which fortunately at this site are reasonably static and few in number). The content of these templates is all identical — each simply points back to the site/index template — but they serve as hooks on which to hang template caches. Thus fully reinstated, template caching enables pages to load almost instantly.

All this smooth backend functionality is however merely handmaiden to the exciting interface produced by OptiSite and Vibe9 Design — furthermore it’s only one part of this extensive site, which also features maps and a registration system. You can read more about the site at Vibe9 Design and view its Show-EE page. Thank you Derek for your pointers, Bill for being such a great guy to work for, and Terry for late-night Skyping and bringing Engaging aboard to help you revitalize this national treasure.

A revamp and redesign for Antidote Europe...

French non-profit Antidote Europe works to overcome the inertia of decades of outdated and horrendous vivisection, updating research and testing with more modern techniques such as toxicogenomics. For years their web site antidote-europe.org was faithfully maintained without a content management system; press releases and articles were added regularly but often lost to the visitor due to the site’s lack of information architecture.

Engaging.net was honored to be approached to revamp and redesign Antidote’s web site. [Update 2013 Mar 22: Maintenance of the site has changed hands and is now run on a WordPress theme].

Homepage at the newly redesigned antidote-europe.org

 

h2. Brief

Antidote’s CEO, Dr André Ménache, told us that although they were happy with their written content — “it provides cutting-edge information to the consumer public and our members on issues that include animal research, environment and public health” — they were unhappy with the presentation, which they felt was too basic and outdated. They wanted the home page to be more attractive, with images and graphics, and to better convey their involvement in cutting-edge science and consumer protection.

Architecture

To structure the site we shoehorned its content into various channels, then grouped the channels.

The main channel group, the resource channels, is comprised of the articles, interviews, lectures, letters, petitions, posts, press releases and texts channels.

Serving as a library of sorts for these are the multimedia channels: audios, documents, photos and videos.

There are also a handful of supporting channels: signatories (for petitions and letters), persons (for interviews and signatories), organizations (for persons and signatories), and redirects (for URLs from the previous site).

Antidote usually has a public relations campaign running — currently it’s “Danger, Bisphenol!” aimed at banning the widely-used chemical bisphenol A — so that much of the content in the resource channels relates to various campaigns, and campaigns serves as the grouping channel. Campaigns also influenced the design: since the latest campaign is what the organization is currently promoting, it dominates the homepage.

Antidote Europe content channels schema

Design

The homepage is comprised of just two parts: a main display of the latest resource channel entries relating to the current campaign, together with a large image related to the campaign; and a side listing of all the other latest resource channel entries, ie, those unrelated to the current campaign. The main-display-plus-side-listing layout is then used throughout the site.

For the site-wide header, Andre sent us three images to use: the organization’s logo, a background of multi-colored dots representing a DNA chip, and Leonardo da Vinci’s Uomo Vitruviano with the dots in the background. The visual design was built around these, together with a 960-pixel grid and the two-level site menu from Khoi Vinh’s upcoming Basic Maths EE theme.

The extensive site-wide footer provides a site map and a more detailed look at three of the resource channels: articles, interviews and lectures.

Language

Antidote Europe is a French organization but has a growing presence in English, so the site is bilingual. If the user is visiting for the first time, the ExpressionEngine IP to Nation module detects his country. If that country is French-speaking, the site is displayed in French, otherwise in English. The language is saved to a cookie and from then on the cookie sets the language.

The user can change the nation-based cookie setting by clicking on one of the language buttons. (Currently the site has no registration form, but once it does, the member’s localization settings will also override the nation-based cookie setting.)

Made much easier by Tim Kelty’s fabulous Field General extension, every field name in the site has an “_en” or “_fr” suffix, letting it be displayed in either language. As a result, the URL for each resource remains the same regardless of the language.

Press releases

Antidote regularly sends out press releases. The new site makes this very easy, thanks to the Multiple Newsletters extension. With just a few clicks, the site editor can send out the latest entry in the press releases channel to mailing lists in both English and French, each formatted in simple HTML suited for email clients.

Add-ons

The site’s ExpressionEngine installation (v1.x) makes use of the following add-ons:

Plugins

  • Find and Replace (Low)
  • Image Sizer (Lumis)
  • Language Date/Time Convert (EEGuru)
  • Nearby Entries (Engaging.net)
  • Textile (EllisLab)
  • Tied Entries (Engaging.net)

Extensions

  • Clone Entries (EllisLab)
  • Custom System Messages (Brian Litzinger)
  • Edit Alert (EllisLab)
  • Edit Remember (Mark Huot)
  • Edit Tab AJAX (EllisLab)
  • Field General (Tim Kelty)
  • FieldFrame (Brandon Kelly)
  • Filter by Author (EllisLab)
  • LG Add Sitename (Leevi Graham)
  • MD Live Search (Masuga Design)
  • Multiple Newsletters (Cocoaholic)
  • Publish Tweeks (nGen)
  • SL Field Formatting (Stephen Lewis)
  • Textile Editor Helper (Imagehat)

Field Types

  • File Field (nGen)

Please read

Take a look at some of the actual contents, especially the guest interviews with scientists campaigning to reform biological research and testing.

Progress at the Israel Center for Social & Economic Progress...

Lately Engaging.net has most often been tapped for fulfilling back-end system dreams, so it was an exciting pleasure to get back to the front-end for the redesign of the Israel Center for Social & Economic Progress web site. The pro-market thinktank’s previous site design, made back in 2001 for 800px-wide screens, was beyond stale.

The ICSEP site has three types of content: commentary by founder and president Daniel Doron originally published in newspapers and magazines; information about the organization, including its rationale and programs; and updates on recent activities held under the auspices of these programs, such as individual conferences and reform plans. Our brief for the homepage (which is all we’ll discuss here) was to display all three types of content, along with new video and a donate form, without being overwhelming.

  • Client
    Israel Center for Social & Economic Progress
    Jerusalem, Israel
  • Services
    Web Development

The redesigned homepage at ICSEP

 

h2. A golden ratio framework

For visual clarity we developed a Cascading Style Sheets framework called Goldens that sizes columns within a 960-pixels-wide layout and divides them approximately by the golden ratio, 1.618. This makes every column either the same width as the one adjacent to it or about 1.618 times wider or narrower, and makes the total width of any two adjacent columns (where they’re not of equal widths) be as to the wider column as the wider column is to the narrower. Having all elements of the site conform to this framework unites the site visually into an organic whole that we hope pleases eye and mind.

The programs matrix

The main element on the homepage is the Programs Matrix, a three-column listing of target audiences, activity programs, and an intro text on each program. In a space of just 575 by 390 pixels it provides a comprehensive overview of ICSEP’s work.

Since there are currently ten programs, there’s no space to display intro texts for them all. Instead, mousing over any program title displays its intro text only; the display area flashes as a signal to the user that it’s changed, and the jquery hoverIntent plugin ensures that the change isn’t triggered accidentally.

The Programs Matrix appears not only on the homepage but throughout the site wherever a listing of programs is required. This modularity contributes to a reassuring consistency.

Open-source video

Alongside the Programs Matrix, in a space 1.618 times narrower and on a contrasting background, the video area showcases ICSEP’s introductory showreel. (It features luminaries such as Israeli Prime Minister Binyamin Netanyahu, Soviet dissident and Israeli minister Natan Sharansky, and British businessman Lord Stanley Kalms each endorsing ICSEP.) The open source Flowplayer video player is skinned in the site’s color palette.

Luminaries on the march

Below the Programs Matrix and the video area is a set of testimonials marching across the entire page. This horizontal band serves as the fold, separating the more general content above from the more specific below. The march is powered by the jQuery jCarousel and Easing plugins.

And now, the news

Beneath the marching testimonials appear the Recent Commentary and Recent Activities lists, which are the most frequently updated content on the site. These two elements follow the principles established above in the Programs Matrix:

  • layout by Goldens framework
  • mouseover by hoverIntent to display only one intro text at time (here a jQuery accordion)
  • modular and exclusive means of display throughout the site for their respective content.

The ask

To the right is the Donate area. Its contrasting background has flowed underneath the marching cards from the video area above, suggesting that by donating to ICSEP the user joins the luminaries in the video who appreciate and support ICSEP’s work. (The donation form is actually a registration form, so that donors can keep track of their donations on their My Account page.)

The rest

The rest of the homepage is header and footer, both of which appear throughout the site. The footer features the organization’s tagline in a tab that mirrors the site menu up top. Meanwhile the header contains not only the organization’s name and logo in the masthead, but also — unusually — a diagram outlining the thinktank’s rationale.

Take this home

Finally, flowing from the header to the footer interspersed throughout the homepage are four sentences in large type that follow each other logically as well as visually. They state the following:

  1. Chronic economic problems threaten Israel’s national survival.
  2. ICSEP facilitates crucial economic reforms and helps overcome resistance to them.
  3. Renowned policy-makers and opinion-shapers appreciate and support ICSEP’s work.
  4. You can support ICSEP now by donating online.

And to sum it all up, in the footer appears the organization’s tagline, a quote from Pirkei Avot, the Ethics of the Fathers: “Where there is no bread, there is no Torah.”

Take Control Books, now with account management...

Back in April 2009, Engaging.net helped Adam and Tonya Engst power takecontrolbooks.com by ExpressionEngine; a first phase. In June of that year, phase #2 automated updating Take Control ebooks from links within the PDF ebooks themselves. Last week (July 21st) we launched phase #3, the most ambitious yet: account management.

 

As explained in an email sent to over 48,000 Take Control customers (now users!), the new system lets you log on and:

  • See a list of — and re-download — all the ebooks you’ve purchased, as well as any free updates (no more worrying about losing them)
  • Log in to the mobile version of your account from an iPad, iPhone, or iPod touch (the mobile version has different options)
  • Quickly determine if there are upgrade discounts available for newer editions of ebooks you currently own
  • Download EPUB and Mobipocket versions for recent books to use with ebook readers
  • Link multiple email addresses to your Take Control account, so orders from all of them appear in your library
  • Set the email address that receives Take Control-related email
  • See throughout the site which ebooks you own and which you’re eligible to buy at a discount.
  • Change your password and real name (which was picked up from your order information)
  • Choose to be alerted to ebook updates, new books, and sales
  • Get upgrade offers or special pricing based on ebooks that you already own

In addition, the system lets the site manager easily:

  • Add and remove a user’s ownership of a book
  • Change the primary email associated with a user (users can have multiple emails associated with their account)
  • Change the email associated with ownership of a particular book to another of the user’s associated emails
  • Push free upgrades across the user base to qualifying users.

The account management system integrates with Take Control’s ecommerce database, thanks to close collaboration with the justifiably renowned Glenn Fleishman, who runs the server.

For the extensive AJAX involved, the system relies heavily on the jQuery .load() and .live() functions combined with Engaging’s own rather invaluable External Entries ExpressionEngine plugin.

“We really are incredibly happy with the system overall,” Adam wrote in an email. “When we released four iPad books recently, having the full EE system in place probably saved several full days of work.”

Come springtime, southeast England’s countryside is powered by ExpressionEngine...

Countryside 2010, a government-supported initiative to promote outdoor activities in the southeast of England, showcases hundreds of events taking place in the countryside from 29th May to 13th June. Commissioned by Rural Ways to implement the site, Dominic Sawyer of Hastings-based Dot Tourism selected ExpressionEngine as the site’s publishing system and tapped Engaging.net to deploy it.

Since the purpose of the site is to help visitors find events, the Search Events functionality needed to be quite comprehensive — more comprehensive than ExpressionEngine’s native search functionality allows. Visitors must be able to search events not only by criteria and keyword but also by county and date — and since some events have non-contiguous date ranges, this was yet another complication to overcome. But we did.

Also, events are added not by the site administrator but by the individual organizers of the events themselves, so the site needed a specially-designed events publish/edit screen. As of this writing over 250 organizations have published almost 500 events on the site, making it a fabulous resource for locals and visitors alike this spring.

Get saltEE: salt-co.com retrofitted with ExpressionEngine...

The folks at salt., the London company that helps finance, package, launch and sell films, were very happy with the design and content at salt-co.com produced by The Foundry Works, working with The Danny Barnes here in Brighton. But salt. wanted more control over the site’s display; although produced using PHP pages, no content management system was installed, and any editorial change required emailing Danny to do it.

salt-co.com homepage

 

salt. agreed with Danny that what they needed was a content management system, and Danny recommended ExpressionEngine and enlisted Engaging.net and the ExpressionEngine Consulting service to ensure that the site’s EE setup would be robust, up-to-date, aligned to EE’s strengths, and that few if any changes would be visible to the visitor.

Because the site’s design, content and front-end architecture were already done, we could focus on the back-end architecture and template coding. For the CMS to have as much flexibility as the client had gotten used to, every type of content with a one-to-many or many-to-one relationship with another type of content needed its own ExpressionEngine channel. The result was the following data structure, heavily centered around the fundamental unit of the site, namely, film titles:

Danny and your author, Adam, then collaborated on installing and configuring EE with this architecture. That done, he went off to take care of the data population. We reconvened to undertake the coding.

One novelty was salt.’s password-protection system, where a password is required to see some of a film’s related content. Rather than basing this on the visitor’s login and member group, as is standard in EE, salt. wanted to continue providing access based on film title alone, without logins and site membership. The solution was to add at the back-end a password field in the films channel, and at the front-end a simple form for the visitor that writes to a cookie; if the value of the cookie matches that of the password field, then once the form has been submitted and the page reloaded, the visitor can view that film’s password-protected content.

Check it out — regardless of what’s powering it, salt-co.com is at the very least a fun collection of film trailers to watch.

Extend ExpressionEngine’s reach with External Entries v2...

A

As ExpressionEngine becomes more deeply embedded in organizations’ business processes, there’s more of a need to integrate it with other systems. The External Entries plugin helps make this easier. It also helps you manage your EE database.

The plugin enables you to select from, update, insert into and delete from a table either within your EE database or any other MySQL database on the internet to which you have administrative access. This means your site can easily import and export data to and from EE and among the backends of any number of other MySQL-based systems.

Put the plugin in its own EE template, call the template with jQuery’s .load() and .on() functions for AJAXy goodness, and your web site is now a web app!

One possible use is when deciding how to approach a catalog for ecommerce. Do you publish your product catalog as EE entries? Or as entries in your ecommerce package? Or both? This plugin could tip the balance towards keeping them in the ecommerce package only, as it enables EE to easily view, edit, create and delete them over there.

External Entries is now free and released under the GPL license. It works in both EE v1.x and v2.x.

As ExpressionEngine becomes more deeply embedded in organizations’ business processes, there’s more of a need to integrate it with other systems. The External Entries plugin helps make this easier. It also helps you manage your EE database.

The plugin enables you to select from, update, insert into and delete from a table either within your EE database or any other MySQL database on the internet to which you have administrative access. This means your site can easily import and export data to and from EE and among the backends of any number of other MySQL-based systems.

Put the plugin in its own EE template, call the template with jQuery’s .load() and .on() functions for AJAXy goodness, and your web site is now a web app!

One possible use is when deciding how to approach a catalog for ecommerce. Do you publish your product catalog as EE entries? Or as entries in your ecommerce package? Or both? This plugin could tip the balance towards keeping them in the ecommerce package only, as it enables EE to easily view, edit, create and delete them over there.

External Entries is now free and released under the GPL license. It works in both EE v1.x and v2.x.

  • Version
    2.6.4
  • Documentation
  • Type
    {categories backspace="6"}{category_name}
    {/categories}
  • Buy

Get more next/previous power in ExpressionEngine with Nearby Entries...

S

Sometimes a site needs more access to next and previous entries than ExpressionEngine’s built-in next/previous tags provide.

With the Nearby Entries plugin, you can display not just one but any number of next and previous links. Order them not only chronologically by entry date but by any column in the exp_channel_titles table, such as edit date, expiration date, entry id or title. Filter them using standard channel:entries parameters such as status, category and author (search by custom fields coming soon). And display their custom fields.

For more information, see the docs.

Nearby Entries is now free and released under the GPL license.

ExpressionEngine Forums threads where Nearby Entries is mentioned as a solution:

How to construct a URL to the entry before most recent?

Sometimes a site needs more access to next and previous entries than ExpressionEngine’s built-in next/previous tags provide.

With the Nearby Entries plugin, you can display not just one but any number of next and previous links. Order them not only chronologically by entry date but by any column in the exp_channel_titles table, such as edit date, expiration date, entry id or title. Filter them using standard channel:entries parameters such as status, category and author (search by custom fields coming soon). And display their custom fields.

For more information, see the docs.

Nearby Entries is now free and released under the GPL license.

ExpressionEngine Forums threads where Nearby Entries is mentioned as a solution:

How to construct a URL to the entry before most recent?

  • Version
    1.6.2
  • Documentation
  • Type
    {categories backspace="6"}{category_name}
    {/categories}
  • Buy

Introducing Tied Entries, a new dimension for ExpressionEngine sites...

You’re building a comprehensive web site in ExpressionEngine for a large church, where each ministry has activities, each activity holds events, and photos are taken at each event. You have a channel each for ministries, activities, events and photos. Photos have a relationship field linking to events, events to activities, and activities to ministries. You don’t want to enter redundant data, relating the photos to the ministry, because the system should already know that. But how does it? On the ministry homepage, how do you display the five latest photos from across that ministry’s events?

  • Version
    2.1.5
  • Documentation
  • Type
    {categories backspace="6"}{category_name}
    {/categories}
  • Buy

Tied Entries replacing embedded templates at the Engaging.net site

 

With difficulty, has been the answer. With a series of embedded templates or a long SQL query in your template. But now it’s easy. The new Tied Entries plugin enables you to span the relationships and reverse relationships among fields and channels every which way using the most intuitive shorthand we could devise — see the docs for details. It’s literally a whole new dimension for ExpressionEngine sites.

The license per commercial ExpressionEngine license costs $20, and it’s free to try before you buy.

Schools organization reports to state using ExpressionEngine...

Back in February 2009, Christian Schools of Florida put their Master In-Service Program — which handles ongoing teacher training — on their web site. But we left for later the report required by the state Department of Education summarizing points accrued for each component. That report is now up and running.

The annual report from the Christian Schools of Florida (CSF) Master In-Service Program (MIP) to the Florida Department of Education — in both summary and drill-down views

 

The Christian Schools of Florida’s Master In-Service Program manages the activities undertaken by its members to be re-certified as educators. Each in-service activity qualifies for credit towards a component set by the Florida State Department of Education. The new report summarizes the various types of participants — teachers, administrators and non-certificated people — who gain credit towards each component.

In previous years the report was compiled manually. This year however, since all participants in all activities are now entered into CSF’s MIP web system by individual school in-service administrators, the report is simply a print-out of a web page on the CSF site that’s a precise replica of the handwritten paper report. With over 500 teachers participating in almost 100 activities this year, the automatically-generated report has saved a lot of tedious, repetitive and error-prone manual calculations.

The report has two views: a summary, which is sent to the DoE, and the full details view, which drills down to the level of individual participants and shows how the summary’s totals are calculated. The report also generates warnings, such as when an activity has been assigned more hours than its component’s maximum.

The totals are not stored on the server, but instead are calculated each time the page is loaded. Some of this is done client-side using Javascript with the Numeric and Calculation jQuery plugins.

“Thank you for your good work,” CSF president Ken Wackes emailed at the conclusion of the job. “We are greatly satisfied.”

Take Control’s ebook updates now powered by ExpressionEngine...

So you’re a wise and savvy modern human and you’ve discovered the benefits of Take Control Ebooks. You want to take advantage of “the extra features you won’t get from a normal book,” as one of their taglines goes. You click on the “updates” link within your ebook. You are taken to a web page.

This page must detect which version of which ebook you have, and indeed that you are actually coming from the link within the ebook. Then it must provide you with any free and/or paid updates as well as specially-priced bundles with other books.

  • Client
    TidBITS
    Ithaca, New York
  • Services

Updates screen for the Take Control of Easy Backups in Leopard ebook

 

It must also link to news items and errata pertinent to that version of that ebook, with the news items pertaining to a range of versions of the book but the errors appearing only for this particular version.

Implementing this functionality was the latest phase in the ongoing job of converting takecontrolbooks.com to the ExpressionEngine content management system. “Wonderful,” wrote co-manager Tonya Engst regarding the new system’s features.

Thanks again, Adam and Tonya, for the opportunity to work on this site and the pleasure of viewing, if only from afar, your smooth operation. Next up for Take Control: account management.

Irving Design revamps London church site with ExpressionEngine...

After designing the new web site for the Golders Green Parish Church, Mark Irving of Irving Design asked Engaging.net to deploy the site in two steps: first as a static site, then as a content-managed site powered by ExpressionEngine. Wisely, Mark conceived the site to have only two layouts; every page (except the homepage) would conform either to a words-focused or a pictures-focused template. This elegant approach helped reduce the workload and thereby the cost.

The Golders Green Parish Church web site homepage

 

First, we coded the HTML/CSS from comps supplied by Mark. There were only three pages: the homepage, a page about children’s activities using the words-focused template, and a page about the church staff in the pictures template. Thank you “The” Danny Barnes for the HTML/CSS mark-up.

After launching the static site we began the dynamic setup, populating the EE installation with channels and fields. The EE channels were grouped into two types, core and multimedia, where entries in multimedia channels — such as photos, PDF documents and sound files — can be related to any core entries. Thanks again to Yvonne Martinsson of fellow EE Pro Network member Studio.Freewheelin for implementing this build-out so smoothly.

Another way we kept costs down was by relying on jQuery. Many of the site’s design wheels would have taken much longer had clever javascripters not already invented elegant ways to do them.

To wit, in Mark’s design all photos have dropshadows and photo sizes can vary. The jQuery Dropshadow plugin by Larry Stevens handles this nicely.

Mark wanted the homepage intro photo to be a slideshow. For this we recycled the trusty Cycle jQuery plugin by M. Alsup.

For the main menu, the corners of the first and last entries were to be rounded. There are a number of jQuery plugins for this, but I went with David Turnbull and Steven Wittens’s Corners because unlike others it handles transparency, which was required because behind the menu is a gradient background.

The menu itself runs on the Menu jQuery plugin by Marco van Hylckama Vlieg.

And in order to display photos fullsize from the photos layout, we added the Lightbox jQuery plugin by Leandro Vieira Pinho.

With extensive use of jQuery plugins on the client-side, a well-architected ExpressionEngine deployment on the server side, and a fresh and flexible design serving every page, this is an inexpensive yet powerful contemporary web site that the church staff members themselves are now operating.

Chicago arthouse and film distributor Music Box deploys ExpressionEngine...

It was a very pleasant surprise indeed when Chicago’s Music Box Theatre contacted Engaging.net to deploy ExpressionEngine for their two web sites, musicboxtheatre.com and musicboxfilms.com. Not only are movie-related sites fun to work on, but I actually knew the theater from back when I was a student at the University of Chicago.

Music Box Films homepage

 

My previous-century patronage is not however why Music Box made contact; instead, what happened is that Chris Welch, then Music Box’s web designer, had read about Engaging’s role in the EE conversion of subtraction.com and figured that what’s good enough for Khoi Vinh is good enough for them. So thanks again, Khoi! — this one was a satisfying bit of personal continuity.

Converting MBT and MBF to EE wasn’t only fun, it was also quite challenging, as Program Director Brian Andreotti and I discovered during numerous Skype conversations in which we hammered out the sites’ publishing business logic, which became more subtle and complex from an EE perspective the closer we looked at it. But that challenge — pushing EE to places I’d never taken it — was also fun. Really!

The result is two web sites that appear the same as ever — except where Music Box wanted design changes and additional features — but that are now regularly updated with ease by Music Box staff.

Thanks to the bright and generous Yvonne Martinsson of fellow EE Pro Network member Studio.Freewheelin for helping with the build-out.

Securosis migrates from WordPress to ExpressionEngine...

A security industry analyst, Rich Mogull also writes on security-related issues for TidBITS. When TidBITS’s sister-site Take Control Ebooks was recently migrated to ExpressionEngine, it was Engaging.net who did the job. So when Rich decided to move the web site of his independent analyst firm Securosis from WordPress to EE, he contacted Engaging.

The new Securosis.com homepage — fun!

 

To implement the migration, we imported scores of tags, hundreds of posts and members, and thousands of comments. For the posts, we used the new Solspace Importer module, which made that part at least easier and even fun. For tags, we first converted WordPress tags into EE categories, then in turn converted these into EE tags. And we set up a method to 301-redirect all old WordPress URLs to their new EE equivalents. Engaging.net also advised on the EE architecture — fields, channels, categories, URL structuring, etc. — and installed the standard clutch of controlpanel add-ons.

The new site was designed by Insight Designs of Boulder, CO. Rich did much of the EE templating himself.

In the period since the site was launched back in April, we’ve developed some additional functionality, including a consolidated comments management screen.

Mashing up Google Maps with ExpressionEngine search...

After succeeding on a previous job for Vector Media Group of New York City, co-principal Matt Weinberg tapped Engaging.net to build out the ExpressionEngine back-end for a new restaurant web site, alwayshungryny.com. The job contained a particular challenge: a geographical search facility — since dubbed “Create-a-Neighborhood” — wherein Google Maps are integrated with ExpressionEngine’s search.

Always Hungry New York’s Create-a-Neighborhood search

 

The formation of a rectangle within a Google Map had already been coded using the Google Maps API; Engaging built on this, integrating a coordinates-based clause to the EE search module that limits results to the area circumscribed by the rectangle. The geography-based search results can then be mixed with keywords and any of scores of categories.

Launched in April 2009, Always Hungry is a valuable resource for New Yorkers and visitors to the city.

Schools association adopts web system to manage teacher training...

Built with Engaging.net on ExpressionEngine and launched February 2009, the Christian Schools of Florida’s Master Inservice Program is not a web site but a web system, a secure area within the larger christianschoolsfl.org site produced by WebLadyBug.

Though the system does have some content, it serves primarily not as a publication but as a tool to help manage ongoing teacher training for CSF’s 25 member schools. Actively used by hundreds of teachers and dozens of school administrators, the MIP system demonstrates that ExpressionEngine — usually considered a content management system — can power a growing set of an organization’s business processes, and that a public-facing web site can become merely one facet of an integrated and streamlined browser-based organization-wide information management system.

That such a setup can now be produced at unprecedented low costs by small web development shops is a game changer. Organizations that previously considered both a dynamic web presence and an organization-wide management system to be beyond their means can — and should! — now consider developing both.

The Master In-Service Program homepage at the Christian Schools of Florida site

 

Details, details

At the heart of the MIP matter are activities. These are courses or seminars held by the member schools that meet Florida state requirements for inservice teacher training. New activities are entered into the system using an online form by an Inservice Coordinator assigned at each school. Each activity must then be approved by the CSF Inservice Director, who is informed automatically of submissions via email (using the Solspace Entry Notifications extension) and whose MIP homepage lists all submitted activities, each with a link to edit and approve.

There are two precursors to inservice activities. Since every activity is held by a school and meets the requirements of a component, we seeded the system with a) the 25 schools and b) the Florida Department of Education’s 123 components, complete with related downloadable documents (uploaded using Mark Huot’s File extension).

MIP data diagram

Most components award a fixed number of inservice points, but some allow variation, not only among activities but among participants within a single activity. These variations are handled within the activity application and participation report forms by using jQuery to show, hide and populate various fields depending on the values entered in others.

The homepage of a School Inservice Coordinator lists all his or her school’s inservice activities as organized by status — saved, submitted, approved or completed. A saved activity is one begun but not yet submitted for approval. A submitted activity is one pending approval by the CSF Inservice Director. An approved activity has been assigned a number by the CSF Inservice Director and given authority to proceed. And a completed activity is one that has already taken place, had its participants and feedback reports submitted, and been signed off by the school’s Approving Administrator.

Only after an activity has taken place can a School Inservice Coordinator report its participants, selecting teachers from a dropdown list of those registered in the system. Having reported all the participants (though there’s an opportunity to return and add more), the next screen is a matrix enabling the School Inservice Coordinator to submit the teachers’ evaluations of the activity. Only once the evaluations have been submitted can the School Approving Administrator then sign off on the activity, marking it complete.

This constitutes pretty much all the data entry required. The system can then produce at any time both an annual (academic year) and cumulative Record for each teacher, listing his or her participation in inservice activities together with the total number of inservice points accrued. Rather than store these totals within EE, they are calculated client-side whenever displaying records and report screens using Pengoworks’ Calculation plugin for jQuery, which makes it easy to traverse the DOM and do arithmetic. Each Record is accessible only to the teacher or to the school’s coordinator and administrator. Still in development is the report required by the state Department of Education summarizing points accrued for each component.

Pushing ExpressionEngine to power an online application requires one main insight: that members be brought within the fold of general EE content. For this they need a one-to-one binding with a content channel of persons. An add-on has been created to help with this, Leevi Graham’s LG Member List extension, but we found that the binding can be made more simply and helpfully by having each member be the author of themselves as a person. This requires presenting EE’s standalone entry form as part two of a two-part registration process. It helps that Solspace’s User module enables reducing membership to only an email and password so that all other data about the member, even his or her name, can be shunted into the persons content channel. The front-end result is a two-step registration process that feels normal.

We also used the User module to send keyed invitations to school officials to register as School Inservice Coordinators, Administrators and Approving Administrators, whereas anyone who registers at the site in the standard uninvited way joins the Teachers member group.

Less actively, the site also has screens listing all schools, teachers, administrators, inservice components and approved inservice activities. And of course there are screens for a member to edit his or her email, password and profile.

Finally, there’s an About MIP area containing more textual content, such as the purpose of the program and the relevant Florida state rules. These are entered in a dedicated content channel, but since the same publish/edit screen is used as that handling all the other types of content, albeit with a different set of fields, the MIP Inservice Director is already familiar and comfortable with it.

Although used by hundreds of teachers and dozens of school administrators, the system is managed by just one person, CSF Inservice Director Susan Taylor, who had to learn how everything works. In a lengthy series of online meetings using Skype for voice and Yugma for screensharing we combined project definition, development, testing and user training. From not knowing that she’s using what’s known as a web browser when accessing the internet — and that it’s called Microsoft Internet Explorer — Susan became adept at juggling among Firefox, Chrome and Opera to view the site’s processes simultaneously from the various perspectives of different users.

The result is an online system that works. The launch was gradual, as Susan brought in a growing number of administrators to test the system and provide feedback. Within a week or so some two dozen administrators and nearly 300 teachers had registered, and 30 activities were processed.

TidBITS takes control with ExpressionEngine...

Educate your customers, they say, but Engaging.net had little to teach the very smart and knowledgeable Adam Engst, co-founder of the venerable Macintosh newsletter TidBITS, publisher of Take Control Ebooks, who contacted Engaging to help redeploy the takecontrolbooks.com web site using the ExpressionEngine content management system.

Take Control Ebooks homepage

 

Takecontrolbooks.com had grown organically on the powerful Web Crossing platform, but Web Crossing is not really a CMS, and posting new books to the growing Take Control catalog had become an increasingly labyrinthine ordeal. Adam wanted a setup that would make the process painless.

No visual redesign was involved; in fact, visitors to the new site will be hard-pressed to notice that a completely new engine now powers their treasure trove of Macintosh knowledge. Instead, what they’ll hopefully see is more ebooks as the TidBITS mavens spend less time updating the site and more of it, to paraphrase the site’s homepage, helping leading experts provide us with the answers we need now.

See their brief take on the switchover at “Take Control Site Now Running on ExpressionEngine”.

Deploying ExpressionEngine for a French charity gateway...

Now standardized on ExpressionEngine for content management, Brighton-based creative web agency Websiteforall won the assignment to build Email Solidaire, a new web site on French charitable giving. The site’s owners, Paris-based internet marketers B2D1, wanted the ability to manage content themselves, mainly to add and edit charitable organizations and news stories about them.

After designing the site, Websiteforall principal Stephen James handed the HTML/CSS/Javascript files to Engaging.net and we converted them into ExpressionEngine templates and built the ExpressionEngine deployment to support them.

The work went quickly and the B2D1 folks were pleased with the results.

Update: The site is beginning to gain attention, with a mention in Marie Claire, “L’e-mail solidaire : un nouveau moyen d’aider !”.

Email Solidaire homepage

 

Websiteforall relaunches home site using ExpressionEngine...

Always pushing to improve offerings to clients, award-winning creative web agency Websiteforall set out to standardize content management onto a single system — and selected ExpressionEngine. The first step: to convert the Websiteforall site itself to EE. Websiteforall principal Stephen James asked Engaging.net to implement the EE deployment while he redesigned the site.

The result is an extensive portfolio that conveys Websiteforall’s services and track record more immediately than before. Indeed, so streamlined is the site that it’s produced by a single EE template.

Websiteforall homepage

 

Helping Khoi Vinh migrate Subtraction.com to ExpressionEngine...

If there be classics of web design then Subtraction.com is surely among them. The personal site of Khoi Vinh, now Design Director of nytimes.com, its design is so obvious and authoritative that it almost should be ubiquitous, and yet of course it’s unique. It has few rivals in the art of employing spacing to augment reading.

In January 2008 Khoi announced that he was switching the site’s publishing system from MovableType to ExpressionEngine. I offered to help out and he took me up on it. So I’ve written up a detailed explanation of the ExpressionEngine templates that now serve up Subtraction.com as of v7.1. See “How Subtraction.com was converted to EE”.

Subtraction.com homepage

 

Best Network Security switches from Joomla to ExpressionEngine...

Selling network security products and expertise, BestNetworkSecurity was running on the Joomla content management system and perplexing not only its users but even its owners. The site had various types of content, including products, vendors, seminars and articles, but all were being handled the same way.

As a wise man once said, things should be as simple as they can be, but no simpler. With the conversion to ExpressionEngine, we added enough complexity to the site architecture to simplify both its maintenance for the owners and its navigation for users.

Bestnetworksecurity.com homepage

 

Extreme Elements TV quits Joomla for ExpressionEngine...

Since Engaging.net doesn’t work with any content management system other than ExpressionEngine, it’s hard to say for sure whether it’s the best. But Florida-based Extreme Elements does — or rather, did: While Engaging.net built one site in EE for the adventure travel company, another agency built a second site in Joomla. After about a year Extreme Elements principal Paul Caswell threw in the towel with Joomla and asked Engaging.net to redo that second site, extremeelements.tv, in ExpressionEngine.

 

“Perfect” new CMS deployment for fabric fashion site...

Without a content management system, maintaining the relatively simple Carolyn Strauss Collection website had become cumbersome and time-consuming. Vector Computer Consulting sought “a way to automate this process with a Content Management System (CMS) that can take care of the entire process of uploading, resizing, and adding collections to the navigation lists.” Engaging.net provided a solution using ExpressionEngine, and upon trying it Vector principal Matt Weinberg christened it “perfect”.

“Aztek Travels”, one of the collections of fabric designs at the Carolyn Strauss Collection

 

Archaeological Center auction #40 biggest yet...

Because this Archaeological Center auction was so unusually large, the printed catalog could not be delivered to international bidders in time, so they relied on the website alone to view lots and make pre-auction bids on them.

Twice a year the Archaeological Center holds an antiquities auction at the Dan Hotel in Tel Aviv. The most recent, Auction #40: Ancient Coins, The Arnold Spaer Collection of Weights & Bullae, and Antiquities, was the biggest yet, with 876 items.

Auction #40 homepage at archaeological-center.com

 

To date, posting each auction online has served to supplement its black & white printed catalog by providing color images of the items. It has also served the public interest by forming an online exhibition of sorts, capturing antiquities for publication as they surface briefy between private collections. This time however, due to the unusually large number of items, the printing of the catalog was delayed until after the date of the auction, meaning that bidders who could not travel to Tel Aviv to view the auction items at the Archaeological Center showroom relied on the website to view auction lots.

In addition, the new pre-auction bidding sheet system ran for the second time and many used it to submit pre-auction bids. The bidding sheet works like an online shopping cart. It uses the NebuCart package to merge seamlessly with ExpressionEngine, the site’s content management system.

The Archaeological Center website has been made with Engaging since 1997.