Kids RPG Journal – #58 Optimizing for Print

Instead of curling up with the iPad and doodling monsters and enjoying the latest season of Stranger Things, I went down the coding rabbit hole and optimized the Harrowlands website for mobile and print. This cleanup has been on my list of things to do ever since I started building the site and my initial attempts were inconsistent.

This time, I went into the CSS (cascading style sheets) and stripped out everything that was not necessary or responsive. I won’t go into the technical CSS  in-depth here, because this is meant to be more about my process as a gamer, not a developer, so I’m going to focus on my goals and what I accomplished.

Since Harrowlands is primarily a resource for me to use for my games with the kids, I wanted it to be flexible as possible. I primarily access it using the laptop or the iPad Pro, which is what I originally built the site out using, but I sometimes like to check resources on my phone, and I definitely want to be able to print out things like monster and character sheets, because in the end I am a big pen and paper guy.

For this post, I am showing screen shots of http://harrowlands.com/monster/ghoul.

screenshot of harrowlands ghoul monster page (desktop)

The aforementioned character and monster sheets are definitely the most complicated portions of the site (everything else is pretty bare-bones basic) and these are the ones I most want to be perfect in all formats.

Both have a top section and a bottom section split by the keywords. Each of these sections needed to be be flexible with the components within, expanding and contracting based on the device or format. Everything is based on viewport units, which adjust elements based on the width of the screen. At first, I thought I had to have the printed version in all static units (pixels), but other than maintaining heights or certain components, I did away with pixels completely.

For mobile, every component within each section needed to fit across the screen and be arranged in a column for scrolling.

screenshot of harrowlands ghoul monster page (mobile)

For print, the importance was to try to fit everything on a single printed page while maintaining the essential desktop layout.

screenshot of harrowlands ghoul monster page (print preview)

This will give me a lot more flexibility when creating new monsters because I can easily look something up when I have an idea and I can easily print out any monsters and characters I want to use in the game or want to scribble notes on their sheets for revisions and additions.

printed version of ghoul monster sheet

Leave a Reply

Your email address will not be published. Required fields are marked *