[DOCS-4780] MMS Manual page layout suggestion Created: 05/Feb/15  Updated: 11/Jan/17  Resolved: 05/Feb/15

Status: Closed
Project: Documentation
Component/s: Cloud Manager
Affects Version/s: None
Fix Version/s: 01112017-cleanup

Type: Improvement Priority: Major - P3
Reporter: Michael Benoit Assignee: Unassigned
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Screen Shot 2015-02-05 at 11.35.07 AM.png     PNG File Screen Shot 2015-02-05 at 12.23.33 PM.png    
Participants:
Days since reply: 9 years, 1 week, 6 days ago

 Description   

I'm not too sure if this is the best place for this, so feel free to move it if necessary.

I've noticed that the MMS Manual's page layout is not very responsively designed. Here's what I've observed:

The Good

  • If you shrink the width of your browser, the left nav disappears and you get a toggle button in the upper left.

The Not-So-Good

  • The main content area has a fixed width. So no matter how wide you make the browser, it always occupies the same amount of horizontal space.
  • The right bar (containing "On This Page", an ad, and the social media buttons) occupies way too much space.

I noticed this while looking at one of the Public API reference pages:
https://docs.mms.mongodb.com/reference/api/alert-configurations/#entity-fields

In the Entity Fields section, there's a table that could definitely benefit from more horizontal space.

So, here are my suggestions:

  • Make the container fluid width so it always fills the available horizontal space.
  • Move the "On This Page" block to a drop-down menu in the top nav.
  • Can we get rid of the ad? Or maybe use a different shape that can be affixed below the header?
  • Move the social media buttons and "Report a Problem" link into a footer.

CC: marc.gurney@10gen.com



 Comments   
Comment by Michael Benoit [ 05/Feb/15 ]

Fair enough – thanks marc.gurney@10gen.com!

Comment by Marc Schaffner-Gurney (Inactive) [ 05/Feb/15 ]

Propose to resolve as "Works as Designed"

Comment by Marc Schaffner-Gurney (Inactive) [ 05/Feb/15 ]

We do not want the content column to be 100% width, the max-width is there to optimize for legibility. This is a basic rule of typography and it is the reason that well designed documentation sites, blogs, printed textbooks, etc. have a fixed max-column-width.

"Measure (or sometimes "The Measure") in typography is the length of a line of text. For a single-column design measure should ideally lie between 40 and 80 characters. Many typographers consider the perfect measure to be 65 characters. If the lines are too short then the text becomes disjointed, if they are too long the content loses rhythm as the reader searches for the start of each line. Punctuation should preferably hang outside the measure."

The max-width on the content column of MongoDB and MMS Docs currently averages around 100 characters per line. We do not want to make this column any wider. The right sidebar automatically drops off on smaller screen sizes (good) and the left sidebar auto-hides on even smaller screen sizes (good).

The measure for the right table-cell ("Description" column) is in the high 70s, still at the upper range of the ideal 40-80, and it seems perfectly legible to me when reading the content as I normally would read content on a page. I do find it hard to read the lists of "possible values" though, I think those could maybe be one per line. But that's a separate issue.

(average measure)
https://docs.mms.mongodb.com/reference/api/hosts/ (100)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array (100)
http://getbootstrap.com/css/ (130)
https://help.ubuntu.com/lts/serverguide/openvpn.html (150)
http://docs.basho.com/riak/latest/ops/running/cluster-admin/ (75)
https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06 (75)
http://www.nytimes.com/2014/12/09/science/-stronger-signs-of-life-on-mars.html?ref=science (75)

Generated at Thu Feb 08 07:48:51 UTC 2024 using Jira 9.7.1#970001-sha1:2222b88b221c4928ef0de3161136cc90c8356a66.