Redesign navbar of .org

[fk]

There are items we want to add to the .org navbar but there's not screen real estate right now:

• Community (now, see [www] Add "community" page to the site and link to it from main navigation #6377)
• Starters (soon, see Main navigation expansion - starter showcase #6718)
• People / Organizations (soon, see Rfc individual agency company pages rfcs#8)

We should think through how we want to handle this.

[fk]

I want to suggest to use this issue to track a short-term, practical fix that allows us to add "Starters", "Community", and "Creators (People/Organizations)" to the navbar for both desktop and mobile without too much effort.

As mentioned in #6377 (comment), this could be done using the "Priority Nav" pattern:

• http://bradfrost.com/blog/post/revisiting-the-priority-pattern/
• a jQuery plugin that does a good job at demonstrating how that would look for out navbar on desktop: http://gijsroge.github.io/priority-nav.js/
• a OSS react component implementing the pattern: https://github.com/ericyip/react-priority-navigation

Pros:

• relatively easy to implement
• facilitates keeping as much navbar items visible as screen real estate allows

Drawbacks:

• requires us to make an assumption about the relative importance of each navigation item -- the ones we place first are less likely to ever be hidden in a "More" dropdown
• no clear active state for "hidden" items: if an item currently "stashed away" in the "More" dropdown is active, we can only highlight the "More" label that allows toggling the dropdown containing the active item

Following up on this, I want to suggest thinking about the .org main navigation holistically and long-term — including e.g. breadcrumbs…

Where am I? (Present)
Where can I go? (Future)
Where have I been? (Past)

a footer navigation, adding previous/next article links at the bottom of doc and tutorial pages, improving search, discuss how adding a second level to the main navigation and regrouping items to reduce the number of top-level items potentially could help with current and future requirements, e.g.

• Documentation/Learn
  • Quick Start
  • Tutorial
  • Guides
  • Reference/API
  • …
• Ecosystem
  • Plugins
  • Starters
  • Themes
• Showcase/Expo
  • Sites
  • Features
• Community
  • Overview
  • Creators
  • Partners
  • Contributing
• Blog

[shannonbux]

I agree with the direction of these ideas, @fk!

Re: how to identify priorities. Google analytics! The most common pages are:

/
/docs/
/docs/starters/
/docs/netlify-cms/
/docs/querying-with-graphql/
/docs/gatsby-link/
/docs/gatsby-image/
/docs/adding-images-fonts-and-files/
/blog/2018-2-16-how-to-build-a-website-with-react/
/docs/deploy-gatsby/
/docs/node-apis/
/showcase/

https://analytics.google.com/analytics/web/?authuser=1#/report/content-landing-pages/a93349937w138068257p142357465/_u.dateOption=last30days&explorer-table.secSegmentId=analytics.sourceMedium&explorer-table.plotKeys=%5B%5D&explorer-table.rowCount=250

And since most of these page views come from google search, we can assume that these pages aren't popular because they are prominent, but rather because people are intentionally searching for them.

Re: second level to the navigation.
Apollo actually has different sidebars for each section of their docs: https://www.apollographql.com/docs/engine/
https://www.apollographql.com/docs/link/

^ notice the /engine/ docs are different than /link/ docs

I've been thinking our site is growing enough, we might need to do something similar, although I don't love the animation/interaction with their dropdown menus.

[calcsam]

@KyleAMathews what were your thoughts on the priority nav in general? Re the rough video Flo made:

dropbox.com/s/391aa7bomr20sv6/priority-nav.mov?dl=0

[KyleAMathews]

Priority nav / drop downs are clunky + encourage not thinking hard about what's actually important.

• https://roundpeg.biz/2015/04/drop-drop-menu/
• https://neilpatel.com/blog/common-website-navigation-mistakes/
• https://www.rocketspark.com/blog/drop-down-menus-5-reasons-we-dont-use-them-and-3-tips-what-do-instead/

Mega-menus (dropdowns with lots of links) are the one exception to the rule. But we're not discussing mega-menus.

[fk]

Thank you for the links, Kyle! 🙏

I'll sketch an alternative approach based on the regrouped top-level navigation structure I posted in #7544 (comment):

• Documentation/Learn
  • Quick Start
  • Tutorial
  • Guides
  • Reference/API
  • …
• Ecosystem
  • Plugins
  • Starters
  • Themes
• Showcase/Expo
  • Sites
  • Features
• Community
  • Overview
  • Creators
  • Partners
  • Contributing
• Blog

[fk]

Based on regrouping our top-level navigation items to a maximum of five items (as outlined in #7544 (comment)), one way to free us from dropdowns (or hamburger menus) for the main navigation would be to introduce a landing page for each top-level navigation item—see the first screen here (Figma source):

• five items work both in our mobile navigation at the bottom of the viewport, as well as for desktop, where the main navigation is placed in the site header
• minimizing the menu helps to not paralyse users into indecision
• broad targets also help making content the user might be interested in but does not yet know about more discoverable
• landing pages provide us with the necessary space to (optionally) add descriptions to subsections
• things explored in these mockups:
  • active state for mobile navigation items
  • "Blog" could become "News"—we could e.g. feature noteworthy external content on this landing page
  • adds a breadcrumb path above the page title, answering "Where am I? (Present)" (and potentially "Where have I been? (Past)")
  • adds icons for the landing page items—while I don't think we should have those for every item on these pages, but I feel they would be worth it for the "Documentation" and "Showcase/Expo" sections
  • quick first shots at "Community" and "Ecosystem" icons

[fk]

One drawback of those landing pages however is that they force the more experienced users to "click through" a landing page to get to a subsection they know they want to go to (note that this assumes that these users do navigate to those pages using the navigation, and not by e.g. using a bookmark or typing out parts of the URL in their browser address field).

Bottom line: I can see how dropdowns help to navigate quicker on desktop.
How could a "dropdown-like" UI work on mobile devices?
Here's a not-so-clunky "bottom sheet/slide-up navigation drawer" approach:

• every navigation requires two taps—one to open the menu drawer, the next one to navigate to a section/page—which equals the landing page scenario
• in terms of "navigate quicker", this approach only pays off if we would want to provide another level of navigation items in the main navigation, e.g. "Tutorial Part 1, 2, 3…" nested below the "Tutorial" item; again, this IMO adds confusion and unnecessarily raises the amount of information to process—ideally, we want to keep the amount of items below the magic "7" (https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two)
• already the top-most level of the navigation demands a choice, something which i believe to add confusion for new users

[KyleAMathews]

These look awesome Flo!

I don't see multiple clicks as an issue even for Gatsby users. Changing pages is just as fast a slider with Gatsby. The main thing is that each step should be obvious and your mockup does that.

[calcsam]

I've been thinking about this more and am coming around to agree with @KyleAMathews that we should ultimately have separate landing pages for each top-level concept, because we need a .org information hierarchy the same way.

@fk what are your thoughts for the desktop versions of each of these pages? (Documentation/Ecosystem/Expo/Community)

[fk]

@calcsam I scribbled a bit today to think about the difference of the (new working draft) main sections (Documentation/Ecosystem/Expo/Community/News); I need a little more time there, but I'm quite happy with how things are working out. Will def. share something tomorrow.

I also started mocking up the "Docs" landing page today:

• How about we add an "External Resources" section to that page (linking e.g. to the egghead.io Gatsby courses and lessons?
• added a couple more icon ideas
• colored rectangles are illustration placeholders—I'd really like to have some bespoke illustrations for our most important sections; while I think the card-based layout works without them, I think it's worth to invest a little time here
• moved the Figma source to the Figma Gatsby team

[calcsam]

Flo this looks amazing. 💯 to the card-based layout and bespoke illustrations.

Really excited to see what you come up with for the other pages!

[fk]

Here's my first shot at what the "Ecosystem" landing page with "Plugins" and "Starters" (not yet "Themes" ;-)) could look like for bigger screens:

• we only link to two sections here currently, so a lot of potential whitespace to fill for bigger screens
• one idea to fill that space was to feature the most downloaded/starred plugins and starters on the landing page, but…
• I decided to keep it simple for now and instead show a bunch of integrated service/data source logos in the background
  • while animating them is tempting, I would go for a simple background image for the beginning
• the "shashlik" icon used for "Starters" is just a placeholder ;-), other ideas:
  • spark plug
  • jump starter
  • food tray and cover (similar to https://www.gatsbyjs.com/guides/)
  • blueprint
  • rocket
  • car key

[fk]

Looking at https://next.gatsbyjs.org/docs/awesome-gatsby/ (a little too late), I'm wondering if the "Ecosystem" section also would be a good place to house the other external resources we're currently listing on "Awesome Gatsby":

• Tools
• Tutorials
• Podcasts
• Videos

along with similar like the egghead.io Gatsby courses and lessons I mentioned earlier?

The definition of "ecosystem" makes me think this might be the right place—and both plugins and starters to a large extent are "external", too.

What do y'all think?

[calcsam]

@fk -- I agree this looks pretty empty.

I wonder if we could "preview" each section.

For example, a plugin library section below the plugin library card with a search bar and two/three plugins and when you start typing in it (or click one of the plugins), it takes you to the plugin library page

I don't we should break out "Awesome Gatsby" into subsections -- the traffic to that page has gone down by half since January despite overall site traffic going way up, as we've pulled out important parts into their own sections, and the traffic is way lower than other parts. An "External Resources" card could be fine.

[fk]

Here's a couple of things I have been playing around with:

• added a first shot at the "a plugin library section" as suggested by @calcsam
• exploring different card layouts for "Plugins" and "Starters"
• added a "External Resources" card

^ not too happy with that yet, but I think the "horizontal scroller" for mobile is not too bad:

Also took a look at the "Showcase/Expo" section:

• used a horizontal slider there to tease/show subsection content
• cards have secondary CTA buttons to directly jump to related content/section pages

[calcsam]

Love these Flo. Only comment is maybe we get rid of the Showcase card, and add a Companies Building with Gatsby section below the Featured Sites teaser.

…

---- Sam Bhagwat Co-founder & Head of Enterprise, Gatsby 650.468.0587

On Wed, Aug 29, 2018 at 8:46 AM, Florian Kissling ***@***.***> wrote: Here's a couple of things I have been playing around with: - added a first shot at the "a plugin library section" as suggested by @calcsam <https://github.com/calcsam> - exploring different card layouts for "Plugins" and "Starters" - added a "External Resources" card [image: desktop_ ecosystem] <https://user-images.githubusercontent.com/21834/44797652-fdc56a00-abaf-11e8-96f3-59a70c15ddc0.png> ^ not too happy with that yet, but I think the "horizontal scroller" for mobile is not too bad: [image: mobile_ ecosystem] <https://user-images.githubusercontent.com/21834/44797999-c0151100-abb0-11e8-8e57-3c725ac467ef.png> Also took a look at the "Showcase/Expo" section: - used a horizontal slider there to tease/show subsection content - cards have secondary CTA buttons to directly jump to related content/section pages [image: desktop_ expo] <https://user-images.githubusercontent.com/21834/44798088-f5216380-abb0-11e8-97d0-a28ff956b545.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7544 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEL3WzWbdZlCUPRBu32msE5ZBVlv9az_ks5uVrdKgaJpZM4WH07s> .

[shannonbux]

Closing in favor of #8768 #8769 #8770