Imladir
 member, 7 posts
Mon 5 Aug 2019
at 09:40
Re: RPoL Design Update
Something a bit annoying is the inconsistency in the "This Game" menu. For example:
- it's impossible to directly access private messages from The Cast menu,
- on the Cast page the link for The Cast disappeared, but on the Character Details page, the link for that page is still there.
jase
 admin, 3653 posts
 Cogito, ergo procuro.
 Carpe stultus!
Mon 5 Aug 2019
at 14:17
Re: RPoL Design Update
Thanks nauthiz.  Certainly doesn't happen in my (exact same) version of Chrome on my phone.  Is it when you click in the message area or after you type the first character?

Menus certainly need a little tweaking, Imladir.  Will see if I can do a little more.
Imladir
 member, 8 posts
Mon 5 Aug 2019
at 14:19
Re: RPoL Design Update
Thanks.

Nothing urgent there obviously.
nauthiz
 subscriber, 616 posts
Mon 5 Aug 2019
at 18:43
Re: RPoL Design Update
When I type in the first character.  Up until then it's fine.  Additionally if I delete all the text that has been entered, the text entry box returns to its normal size/position.
jase
 admin, 3656 posts
 Cogito, ergo procuro.
 Carpe stultus!
Thu 8 Aug 2019
at 05:42
Re: RPoL Design Update
Can't make sense of the textarea resizing.  There is the alert to remind you if you cancel away from a composed message that will set a javascript variable to 1... but that should not affect anything to do with the HTML.  Realised that wasn't working actually (depending on which cached version of the javascript file you had) so have updated that, who knows lets see if that fix miraculously does something!

...

