[design refresh, rev2] Update index page in Source UI to simplified layout and clearer language

[eloquence]

While the Source UI index page in #4634 is a significant improvement, we've agreed that we'd ideally like to implement a simpler design and language updates as shown in this spec:

https://app.zeplin.io/project/5cb7d4d1f93bd116d7b25561/screen/5d3801f28b7034775aa93f6d

The goal here is to bring the index page in alignment with the remainder of the Source UI, presenting a mature, minimalist UI that gets out of the way while still clearly looking like SecureDrop throughout (with that Light Cyberpunk Touch You Know And Love™).

As with the header updates, we may still want to kick the exact language around a bit, in particular the text below the headlines.

First time submitting to this SecureDrop? Start here.

If you have a codename and want to check for replies, or submit something new.

[ninavizz]

Not sure this is the best place to nominate this... but in the HTML page title, it says SecureDrop | Protecting Journalists and Sources... which is always cut-off in my own browsers, to instead read "SecureDrop | Protecting Journalists".

As I dislike allthings that may potentially exclude sources, I'd like to nominate shortening this to simply "SecureDrop".

[eloquence]

which is always cut-off in my own browsers

Can you clarify where it's cut off for you (screenshot would help)?

I have no strong feelings either way but would want @redshiftzero to sign off on ditching the slogan, since it feels like it's a pretty prominent part of the branding right now. In the long term, I'd like to see the news organization's name in the window title, once we add support for configuring it.

[ninavizz]

Of course, total +1 on wanting Jen's signoff on that... and, to wanting the news org's name in that tab, eventually.

In most of my Invisions, you can see the tab. The ones that have the updated favicon in the tab, show my edit. The text to the right of the favicon in the browser tab is what I'm talking about. It's in all of your dev builds, too, and in the live product.

[ninavizz]

On SD.org, it also has a tagline. I'm assuming taglines became a norm in HTML page titles for SEO and for how sites preview in search results, but they look awful in browser tabs. I'd even prefer to move it out of the page title on sd.org, and into the metatags, as HTML now allows for that (but didn't in ye olden days).

[eloquence]

I see what you mean -- the difference for me is that I see the full length title in the window title (the tab abbreviates after "Protecting.." for me), whereas it looks like on a Mac, there is no window title.

[ninavizz]

You can see the window title in the browser tab. It cuts off after the "n" in Journalists.
Anywho, if only a couple dozen characters will ever show there for most users, it seems preferable to just optimize for that—and to be mindful of what will read when browsers truncate.

[eloquence]

Yes, that makes sense. For the record, here's what it looks like on Ubuntu 18.04 and on Windows 10, respectively. Ubuntu shows the full window title and the abbreviated tab title; macOS and Windows will only show the abbreviated tab title.

[ninavizz]

I'm still not over the fact that you're willing to admit having a Windows OS. Even just for testing. :P

[eloquence]

I'm still not over the fact that you're willing to admit having a Windows OS.

It's a VM, and the less said about its provenance, the better. :)

[eloquence]

Detail review of the proposed language:

First time submitting to this SecureDrop? Start here.

How about: "First time submitting to our SecureDrop?" The subsequent pages talk about "our SecureDrop service" and "our public key", so I'm mainly aiming for consistency. (I'm generally conservative about the use of our, as you know, but I think in this case it may be a bit clearer.)

If you have a codename and want to check for replies, or submit something new.

I find this grammatically a bit confusing, because it's not a complete sentence, but the reader may start parsing it like one ("If you have a codename and want to check for replies, enter it here") and then stumble over the "or submit something new".

I would suggest language that parallels the "First time? Start here." structure, e.g.:

Already have a codename? Check for replies or submit something new.

[ninavizz]

Grammar, schmammar! Get with American public education paradigms on language pedagogy from the 1970s... ;)

I really like both suggestions. A lot. Let's do it! Updating my mockups to reflect, too.

FWIW, I also think it's clearer to message to users with "Our SecureDrop," so that one, especially, I love. And, everyone's grammar nits are always welcome; I know my writing can be a bit confounding to others. Despite years of trying to learn grammar, as an adult. :D

[ninavizz]

Added to scope as "Nice to have": Get Codename page/widget.
Zeplin Screens + Lock artwork

[eloquence]

Added to scope as "Nice to have": Get Codename page/widget.

I'm going to call it now, we'll not get the "get codename" changes into 1.0.0 given review time we have available before feature freeze. Let's focus on the remaining index page cleanup and then get this thing landed; the "get codename" cleanup is a good change to go into a subsequent release.