Spyro's D&D 5e GM Post Template

[spyrosbaldr]

GM Post format below

Happy to take any constructive feedback, particularly oriented toward more responsive and fluid reading on mobile devices.  I am not someone who enjoys checking posts on mobile, but I do have players who are - and am wanting to give them as enjoyable an experience on mobile as I get on desktop.

 

---

Game Title

Chapter: Subtitle

---

🗺️		Zone, Nation
📅		x:xx xm, nth Month n year, xday
🎵		Music title

First sentence.

 

Body text.  This format is primarily used in my Godsfall game, where I use Palatino Linotype as a font across all of my posts.  While it is (at the time of this post) not currently a font on Baldr, all PCs have it loaded (iOS does not, Android might; their font-equivalents look fine enough for now).

 

The table on the right is a 4 row/3 column table, first row is a Header.  The background color of the header cell is the most-prevalent color in the image; the background color of the left-hand 2 columns is a dark color pulled from the image, and the right-hand column is a complimentary color to the left-hand columns also pulled from the image.

 

The header cell's properties are a 22.5% width, center h-alignment, and middle v-alignment. 

 

The center column's properties are a 14-pixel width, right h-alignment, and middle v-alignment.  It's whole purpose is to provide spacing between the left column's emoji and the right column's text.

 

The left-hand column's properties are a 95-pixel width, right h-alignment, and a middle v-alignment.  The emoji (map, calendar, music note) save so much more space compared to text (Location, Date, Music) and are hopefully legible on any device.

 

The right-hand column's are a 375-pixel width, left h-alignment, and a middle v-alignment.  This column names the zone the party is in (and which nation that zone is in), the date and time on the game calendar (if applicable), and background music for this section.  This is still a pain-point for mobile, since most music links I've found that can be opened across an optimum of devices will be on YouTube, and on mobile without a premium account, this will have ads and multi-tasking (listening to the music and posting) is rather difficult.  Soundcloud embeds might have better results.

 

On the left of this paragraph is another image - either a location or a person, depending on context - aligned to the left (what would have been a float on the old site).  This helps break up a lot of the wall of text and also allowed for dialogue that flows well in a GM post.

 

Simply copying this post (or quoting and swiping the source!) will provide you with this as a template.

 

If someone has a better way to translate those pixel-based widths into percentages that maintain this same level of table (so that it looks great across all devices), I'm happy to take the feedback for it.  At the moment, this is the best I've come up with so far - this places the table at the top of a post (beneath the title header) on mobile, and floated far-right on tablet and desktops.

Edit: the fieldset at the top prevents the post from scaling correctly on mobile currently, will investigate what can be done to adjust that.