Pre-final-launch fit and finish

[jessicaschilling]

This issue is for collecting visual or minor functional items that need to be resolved before final launch. Please edit this comment to add any new items. Please open separate issues for larger items.

Site-wide

• Breadcrumbs should appear at the same distance from top of the page across all pages of the site at all viewport widths; please use the blog placement (at the top of the pile) as a source of truth:
  
• Implement accessibility #200

Front page

• This seems like a new issue, but the segment chart is blowing out on narrow mobile (this is 320px wide):
  
• Also as referenced in the above screenshot - what would you think about putting a subtle border or shadow around the Filters button so it doesn't feel like an overlay mistake? I think what's nudging me is areas when it appears white-on-white, so just looks like floating text. I'm sure @D3AS8A has thoughts 😊
• At mobile widths in particular, the margins around the showcase slider make it difficult to tell what the slider actually impacts. Can we please tighten those up?
  
• Am also seeing some strange behavior on resize for the "All projects" header area in general - resulting in margins being huge or occasionally the content sometime disappearing ... I think this has to do with the viewport height just based on behavior, but not sure:
  
• For null filter results, I know we have the "Clear (x) Selected" item, but would it be possible as well to add a text link in the results area, e.g. "No results found that match the selected filters. Clear all"?
  
• Can the logic for keeping the Filters button out of the footer also extend to content below the footer when the page itself is short on content? Example below. Ignore if this sends you down a massive rabbit hole, please!
  
• At super-wide widths, the white space on the left of the filter panel looks odd. @D3AS8A probably has a better idea than me for a fix, but it could just be a matter of making the filter panel background start at the main page body's left margin: animation-wise, the effect would be of the filter panel sliding out rather than expanding out.
  
• If someone clicks on "All projects" in the breadcrumb, they're taken to the "All projects" page with the filter panel open. That's awesome at desktop widths, but at widths narrow enough for the filter panel to take over the whole screen, it's a little jarring. Would it make sense to only expand the filter panel on load for viewports over a certain width?
  

Project pages

• Can the collapse arrows please be vertically centered on the headers they correspond to?
  

• Vertical margins overall on the "Featured projects" section are a little large, particularly at mobile widths:
  
  

• Additionally, for super-wide widths, can you please make the "Featured projects" section no wider than the main body content width?
  

• Big-number boxes and CTAs are a little awkward at mobile widths. Can we please have big-number labels (e.g. "Content identifiers") pack from the top rather than the bottom, and increase the font size of the CTA title (e.g. "Audius case study") - or probably just not decrease it from its previous size?
  
  

• For viewport widths where the big numbers/CTAs stack, can the project description please span the full width of the viewport?
  

• Don't want to override @D3AS8A if she has strong feels on this one, but I've seen folks miss the primary CTA button for "Project website" in cases where there's also a button in the cards (big number/CTA) section. I think the outline style is tripping them up and wonder if it'd be better to use the same primary button style as on the blog/IPFS website (i.e. the style in the "Subscribe" button in the footer)?
  

• For truncated content in the "Key info" section, the question mark hover is a little weird - honestly I think this was an artifact in an earlier wireframe that escaped deletion. Could we please just remove the question mark icon entirely and invoke the hover text by hovering on the truncated text, like on the front page?
  

[timelytree]

At mobile widths in particular, the margins around the showcase slider make it difficult to tell what the slider actually impacts. Can we please tighten those up?

@jessicaschilling this is a bit of a tough one. I managed to tighten it up by 2 rems but the main issue stems from the fact that the slider contains cards with unequal amounts of card title/description text. Because the slider takes the height of the largest card, in some cases when there's less text, it ends up looking like there's just randomly more space *tear (screenshots below)

This is fixable by giving the slider an adaptive height but also would possibly be worse UX because then the slider control would move up/down as the slider re-adjusts height, often moving from under one's finger on mobile. I would make the suggestion to instead select projects to feature that all have equal (or almost equal) amounts of text → or to add more text to the currently featured projects. So ultimately fix by tweaking copy rather than functionality.

What do you think @jessicaschilling? 🙂

one-liners

two-liners

[jessicaschilling]

@timelytree oh, right - that totally makes sense. Can definitely tweak content, I think your approach makes the most sense. And in any case, the 2rem helps a lot 😊

[timelytree]

@jessicaschilling for this item:

At super-wide widths, the white space on the left of the filter panel looks odd. @D3AS8A probably has a better idea than me for a fix, but it could just be a matter of making the filter panel background start at the main page body's left margin: animation-wise, the effect would be of the filter panel sliding out rather than expanding out.

Can you elaborate on this part:

filter panel sliding out rather than expanding out

Also looks-wise we had the idea of making the white fade rather than go forever, what do you think? 🙂

[jessicaschilling]

The fade works! And negates my "sliding out" comment, so feel free to ignore that.

[D3AS8A]

* Don't want to override @D3AS8A if she has strong feels on this one, but I've seen folks miss the primary CTA button for "Project website" in cases where there's also a button in the cards (big number/CTA) section. I think the outline style is tripping them up and wonder if it'd be better to use the same primary button style as on the blog/IPFS website (i.e. the style in the "Subscribe" button in the footer)?

@jessicaschilling

Thanks for flagging this. See image below of proposed solution to reorient users attention to primary CTA (on left). Initially I placed the case study as primary and project site as secondary.

Notes for @timelytree

• box border to #F1F3F2
• in box cta button inverse, filled on hover (button height increased to 40px)
• see other values in XD file

[jessicaschilling]

@D3AS8A Looks good, thanks!

[timelytree]

@jessicaschilling I hope you don't mind → I moved the 2nd item in the list (regarding accessibility) into its own Issue (#200) as it's sort of its own thing that we're going to tackle (starting with tabbing through the nav). We'll populate the Issue with more details soon! 🙂

[timelytree]

Hey @jessicaschilling 👋🏼 I just wanted to outline the list of items that we have left on the docket. I don't think any of these are showstoppers for a hard launch but I'll let you tell me otherwise 😅

• ✓ SEO → already complete and live, just adding some extras and doing an audit, scheduled for this week
• ✓ Accessibility → mostly complete and live, currently underway, scheduled for this week
• ✓ Clean up and abstract nuxt-module-ipfs → currently underway, scheduled for next week
• Abstract out Shipyard → currently underway, scheduled for next week
• Embeddable view → already complete but not live, just making final very minor design tweaks, scheduled for this week
• ✓ Greatly expand settings → complete and awaiting review/merging, scheduled for this week

[jessicaschilling]

Awesome, thanks @timelytree! I think we're in a good place to start promoting this more widely. I've asked the marketing team to get it added to their list of "evergreen" social promo items, and will get a blog post in the works announcing the directory.

[jessicaschilling]

For anyone who's following along at home: work in the depersonalized boilerplate repo is happening at https://github.com/ipfs-shipyard/ecosystem-directory 😊