PSA: Formatting For Different Window Sizes

[Aavarius]

Introduction

I don't intend this as a complaint or even as a suggestion.  It just seemed like the best place to have a discussion about the new site in its beta format--and the changes to how we play that come with it.  New tech = new problems.  As the title says, this is just a public service announcement for those that may not be the most tech oriented (or for those, like me, who are tech enthusiasts that got so used to the old site that we forgot that the upgrade means accommodating newer web standards).

 

If you're one of those weirdos who, like me, enjoyed digging through code to make attractive posts and character sheets in old Myth Weavers, then you're in good company.  I've gotten a lot of use out of that graphic design degree on this site.  If you loathed doing all that and welcome our new WYSIWYG  editor, then you're also in luck.  The new Baldrian paradigm has been kind to us all. So whether you're the Leonardo da Vinci of formatting or not, there is an new consideration to keep in mind when working your masterpiece...

 

Screen Real Estate

The old site did not accommodate different window sizes the way the new site does, as seen in these screenshots below.

 

2560 x 1440 pixels, my native monitor size

Ctrl +/- to zoom is was my dearly beloved at times like these.  If you're viewing from a much smaller resolution than my big, honkin' 1440p monitor, you already know some of the painful problems inherent in a multiplicity of window resolutions.

 

Versus...

 

Something much smaller, so much so that the interface is cut off

Colin's head is just as big, I'm afraid.

 

I'm sure you've noticed that the lighter tan "content" area remains the same regardless of what size your window is.  This is excellent if you want consistency, but terribad if you want to accommodate a whole range of devices.  We live in a smartphone, tablet, desktop, projector world now--each with their own resolutions.  vBulletin was coded for a bygone era.  With so many possible window resolutions to accommodate for, what's an aspiring post format designer to do? All those many hours slaving away in the formatting box are ruined by the end user! Let's face it, we take a considerable amount of pride in showing off all the hard work we put into this stuff.

 

Commence Gnashing of Teeth and Rending of Garments!

Just kidding, of course.

The fact of the matter is that you can't accommodate for every resolution somebody might view your pretty formatting in.  You have no way of knowing what sort of screen they're viewing from.  (This has been a web design challenge for decades.)  Here are a few examples of where I noticed all my hard work going to waste when viewing at different resolutions.  Note:  these screenshots don't include some UI elements, which do consume some of your valuable screen real estate in the vertical dimension.  The dimension of most concern when talking about tarnishing your formatting brilliance is usually the horizontal one.

 

2560 x 1440, this time scaled down 50% so you can bask in its untarnished glory

I'm extremely proud of how this  turned out.  I adapted it from an old Myth Weavers format I designed that was, itself, pretty nifty looking to begin with.  That horizontal dimension stretches on for days, and the information all flows very nicely.

 

And here it is again at a more common resolution you can reasonably rely on most windows to view it as. Again, UI cropped off the top.

 

1920 x 1080

O the humanity! O the agony!  My art is soiled by  common low rez peasants.  Catch me now before I swoon!

 

Infinite Diversity In Infinite Combinations

All feigned melodramatics aside, it is something to seriously consider when you're formatting a post.  We can no longer rely on a static content area as a reliable space for our designs.  Added to that, there are way too many possible resolutions and aspect ratios to account for.     If you design for one you ruin the other's design. But beyond the look of the thing, design is both aesthetic and practical, so a ruined format is harder to read.  That's a real challenge on a website that's so information heavy.

 

So what can be done?  My advice:  try to embrace it.

You can make some reasonable accommodations, but don't sweat the multi format chaos.  Perhaps once the site themes are finalized we can get a bit more consistency, but many viewing sizes are a reality our design is going to have to embrace.  It also means as readers we're going to have to withhold judgement about the looks of a person's post format if it happens to be odd.  You may not be looking at it with the window size they  intended it to be viewed as.

 

Something Practical

I recently discovered the "Preview" button on the new UI, which is more robust than the old previewer because it gives an estimate of what your post looks like in a different size.  If you must know how your post is going to look, I recommend checking out the new previews.  Here it is in action:

 

Where to find the button in the new UI

 

"Tablet" sized

Zounds! What madness is this?

 

"Phone" sized

Hand held horrible.  Oh well... I'm learning to embrace the chaos.

 

A Compromise

Additionally, it may become best practice around here if we drop in a "best viewed at...X resolution" or "best viewed on mobile", etc. footnote, especially those of us who may be regularly working on screens that are much larger or smaller than the average person.  It gives our work the best possible chance of having others' appreciate it the way it's meant to be viewed.

 

And on that note, I find that 1920 x 1080 is a common enough resolution that if you're really concerned about viewing consistency, then that's the target to shoot for designing around.  It's not too bad on mobile, either.

 

In the meantime, happy Baldr-ing, everybody! 

Edited May 4, 2022 by Aavarius (see edit history)

[Eric]

@Butchern - When you get the chance, this stuff probably belongs in the Guide 😇

[Aavarius]

Also, it may need some updating--themes are changing so much right now that a few bits and pieces may or may not be relevant any more.

[Butchern]

I cut it down a bit and lightly edited it to have the same "voice" as other recent additions to the guide. Here is the result. As Aavarius suggests, once we have some finalization on the themes, we can add back in the various examples.

 

Quote

 Post Design - Best Practices for Multiple Screen Sizes

Myth-Weavers love to format their posts to include images, tables, and other complex layouts. The old site did not accommodate different window sizes, so posters could be fairly confident that their readers would see pretty much exactly what they saw. The new site, however, does accommodate multiple screen sizes, creating new challenges for complex post formatting.

 

Posters cannot accommodate for every resolution somebody might view the post in. Posters have no way of knowing what sort of screen their readers are viewing from. (This has been a web design challenge for decades.) Posters can no longer rely on a static content area as a reliable space for post designs. There are way too many possible resolutions and aspect ratios to account for. Posters can, however, make some reasonable accommodations, but they shouldn't sweat the multi-format chaos. Likewise, readers are going to have to withhold judgement about the looks of a person's post format if it happens to be odd. Readers may not be looking at the post with the window size the post creator intended it to be viewed with.

 

Some Practical Tips

 

The "Preview" button on the UI is quite robust, and it gives an estimate of what a post looks like in a different size.

Additionally, it may become best practice around here for GMs (or every poster) to include a "best viewed at...X resolution" or "best viewed on mobile", etc. footnote in game ads and in posts, especially those users who may be regularly working on screens that are much larger or smaller than the average person. It gives a post the best possible chance of having others appreciate it the way it's meant to be viewed.

 

And on that note, many users find that 1920 x 1080 is a common enough resolution that if a poster is really concerned about viewing consistency, then that's the target to shoot for designing around.  It's not too bad on mobile, either.

 

Edited June 4, 2022 by Butchern (see edit history)

[Aavarius]

12 hours ago, Butchern said:

... "voice" ...

What, is my hyperbole too intense for you weenies?

 

(But seriously, cutting that out is perfectly understandable 👍)

Edited June 5, 2022 by Aavarius (see edit history)