Gatsby: .org redesign: homepage [design] - blog section

[fk]

Update the "Blog" section design for the revamped gatsbyjs.org homepage.

[fk]

Desktop:

(Not too happy with this, esp. the Newsletter stuff)

[jlengstorf]

@fk I think it's looking pretty sharp overall. A couple ideas:

1. I expected the "view all posts" link to be below the previews. I wonder if the general expectation will align with this?
2. Would it make sense to swap the order of author info and excerpts? That first post (Decoupled Drupal) seems a bit out of balance with the photo at the bottom.
3. Should there be a "read this post" link on each preview?
4. Would a modal workflow make sense for the newsletter? (E.g. "Want to get notified of all posts?" would open a dialog with the form in it.) This could help pull it out of the flow without removing it entirely.

Perhaps the newsletter subscription could move to the top (with the "submit an article" button) if the "all posts" link went to the bottom.

What do you think?

[marisamorby]

Based on our conversations earlier today, we'll allow an image to show in each of these cards, if an image exists for the post. However, a post can be published without an image, in which case the card would show the title, author, and date (as listed in the design). Only the most recent post would show an excerpt.

@lindaleebumblebee: Are you okay with this idea of including an excerpt, or would you prefer we do it a different way?

[lindaleebumblebee]

As long as we keep the titles descriptive and catchy (which we usually do), then I'm good with leaving it as is and only giving a excerpt for the most recent post.

[greglobinski]

@jlengstorf

Would a modal workflow make sense for the newsletter? (E.g. "Want to get notified of all posts?" would open a dialog with the form in it.) This could help pull it out of the flow without removing it entirely.
Perhaps the newsletter subscription could move to the top (with the "submit an article" button) if the "all posts" link went to the bottom.

It depends on the goals of the newsletter (of which I really know nothing yet :) ), if the Newsletter exists only for the convenience of users the idea is ok, but if we care about the form's conversion, I assume we do, the form should stay as a separate section, as it is now, maybe we can even add a script to focus the section/form when scrolling reveals the it in the viewport.

One more, we can motivate to subscribe to the Newsletter this way "to keep up to date with Blog" on Blog pages on Home page we should motivate to be up to date with Gatsby: you will be informed about new blog posts, workshops, talks and everything else... And because of that the Neswletter section should be separate to the Blog section on the Homepage.

So, what are the goals of the Newsletter?

[fk]

@jlengstorf

1. I expected the "view all posts" link to be below the previews. I wonder if the general expectation will align with this?

I agree — ironically I had a link like this in the initial design; removed it b/c I felt it conflicted with the newsletter form.

1. Would it make sense to swap the order of author info and excerpts? That first post (Decoupled Drupal) seems a bit out of balance with the photo at the bottom.

I wondered about that when I added the "card" design to https://www.gatsbyjs.org/blog/ somewhere…last year? I decided too keep the existing order back then because I felt the author information to be less important than the excerpt in terms of making a decision "Do I want to read this article". Not a big issue though, not attached to the current order much. What you suggest probably is "more correct" in terms of a blog post's information hierarchy.

1. Should there be a "read this post" link on each preview?

That'd make things very clear, but IMO also clutter up stuff (a little ;-)). Until now we assumed that people would figure out that the whole card is click-/tapable.

1. Would a modal workflow make sense for the newsletter? (E.g. "Want to get notified of all posts?" would open a dialog with the form in it.) This could help pull it out of the flow without removing it entirely.

When working on the store, we identified that modals take some work to make them "behave" on mobile. Agree about pulling it out of the flow without removing it entirely.

Perhaps the newsletter subscription could move to the top (with the "submit an article" button) if the "all posts" link went to the bottom.

@greglobinski's comment above — turning the newsletter form into its own section — resonates with me a lot; I'd like to give that a try.

Worth noting in this context is that @calcsam briefed me to add a newsletter signup form above the fold.

Will work on adding the suggestions and come back with an updated design: ✌️

[fk]

Not very inspired today :/, had such a hard time coming up with that newsletter component… 😓

• moved author/timestamp meta below headline
• added (calm) "Read more" links to all blog post cards (and not mad about it at all, thanks for making that call @jlengstorf 🤗)
• optimized/tidied up whitespace/margins in blog post cards
• "universal" newsletter component (have to say that a "Subscribe to newsletter" button is growing on me)
• added "View all Posts" card—couldn't really make a regular button work

[amberleyromo]

@fk I like it! I think the newsletter component design is a huge improvement. I also like the card for "View all Posts".

[lindaleebumblebee]

So are we calling the blog 'Gatsby Gazette' now? I like the name but we also use that name for the maintainer's weekly email so we don't want confusion there. I love the newsletter sign up CTA- that looks great. Other than that- it looks good to me.

[fk]

