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

Kids RPG Journal – #46 Character Sheets

I finally designed character sheets and monster sheets that I am happy with. It includes seven sections to help me role-play the characters from one sheet.

  • Profile: the character’s name, overall concept, and portrait
  • Role-Playing: the character’s motivation, appearance, voice and mannerisms
  • Keywords: Just a list of keywords to keep in mind while playing the character
  • Health
  • Custom Moves: key actions the character can take
  • Gear: anything cool that they carry on their persons
  • Thoughts: Short quotes in the character’s voice about key topics

The format will allow me to quickly scan things at a glance, so I don’t miss a key characterization and focuses on creating a compelling and memorable character. Now that the design was completed, all I had to do was create a sheet for all of my NPCs (non-player characters).

The main problem with designing my various game materials with Clip Studio on the iPad is that adding and updating text is kind of a pain. The popup keyboard takes half of the screen and maintaining font styles can be inconsistent. I wanted to find a better flow for the kind of sheets I plan on putting out with lots of text and styles.

crowded view on Clip Studio Paint for iPad when editing text

To test things out, I built out a NPC sheet in Affinity Publisher to see if I could get something that would be easy to templatize and make multiple characters with minimal design work (outside of the character portrait). The template was more manageable than Clip Studio, but I still had to manually click into each field to update content and that would get tedious pretty quick.

affinity publisher character sheet template

Publisher, Affinity’s competitor to InDesign, is still in beta and does not have the full range of features that it will hopefully have later on. One bit of functionality that InDesign has that Publisher is currently lacking is the ability to import data into a template. 

Unfortunately, this was kind of a deal breaker for me. And I’m not about to go back to Adobe’s products.

I work with lots of data in my day job and I enjoy building out data systems. I knew if I could find some way store data and import it into   a template without messing with design, I would have an ideal setup.

So I went back to the drawing board and back to my comfort zone, building it in HTML. I created all of the data tables and input a good chunk of content into the database, so I could test out the template and started building the web pages. This wasn’t a small task and I’ve spent about three weeks putting everything together.

harrowlands.com character web page - plunk

And I’m finally finished with the basic template for NPCs on the upcoming Harrowlands website. The three characters I have completed are:

Plunk

Momma Yrla

Gurla

Having everything online and in a database has many benefits: I can access with any device, everything is easily indexed, and of course the more content I can put online, the better the search rankings become. And most importantly, I am getting started on building the knowledge base for the Harrowlands game.

The one place this is lacking is when I want to have a copy of the sheet in hand.

Which is why one of my next steps is to edit the print CSS styles to give me the ability to print a single page directly from the browser. It may lack a little of the nuance of a custom designed sheet in a graphics program, but I won’t need things to be super pretty for games. Besides, I’m confident I can get the stylesheets to print out something quite nice.