Figure out navigation

[mxstbr]

Right now, even on a large screen, large portions of the nav are cut off:

That's not good, and it'll only get worse as we add more content to the site. We should figure out a better way of doing navigation.

We need a top nav for the "big pages" that should persist across all pages. (Homepage, Docs, Docs -> Basics, Docs -> Advanced, Docs -> FAQ, Docs -> Tooling, etc) We'll then likely still need some sort of side nav for the docs pages to navigate within them.

Any design/layout ideas and implementations welcome!

[morajabi]

Should we continue about nav and other stuff here or on the Spectrum?

[mxstbr]

Let's continue here so everybody can chime in, this is better suited for the design discussion!

[SaraVieira]

How about the inner pages being dropdown when you click the main page ?

[wking-io]

I really like the top nav with conditional side nav option! I think that could work really well making the top nav the gradient background and then the side nav being a lighter gray to differentiate it from the main content.

I think the logo could then be broken into the icon on the left and styled components text beside it. Then on mobile the text can be removed and only the icon is there.

Mockup here:

[mxstbr]

I quite like the two navigations! Two quick ideas:

• What about showing all sections in the sidebar but collapse them except for the one you're on. So in your case you're on Basics, so it'd show Basics + all the subpages, and then beneath that it'd show "Advanced", "API Reference" and "FAQ" but without their subpages listed?
• That frees us up on the top bar to do more things there. Since we're adding a bunch more broad sections like "Tooling" that'd get filled up pretty quick. We'll also add stuff like a search input (ref Add site search #85) etc. What do you think about just making it list "Home" and "Docs", and then having a search input?

[kitten]

I really like it as well :) two things however: I think the gradient is a bit off but don’t worry, since it’s already present in the code; second thing is the content container size. The one we have fits the content really well and the one in the design is too wide, so I’d probably preserve the current one.

Apart from that this looks really awesome! Maybe I should try to work on a first version? I actually do have time today. That is, if no one else is more stoked and motivated than i am ;)

[mxstbr]

Do it!

I'm not sure I like the gradient at the top (too much imo, the one on the homepage is enough; I'm not a fan of our current sidebar one either) and the android-like treatment if the selected states but I think this would be a great prototype to get out 😊

[morajabi]

What about my design on nav? It seems you’re going with this one.

[kitten]

@mxstbr

I'm not sure I like the gradient at the top (too much imo, the one on the homepage is enough; I'm not a fan of our current sidebar one either)

Wut! 😆 That's A1 branding right here

@morajabi Can you post your design here so we can combine the two? I really like the dropdown behaviour of yours, while this one has a good alternative for the sidebar.

[wking-io]

@philpl

second thing is the content container size. The one we have fits the content really well and the one in the design is too wide, so I’d probably preserve the current one.

I think I just have a larger screen! It was not my intention to redesign the content haha

I think the plan with the main nav being more universal links is better! Was not aware of the expansion of the site!

Also, I agree! part of the brand to me is the gradient now, but I think that it could just be the palevioletred as well and get the job done. 💯

[kitten]

@wking-io no worries! Just a note on my end regarding the sizing

The gradient is actually a big question on my end here. I wasn’t aware that you’re more in favour of a more simple design, @mxstbr. Maybe we need some more feedback on some variations? It’d be simple to tweet out a plain flat-colour navigation bar vs the gradient one. I’m definitely in favour of only having the gradient on the navbar and not the sidebar. It makes it less attention grabbing.

The gradient in general was an attempt to transition the branding from a brutalist approach to a minimalistic one. And overall people have reacted supportive of it, including @geelen. The navbar is certainly another question, but it does carry over some “fun” aspects and sets it apart from other sites.

Happy to hear everyone’s thoughts on this 😬

[kitten]

Oh, btw, regarding the navbar + sidebar. I’d really love to reconcile this effort with @morajabi’s work. We’ll also need to think of the collapsed sidebar for mobile devices / smaller screens. In those cases it’s probably impossible to get around scrolling, but we have to design and think about it beforehand. For instance, a DropDown is good on desktop but horrible on touch devices, and scrolling will be necessary still on smaller screens and phones

Edit: Including @morajabi's design to speed things up a little

[morajabi]

I think putting documentation headings in the sidebar makes more sense and it's easy to navigate. You should let the nav bar handle other things like what Babel, Webpack, Jest, React and others did and use a sidebar for content navigation. Anyway, it's my opinion :)

I think what Redux did for navigation on mobile with a ||| (rotate 90deg) icon is great for mobile users.

P.S: If have any opinions or you want to combine the best of two designs, I'd be happy to make a new design based what we need.

[morajabi]

For instance, a DropDown is good on desktop but horrible on touch devices, and scrolling will be necessary still on smaller screens and phones

What do you mean by scrolling? Where?

[morajabi]

What about showing all sections in the sidebar but collapse them except for the one you're on. So in your case you're on Basics, so it'd show Basics + all the subpages, and then beneath that it'd show "Advanced", "API Reference" and "FAQ" but without their subpages listed?

@mxstbr I like this idea and it's more common in latest libs' docs.

[kitten]

@morajabi

What do you mean by scrolling? Where?

That navigation sidemenu might collapse on small screens. But since the screen is not only not wide enough, but also not long enough, you'll need to be able to scroll the content. So we might get rid of scrolling on desktop, but not on mobile. Which is ok! We just need to remember this.

Btw; Here's instead of the screenshots a gif. @morajabi feel free to remove the images; I think this illustrates what we'd like a bit better :)

