Fierce Inc. Website Redesign & Build

Animation should never be without meaning. Instead, it should provide value to the user, signaling an action, or a path, and it should be natural. (Just because we can animate something to defy the laws of physics, doesn't mean we should.)

Adding animation to the programs listing page helps the page feel lively, but the animation doesn't distract from the content because it feels natural. For example, if an item falls off the page, it does just that: it falls as if it were caused by gravity. And, when objects animate into view, they do so in the same path we would read them: top to bottom, left to right.

Just like animation, if you’re going to “go big” with color, make it meaningful. And, one great way to leverage color is to use it for way-finding. In this case, each tile on the program listing page is a unique color. Importantly, the color is not arbitrary, and it coordinates with the featured image selected for each program page. The color is attached to the image, and that color populates automatically to the program listing page. This builds continuity across the site that, just like color-coordinated subway signage and maps, helps the user stay oriented and get exactly where they want to go next, with ease.

Why not take the header and sidebar to the next level, and integrate site navigation as a coordinated, animated front? Keeping with the organizational principles we’ve come to expect, the header features links to all the “top level” pages on the site, and the sidebar offers access to “intrapage” navigation. But, with scrolling, the header collapses, maximizing space for the content, while still keeping its links available. The sidebar, in turn, pins to the header so that its content, too, can always be accessed.

Of course, as discussed above, the animation of these features mimics the physical world so that it feels natural, not forced, or gimmicky. As the user scrolls, it is as if the sidebar is a rubber block sitting on a board that is the page: the block moves along with the board, until it bumps into the header, and springs down in a reverberating action.

Though more commonly known in the world of print media, words that fall alone to the last line of a paragraph or heading are referred to as “widows” or “orphans.” In a text-heavy site, attention to typography is especially important, but with a responsive site, this can be difficult to control. Rather, it was, until we solved that challenge with a custom JavaScript solution that we wrote, Rescue Widows & Orphans.

Essentially, the script scans a page and pulls a word down from the penultimate line to prevent the widow or orphan from remaining. The solution is both dynamic and context-sensitive: if pulling a word down to the last line would negatively impact the layout as a screen narrows, the script detects this and turns itself off to preserve the design.