RolePlay onLine RPoL Logo

, welcome to RPoL Development

13:30, 28th March 2024 (GMT+0)

New site design.

Posted by jase
inirlan
member, 6 posts
Fri 23 Aug 2019
at 10:41
  • msg #209

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
  • msg #210

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
  • msg #212

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
  • msg #213

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
  • msg #214

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
  • msg #215

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
  • msg #217

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
  • msg #218

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
  • msg #219

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
  • msg #220

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
  • msg #221

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
  • msg #222

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
  • msg #223

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
  • msg #224

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.
SunRuanEr
subscriber, 107 posts
Sat 24 Aug 2019
at 16:22
  • msg #226

Re: RPoL Design Update

jase:
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.

Thanks jase! Going all the way up DOES help a lot. That gets the lefthand side of the text to within about a centimeter of where it currently is on a fullscreen browser. I'm still losing a good two inches or so of readable space to the right-hand side menus, though. Is there a preference to force-collapse those to the top so that the text goes all the way to the right, like when you make the window too narrow? If not, could we GET one?

Overall, posts do still take up considerably more space top-to-bottom, with the wasted space around them and the increased line height. Even at a 15% reduced magnification on my browser, the same post I've been repeatedly looking at for this still takes up half again as much vertical room. Still, that's fixable just by lowering the magnification on RPoL. Somewhat, because obviously there are limits to just how small text can be made yet still be readable.

Obviously, my viewing preferences are far outside of "recommended", but sometimes the speed limit is just too slow. Anything that allows us to customize the responsive site to function as close as possible to the current site is a good thing, in my book. Years and years of reading posts that are very wide means that anything significantly less than that now just feels... wrong.

Went and tested phone vs. browser at full maximum page width, and it works great in both versions. :)
jase
admin, 3696 posts
Cogito, ergo procuro.
Carpe stultus!
Sat 24 Aug 2019
at 17:23

Re: RPoL Design Update

SunRuanEr:
Is there a preference to force-collapse those to the top so that the text goes all the way to the right, like when you make the window too narrow? If not, could we GET one?

Ahhh, no and no.

SunRuanEr:
Obviously, my viewing preferences are far outside of "recommended", but sometimes the speed limit is just too slow. Anything that allows us to customize the responsive site to function as close as possible to the current site is a good thing, in my book. Years and years of reading posts that are very wide means that anything significantly less than that now just feels... wrong.

