RPGs on a Small Screen

/* <a class="footerLeft" href="#" onclick="history.back()">Back</a> */
</style>

###

#### RPGs on a Small Screen

###

</div>

Chances are that you're here to convert a new or existing set of rules for a game into an easy-to-digest format for a mobile device. Well, friend, you've come to the right place!

In this guide, I'll provide you with some nifty tools and tricks that aim to improve your reader's experience when reading large roleplaying game (RPG) documents and source material on a phone screen. I have taken direct inspiration from the [Phone PDF Information and File Creation Guide](https://onebookshelfpublisherservice.zendesk.com/hc/en-us/articles/360035586453-Phone-PDF-Information-and-File-Creation-Guide) and the amazing folks who created the [Pugmire](https://www.realmsofpugmire.com/) and [Zweihander](https://grimandperilous.com/) RPGs and their respective "Phone PDF" versions ([here](https://www.drivethrurpg.com/product/272533/Pugmire-Core-Rulebook-Phone-PDF) and [here](https://grimandperilous.com/introducing-the-phone-pdf-for-zweihander-grim-perilous-rpg/)).

This document aims to provide you with some guidelines and a GM Binder template that you can follow to format documents of any length and scope in a way that is easily digestable and navigable by readers on a mobile device. Using this template for your game rules will mean that your players can read and review your game rules on GM Binder, or "Print to PDF" in Letter format, without having to zoom in or scroll around on their device at all. Enjoy!

<div class="pageNumber" style="z-index: 1">Created by /u/raspilicious</div>

\pagebreak

###

<h4 id="contents">Contents</h4>

###

- [<span>1</span><span>Introduction</span>](#top)
  - [<span>2</span><span>Contents</span>](#contents)
  - [<span>3</span><span>Three Core Principles</span>](#three-core-principles)
    - [<span>4</span><span>1. One-Column-Format</span>](#one-column-of-text)
    - [<span>4</span><span>2. Interactive Keywords</span>](#interactive-keywords)
    - [<span>5</span><span>3. Quick-Access Toolbar</span>](#the-toolbar)
  - [<span>6</span><span>In Conclusion</span>](#conclusion)

</div>

\pagebreak

<h3 id="three-core-principles">Three Core Principles</h3>

To achieve a high level of readability and ease of navigation throughout your document, follow these three core principles:

1. Use only one column of text
2. Make keywords link to their own section
3. Have a navigation toolbar on each page

Using these three principles on a device with a small screen is definitely challenging. One of the hardest things may be working out where to split your sections. The biggest piece of advice I could give you about this would be to try and split your document sections in appropriate places so that each section still makes sense. Your reader will have to move from page to page as they would in a larger-format book, but intelligent section breaks make this much easier to deal with.

<a class="footerRight" href="#contents">Contents</a>

\pagebreak

<h4 id="one-column-of-text">1. One-Column-Format</h4>

Does your reference document have multiple columns and big, beautiful artwork throughout it? Great - it's perfect for somebody to read a physical copy or look at on a computer screen! A phone screen, though, is much smaller. Don't make your readers have to use pinch zoom and scroll to get around your page. Use a single column format and separate sections over multiple pages instead of multiple columns. This will make it easier for your readers to read the content you are providing to them.

<h4 id="interactive-keywords">2. Interactive Keywords</h4>

It is in your best interest to make it as easy as possible for your readers to navigate through the multitude of sections in your document. The more sections you have, the more important this becomes.

Adding interactivity to key words, terms and phrases is a great way to allow your readers to quickly get the information they need. Your reader has forgotten precisely how your "Disoriented" mechanic works? That's ok - a single tap will get them to the full description!

<a class="footerRight" href="#contents">Contents</a>

\pagebreak

<h4 id="the-toolbar">3. Quick-Access Toolbar</h4>

It's all well and good to send your reader throughout your document with a few taps on their screen, but let's not make them lose their place in what they were reading previously. Give your reader a quick access toolbar at the bottom of each page as a consistent, useful element throughout your document. Give them a couple of buttons so they have quick access to the most important sections of your document (where, hopefully, you have a section of 'Most-Important Sections' they can use to get to other parts of the document). Having a page number here doesn't hurt, either.

<a class="footerRight" href="#contents">Contents</a>

\pagebreak

<h3 id="conclusion">In Conclusion</h3>

I hope this has helped you out in some way or at the very least, inspired you. I know there are a range of elements that aren't correctly sized; perhaps I'll get to that in another update.

Until then, good luck homebrewing, everybody!

<br>
- Raspilicious :)

<a class="footerRight" href="#contents">Contents</a>