Designing Fictions , Part 4: Scripting & Animations

(This is the fourth part to the process of designing my Fictions homepage. Here’s the earlier parts, if you want to read them beforehand: Typography, Thoughtful HTMLDesigning in the Browser.)

There are only 2 main uses of Javascript on the Fictions homepage, namely:

  1. Expanding/collapsing content
  2. Toggling the aria-hidden attribute for accessibility purposes

I will cover the second point in the next post, where I will share my approach to handling accessibility issues. In this post, I will cover point 1 in detail, and highlight not so much the technology that is being used here, but the approach I have taken and the reasons behind it, which I think is way more interesting.

Expanding/Collapsing Content, the Complete Way

Expanding and collapsing the synopsis by clicking on the speech bubble icon

As you can see above, the synopsis for each fictional work is hidden from view at first, until the user clicks on the speech bubble icon. This assumes the user is not necessarily interested in reading every one of the synopses, so the content is hidden until the user is ready to read them. Another benefit to this approach is that the page is not cluttered by non-critical information on page load. This is a really basic UI that has been used millions of times on practically every modern web application/page.

There are two points here, however, that warrants attention. First, the fact that the synopses are not actually hidden by default, but set to hide by Javascript on page load:

// only with js enabled are synopses hidden by default:
$('.projects .works__synopsis').attr('aria-hidden', 'true');

As you can see from the above code comment, it is only when Javascript is enabled do I use scripting to set the attribute aria-hidden to true, which effectively hides the synopses (checkout out the relevant CSS below). As you can imagine, this is to ensure that even for users who have Javascript disabled, the synopses are available for them to read. Only when Javascript is enabled do we—are we able—to offer the advanced option of showing/hiding the synopses on demand.

This is how the page looks on Safari, with Javascript disabled:

Fictions homepage on Safari, with Javascript disabled

In a world where tabs and accordions and whatnot rule, too often a user turns off her Javascript, and finds that nothing works anymore. And what’s worse, of course, is that many development teams don’t care. “If you don’t enable Javascript, there’s very little I can do for you” is what they’re essentially saying. And the truth is, in a world dominated by business decisions and costs and benefits, I can’t fault them for deciding it doesn’t make sense to spend a large chunk of their time catering for maybe 1% of their customer base. But given that this is my personal site, I’d like to try my best to cater to users from all backgrounds. And I certainly feel good—and professional—in taking this approach.

The second point worth noting is that instead of using Javascript to show/hide elements, I have chosen to use CSS Transitions. Support for CSS Transitions is pretty decent across browsers, and for users with lesser browsers (e.g. IE8 and Opera Mini), the toggling still works, only without the fancy animation. I am sure these users can live with that, if they are using less capable browsers to begin with. Of course, the main reason for using CSS instead of Javascript is that the code is more cleanly decoupled, and I don’t need to worry about inline styles overwriting my existing styles and causing unexpected problems. Everytime I want an element to transit from, say, hidden to visible, all I need to do is to toggle the related class or attribute (in this case aria-hidden). Checkout the CSS:

[aria-hidden="false"] {
height: auto;
opacity: 1;
}
[aria-hidden="true"] {
margin: 0 !important;
padding: 0 !important;
height: 0;
opacity: 0;
overflow: hidden;
}

Showing and Hiding Sections Without Javascript

As mentioned in the last post, on medium-size viewports, I’ve decided to partially hide the Fictions section until the user focuses on it. The interesting thing to note here is that while I used Javascript to add or remove attributes to the synopses in order to show/hide them, for the Fictions section, I didn’t use a single line of Javascript.

The main difference here is that the Fictions content is not really hidden from users. If you are using a screen reader to read the page, you won’t realize that the content is partially hidden. After all, unlike the synopses, the Fictions section is critical information that tells the user what the page is about, and I would want the user, whether or not he’s visually impaired, to read this information.

All I’m doing to the Fictions section, then, is to change its positioning based on whether the user has focused his mouse/keyboard on it. Again, this is achieved simply by using CSS Transitions.

Screencast showing how the About section focuses into view on click
Same screencast as shown in the last post

All without the hassle of dealing with script events and states—splendid.

Caveat — Not.

If you visit the Fictions homepage, you may notice the below on page load, where the synopses are seen to be hidden from view, and the dots in the background shift at the same time:

Elements on the page reorganizing themselves into position on page load

This is obviously caused by Javascript hiding the synopses on page load. Similar to a FOUC, this visual effect was unplanned. But you know what? I like it a lot. Not only does this give the page some needed movement, but it also gives a visual hint as to the fact that there is content (i.e. the synopses) that can be toggled on and off. As such, I happily left it alone instead of worrying about it. In a commercial setup, I bet, they will be concerned and asking for this semi-FOUC to be “fixed”. With my personal page, though, this kind of unplanned spontaneity is actually preferred.

And that’s it for this post. In my next post, I will explore the topic of accessibility and how I deal with it on the Fictions homepage.