Foundation.mozilla.org: Blog post detail page

[kristinashu]

Based on - Blog design epic #2797

We need to design a basic blog post detail page, let's start simple and then add complexity page.

We will need to:

• [x] Benchmark other blogs
• [x] Write requirements list
• [x] Design and get feedback

Design:

• [x] responsive states
• [x] hover states

[kristinashu]

Gotta add medium as a benchmark!

[kristinashu]

@alanmoo a few tech questions before starting on the mvp design. Does wagtail already have some sort of pre-build blog template we can work off of? Can we use some of our existing components in the blog?

[alanmoo]

No built-in template, just partials from other pages we can inherit (nav, primary page heading, footer, etc.)

We can use a streamfield as the body of the page with some/all of the available components as options, but my gut is telling me that we should stick with a rich text field to start. Though migrating from rich text to being able to use streamfield components down the line might get tricky. @Pomax do you have thoughts?

[kristinashu]

@beccaklam @alanmoo @xmatthewx here's an initial list of mvp vs long-term blog features, please add your thoughts!

[kristinashu]

Here are some _very_ quick comps https://redpen.io/p/bha12cf7387de4f7e7

[beccaklam]

Updated WIP comps: https://redpen.io/nzd574027ab66961ee @kristinashu

[kristinashu]

Note from convo with Alan:

Streamfield for body is probably best so that we can insert quote blocks, but let’s keep the page to a limited amount of streamfield component options (paragraph, quote, ….?)

So for the body content section of the blog, we will be able to use any of the components we already have on /opportunity type pages but we should limit the options.

I've checked off the ones I think think we need but @beccaklam please update or add your thoughts:

• [x] Paragraph
• [x] Image
• [x] Image text
• [x] Image text mini
• [ ] Image grid
• [x] Video _maybe not?_
• [ ] iFrame
• [x] Link button
• [x] Spacer
• [x] Quote
• [ ] Pulse listing
• [ ] Profile listing
• [ ] Profile by id
• [ ] Profile directory
• [ ] Airtable

[beccaklam]

Thanks @kristinashu I added "Image text mini" because I feel that staff often use blog posts to announce things that require a CTA. We could start with a smaller set of components but wondering if it will be hard to add more components if we find that staff keep asking for a particular thing? @alanmoo

[alanmoo]

Nope, easy to add.

[kristinashu]

I like that approach! Could you mock up a version with those selected components so we can show off what the blog will be able to do? Then Anil will share it around.

[beccaklam]

Also added "Image Text" since our current blog post is already using that component?

[beccaklam]

New blog detail page with mentioned components (I wasn't sure what our video looks like so I made it up for now): @kristinashu https://redpen.io/nzd574027ab66961ee

[beccaklam]

Updated MVP with large body copy: @kristinashu

[kristinashu]

Totally forgot about mobile... again! Should be fairly straight forward but can you please mock that up as well?

[beccaklam]

Oi, I should really start doing mobile first ...

[beccaklam]

Mobile mock ups have been added to the redpen: https://redpen.io/p/bha12cf7387de4f7e7

[beccaklam]

Added tablet design as well: https://redpen.io/wy8089751c4d20c936

[beccaklam]

MVP Requirements Checklist:

• [ ] Title field
• [ ] Author field
• [ ] Stream field to include
• paragraph component (but that uses the .body-large style instead of the .body style)
• Image
• Image text
• Image text mini
• Video
• Link button
• Spacer
• Quote

Post MVP Requirements Checklist (to be added on top of MVP):

P1

• [ ] Sticky Side Share buttons, disappears on mobile (need to ask devs if this is possible)
• [ ] Share buttons after the blog post

P2

• [ ] Tags (though, building this into the cms earlier may be helpful so we don't have to go back in and add tags later)
• [ ] Related Content Section/Component, able to share up to three posts
• [ ] Clickable Author name that leads to page of all the articles the author has written/their pulse profile?

[kristinashu]

Nice! A few thoughts:

• I think MVP could include all the selected stream fields since I assume it's similar amount of work to add one than it is to add the eight listed
• we won't be ready to add clickable tags and clickable author yet since that would require designing a new pages (I image clicking one would take a user to a page that shows all posts by that author or with that tag) (but might be nice to have the tag field in the cms so that when we do have the clickable functionality we won't have to go back and add tags in later)
• I think Share as a high priority than Related content (probably as separate implementation tickets)
• Maybe also add a note about how the sticky buttons are hidden on mobile
• And some notes about how the stream field components (except for paragraph) should follow the same style as existing ones

Just hover states and then I think you can open a couple implementation tickets!

[beccaklam]

Added hover states: https://redpen.io/an37406124d1e928f0

[beccaklam]

Will open implementation tickets tomorrow :)

[beccaklam]

Created implementation tickets #3029 (MVP) and #3030 (Post MVP) and closing this one!