I think you need to give it time to settle in with you.  It's a completely new site layout, making it like the old means I'm just wasting a whole stack of my (and everyone else's) time.

Like any new site (and you should really think of it that way) it'll be different to most others.  Disliking site B because it doesn't look like site A isn't doing it any justice or giving it a fair chance.

I pushed cruinne (who came up with the original layout) for wider and wider as I found it cramped.  Now I find the responsive site far better to read than the old site.. and I'm even finding this increased 1400 pixel layout too wide.  I use the responsive site all the time now and I've got a bit more "wasted" space than you!  (c;

I had to look at things objectively and there were a lot of things wrong with the current site.  Font size, line height and line length being several of them.  Regardless of my personal feelings on the matter and the sadness of leaving behind a layout I dreamt up in 2000, I followed recommended guidelines wherever it suited the site and (though I still miss the squiggly line divider in messages) I begrudgingly eventually had to admit that the new layout was far superior.

I've just gone through all my browser tabs (about 30 of them) and not a single site I'm visiting has a layout as wide as the responsive site here.  Zippo.  Most have a content width about 20-30% narrower and larger fonts to boot.

Give it a chance, if you focus on the wasted space then that's all you'll ever see.
Aethulred
member, 6 posts
Sat 24 Aug 2019
at 17:25
  • msg #228

Re: RPoL Design Update

Mistakenly posted this to the Administrators, Skald kindly redirected me so this is a re-post.

Looks quite nice:
1. Put a feedback button up so folks can respond with comments. [I didn't see this link ...need bigger print ;-) ]
2. Allow us to enlarge the fonts, as not all are 20 years old with 20/20 vision.
3. Make the colors clear ... I have issues on the old site between the Black of nothing happening and the Blue of a PM. Bold would have helped, and this new page seems to go that way.

I'm old, so I really don't mind the old site at all, excepting the issue (3.) I just mentioned.
SunRuanEr
subscriber, 108 posts
Sat 24 Aug 2019
at 18:04
  • msg #229

Re: RPoL Design Update

In reply to jase (msg # 227):

Oh, I'm going to give it a chance. Like I said, being able to extend the line width fixes 99% of my issues with it. That said, is there a particular reason why you don't want to give us the option to collapse the right-hand menu up to the top? (Or can't, I suppose, if the code restricts it. I'm just curious.)

Even if moving the menu didn't extend the line length, it's an option that would be handy because it would allow more customization of browser setup when the page is used. I personally spend a lot of time with the browser window narrowed so that I can see information in a second window behind it, and without the ability to manually collapse those menus that just reduces my reading field too much again. (Full-screening the browser with the maximum line width is necessary to bring it up to close to where I'd like it. Which is a fine solution, when I can full-screen the browser, which I can't always do.) Adjusting the max line width AND having an option to make the righthand menus go to the top would be a really nice thing, and I don't think that would be making the new site just like the old - the way the new one looks on a phone (and presumably a tablet) is spectacular, and I assume the goal. That alone makes it nothing like the old. That said, I am very glad we have the option to increase the line width, and am so very grateful for it.

Seriously though, the responsive site really does look nice other than being too narrow for my tastes. You've done a great job on it, and please don't think that anyone giving feedback that says 'I don't particularly like X' means they're going to throw the baby out with the bathwater. :)

(As an aside, is it a known issue that Notices and Closed Threads aren't being marked with their icons? I had thought that icons across the board were just not working, but then I just noticed that the New Message icon is.)
Aethulred
member, 7 posts
Sat 24 Aug 2019
at 18:43
  • msg #230

Re: RPoL Design Update

I also note the lack of a<Game> & < Main> menu at the top right of he page when posting, that would be nice, so you don't have to scroll through the past 5 or 6 posts to go back up. Several games I am in have multiple threads going, so being able to return to the Game is important as well.
ppwhere
member, 22 posts
Sat 24 Aug 2019
at 19:48
  • msg #231

Re: RPoL Design Update

One more idea... As the content part made thinner and we have sooo much "empty" space could the portrait made bigger? Or at least a config option for it in theme? If I'm right on the Character Details part it is 102px but next to a comment it is just 50px

Also it looks to me <large> is not working in the new site and probably <smallcaps> too

And one last bug, alignment in easy tables looks dead as well right now...

These probably well known problems as if I'm right you are working on the css now, just wanted to flag up them in case you didn't know about them

And hopefully a last css problem... Character details and easy tables again. 100% in the classic site meant that the full width of the current character sheet which could be used to create some very neat character sheets... In the responsive site 100% means a preset max width which makes it much less useful... If this is how it is designed to work I'll just replace it with some more hardcoded width settings so there are some options...
This message was last edited by the user at 20:16, Sat 24 Aug 2019.
Raddek
supporter, 11 posts
Sat 24 Aug 2019
at 22:38
  • msg #232

Re: RPoL Design Update

Jase, thanks for all the work on the responsive site - The one thing I've noticed in the scripting is that in the GM menu, private (language) groups, that the table for the 32 groups overlaps the "your account" sidebar.  Basically the "This page scrolls right unless you use a wide screen -->" and groups 28 through 32 overlap with the sidebar.

This was done on a crappy old netbook running chrome - so I'm not sure if it is a widespread issue.
horus
member, 849 posts
Wayfarer of the
Western Wastes
Sun 25 Aug 2019
at 01:44
  • msg #233

Re: RPoL Design Update

Looked in on one of my games this evening.  From where I sit, with the recent updates to widen the text line a bit, I'm beginning to see things differently than I did.

Yeah, I was, maybe, a bit resistant to change.  Reading over the UI recommendations jase mentioned sort of brought that home to me.  Those recommendations are based on some sound principles and the results of well-controlled studies, as I recall.

I have a laptop with a 15.4" 1920 X 1080 display, and a 19" 1600 X 900 flat panel on a home-made pole mount over it.  I find myself looking at the responsive site more comfortably on the 19" display, and either zooming or narrowing the window on my laptop's display to be comfortable when I use it.

(I'm really wondering if I should rotate my external monitor into "portrait" mode and test that way?  I'll have to install a longer pole in the mount...)
Sign In