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 HTML, Designing in the Browser.)
- Expanding/collapsing content
- 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
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.
// only with js enabled are synopses hidden by default:
$('.projects .works__synopsis').attr('aria-hidden', 'true');
margin: 0 !important;
padding: 0 !important;
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.
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:
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.