@lindaleebumblebee No, I picked that title pretty much randomly; just commented on that over at https://github.com/gatsbyjs/gatsby/issues/9744#issuecomment-436356162, totally agree with your reservations.

[shannonbux]

(edit from the future: moved my content suggestion over to the content issue)

One design question: Would the arrow show up when I hover over "Submit an Article" too @fk @greglobinski ?

[lindaleebumblebee]

@lindaleebumblebee No, I picked that title pretty much randomly; just commented on that over at #9744 (comment), totally agree with your reservations.

Thanks Flo. In that case, I'd title that section as 'The Gatsby Blog'. It's not super exciting, but people will know exactly what that is. Other than that, looks great to me.

[fk]

One design question: Would the arrow show up when I hover over "Submit an Article" too

Argh! Thanks for asking that, @shannonbux. That arrow is a leftover from the first design iteration and shouldn't be there at all anymore. If we want an icon, it should go to the right of the button label.

The purple background IMO is enough to show that this is the primary button.
Wondering if you like the arrow though?

[shannonbux]

@fk I do like the arrow, just not sure how you would be able to use it when
multiple buttons are side-by-side. The purple background is enough for now
I think! I do like the arrow though... :)

On Tue, Nov 6, 2018 at 3:15 PM Florian Kissling [e-mail]
wrote:

One design question: Would the arrow show up when I hover over "Submit an
Article" too

Argh! Thanks for asking that, @shannonbux https://github.com/shannonbux.
That arrow is a leftover from the first design iteration and shouldn't be
there at all anymore. If we want an icon, it should go to the right of the
button label.

The purple background IMO is enough to show that this is the primary
button.
Wondering if you like the arrow though?

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

[fk]

Here's an updated version of the "Desktop" layout:

• updated headline to say "The Gatsby Blog". Writing this, I realize that I introduced a regression here: The current "Blog" section on https://www.gatsbyjs.org/ has the title "Latest from the Gatsby blog", hinting to the user that the following content only is an excerpt—the latest _n_ posts—and that there's more to read. Should we go with the existing "Lastest from the Gatsby blog" headline?
• removed arrow from button, sentence caps for buttons (thanks @shannonbux!)

[lindaleebumblebee]

Yes, good call out @fk to say 'Latest from the Gatsby Blog' for this section and then 'The Gatsby Blog' for when a visitor is actually on the blog page.

[fk]

Here's a shot at mobile using the "horizontal scrolling cards" from "Ecosystem":

• not showing images and excerpts to keep the card height relatively even
• I don't think we need an additional "View all posts" card in the scroller, or a button below the scroller

[fk]

…and here's one alternative with card content matching the "Desktop" layout:

That "View all posts" card at the bottom (that is a square smallish card on "Desktop") unfortunately introduces an element that is somewhere in between card and button. Would be thankful for any ideas to avoid that…maybe just use a regular button for mobile and style that as card for desktop?

[lindaleebumblebee]

I vote for the top one as it keeps the newsletter CTA higher up on the page
and people can still scroll through the featured blog posts.

On Wed, Nov 7, 2018 at 8:07 AM Florian Kissling [e-mail]
wrote:

…and here's one alternative with card content matching the "Desktop"
layout:

[image: mobile_ homepage_ ecosystem_2]
https://user-images.githubusercontent.com/21834/48143505-361fad80-e2af-11e8-91bf-b60faa3c027b.png

That "View all posts" card at the bottom (that is a square smallish card
on "Desktop") unfortunately introduces an element that is somewhere in
between card and button. Would be thankful for any ideas to avoid
that…maybe just use a regular button for mobile and style that as card for
desktop?

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

--
Linda Watkins
Director of Marketing
Gatsby https://www.gatsbyjs.com/

[shannonbux]

not showing images and excerpts to keep the card height relatively even

that does look nice!

I don't think we need an additional "View all posts" card in the scroller, or a
button below the scroller

agreed

I love the sentence caps btw! Glad that worked out.

as far as small/even cards vs. cards with more content. What about using cards with content and making them horizontally scroll to still keep the newsletter CTA visible? Is that possible? I'm guessing it's tricky b/c the content is different length for each card.

If that's not possible, then my vote is with Linda's. The newsletter CTA is important enough to prioritize it!

[amberleyromo]

What about using cards with content and making them horizontally scroll to still keep the newsletter CTA visible?

@shannonbux 👍🏼 that was @fk's suggestion from here: https://github.com/gatsbyjs/gatsby/issues/9711#issuecomment-436675662

@fk @greglobinski I agree with @shannonbux and @lindaleebumblebee:

not showing images and excerpts to keep the card height relatively even

agree

I don't think we need an additional "View all posts" card in the scroller, or a
button below the scroller

agree

Let's go with this version for mobile: https://github.com/gatsbyjs/gatsby/issues/9711#issuecomment-436675662

Closing the design issue for this section. Thanks all!