Nail tutorials

[corywatilo]

Our tutorials section should get some love, as we'll be investing a lot into new content here.

Things we've tried so far:

1. A feed vs list view, which is gimmicky and not super useful, albeit a cool concept
2. Artwork that seamlessly adapts between light and dark mode

The cons of the artwork process:

1. Each art piece has to be generated in Figma (to specific dimensions)
2. We can't really have small text on it (bylines, etc)
3. We don't display a post title outside of what's in the artwork (on the list view, which doesn't help SEO)

I casually asked @ivanagas if he had any suggestions for this section, and here's what he offered:

• Would be great to filter by tags
• Simplifying CTA for each of the tutorials would be nice, right now we have "further reading" (not consistently done) sign up for newsletter, ask a question, and was this page useful. I think some recommendation for further reading would be nice, but not sure how useful the others are.
• Some way to automatically calculate reading time and tag "difficultly" and put it somewhere else than the beginning of the article.
• Potentially move "Jump to:" sections to top of side bar and share/filed under... to bottom

Considerations

• [ ] We should change how we do artwork, likely more similar to how we generate open graph images for customer stories, where we underlay an image (in the lower right) and have text automatically sit on top – or otherwise find a way to incorporate art on the list view, tutorial page, and custom open graph image

• [ ] Reading time can move to right rail and be automatically calculated

• [ ] We will definitely add tags on the left (in the same format as we have for subnav navigation in docs, handbook) and should display on individual tutorial pages too

  

• [ ] I'd love for us to explore if there's more creative ways to do tutorials as well, especially with regards to collecting/incorporating feedback

• [ ] Could have a "Relevant links" section (not called that) which points to other things like blog posts, docs articles, etc that may be useful

[joethreepwood]

@ivanagas Probably worth you being aware of this btw

[ivanagas]

@lottiecoxon do you could you add some of the mockups here? I have some more ideas but want to integrate with what you have worked on.

[corywatilo]

Just FYI we'll need to go through some polish before we get to actually implementing the updates