search

MozillaFoundation / foundation.mozilla.org

Mozilla Foundation website
https://foundation.mozilla.org
Mozilla Public License 2.0
388 stars 152 forks source link

News box updates #290

Closed hannahkane closed 7 years ago

hannahkane commented 7 years ago

Estimate includes design and engineering

sabrinang commented 7 years ago

Some iterations on video thumbnail:

image

1 - text box overlap thumbnail 2 - thumbnail 3 - thumbnail with gradient/play icon

The 3rd iteration feels like it suggests an embedded video which could be misleading cause it isn't but each iteration includes that the media source is youtube so the image may not need treatment at all.

sabrinang commented 7 years ago

Right side news listings iterations: news-listing 1 - original 2 - reduced heading size (does not free up much space) 3 - reduced heading size, author removed (may fit 4) 4 - reduced heading size, author + date removed (may fit 4-5)

I don't think bulleted list doesn't help save space and we are using divider lists but removing dividers makes text looked cramped and less scannable. The only way to make more space is hiding content (media outlet, author or date) but I wouldn't recommend it since having less items (like 3 before) keeps the home page focused and people can see more with "view more news".

sabrinang commented 7 years ago

@xmatthewx any feedback on the left thumbnail or right list of news items?

xmatthewx commented 7 years ago

Looking good. On the right side, option 3 might work.

For the video, I'm not sure that we need a description. I think we need a play icon over image to indicate that people can click through to a video. We can have engineers place it, rather than photochoppin it every time.

Right now, since the treatment between left and right is so similar, it looks like the right side might also be videos. I don't think we need the exact treatment. We could drop the Youtube name and icon, and remove the date.

What do you think?

sabrinang commented 7 years ago

@xmatthewx Iterations with options that have the right side with no authors and video icon/dark gradient included in thumbnails.

news-listing-v2

1 - removed media icon/name (youtube) and date 2 - card overlay style with media icon and date 3 - full information with 4 news items on right

1 feels a bit bare compared to the items on the right descriptive items (it makes me wonder a bit why this item doesn’t have those details though) so I prefer the 2 option as it feels balanced with the other items and I think having media icon (youtube) helps hint it is a video from the others and in the future if this left box isn’t a video post the format is still the same for the other news items in the CMS (although these hide the authors).

xmatthewx commented 7 years ago

Nice. I also think that Option-2 is good.

I miss People's names, especially since we aspire to have net members as authors. What if we did: "September 2016 by Author Name" or "Author Name · September 2016" on one line?

sabrinang commented 7 years ago
image

Included "by Author Name · Date" on the news and this saves space. Will this effect the other news items in the CMS?

xmatthewx commented 7 years ago

Will this effect the other news items in the CMS?

The CMS won't change. This is just how things get rendered. Engineers might want to update News page to match if it's the same component. That's fine by me.

What do you think? I think this feature box looks fantastic and ready for review.

sabrinang commented 7 years ago

Yeah, I think we can consider how author/date treatments will look across the site - here are some screenshot comparisons: author-date-iteration Overall, reduced margin-bottom to 0.25rem

On pulse projects, I noticed a previous version it had the same line dot treatment but now it has changed to be separate in the latest version. What was the main reason for this change? We may want to consider separate lines too incase in the future our author line gets too long as well and to can keep it uniform.

I think seeing it all next to each other keeping the hierarchy does make it easier to scan and highlights the author/creator but it might get too large for multiple authors... so it depends on if it is important to emphasize the author/creator more or not.

sabrinang commented 7 years ago
image

@xmatthewx Design review?

xmatthewx commented 7 years ago

Looks perfect. Thanks for the clear summary of changes.

Devs: in the end, this seem like any other news item + thumbnail + flag as video for icon. For now, we can assume we will only put videos in this prime position (that was the request), hardcode icon overlay. And... let's think about what we'd do later if someone wanted a non-video item with thumbnail.

alanmoo commented 7 years ago

Is the image for featured news articles supposed to be in the CMS? There doesn't currently seem to be a field for that.

xmatthewx commented 7 years ago

Image is not yet implemented. So, you might build this static to ship it and define new API requirements. Then discuss with CMS team. That seemed to be Gavin's approach.