[morajabi]

Of course, GIF is better, Thanks for that :) @philpl

What's your opinion on having Basic, Advanced and FAQ parts in the sidebar? (Read my earlier messages)

[mxstbr]

The gradient is actually a big question on my end here.

It's works super well on the homepage, but it feels forced and weird on the navbar to me. The navbar is a utility, it shouldn't be the first thing you look at when you look at the page?

I like where these designs are going, I can see the dropdowns in the nav working too!

[morajabi]

I think we should start to sum up what we expect from a nav, shouldn't we?

[wking-io]

The navbar is a utility, it shouldn't be the first thing you look at when you look at the page

Agreed! When you put it like that I think that @morajabi is right and we should outline the priority/hierarchy of the pages so we know where the focus is. Because it the above is true then I think we can really reduce the design and make the content on the pages themselves the focus.

[morajabi]

@philpl I will give it a hand if everyone is OK. Let me know.

[mxstbr]

Yes please!

[morajabi]

@philpl What do you mean by this?

It should not break up the text

[morajabi]

@mxstbr @philpl I've redesigned the parts and added some artboards and notes for each state. I copied the nav and changed the colour to see if it's what we like. (Don't forget to enable comment-mode from top left menu to see some comments). Also, the links I've put in the nav have no purpose and they're just placeholders as I didn't know which links are we going to put there.

I'd appreciate your comments on that. And we can edit the parts which are not your preference.
https://www.figma.com/file/ZZHoPeTYKNtNqcLYnRsQSVxR/Styled-Components

BTW, I think we need to redesign the Home page, too. With some extra elements (i.e tweets, who's using, use cases with image or GIF, etc). A richer page just like Jest, Flow, Babel and others. what do you think?

[kitten]

@morajabi sorry, that was a bit unclear:

It should not break up the text

... of the "styled-components" wording on the left

Edit: Just had a look and I think we should roll with it 🎉, although I'd like to see whether we can make due with the change above, even though it takes up more space. I don't necessarily want to perpetuate the "styled components" (no dash) name even more.

Really amazing work on mobile! I think that should work perfectly

I think we need to redesign the Home page, too. With some extra elements (i.e tweets, who's using, use cases with image or GIF, etc). A richer page just like Jest, Flow, Babel and others. what do you think?

We have some other issues open for separate pages for tweets, etc. Right now the content is already a bit much and I think we need a visual space for the badges, but overall I think we should incrementally change it, and not change everything we can right now all at once.

[morajabi]

@philpl I'm glad you liked it!

I'd like to see whether we can make due with the change above, even though it takes up more space. I don't necessarily want to perpetuate the "styled components" (no dash) name even more.

I see, What font & styling should I use for the styled components?

[kitten]

@morajabi So there's a couple of options here:

• Use the typography as is in the logo (with the line break which doesn't contain the dash, but seems to fit in the navbar nicely)
• Use the body font (that's probably not a good idea, since we can just export a png)
• Use the styled-components on a single line with the appropriate font

I actually realised that your design almost matches the logo but changed the styled part of it to appear in bold. That's what confused me initially, and we can't change details like these unfortunately. I think it'd be best just to export the typography with the logo to the right side.

You can find the resources here: https://github.com/styled-components/brand

In case you don't have Sketch, I can export it in the format you need later today

[morajabi]

@philpl That was just a quick placeholder! I have Sketch actually but I used Figma because it has better collaboration support.

[morajabi]

What do you think now? @philpl

[kitten]

@morajabi That looks perfect! Just have to make sure to export the wording of the logo as an image when we actually build this as we're not using Fira Sans anywhere else on the site :)

[morajabi]

@philpl That's OK but if we're going to import other fonts from Google, we can import just the letters s,t,y,l,e,d,c,o,m,p,n from Fira Sans like this:
https://fonts.googleapis.com/css?family=Fira+Sans:500&text=styledcompn
as discussed here. Just a suggestion if we're going to have style component logotype anywhere else, otherwise we'll use an SVG.

[mxstbr]

I love it, getting there for sure!

[morajabi]

Wow! I really appreciate that @mxstbr

[mxstbr]

Since nobody has commented in the negative yet, let's implement this? 😊

[morajabi]

Great! I'm busy now, Is it OK I start doing this tomorrow?

[mxstbr]

Sounds great to me!

[morajabi]

One question, should I implement it on a branch of the current website? Is home page going to be like this? I think it's not going to match the navbar, so we should slightly redesign the first section of home page.

[mxstbr]

Yeah, implement it on a branch and submit a PR!

Is home page going to be like this?

I think we'll have to do some special treatment to the navbar on the homepage (no background?!) but let's figure that out once we have a first version (i.e. a WIP PR) and can quickly iterate?

[morajabi]

Should navbar be sticky?

[mxstbr]

I don't think so, just because it takes away a lot of screen estate on mobile and doesn't really improve the experience, right?

[morajabi]

I think it should be sticky on mobile because it's the only handler to unfold the side nav. If it doesn't stick, you need to scroll all the way up to open side nav!

[mxstbr]

Ah yeah, that's true. Good point let's make it sticky!

[morajabi]

Progress Report: Going for the mobile navbar view.

[morajabi]

@mxstbr @philpl Good news! It's finally done. I'm making the PR now so you can try it!

[morajabi]

@SaraVieira Can you take look? I'd be glad to know what you think, too!

[SaraVieira]

@morajabi I will do that tonight 🎉