1369144 - Fx content hub pages - adjust headers and subheads

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[Eric Renaud [:erenaud]]

Adjust headers and subheads sizes to display properly on common screen sizes	Optimization	

"Items on the pages are too big and it creates an awkward zoomed-in feeling". 

This further impacts resolution of 1366x768 which make up 25% of our visits. 
1280x1024 = 20%
1920x1080 = 10%"

Comment 1

[Alex Gibson [:agibson]]

(In reply to Eric Renaud from comment #0)
> Adjust headers and subheads sizes to display properly on common screen sizes
> Optimization	
> 
> "Items on the pages are too big and it creates an awkward zoomed-in
> feeling". 
> 
> This further impacts resolution of 1366x768 which make up 25% of our visits. 
> 1280x1024 = 20%
> 1920x1080 = 10%"

Can we get any more specific feedback than "Items on the pages are too big"?

Which heading / subheads specifically are we talking about? How big is "too big"? What sizing guidelines should we use?

Comment 2

[Eric Renaud [:erenaud]]

Alex - if you could please pick up these changes, per discussion during All Hands

- Set largest type size to 72 pt (and adjust other copy accordingly)
- Decrease the size of the links (so there is contact between body copy & links)
- All copy should be black (remove all instances of grey)
- Make all labels sentence case

Christa is working on design updates, below, but it's very much WIP, so let's get these changes we know about done, please.

Comment 3

[Alex Gibson [:agibson]]

I had hoped we had better notes than this, some of these directions are pretty vague:

(In reply to Eric Renaud from comment #2)
> Alex - if you could please pick up these changes, per discussion during All
> Hands
> 
> - Set largest type size to 72 pt (and adjust other copy accordingly)

Which other copy should be adjusted?

> - Decrease the size of the links (so there is contact between body copy &
> links)

Which links does this refer to?

> - All copy should be black (remove all instances of grey)
> - Make all labels sentence case
> 
> Christa is working on design updates, below, but it's very much WIP, so
> let's get these changes we know about done, please.

Does this mean there are more design updates to come, or is the list above complete in terms of this bug?

Comment 5

[Craig Cook (:craigcook)]

There were definitely other small design changes mentioned in that meeting beyond just the few listed here but I wasn't taking notes. I think Christa did manage to get a lot of them written down. Any changes requested in that meeting that were committed to paper should be added to this bug so we can do them all at once to all hub pages (and all other Pebbles-based pages). Anything that was mentioned verbally but not committed to paper simply won't happen unless it's requested in a bug.

Comment 6

[Craig Cook (:craigcook)]

Here's a demo of the new type scale I think we've settled on: http://craigcook.github.io/etc/typescale/

Comment 7

[Alex Gibson [:agibson]]

(In reply to Craig Cook (:craigcook) from comment #6)
> Here's a demo of the new type scale I think we've settled on:
> http://craigcook.github.io/etc/typescale/

Great - this gives me something to go on for the headings at least, thanks.

Comment 8

[Eric Renaud [:erenaud]]

Per discussion in irc:   left padding on section titles should change to 40px to match the content padding (it's 60px currently).

The list above, plus this latest, is the complete list for this bug. Still need cseabolt's responses to the questions in comment 3

Comment 9

[christa seabolt]

(In reply to Alex Gibson [:agibson] from comment #3)
> I had hoped we had better notes than this, some of these directions are
> pretty vague:
> 
> (In reply to Eric Renaud from comment #2)
> > Alex - if you could please pick up these changes, per discussion during All
> > Hands
> > 
> > - Set largest type size to 72 pt (and adjust other copy accordingly)
> 
> Which other copy should be adjusted?
Hey Alex! Largest type (headlines would be a max of 72pt). We didn't pick a point size for the remaining copy :/ I would say an overall reduction of 10% on all the body copy would help. 
> 
> > - Decrease the size of the links (so there is contact between body copy &
> > links)
> 
> Which links does this refer to?
All the blue links with an underline and arrow. Should visibly be smaller than the body copy above it. 

> 
> > - All copy should be black (remove all instances of grey)
> > - Make all labels sentence case
> > 
> > Christa is working on design updates, below, but it's very much WIP, so
> > let's get these changes we know about done, please.
> 
> Does this mean there are more design updates to come, or is the list above
> complete in terms of this bug?
Yeah. I'm mocking up the new label treatment (incorporating the label into gradient rule). A design treatment for focus (likely a grey outline). Newsletter input field and type treatment. Different stack treatment for the videos. 

Let me know if you need help with any of the above as well.

Comment 10

[Alex Gibson [:agibson]]

> Yeah. I'm mocking up the new label treatment (incorporating the label into gradient rule). A design treatment for focus (likely a grey outline). Newsletter input field and type treatment. Different stack treatment for the videos.

Ok, we can work on these in separate bugs.

Comment 11

[Alex Gibson [:agibson]]

WIP is up on demo based on the feedback above:

https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/

Note: I've lowered the base size of Zilla from 20px to 18px for the body copy on all hub pages. If we stuck exactly to the scale in Craig's demo, the base size should be 16px. For the regular Zilla weight however, 18px *looks* the same size as 16px in Open Sans. Zilla at 16px looks around 14px, and feels just too small. The two just aren't well balanced enough imho :/

Happy to take feedback on this, or other suggestions.

The quotes on the Firefox home page still feel a little on the large side to me at 36px. The level down would be 24px however, which feels too small when they are the standing out there on their own.

Please take a browse through all other hub pages (IH and Developer hubs included)

Comment 12

[Alex Gibson [:agibson]]

Attachment: GitHub pull request

Comment 13

[Fabio Rios [:frios]]

(In reply to Alex Gibson [:agibson] from comment #11)
> WIP is up on demo based on the feedback above:
> 
> https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/
This looks a lot better! Like that it's tightened up. Looks good. A few comments on font sizing below.

> Note: I've lowered the base size of Zilla from 20px to 18px for the body
> copy on all hub pages. If we stuck exactly to the scale in Craig's demo, the
> base size should be 16px. For the regular Zilla weight however, 18px *looks*
> the same size as 16px in Open Sans. Zilla at 16px looks around 14px, and
> feels just too small. The two just aren't well balanced enough imho :/
Hey Alex, can we make the page headlines on all pages match the size of what you have on the home page (The 100% fresh, free-range...). It already sits on a black background which gives it a nice priority.

All other headlines, section headlines, blog post headlines, 3 feature headlines, etc.. can move down to the size of the callouts (see: Buzz about Firefox).

Body copy looks good!
 
> The quotes on the Firefox home page still feel a little on the large side to
> me at 36px. The level down would be 24px however, which feels too small when
> they are the standing out there on their own.
Agree, the quotes are a bit large

Agree these look big.

Comment 14

[Alex Gibson [:agibson]]

(In reply to Fabio Rios [:frios] from comment #13)
> (In reply to Alex Gibson [:agibson] from comment #11)
> > WIP is up on demo based on the feedback above:
> > 
> > https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/
> This looks a lot better! Like that it's tightened up. Looks good. A few
> comments on font sizing below.
> 
> > Note: I've lowered the base size of Zilla from 20px to 18px for the body
> > copy on all hub pages. If we stuck exactly to the scale in Craig's demo, the
> > base size should be 16px. For the regular Zilla weight however, 18px *looks*
> > the same size as 16px in Open Sans. Zilla at 16px looks around 14px, and
> > feels just too small. The two just aren't well balanced enough imho :/
> Hey Alex, can we make the page headlines on all pages match the size of what
> you have on the home page (The 100% fresh, free-range...). It already sits
> on a black background which gives it a nice priority.
> 
> All other headlines, section headlines, blog post headlines, 3 feature
> headlines, etc.. can move down to the size of the callouts (see: Buzz about
> Firefox).
> 
> Body copy looks good!
>  
> > The quotes on the Firefox home page still feel a little on the large side to
> > me at 36px. The level down would be 24px however, which feels too small when
> > they are the standing out there on their own.
> Agree, the quotes are a bit large
> 
> Agree these look big.

Ok, we may need to rework our scale a bit to accommodate these changes.

Comment 15

[Alex Gibson [:agibson]]

(In reply to Fabio Rios [:frios] from comment #13)
> Hey Alex, can we make the page headlines on all pages match the size of what
> you have on the home page (The 100% fresh, free-range...). It already sits
> on a black background which gives it a nice priority.
> 
> All other headlines, section headlines, blog post headlines, 3 feature
> headlines, etc.. can move down to the size of the callouts (see: Buzz about
> Firefox).

I'm going to talk with our designers about this before making any further changes. The typographic scale we've introduced is there to lead the eye deliberately, and I want to avoid making arbitrary font size changes to fit specific bits of copy. We're moving to a uniform system across all pages. 

> Agree, the quotes are a bit large
> 
> Agree these look big.

I'll see if we can tweak this a bit

Comment 16

[Eric Renaud [:erenaud]]

Reiterating my statements from email - we're seeing too many requests associated with the verb 'feel' (opinion) without accompanying testing and without consult w. Creative.

We've got too many things to do to keep iterating unless we're testing hypotheses in those iterations.

No more changes after these, unless we have a hypothesis to test in the requests (and the means to test them)

Comment 17

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/71dd439359f050d9484cc4fed88b5bd1155df107
[fix bug 1369144] Adjust Fx Hub headers & sub-headers

https://github.com/mozilla/bedrock/commit/b6b148da9d6c50c84e4e58820c9d887597310585
Merge pull request #4945 from alexgibson/bug-1369144-fx-header-updates

[fix bug 1369144] Adjust Fx Hub headers & sub-headers