confluentinc / kafka-tutorials

Tutorials and Recipes for Apache Kafka
https://developer.confluent.io/tutorials
Apache License 2.0
16 stars 90 forks source link

Tabs for Try/Test/Deploy #2

Closed tlberglund closed 5 years ago

tlberglund commented 5 years ago

The tabs for the separate platforms (kafka, kstreams, and ksql) are super handy. What would we think of extending the tabbing system to the three...let's call them "modalities," so we can sound extra annoying (try/test/deploy)? It might make each recipe page a bit less daunting and require less scrolling.

MichaelDrogalis commented 5 years ago

Nested tabs is a really tricky/taboo UX pattern because it ends up being hard to reason about the content as a viewer. Making adjustments like this would be better left to a real designer. Let's find one!

MichaelDrogalis commented 5 years ago

One thing to add: there's definitely more scrolling than we'd like on the page right now. I think it certainly needs something better in the way of navigating. As an orthogonal solution, one of the things I've seen before and really like are expansion code blocks. Bulma does this in its own documentation:

Screen Shot 2019-04-12 at 8 41 34 AM

The idea is that if the block is bigger than, say, 320px, it's automatically bound at that size unless you choose to expand it. That's one way to make it look friendlier out of the gate.

tlberglund commented 5 years ago

Autocompressed code blocks and a linkable TOC the top of the page work for me! And agreed on nested tabs. Let's just have the TOC be the working TOC for each tab. (NB: combinatorially that is equivalent to dueling tabs, but prolly easier to think about.)

MichaelDrogalis commented 5 years ago

Design's swooping in :)