Center or left-align content that has a constrained width?

[cjcenizal]

Some content, like a Dashboard, works best when it takes up as much horizontal space as possible. Some other content, like tables and paragraphs of text, become less usable as the width increases (beyond a certain point). On very wide monitors, content like this would become unusable if it took up the full width of the screen.

So, we need to constrain this content's width to a maximum-width. The problem then becomes: how do we position this content within the screen? Do we center it or align it to the left? Or do something else?

Relevant comments:

• Add landing page with table to Visualize app. #9605 (comment)
• Add landing page with table to Visualize app. #9605 (comment)
• Add landing page with table to Visualize app. #9605 (comment)

Centered

Left-aligned

Personally, I think left-aligned is the better option because on very wide screens use will need to switch interaction between the side nav and the content (originally @epixa's idea).

[uboness]

agree with left aligned for wide screen. For smaller screens (laptops/tablets) it may (or may not) look weird... we should at least consider introducing responsiveness for different devices & screen sizes

[BigFunger]

We already expect the user to consume the full width of the page, since we have controls on the top-right side of the screen.

[stacey-gammon]

My thoughts:

• I like center better than left, but could be persuaded either way.
• What about expanding just the last column so the table can be 100% width, but the column data isn't too spread out?
• I also like exploring the idea of bringing the left nav in more on really wide screens, like facebook does.

[kobelb]

Summarizing my opinions that I shared during the Mend-It Monday:

• I like it being left-aligned, I generally try to avoid center alignment because it's traditionally been considered the "weakest alignment" and it can also make it hard to line things up with each other.
• A lot of the more 'centered' layouts that I've seen generally center everything include the navigation using "gutters"

[uboness]

I think cantered alignment would have worked if we wouldn't have the left nav. The left nave puts weight on the left side of the screen that gravitates left alignment.

We already expect the user to consume the full width of the page, since we have controls on the top-right side of the screen.

Agree, but I don't think we can solve this now.. I think with overview pages (like the screenshots above) it's not too bad, but I do agree we need to see how that would impact dashboards/discover/viz/etc... basically anything that requires heavy interaction with the timepicker for example.

as a side note, if we didn't have the left nav, we could have just aligned everything in the center, including the top nav... but we do have it :) (though it's worth mentioning as part of a side note... don't you think?) UPDATE: re the side note... second point @kobelb said

[stacey-gammon]

Another example from the field... If we pick a "primary" column to expand 100%, while giving all the other columns a maxWidth, it could take up the whole width of the page.

[cjcenizal]

EUIfication will address this.