Wednesday, March 11, 2015

Loot Generator Redesign: Now Infused with Bourbon!


I recently redesigned the Savage Worlds Fantasy Companion Loot Generator. There were a few reasons for this change. If you're curious about the details of the changes or what those reasons were, read on.

Fixes to Display Names for Scrolls and Tomes

Scrolls and Tomes always listed as "Scroll" or "Tome" which is rather non-descript when you're bookmarking, printing, or scrolling through your loot. I've added the name of the power to the name of the item in the cards to make them more obvious.

Better CSS and Responsive Grid Frameworks

I wanted a cleaner design with cleaner markup. Using Bootstrap felt awkward. It's bloated, pollutes markup, and overprescribes styles on elements. I never cared for it. For both personal and professional reasons, I wanted to learn how to create something using a framework that wasn't Bootstrap.

I have lately been writing CSS using Sass for projects at work, and I've become obsessed with it. I wanted to bring it to some personal projects, too, and this was a good candidate. Additionally, I recently learned about the Bourbon suite of Sass mixins, including its grid system called Neat. It's essentially a build-your-own-Bootstrap approach to writing your CSS but with modular pieces and an additional scaffolding library called Bitters. I also made use of a couple of the components from Refills, modified of course.

As a result, I decided to use this suite and also pull in the Font Awesome SCSS to compile with the rest of the SCSS into a single minified CSS file.

Neat also provides a flexible grid system that gave me better control over the breakpoints at which the responsive design shifts. Bootstrap's breakpoints don't start until 768px, but I could effortlessly create a new breakpoint in Neat that starts at 480px. (By the way, Neat has a mixin that allows you to specify a value in pixels and converts it to ems for better scaling.)

Improved Accessibility

Font Awesome is cool. It gives you vector font-based icons that are easy to drop in. The problem is that they are not accessible when screen readers and other accessibility tools interact with them. Those tools try to "read" the icon glyph and sometimes are not representative of the icon itself. Instead, I added ARIA attributes to "hide" the icons from those readers.

Cleaner Presentation

The previous design was better than my first, but I was just learning Bootstrap at the time. I tried to avoid using the overly nested markup that Bootstrap required, but the breakpoints felt awkward. I also felt like the options shouldn't have been hidden at any point while using the app, and it didn't need to compete for space with the About section. ("I want to read the About content," said no one ever.)

The new presentation is cleaner, tighter, and focuses on what's important while interacting with the UI. I see some areas that still need improvement, but it's an iterative process. I'd like to see how users respond to this UI first before making additional changes, too.

Notification of Offline Updates

I make use of HTML5 appcache to make the app available while offline, but appcache is tricky. It'll redownload changes when you load the app, but it won't actually refresh or update the app immediately. I've added a dialog box that alerts the user an update is available and asks if it should reload. Hopefully, this means you'll immediately know if there is a newer version of the app before you start using it.

Remaining Work

I still need to refine the print sizes of the item cards in the print CSS. Right now, they aren't sized or displaying borders correctly.

As always, feel free to let me know if you have any issues or questions.

Links