Revisit detail page header layout - Starter Showcase

[shannonbux]

@fk can provide design

[fk]

Ref. https://github.com/gatsbyjs/gatsby/issues/6098#issuecomment-400325261. I'll provide a design that handles both use cases.

[shannonbux]

@fk do we need this issue and #6098?

[swyxio]

alright i'll wait for this

[fk]

@shannonbux Let's keep one for starter and one for site showcase.

[fk]

I took a stab at bringing site and starter showcase headers for detail/modal pages closer to each other yesterday (these only show the relevant bits, not the whole page layout):

https://www.figma.com/file/SDk6oSBkddeq1tBYQuPHr9Pd/gatsbyjs.org%3Ashowcase.v3?node-id=52%3A3941

• add a "(Back to) All Starters/All Showcase Sites" link (as discussed in https://github.com/gatsbyjs/gatsby/issues/6711#issuecomment-408539862 ff)
• move the Starter Showcase author link below the starter title to avoid conflicts with the "(Back to) All…" links, and to get rid of one the main differences that currently exists between the two headers
• prevent the "Visit site"/"Visit demo" and "Share" menu buttons from conflicting with the site screenshot on detail pages for screens larger than mobile (as discussed in https://github.com/gatsbyjs/gatsby/issues/6098 ff)
  • move "Visit site"/"Visit demo" buttons below the starter title
  • move "Share" button next to "Source" link
  • for small screens move those buttons down to the right bottom edge of the screenshot; no other changes for mobile devices here (as explained in https://github.com/gatsbyjs/gatsby/issues/6098#issuecomment-400325261)
• move the "GitHub stars" count and icon below the starter title
• revisited the design of the "Try this starter on" links/buttons (repl.it, CodeSandbox, Netlify)
  • introduced a dropdown for smaller screens, thinking we can also use that for the "Share" menu links
• tried orange for the primary button on detail pages

Should we open a new issue to discuss the changes?

[shannonbux]

I love these @fk! Especially the desktop versions. And with the mobile versions you've solved a lot of tricky problems elegantly. I only have a couple comments:

• The mobile detail:starter drop-down menu to "try this starter on..." confused me for some reason. Just thinking outloud, I think it's because I'd expect some sort of button to push after selecting something from the dropdown. I'd be nervous that as I'm scrolling, I could accidentally initiate an action I didn't mean to just through scrolling with my thumb.
• I noticed the "visit this site" and social sharing button are on the screenshots on mobile views. It's tricky to know where else to put them since there is less space, and yet it still seems worth trying because of the potential for people to confuse the buttons as part of the site :)

If opening a new issue and closing this one would help you stay organized or if you can think of other reasons to do it, go ahead!

[fk]

If opening a new issue and closing this one would help you stay organized or if you can think of other reasons to do it, go ahead!

Generally I think it could help if would separate feature discussion from implementation -- as both #6710 and #6098 already contain a bit of discussion, let's move along with this as it is. I'll pay attention to this for new stuff though.

---

Good to hear that you like the changes! 👍

The mobile detail:starter drop-down menu to "try this starter on..." confused me for some reason. Just thinking outloud, I think it's because I'd expect some sort of button to push after selecting something from the dropdown. I'd be nervous that as I'm scrolling, I could accidentally initiate an action I didn't mean to just through scrolling with my thumb.

IMO that's not only an issue with the links in the dropdown, but also with any other link on the page. Phones do a good job at distinguishing between "tap" and "scroll" usually. I really don't know how to solve this problem in a different way other than using a dropdown (which is not too costly to implement, at least for what we need in this specific case) or a "bottom sheet" (a little more costly, see e.g. https://material.io/design/components/sheets-bottom.html#modal-bottom-sheet). FWIW I really like the "bottom sheet" pattern and would prefer that on mobile.

I noticed the "visit this site" and social sharing button are on the screenshots on mobile views. It's tricky to know where else to put them since there is less space, and yet it still seems worth trying because of the potential for people to confuse the buttons as part of the site :)

We def. can put them elsewhere, but would lose some vertical space. I think you make a valid point here and streamlining the implementation wouldn't be a bad thing, either. Let me add another set of designs to try!

[fk]

Here's a shot at moving "Visit site/starter" and "Share" menu buttons away from the screenshot on mobile:

(also available in Figma at https://www.figma.com/file/SDk6oSBkddeq1tBYQuPHr9Pd/gatsbyjs.org%3Ashowcase.v3?node-id=52%3A3941)

The only thing we'd lose this way is the explicit site URL for the "Site Showcase" card ("2017.stateofeuropeantech.com"); I think that's perfectly OK. For the starter I demoed the truncation of the "builder" name ("By greglobinski-longnam...") and removed the "Built" from "Built by" to gain a little more horizontal space. Button text could be 1px vigger.

[shannonbux]

Looks great and in agreement with all responses to my questions @fk!

On Tue, Jul 31, 2018 at 1:00 PM, Florian Kissling notifications@github.com wrote:

Here's a shot at moving "Visit site/starter" and "Share" menu buttons away from the screenshot on mobile:

[image: image] https://user-images.githubusercontent.com/21834/43480670-3b8b7f04-9504-11e8-8c66-b0a63044a34a.png

(also available in Figma at https://www.figma.com/file/ SDk6oSBkddeq1tBYQuPHr9Pd/gatsbyjs.org%3Ashowcase.v3?node-id=52%3A3941)

The only thing we'd lose this way is the explicit site URL for the "Site Showcase" card ("2017.stateofeuropeantech.com"); I think that's perfectly OK. For the starter I demoed the truncation of the "builder" name ("By greglobinski-longnam...") and removed the "Built" from "Built by" to gain a little more horizontal space. Button text could be 1px vigger.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/6710#issuecomment-409331681, or mute the thread https://github.com/notifications/unsubscribe-auth/Ae9o2j549mtJ7BAvnzM3m1I6YkGrAvg6ks5uMKlkgaJpZM4VeA68 .

[amberleyromo]

update: @fk is creating updated mockups from more recent discussion

[fk]

Welcome to round 3 of mockups for this 🙄😁 🎉 But why?

Chatting with @amberleyromo about this issue and the latest mockups, Amberley pointed out some things missing in the consolidated designs shown earlier in this thread. More importantly, we discussed how to handle the differences in between mobile and desktop designs in terms of implementation, and realized that some of the decisions made for those designs unneccesary complicated the implementation without having a real benefit for the user.

Without further ado, here's the updated shots (please visit the source on Figma if you're having problems seeing the details):

These do…

• not pull the "Back to Overview" ("All Starters/Sites") links to the left for desktop screens anymore—instead we stick to a "linear", easily scanable layout for desktop, too
• adjust the Starter's "GitHub stars" count styles to get rid of the almost-illegible yellow, and darken the count number text color
• honor the "GitHub stars" count in the mobile designs—where they were missing before
• move all meta data that (we assume) is not super important below the screenshot
• consistently group the "Visit Demo/Site" and the "Share" link buttons—no more special treatment for the button opening the "Share" menu for desktop screens
• consistently place the "Visit+Share" button group aligned to the right of the screenshot—we felt this makes them stand out more, and nicely balances out the weight of the left hand side
• reshuffle the "primary meta row" below the title so that the "by John Doe" author credit is consistently followed by the "Visit/Share" button group
• move all other important meta to preceed the "author credit/Visit+Share button group"—this makes it easier to facilitate the different designs for mobile and desktop
• give "Category" and "Added/Updated" their own rows on mobile to make implementation easier
• don't overload the user with too much meta information—move the second row of meta below the screenshot consistently for mobile and desktop; not too attached to that change, but I want to suggest testing this—that said, the design/layout adjustments proposed here should make moving that row before the screenshot for desktop easy
• removed all those subtle horizontal and vertical lines separating the different meta rows and "columns"

@shannonbux Do you think the updated designs hold up to the earlier versions? Anything I missed @amberleyromo?

[amberleyromo]

@fk

removed all those subtle horizontal and vertical lines separating the different meta rows and "columns"

Subtle horizontal lines still in the mobile view (which I think makes sense) Intentional?

[fk]

Yes, I think they help on mobile. Sorry for not clearly stating that!

Sent from my Amiga 500

Am 30.08.2018 um 19:32 schrieb Amberley notifications@github.com:

@fk

removed all those subtle horizontal and vertical lines separating the different meta rows and "columns"

Subtle horizontal lines still in the mobile view (which I think makes sense) Intentional?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[amberleyromo]

@shannonbux all comments addressed in figma -- started on #7731. Can we close this one out?

[shannonbux]

closing and starting on #7731 thanks @fk and @amberleyromo !

[fk]

👍