New Copy, Graph, and Layout

[grwim]

• New Copy incorporated
• New Gap diagram
• Tweaks to layout

[thedavidprice]

note for reference, see PR #11

@grwim Overall this is a huge step forward and working well! Lots of little things below

Head

• background network image seems fine to me. What I would suggest is have the background be the darker color of blue that’s behind the text (so different than header). and that way you can remove the text background fill.
• reduce height of background (and attempt to pull orange section above fold on all screen sizes)
• increase h1 font size a bit (maybe 3-3.5?) Might need to target mobile size to reduce at that width
• it’s a long sentence, maybe use the orange color to highlight the key words in the sentence — if someone were to scan the sentence they’d get the gist by keyword (and in this case maybe remove highlight from robots we can live with
• increase margin/padding between h1 and h2 —> make it visually clear by space that they are two separate things
• for medium and large screen sizes, need to offset h1 to not run full width. use a <div class="row justify-content-center”> to wrap the column <div> with h1 and h2. Then change the h1 and h2 div to be <div class=“col-md-10 col-md-offset-2”> Also see bootstrap doc about this here.

“A world filled…” section

• all text width needs to be reduced. (i.e. not fullscreen for large or medium — harder to read). Use the class=row trick above to center and offset. Might even make it 8 grid-blocks if not 10.
• use highlight trick throughout text for key ideas, e.g. "human-level capabilities and their introduction into every aspect of our lives.” Or things like that per your judgement.
• note: leave graph full-width for all sizes
• instead of bullets, you could move the 3 paragraphs below the Gap graph into 3 columns. would break up text flow in a good way
• make sure to highlight/visually-prioritize the last sentence “for the full potential…”

Introducing ACRO

• similar background color suggestion as to the notes on header above
• make the “introducing acro” and “acro’s purpose is to facilitate…” typography consistent with rest of page. Especially need to increase font size of “Acro’s purpose…” as this is lost and inconsitently small.

[grwim]

Thanks David!

Andrew's quite busy at the moment and probably won't be able to get to your feedback before Friday, so I took a stab at incorporating what I could.

I've made a new commit to this branch - feel free to take a look.

Would be ideal if we could merge this latest commit into master tonight, so Karl can review and share ahead of the meeting Friday.

Notes:

• Poor readability when using orange to highlight key terms in long header sentence, so kept as is in this regard.
• Increased margin/padding between h1 and h2 for Header content.
• Did go ahead though and use the orange to highlight key terms in “A world filled…” section - great call!
• Normalized the typography of the 'Introducing ACRO' section.

[thedavidprice]

Roger that, @grwim

I’ve sync’d up the master and staging branches along with v0.2 and v0.3. Will move these comments and your notes into a new branch + PR request for finishing the work.

Thanks!

[thedavidprice]

note — commit with changes to master here #20