1313710 - Internet Health Hub landing page

Status: RESOLVED FIXED

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

Description

[Eric Renaud [:erenaud]]

Create new Internet Health hub landing page based on Web Innovation landing page - template coded and live between November 16-22
- Content on page includes links to Internet Health Report and White Room website
- Does NOT need to be localized for launch
- Does need to be localizable
- Stand alone, not added in any other nav

Comment 1

[Jonathan Petto [:jpetto]]

What should we use for the URL? I suggest:

https://www.mozilla.org/internet-health

Comment 2

[Michael Ham]

Internet Health Landing Page – Project Folder

(Supporting Docs, Assets, and Sketch Files)

https://drive.google.com/drive/folders/0Bw8GuIJD9hBMbk5PR1VrNnZ1ams?usp=sharing

Comment 3

[Jonathan Petto [:jpetto]]

Very WIP site is up (with blog feed!):

https://bedrock-demo-jpetto.us-west.moz.works/internet-health/

Comment 4

[Eric Renaud [:erenaud]]

jpetto - we have what we believe to be final copy here - https://docs.google.com/document/d/1kGZqPNUMvAjZOLPRr_ysJ6nh9kD_-2q4H6axMXtiN3g/edit. 

Can you please get this into the demo? Ping Troy with any questions on the copy.  Thank you!

Comment 5

[Jonathan Petto [:jpetto]]

Troy - Can you add the page title and description to the Google doc?

Comment 6

[Jonathan Petto [:jpetto]]

Final copy (sans title/description) are now up on the demo server:

https://bedrock-demo-jpetto.us-west.moz.works/en-US/internet-health/

Comment 7

[Troy Palmer]

(In reply to Jon Petto [:jpetto] from comment #5)
> Troy - Can you add the page title and description to the Google doc?

Hey Jon

Here you go. I've added this to the doc as well. Let me know if you need something different or anything else.

Page title:
Keeping the Internet healthy — Mozilla

Description:
The Internet is our largest shared global resource. Help us keep it healthy, open and safe.

Comment 8

[Michael Ham]

Internet Health Page – Project Folder:
https://drive.google.com/drive/folders/0Bw8GuIJD9hBMbk5PR1VrNnZ1ams?usp=sharing

Final Assets (SVG Logos, Hero Image):
https://drive.google.com/drive/folders/0Bw8GuIJD9hBMUWR3bHU1MllXaW8?usp=sharing

Sketch File (w/production notes):
https://drive.google.com/a/mozilla.com/file/d/0Bw8GuIJD9hBMd08zS1lPS29aOFE/view?usp=sharing

Jon – the Sketch file has suggested production notes including hex codes, suggested heights, and icon sizes.

Happy to workshop mobile view with you – main Sketch artboard shows the page for a 1440 viewport.

Comment 9

[Michael Ham]

Attachment: Page – 1440 - Internet Health.png

Comment 10

[Jonathan Petto [:jpetto]]

Thanks Michael! 2 questions:

1. Can you provide color options (or a single option for all) for:
    a. blog section links
    b. mobile/hamburger main nav hover color (after expanding the hamburger nav)

2. What should we do for the hero area when the screen is wider than the image? We can scale the image (as is done on mozillafestival.org), or add a solid/gradient/repeating image along the edges.

Comment 11

[Jonathan Petto [:jpetto]]

...and one more request - can you add the updated newsletter image (oval with icon) to the Final Assets folder?

Thanks!

Comment 12

[Michael Ham]

Jon – thanks for the design time via Vidyo. Just to capture a few details here in the bug...

New, larger hero image is here (3800px across is the widest I could get w/out getting too many artifacts at medium/high quality):
https://drive.google.com/a/mozilla.com/file/d/0Bw8GuIJD9hBMWWNESUF3UnEtMm8/view?usp=sharing

For larger viewports, I'm suggesting a gradient fill from left to right – #79337C to #4F2877

The purple you choice for the links and the nav is great – thank you.

The SVG for the newsletter icon is here:
https://drive.google.com/a/mozilla.com/file/d/0Bw8GuIJD9hBMdnNTeGpnWHVGNUU/view?usp=sharing

Thanks again!

Comment 13

[Jonathan Petto [:jpetto]]

From nav update discussion with jbertsch and ericrenaud regarding home page, technology page, and this new internet health page (which all have nearly identical nav):

- Remove 'Firefox' link from all pages
- Ensure download button is visible for all users (not just non-Fx)
- For en-* users, first two links are 'Internet Health' and 'Web Innovations'
- For non-en-* users, first two links are 'About' and 'Participate'

We will work on normalizing this nav (meaning figuring out how translated versions of 'Internet Health' and 'Web Innovations' will fit horizontally) in the post-all-hands sprint.

Comment 14

[Jonathan Petto [:jpetto]]

After seeing the copy and design together [1], there are a couple things I wanted to call out:

1. Due to the UI, the "Here's how:" in the intro feels disconnected and possibly unnecessary.

2. The "Take a look into your online life" copy feels a *little* misleading, as it's directing users to a site about a physical destination, not providing information specifically about the user. Based on the copy, I (with my bias) expect information about my personal browsing/internet usage. Admit that I might be in the minority here.

Troy - what do you think? I don't want to open up a whole new copy review, so if it's best to just leave as-is for now, I understand.


[1] https://bedrock-demo-jpetto.us-west.moz.works/en-US/internet-health/

Comment 15

[Troy Palmer]

(In reply to Jon Petto [:jpetto] from comment #14)
> After seeing the copy and design together [1], there are a couple things I
> wanted to call out:
> 
> 1. Due to the UI, the "Here's how:" in the intro feels disconnected and
> possibly unnecessary.
> 
> 2. The "Take a look into your online life" copy feels a *little* misleading,
> as it's directing users to a site about a physical destination, not
> providing information specifically about the user. Based on the copy, I
> (with my bias) expect information about my personal browsing/internet usage.
> Admit that I might be in the minority here.
> 
> Troy - what do you think? I don't want to open up a whole new copy review,
> so if it's best to just leave as-is for now, I understand.
> 
> 
> [1] https://bedrock-demo-jpetto.us-west.moz.works/en-US/internet-health/

Thanks, Jon.

Can you please change the last line in the intro copy to read "Here’s how we can all be a part of keeping the Internet open, safe and accessible."

And change that Glass Room link to "Visit the Glass Room" (good call there -- I think we were trying to be a bit too clever).

Let me know if you have any questions. I also changed copy in the doc to reflect these revisions there. 

Cheers.

Comment 16

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/0b53245ca61e87826b47ca6a06c0ef9e727fe911
[fix bug 1313710] Add Internet Health landing page.

https://github.com/mozilla/bedrock/commit/3bb547a046ec1463a3e401876e142790812e80b5
Merge pull request #4468 from jpetto/bug-1313710-internet-health-landing-page

[fix bug 1313710] Add Internet Health landing page.