Default alignment of content in Cristal

[tkrieck]

Hey everyone. I would like to start a discussion on the default alignment of content in Cristal. Basically, we have two options right now.

Note: these two probably will be a user option in the future, but we will need a default still.

1. Centering the content by limiting its width, with the sidebar pushed to the left. This is the default on apps like Notion, Outline, Loop, etc.
2. Let the content always take 100% off the viewport width. This is the default on XWiki now.

Screenshots of the two methods. Both screenshots were taken on a big screen to better exemplify the concepts.

Centered Content

Full width content

Note that on smaller viewports (not necessarily physical screens) the content will limit itself to the available space, so in these situations both options produce the same results. Example below.

Example on Mobile:

Now, on to the pros and cons of each method:

1. Centered content

• Pros
  • Line length gets smaller, so it’s easier for the reader to jump between lines. Here’s a nice article explaining this effect in details Size Matters: Balancing Line Length And Font Size In Responsive Web Design — Smashing Magazine
  • While the lines are shortened, the content still sits in the center of the screen so the visual balance (left and right) is maintained.
  • The sidebar still is on the expected place at the left most section of the viewport.
• Cons
  • It’s different from the default of XWiki standard.
  • Large monitors can feel empty and underutilized.
  • The gap between sidebar and content can be very large, especially on ultrawide resolutions.

2. Full width content

• Pros

  • All available space is used, regardless of line length.
  • Space between the sidebar and content is consistent
  • Retains the historic default of XWiki

• Cons

  • It can be very hard to follow a long text when jumping between lines
  • It’s different from established apps on the market. Users coming from other platforms to experiment with Cristal might feel at odds with the default choice.

So here are my questions:

1. What option you feel should be the default on Cristal?
2. Would you prefer it as a user option in real time, (on the page menu for example) and only for the current page. Or a general preference that would apply to all pages on the Wiki?
3. Do you have any other comments or options that should be considered?

Thank you all for reading!

Edit: Filled the bigger screenshots with lorem ipsum text to better show the effects being discussed.

[vmassol]

@tkrieck

Full width content

Note that the left panel width is quite small in your example and there’s also not enough margin between the panel and the text.

A better-looking example if that of XWiki IMO.

Example with right panels:

Example without right panels:

My POV:

1. I tend to prefer the left-aligned version for the default. Probably because I’m used to it and it has the best of both worlds to me:

   • If I want a smaller viewport for the text, I can reduce the windows size
   • If I want to be fullscreen to see the maximum of content, I can have this too

   Whereas with the always-centered + small viewport width option, I can never make use of my large screen if I want, I can only reduce the width by reducing the window’s width.

2. BTW I wonder why we never got this request for XWiki (or not many times), as we don’t have this option ATM, and at first sight it doesn’t seem hard to implement.

3. You mentioned a user setting to decide which option to use. Would that setting also allow controlling the width size for the centered option? or is it meant to be smallish as in your screenshot.

4. What are the dimensions we’re optimizing Cristal for? For XWiki, it was 1024x768 at some point AFAIR (can’t find a link ATM to verify this). All I’ve found is [xwiki-devs] [Brainstorming] Minimal supported resolution? . I don’t remember if we have re-discussed this in the history of XWiki.

Thanks

[mleduc]

@vmassol

What are the dimensions we’re optimizing Cristal for?

That’s a good question. The advice I’m seeing more and more is to design for mobile first (e.g., 3.14 Develop a Mobile-First Layout - Sustainable Web Design)

It is much more effective to do the hard work to ensure that it works well on a mobile device and then scale it up to larger interfaces.

I did a (very empiric) review of line length on various medias (e.g., medium, mediapart, lemonde, the times, notion) and the line length (in number of characters) for the main content seems to vary between 70 and 100.

The web is already a pretty bad experience if you use a super-large viewport.
This is a medium article on a 4000px wide monitor without scaling.

Another question is, do we make the option:

1. per-user: a user can decide to make all pages “wide” or “narrow”
2. per-page: the page editor can decide if a page is “wide” or “narrow” (this is what outline or notion are doing, note that in this case the rest of the page layout is unchanged and only the content width is impacted, which implies moving some elements such as the page actions outside the page content)

To give my opinion on the initial question,
I’m +1 for centered content by default, with an option to change the configuration.
Mainly because I believe having a limited width is better for reading and writing experience and this is what a wiki UI needs to focus on.