Design-related items in current v2 build

Just logging a few design-related things I’ve spotted on the current preview site, and comparing it to the v2 comps. Please note that these are all for discussion/review, to see what’s worth fixing before launch!

(Also, happy to break these out into smaller issues if need be.)

Global

(Taking a stab at moving a few of these into priority buckets, but these are totally subjective assignments and up for discussion!)

High priority

• - We’d aimed for a max-width of 1140px / 71.25rem in the comps; it’d be great to get that in place.
• - Related to that, the widths of the header, content, and footer areas should be in alignment across all viewports. (Basically if they can share the same margins / max-width, COOL.)
• - The font stack seems to be rendering out simply as sans-serif; here’s the stack I believe we’re aiming for.

Important, perhaps not blockers:

• Hover and focus styles seem to be missing on links.
• Generally, line-height feels pretty generous in the content area; might be worth taking a look at the values in the comps, and lining them up with the code?

Navigation

• Small-screen view:

• - Can we add cursor: pointer to the menu toggle?

• - Tiny accessibility thing: can we add an aria-expanded="false" to the button when the menu’s closed, and aria-expanded="false" when it’s opened?

• - Padding underneath the page title is a little generous. (Screenshot)

• - The “active” border’s spec’d to be 5px tall, and it needs a few pixels of padding between it and the link text. (Screenshot)

• - I might be misreading the site hierarchy, but I think the active navigation state seems to be getting lost on a few “sub” pages. (For example, click on “FAQs for Newsrooms”, and it’s active; click over to “About the project”, and the bar’s removed from the “FAQs for Newsrooms” link.)

Homepage

• Intro block:
  • The header text is a little larger than spec’d on widescreen. (Currently at 48px with a 1.3 line-height, should be 40px at 1.25.) I dig the 24px at 1.25 on smaller screens, but can it extend to a breakpoint wider than 480px?
  • Font-sizing on the button + “learn more” link is a little smaller than spec’d.
• - Logo block:
• - I think we’d decided on a white background for this block, and a max-height of 40px for the logos.
• - Content question: in the comp, we’d settled on The A, NYT, ProPublica, Vox, WaPo, CNN, and WSJ for the homepage. Is what’s shown on the dev site the correct order? (FIXED)
• Visualization gallery:
  • We’d moved the gray background down to this module in the comp, with some light borders to offset it.
  • Might suggest double-checking the type settings here as well? (The source text should be italicized and a lighter gray.)
• Why this data matters / In the news
  • Maybe double-check the type styles here? (Currently, both columns are typeset at the same size; source text for articles should be italicized and a lighter gray
  • Spacing around the arrowed list is currently a little more generous than spec’d.

Data page

• The individual states are showing the old content/tables, I believe, and still appearing in a two-column layout.

State page

• Same notes here; looks like the page order & tables haven’t been updated yet.

[kevee]

@schwartzadev You wanna take on the Data/state page tables (because you love tables now) and I’ll start from the top

[schwartzadev]

The latest from Slack: we will move the outcomes data to a post-v2 launch item (updating here for transparency)