DOC: adding main nav to site #15489

dorafc · 2019-10-23T03:56:58Z

PR SUMMARY

Added a main nav to separate nav links from breadcrumb links
This should make navigating matplotlib.org easier

Questions

Are these the correct links to appear in the nav?
I tried something clever with the font to look like the logo font, and it may not appear the same on all machines. Can someone let me know if it looks bad on their machines?

Next step will be to replace the "fork me on GitHub" ribbon. I figure this is better handled in a separate PR.

@story645 @efiring @timhoffm @tacaswell

Added a main nav to sperate nav links from breadcrumb links This should make navigating matplotlib.org easier

efiring · 2019-10-23T04:23:26Z

When I bring it up on my Mac with Firefox, I get the magnifier cursor, and I can't seem to get rid of it while on that page.

timhoffm · 2019-10-23T06:02:16Z

https://circleci.com/gh/matplotlib/matplotlib/25857/artifacts/0//home/circleci/project/doc/build/html/index.html

This looks good to me! 👍

jklymak · 2019-10-23T13:52:12Z

The logo and h1 are a cobalt blue. Making this band darker blue looks jarring to me.

ImportanceOfBeingErnest · 2019-10-23T14:10:32Z

Those are the correct links.
This is how it looks for me on Windows with Firefox 70:

So the font is definitely different compared to the screenshot above - but personally I don't care too much.

My thoughts quickly:

I would prefer a slightly larger font. This appears tiny compared to the rest of the page, while it's really the most important navigation element.
Since it's not obvious that clickinig on the logo above returns to the main page, some link for that would be preferable. Either saying "Home" or showing a house as symbol.
Some indication for which element is hovered would be nice. Currently we have underlining; but changing color of text and/or background might do it as well.
I would put contributing last in the list. It's the least important for the average user. For the rest, maybe Installing, Docs, Examples, Tutorials is a more natural order?

jklymak

I also agree that a hover would be nice. I can take or leave the all-caps.

jklymak · 2019-10-23T15:41:18Z

doc/_static/mpl.css

