Forum "window"

E-HP

100 GW
Joined
Nov 1, 2018
Messages
7,276
Location
USA
I was looking at the thread about upcoming changes and admiring how the left column had navigation, and thought to myself, now that's a good use of real estate. Right after that thought, I quickly realized that on my laptop, running Windows 11, and in all browsers, the forum window aspect ratio or width appears to be fixed. By comparison, viewing the forum on my iPad or iPhone, both in landscape and portrait orientations, the forum window expands to fit the aspect ratio or window of the browser. On my laptop, those areas are just columns of gray.

That got me nerding out, looking at some other forums to see how that's handled. Half seem to have the blank areas, while others use that area, but it doesn't appear to be active/populated on many. They have slightly different behaviors as well, like how ES home page has the forums on the wide left column, and some information/navigation in the right narrower column, but the right column doesn't scroll unless you scroll the left column all the way down. Those types of things seem to just be how they've been set up, but I noticed that how the margins are handled goes both ways on different forums. I don't know if that's forum software or webpage design, but the behavior is different. If you resize the browser window to be narrower, the behavior of the blank columns vary, and for ES doesn't affect the forum window until you've resized it to be narrower than the active space, and for the home page, the forum column resizes narrower while the navigation remains fixed, up to a point.

I think I answered my own question, that on a Windows PC, the normal behavior is to have a fixed width forum window, while on IOS and perhaps other platforms, the aspect ratio sizes to the window and screen orientation. Is this correct, or is there some browser setting ?

PS. Looking at my post above, made me think maybe this column width stuff has more to it than real estate. I don't think I could get through some of those wall of text posts with no punctuations or other breaks, if they were full screen, without losing track of what line I'm on, so maybe narrower is better lol.
 
If you want to see a visually stock Xenforo installation, see:
XenForo community

Narrow width is ideal for reading. Some people have ultra wide monitors, and an unlimited width is really bad if their browser is fullscreen. 1440p is also more common.
In the next design update ( 1-2 years ) a priority is to make it selectable, but in my experience, most people try the option and don't like it.

ES has a narrower than usual frame to enhance readability. On a 16:9 monitor, text occupies half the "page" like a book. The wider the frame, the more space that big images occupy, so another 200px wide and it's a chore to scroll.

I would actually like it narrower. Reddit on a desktop has it close to perfect for reading optimization purposes, but it doesn't look right on a forum.

Example:

1722041326570.png

Some 'responsive CSS' exists for devices smaller than a laptop monitor and that's why your ipad/iphone look different and go full width!
 
I like narrower for reading too. With no breaks, I can't read more than 10 lines of text without losing track. On my iPad, I can rotate to portrait to automatically make it narrow for reading a run on post.

Do you have to do different stuff for each platform, or is there some kind of template that just automatically represents the look and feel for each platform once you set it up? It seems like how you navigate the menus and stuff is different on each OS, and device type (phone, tablet, desktop), so I can't see how that would be manageable unless it's automated.
 
Xenforo has a massive amount of CSS code and there's no hope modifying it directly.
No platform allows the CSS modifications i like to make and you also find yourself fighting the inbuilt CSS due to heirarchy non stop as a designer.

For every application i customize that i didn't build the CSS from scratch for, i use a CSS file at the highest part of the CSS hierarchy to override the application and effectively patch it. This allows my CSS customizations to be moved from version to version w/o needing much work.

Otherwise the look here is ~1100 lines of hand written CSS code layered on top of the existing CSS

1722044641718.png
 
Back
Top