Have changed a the way the HTML/CSS works a bit, hopefully not much/any difference.  HTML has this lovely way of calculating widths (and heights, but it's the width that's the kicker).  An area has margin, border, padding and finally the actual content.  If I set something to take up the page width (by making it's width 100%) then that's calculated according to the content and padding around it.  Only those two.  If I add a 1px border around this content then it's width is left border + 100% + right border.  Horray, it's width is now 100% + 2 pixels.. i.e. it's wider than the screen and we have a scrollbar or overlapping sections.

Even more fun when I try to make two boxes sit side-by-side by making their width 50% each.  If I have a border then they're actually both over 50% so they're rendered one above the other.

It's crazy and doesn't make sense.  The way around it was to use a "calc" entry in CSS which has about 98% browser compatibility.  You'd figure your border and margin and then set your width with "width: calc(100% - 2px);" or whatever you needed to shrink it by.  Change the border or margin?  Go back and edit the width as well.  Painful and for me has never been intuitive.

Anyhoo there's a CSS setting which is "box-sizing: border-box;".  Knew and forgot about it until recently.  This makes the box size calculations include the margin and border... oddly enough this is how IE6 used to do it.  The nice thing about this option is the browser compatibility is about 99%.

So... I've gone through all my horrible "calc" entries and removed them whenever possible, setting nice sensible widths of 100%, 50%, 33.3% and so on.  Now it's all much easier.

...

In amongst doing all that I fixed a bunch of other stuff.  Honest.  Problem is I can't remember what I've done...

Added Earthdawn: Age of Legend and Zombie World to the dice roller.  If you're using the responsive site you can now use these systems on the roller.  People on the traditional site can see the entries in the log file but can't use the system to make their own rolls unless they switch to r.rpol.net.

Stuff.. things, tweaked stuff.  Have had a cold for over a week so it's hard to remember!

See how stuff 'n' things are now, hopefully haven't made anything worse!
jase
 admin, 3664 posts
 Cogito, ergo procuro.
 Carpe stultus!
Thu 8 Aug 2019
at 09:50
Re: RPoL Design Update
Oh yes, updated the cast list.  Now hides the info that probably doesn't need to be seen at a glance.  Hovering/clicking shows the additional information that's hidden.. plus a few extra links now.
nauthiz
 subscriber, 618 posts
Thu 22 Aug 2019
at 00:35
Re: RPoL Design Update
Bug Report: When trying to view a game map assigned to a specific group, the following error is returned.

quote:
Missing game identifierSorry, but no game id was passed.


The map is viewable on the non-responsive site.
jase
 admin, 3683 posts
 Cogito, ergo procuro.
 Carpe stultus!
Thu 22 Aug 2019
at 01:49
Re: RPoL Design Update
The problems a simple typo causes!  Thanks.
inirlan
 member, 6 posts
Fri 23 Aug 2019
at 10:41
Re: RPoL Design Update
Reading up ASCII character sheets is much more inconvenient on mobile now. The width is far too narrow and you can't zoom out.

Outside of that. *Shrug* It's a different interface so I am going to prefer the old one at first. The drop down menu with cast, dice roller, PMs and so on is neat, but the icon really needs a small arrow or triangle, as I spent way too long looking for all those things and not realising that that icon was a drop down menu and not just the dice roller.

This message was last edited by the user at 10:43, Fri 23 Aug 2019.

jase
 admin, 3687 posts
 Cogito, ergo procuro.
 Carpe stultus!
Fri 23 Aug 2019
at 12:31
Re: RPoL Design Update
In reply to inirlan (msg # 209):

Not sure how to fix the sheet issue, they're really wide by design/necessity and mobiles aren't!

Thanks for the feedback regarding the menus, good to have a fresh perspective as I use manipulating the screen width to go into mobile view a lot of the time and that's when I see the menus collapse down and the colouring flow through... so to me it seemed obvious!  (c;
Skald
 moderator, 863 posts
 Whatever it is,
 I'm against it
Fri 23 Aug 2019
at 14:08
Re: RPoL Design Update
I think the issue with character sheets being too wide for a mobile screen is something that should be addressed in character sheet design, rather than site design ?

If anyone wants to create some mobile-friendly (ie narrow) character sheets for the more popular game systems, just send them to me over in Heaven - Gaming Resources link to another game and I'll add them to the existing character sheet list and flag them mobile friendly.

Is there a magic number of characters (non-proportional font) we should be aiming for on a mobile device that I could suggest people stick to ?  :>
Skald
 moderator, 864 posts
 Whatever it is,
 I'm against it
Fri 23 Aug 2019
at 14:25
Re: RPoL Design Update
Just a thought ... for the front page of responsive site ... would it look better if all the text was in the left hand column (ie put the "Create and GM" etc wording under the existing two text blocks under the Welcome to RolePlay onLine! heading, and have all the blocks with grey headings on the right hand side (with the sidebars to the far right).

I think it looks a bit unbalanced at the moment, and this might help - or not.  <grins>  If nothing else, it might save a bit a real estate as there's a couple of empty spots that would be eliminated, though I appreciate blank space is important, so might have to add more in by design if needs be.
jase
 admin, 3688 posts
 Cogito, ergo procuro.
 Carpe stultus!
Fri 23 Aug 2019
at 17:27
Re: RPoL Design Update
In reply to Skald (msg # 212):

Won't that make it even more lopsided?  The "Welcome" text is only about 2/3rds the height of the blocks.  The total height of the blocks is actually a little bit more than the current layout so it'll actually take up more space.

Doesn't look terrible with my quick mockup in paint but not sure it's solving any of the problems you've highlighted!  (c;
ppwhere
 member, 19 posts
Fri 23 Aug 2019
at 20:42
Re: RPoL Design Update
One of my players mentioned an interesting thing... In the new site in desktop mode you have much less space for content... For mobile mode it is great, you have a wide view but it is quite the different in desktop
On the left side character information takes around the same size but with much more padding. On the right side you have now the menu, eating up quite a lot of space, so on a smaller laptop you can see now much less information



One different problem is encoding in character descroption... I've checked one what looked nice on the "old" site, using some accented hungarian characters like αινσφőϊόű
None of these were looking nice in the new site. Interestingly they are fine here, so it is might be only a description problem

This message was last edited by the user at 20:43, Fri 23 Aug 2019.

SunRuanEr
 subscriber, 103 posts
Fri 23 Aug 2019
at 21:43
Re: RPoL Design Update
In reply to ppwhere (msg # 214):

quote:
In the new site in desktop mode you have much less space for content... For mobile mode it is great, you have a wide view but it is quite the different in desktop

I hadn't peeked at the responsive site until today, but this would be my gripe, too.

I solely view RPoL on my desktop, and on the new site, I can really only manage to get maybe half the width of my monitor for viewing of actual posts. Sizing the browser down gets smaller, but sizing it up just... doesn't past a certain point. It would be nice to be able to fully manipulate the viewable thread space to whatever size I like.
jase
 admin, 3689 posts
 Cogito, ergo procuro.
 Carpe stultus!
Sat 24 Aug 2019
at 02:00
Re: RPoL Design Update
SunRuanEr:
Sizing the browser down gets smaller, but sizing it up just... doesn't past a certain point. It would be nice to be able to fully manipulate the viewable thread space to whatever size I like.

You can with a custom theme!  If you do use it just beware that the base css gets updated a fair bit at the moment so your theme can become outdated.

We've followed typography recommendations for speed of reading and reduced eye strain... and even then we've increased beyond the recommended width by a fair bit.  Basically the longer the line gets the longer it takes to focus on the start of the next line.  Increasing line height helps with this but then you end up with longer lines but larger gaps, so no more words per page.  All this isn't really my forte which is why I followed (pretty universal) recommendations.  But  even then I must admit I wonder how well it works here as I find some content is a bit squished.

I think the width works well for reading a few paragraphs of text but if there's any tables (for example) then it can start to suffer.

Definitely don't look at the private groups screen on the GM menu!  (c;
SunRuanEr
 subscriber, 104 posts
Sat 24 Aug 2019
at 02:28
Re: RPoL Design Update
jase:
SunRuanEr:
Sizing the browser down gets smaller, but sizing it up just... doesn't past a certain point. It would be nice to be able to fully manipulate the viewable thread space to whatever size I like.

You can with a custom theme!  If you do use it just beware that the base css gets updated a fair bit at the moment so your theme can become outdated.

Awesome! Or well, awesome that there's a way to do it with a custom theme. (I have several games that really, really like to have huge, giant posts, and it's much easier to deal with them if I'm not having to scroll down for ten years to read them.) I realize that the more up-and-down rectangle of the responsive site works great with phones, but it feels like I'm just wasting valuable monitor space on the desktop the way it's set up.

Now, if I could just figure out HOW to fix that with custom themes... <.<

In all seriousness, is setting a custom theme going to be the only way to get the responsive site to read wider when it goes live? Because that doesn't seem terribly intuitive.
horus
 member, 846 posts
 Wayfarer of the
 Western Wastes
Sat 24 Aug 2019
at 03:32
Re: RPoL Design Update
In reply to SunRuanEr (msg # 217):

I'm with you on this:  is it possible we could allow for, maybe, configuring and saving "device profiles" that could be selected to accommodate different devices?

Something like:

4:3 Display
16:9 Display - Landscape
16:9 Display - Portrait
Phone/Tablet - Portrait
Phone/Tablet - Landscape

(Most tablets are 16:10, so these could also serve for the 16:10 display panels still in service.  I'm not so sure what the prevailing format is for most phones.)

Am I looking at this all crabbed?
jase
 admin, 3691 posts
 Cogito, ergo procuro.
 Carpe stultus!
Sat 24 Aug 2019
at 04:55
Re: RPoL Design Update
In reply to horus (msg # 218):

Most certainly, that's called a responsive layout.
Skald
 moderator, 865 posts
 Whatever it is,
 I'm against it
Sat 24 Aug 2019
at 04:57
Re: RPoL Design Update
jase:
Doesn't look terrible with my quick mockup in paint but not sure it's solving any of the problems you've highlighted!

Probably not.  <grins>

On reflection, I think what actually looking for is for the blocks to be all the same size, just for visual appeal.  Stacking them seemed a way of concealing the fact that they're different sizes (unbalanced to my orderly mind).

I've seen a couple of sites which have such text links/info blocks set as a clickable series of big buttons with headings and descriptive text, but they're just one big button per link.  Two of our blocks have multiple links while the others don't link anywhere, though two of them could/I think should - a) browse/search and b) help ... on the basis that 'click here' is a lot friendlier than 'go find it yourself, but we'll give you a clue, it's somewhere on this page'.  :P

For that matter, the browse/search isn't "below" any more as the description says, it's 'just to the right and down a bit' in the sidebar.

And while I'm pulling it all apart (hopefully in a postive way):

  • Preferences info could be moved into the welcome/features list at the top, leaving those blocks dedicated to info that have links.

  • Logging in - the existing users see the new user frame anyway, so I'd suggest either a proper split, one screen for existing, one screen for new (which would take up less space on mobile devices) OR (my preference) throw to the same screen for both new and existing users - but tweak the layout so the frames for each take half the screen.  If responsive can detect mobile/portrait, then stack 'em one above the other, otherwise side by side.  If you can find an RPOL cookie then put the existing on top.

  • Handy Links - throw to new FAQ page "FAQ for New Users" with those three links a) Beginners, b) Players, c) GM, and d) Creating a game (just matches the existing links for "FAQ for New Users" under the table of contents side frame) - would allow us to add in some more general information to help new users navigate the site (and maybe add a new Preferences FAQ) AND take that block back to a single link

All of the above tweaks would give us one link per block, allowing for that uniform 'button' style which I'm fond of.  :>
ppwhere
 member, 20 posts
Sat 24 Aug 2019
at 09:22
Re: RPoL Design Update
One more note... In the portrait selection page the menu on the right side and the pictures are overlapping on my screen. Tried to change the browser windows size it looks to me my screen is smaller than the minimum it looks nice.
horus
 member, 847 posts
 Wayfarer of the
 Western Wastes
Sat 24 Aug 2019
at 09:42
Re: RPoL Design Update
jase:
In reply to horus (msg # 218):

Most certainly, that's called a responsive layout.

Okay, I get that, I think...

Is the wasted space that SunRuanEr was speaking of a function of the layout being adjusted to fit a majority of screen formats?  What I was suggesting was an extension of the custom theme idea, where a user could configure and store more than one.
SunRuanEr
 subscriber, 105 posts
Sat 24 Aug 2019
at 13:56
Re: RPoL Design Update
In reply to horus (msg # 222):

Doesn't feel very responsive, unfortunately, if I can't get it to actually go all the way across my 16:9 monitor without jumping through hoops greater than just enlarging the window. Currently, the wasted space I'm talking about is that even when I resize the browser window to go across the entire width of the monitor, the actual post portion (discounting the portrait/bio lines/etc) refuses to get more than about 6" wide. It just STOPS and starts adding more empty space around the actual post portion. That leaves me with what looks like a bit less than half (I haven't measured it, but I eyeball pretty well) as much viewing area as I get currently at maximum width. Which pretty much leaves me only being able to see one post at a time in most of my games - sometimes less, sometimes more, but it's certainly leaving me with far less of an 'overview' of what's happening in a scene than I get on live.

That makes me sad. I can live with it, if I have to, but I distinctly don't like it because it forces me to constantly scroll down - sometimes just to finish reading a single post, if that post is even of a middling length - or constantly scroll up, if I'm trying to write a post in response to something.

Jase says that's fixable in custom themes, so I believe him, but I'll be 100% honest (and feel stupid) when I say that I cannot even BEGIN to figure out how to fix that in custom themes, so maybe we need a more intuitive way to adjust that when the responsive site goes live?

More importantly, I read posts on both my monitor AND my phone (as do most of the people in my games that I know of), so if we have to set a custom theme to be able to actually get the important parts of the site to BE monitor-sized when read on a monitor, what's that going to do when it's read on a phone? (I would test this, but that would require being able to figure out how to set the theme in the first place.)
ppwhere
 member, 21 posts
Sat 24 Aug 2019
at 15:11
Re: RPoL Design Update
I'm not sure how much "wishes" we can push in, but I very liked the fact that in the classic site menu was always available as it was fixed on top... Could the new right side menu do something similar? Float always on the right side? Although it could be more problematic as it might not fit into one screen (For me it is actually 1.5 screens)
jase
 admin, 3694 posts
 Cogito, ergo procuro.
 Carpe stultus!
Sat 24 Aug 2019
at 15:22
Re: RPoL Design Update
In reply to Skald (msg # 220):

Think you'll need to mock something up for me.  (c;


horus:
Is the wasted space that SunRuanEr was speaking of a function of the layout being adjusted to fit a majority of screen formats?  What I was suggesting was an extension of the custom theme idea, where a user could configure and store more than one.

Drag the side of your browser window narrower.  At 800 pixels in width you'll notice the menus collapse, that should be around tablet width and possibly phones in landscape mode.  At 695 pixels you'll notice left-right columns collapse so they're top-bottom instead, that should be mobiles and smaller tablets in portrait mode.

There's also much smaller adjustments as the screen shrinks as many of the calculations are percentage based.


SunRuanEr:
Jase says that's fixable in custom themes, so I believe him, but I'll be 100% honest (and feel stupid) when I say that I cannot even BEGIN to figure out how to fix that in custom themes, so maybe we need a more intuitive way to adjust that when the responsive site goes live?

Preferences > Create Custom Theme.  Scroll to "maximum page width (1,000 to 2,000):", edit to whatever you want.  Hit "Create!".  That'll create a custom theme based on your currently selected theme but with your own width setting.



My monitor is 3,440 pixels wide so if anyone knows about space on the sides it's me.  I cannot run my browsers full-screen anymore because if a website doesn't have a maximum text length it's absolutely horrible to read.  I know there's a limit, if I run full screen I've actually got to track the line I'm reading all the way back to the start and then jump down a line, if it's a usable width then I can just snap down a line and to the left edge.

Anyhoo, I've increased the maximum screen width from 1200 pixels to 1400.  That results in a content (message) width increase of somewhere around 21% from 675 pixels to 817.  That increases the characters per line from around 100 to 125 (don't ask me why it's not a 21% increase, possibly just the sample text I used).

As a result I had to increase the line height (the vertical gap between each line) as it was getting a difficult to read without it.

The left column is probably now a little too wide as it's a percentage so I'll look at reducing that.

Not sold on it, I think the content is a bit too stretched out now.  Even this post screen seems weird.  Longer posts seem to be better but short ones look silly.

FYI we've gone way outside the recommendations.  Recommendations are a maximum of 75 characters per line, 85 at a push.  The other part of the recommendation is that the longer the line gets the larger the line height.  With our width line height should be about 2.0, we've got it at 1.7.  Read a bit more of the thread and you'll see I've got on ad nauseam about it.

I think maybe if I reduce the left column width a bit we should look at about 800 pixels for the message content, so a little bit less than what we've got now.