+
+/* new main nav */
+nav.main-nav{
+    background-color: #002b47;


Background color should be same as h1 color? #11557C

I like that the color is somewhat darker than the logo and headings. It gives some additional separation. With the same color, logo nav and headings would blend too much into each other.
Might be a tiny bit lighter though (in between current and the headings color).

Its already light on dark, so I bet that would stand out more than adequately. I think limiting your color palette and fonts is something most web design tips will suggest...

I did try making the nav the same color as the logo, and it made the page look very flat. Tim is correct that the darker nav creates visual separation between the elements. I don't recommend making the logo and the nav the same color.

Limiting a designs color palette is usually a good plan. However, the site color scheme currently only has two colors (logo blue and orange) and, unfortunately, it's pretty much impossible to build a meaningful site hierarchy with only two colors.

Many websites have formal guidelines about how to apply color (see https://material.io/design/color/ for Google, https://primer.style/css/utilities/colors for Github). It might be nice to re-think the site color palette using the colors in Viridis in the future, but this would be a much larger and more complex project.

These things are purely aesthetic, so whatever folks decide works is fine. Here is what I was suggesting (plus or minus) for comparison:

jklymak · 2019-10-23T15:44:58Z

doc/_static/mpl.css

+/* new main nav */
+nav.main-nav{
+    background-color: #002b47;
+    font-family: Calibri, 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;


I don't see that we use Calibri anywhere else. Is there a reason for this choice? Just like colors, I find the diversity of fonts on the front-page impressive enough already without adding more.

Calibri is the font used by the logo text. Which means my screenshot above is actually using Calibri and the screenshot in the original post is falling back to some other font.

Sure, but then lets make a lot more of the header text Calibri if thats what we want. I'm not too fussed if the logo (or plots) is a different font because it is quite distinctive, but I'd prefer we minimize the html fonts.

Calibri has a proprietary license. While I think that's not an issue as long as we just reference it in CSS but don't distribute it, it might be nice to use a font with an open license for an open source project. Also, it's usually only available on Windows, so many users will fall back to something else anyway.

Yup, Calibri is the font used in the logo and it is a licensed font (though many people have it installed on their computers via microsoft products). The font family property will load Calibri if visitors already have it already installed on their computers. Otherwise, browsers will go down the list until it finds a font that matches. There are open source alternatives that we could load with the webpage, but this would be a bigger projects thats best handled in a different conversation about branding (and maybe sticker budgets)

Helvetica is the only font currently used as browser rendered text on the site–Here's the font stack:

matplotlib/doc/_static/mpl.css

Lines 6 to 7 in 349e2e9

body {

font-family: "Helvetica Neue", Helvetica, 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;

)

I usually design slightly different treatments for header navigation text, since it serves a different purpose on a webpage from text or headers in the main content (a nav helps site visitors find a page and text is for absorbing content). I did try doing something with Helvetica, but it only contributed to the page looking like a wall of text.

jklymak · 2019-10-23T15:45:04Z

doc/_static/mpl.css

+    font-family: Calibri, 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 11px;


Elsewhere font sizes are specified as ems. That makes it easier to re-size the whole page if we want. Any reason to hard-code the sizes here?

Modern web browsers will zoom in on pixel-sized text correctly these days (especially since we're all looking at the web with devices with different screen resolutions). Ems are more useful these days when building layouts that scale with parent containers.

I do appreciate that you're thinking about website accessibility though.

jklymak · 2019-10-23T17:38:57Z

FWIW, I don't have any weird issues w/ this page on Firefox.

story645 · 2019-10-23T20:45:56Z

This looks awesome! Thanks!
I agree with @ImportanceOfBeingErnest that the order feels a bit off, and I'd probably also go with something like his order:
Installation, Documentation, Examples, Tutorials, Contributing (only because it keeps similarly conjugated words adjacent)

ETA: I like the dark blue, think it grounds the menu & makes it easy to spot.

QuLogic · 2019-10-24T01:14:26Z

I have Carlito installed, which is supposed to be metrically compatible with Calibri, and I used it to try and figure out the logo example sizes. Since that seemed to work reasonably, I guess it should be, but the text on the webpage looks kind of small:

Maybe because it's in px and not em like mentioned above?

dorafc · 2019-10-24T03:01:54Z

More responses to your feedback -

I would prefer a slightly larger font

We don't want the nav to overwhelm the rest of page content, but I'm happy to make the font larger.

Since it's not obvious that clickinig on the logo above returns to the main page, some link for that would be preferable. Either saying "Home" or showing a house as symbol

The internet has been around long enough that people usually intuitively know the to click on the logo to get back to the homepage. Though it might make sense to put the home link back in the breadcrumb.

Some indication for which element is hovered would be nice

Yup. I forgot to do this...

I would put contributing last in the list. It's the least important for the average user. For the rest, maybe Installing, Docs, Examples, Tutorials is a more natural order?

Installation, Documentation, Examples, Tutorials, Contributing

We put Installation at the end since it would be easier to find. Whats the best way to come to consensus about the link order? What does everyone think about changing "Examples" to "Sample Plots"?

(only because it keeps similarly conjugated words adjacent)

This is my most favorite suggestion I've ever heard about how to order links on a site, though I'd recommend focusing on user needs first

dorafc · 2019-10-24T03:06:51Z

I have Carlito installed, which is supposed to be metrically compatible with Calibri

I've added Carlito to the font stack. Adding the font to the site later to replace Calibri might be a good idea

tacaswell · 2019-10-24T04:26:46Z

I think this should be reviewed under the same criteria as docs changes ("is it better", single reviewer merge) however, I'm going to recuse my self from merging @dorafc 's PRs.

latest build: https://circleci.com/gh/matplotlib/matplotlib/25898/artifacts/0//home/circleci/project/doc/build/html/index.html

story645 · 2019-10-24T05:09:25Z

We put Installation at the end since it would be easier to find.

I think @ImportanceOfBeingErnest & I put it first because that's where we kinda expect to find installation/it's kind of the default location:
Sklearn:

Django:

Pandas:

This is my most favorite suggestion I've ever heard about how to order links on a site, though I'd recommend focusing on user needs first

In all seriousness, it follows the convention shown above: install, then documentation, keeping examples & tutorials next to each other since they're two sides of the same coin, then contribute 'cause it's usually at the end.

I'm +-0 on sample plots since its two words but mostly 'cause visualizations and plots aren't 100% interchangeable as much as we tend to use 'em as such. Example gallery maybe?

QuLogic · 2019-10-24T05:20:41Z

12px is definitely a better size than 11px now. My only other suggestion is font-weight:bold. With inverted backgrounds, a thin font can be a bit less legible. I'm not sure how this affects Calibri as your original screenshot seems much bolder already, but thicker Carlito seems nicer at least.

efiring · 2019-10-24T06:20:51Z

I prefer just plain "Gallery" or "Examples".

story645

Looks great, thanks for the quick turn around on the suggested changes!

dorafc · 2019-10-25T02:01:40Z

Thanks for all the feedback. FWIW, I'm looking into if we can add Carlito onto the site easily (@QuLogic -- it does look a lot better). It would make accomodating the font stack fallbacks easier. At initial glance, it looks like its an older license that doesn't take the web into consideration...

…489-on-v3.1.1-doc Backport PR #15489 on branch v3.1.1-doc (DOC: adding main nav to site)

…489-on-v3.1.x Backport PR #15489 on branch v3.1.x (DOC: adding main nav to site)

…489-on-v3.2.x Backport PR #15489 on branch v3.2.x (DOC: adding main nav to site)

DOC: adding main nav to site

44ad305

Added a main nav to sperate nav links from breadcrumb links This should make navigating matplotlib.org easier

jklymak reviewed Oct 23, 2019

View reviewed changes

tacaswell added this to the v3.2.0 milestone Oct 23, 2019

dorafc added 2 commits October 23, 2019 23:13

added hover links, larger font size, Carlito to font stack

c6e7b08

re-added home link to bread crumb

bfae260

updated nav order

396207d

tacaswell modified the milestones: v3.2.0, v3.1-doc Oct 25, 2019

story645 approved these changes Oct 25, 2019

View reviewed changes

story645 merged commit fc41caf into matplotlib:master Oct 25, 2019

meeseeksmachine pushed a commit to meeseeksmachine/matplotlib that referenced this pull request Oct 25, 2019

Backport PR matplotlib#15489: DOC: adding main nav to site

85b3215

meeseeksmachine mentioned this pull request Oct 25, 2019

Backport PR #15489 on branch v3.1.x (DOC: adding main nav to site) #15508

Merged

meeseeksmachine pushed a commit to meeseeksmachine/matplotlib that referenced this pull request Oct 25, 2019

Backport PR matplotlib#15489: DOC: adding main nav to site

22e4dba

meeseeksmachine mentioned this pull request Oct 25, 2019

Backport PR #15489 on branch v3.1.1-doc (DOC: adding main nav to site) #15509

Merged

meeseeksmachine pushed a commit to meeseeksmachine/matplotlib that referenced this pull request Oct 25, 2019

Backport PR matplotlib#15489: DOC: adding main nav to site

1d8ee3a

meeseeksmachine mentioned this pull request Oct 25, 2019

Backport PR #15489 on branch v3.2.x (DOC: adding main nav to site) #15510

Merged

tacaswell added a commit that referenced this pull request Oct 25, 2019

Merge pull request #15509 from meeseeksmachine/auto-backport-of-pr-15…

9de466c

…489-on-v3.1.1-doc Backport PR #15489 on branch v3.1.1-doc (DOC: adding main nav to site)

tacaswell added a commit that referenced this pull request Oct 25, 2019

Merge pull request #15508 from meeseeksmachine/auto-backport-of-pr-15…

30493fe

…489-on-v3.1.x Backport PR #15489 on branch v3.1.x (DOC: adding main nav to site)

tacaswell added a commit that referenced this pull request Oct 25, 2019

Merge pull request #15510 from meeseeksmachine/auto-backport-of-pr-15…

0f323ac

…489-on-v3.2.x Backport PR #15489 on branch v3.2.x (DOC: adding main nav to site)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DOC: adding main nav to site #15489

DOC: adding main nav to site #15489

dorafc commented Oct 23, 2019

efiring commented Oct 23, 2019

timhoffm commented Oct 23, 2019

jklymak commented Oct 23, 2019

ImportanceOfBeingErnest commented Oct 23, 2019

jklymak left a comment

jklymak Oct 23, 2019

timhoffm Oct 23, 2019

jklymak Oct 23, 2019

dorafc Oct 24, 2019

jklymak Oct 24, 2019

jklymak Oct 23, 2019

ImportanceOfBeingErnest Oct 23, 2019

jklymak Oct 23, 2019

timhoffm Oct 23, 2019

dorafc Oct 24, 2019

jklymak Oct 23, 2019

dorafc Oct 24, 2019

jklymak commented Oct 23, 2019

story645 commented Oct 23, 2019 •

edited

Loading

QuLogic commented Oct 24, 2019

dorafc commented Oct 24, 2019

dorafc commented Oct 24, 2019

tacaswell commented Oct 24, 2019

story645 commented Oct 24, 2019 •

edited

Loading

QuLogic commented Oct 24, 2019

efiring commented Oct 24, 2019

story645 left a comment

dorafc commented Oct 25, 2019

	body {
	font-family: "Helvetica Neue", Helvetica, 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;

DOC: adding main nav to site #15489

DOC: adding main nav to site #15489

Conversation

dorafc commented Oct 23, 2019

PR SUMMARY

efiring commented Oct 23, 2019

timhoffm commented Oct 23, 2019

jklymak commented Oct 23, 2019

ImportanceOfBeingErnest commented Oct 23, 2019

jklymak left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jklymak commented Oct 23, 2019

story645 commented Oct 23, 2019 • edited Loading

QuLogic commented Oct 24, 2019

dorafc commented Oct 24, 2019

dorafc commented Oct 24, 2019

tacaswell commented Oct 24, 2019

story645 commented Oct 24, 2019 • edited Loading

QuLogic commented Oct 24, 2019

efiring commented Oct 24, 2019

story645 left a comment

Choose a reason for hiding this comment

dorafc commented Oct 25, 2019

story645 commented Oct 23, 2019 •

edited

Loading

story645 commented Oct 24, 2019 •

edited

Loading