1322959 - Health of the Internet sub page - PRIVACY & SECURITY

Status: RESOLVED FIXED

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

Description

[Eric Renaud [:erenaud]]

https://tree.taiga.io/project/malexis-mozillaorg-durable-team/us/693

Comment 1

[Michael Ham]

Link to project design folder:
https://drive.google.com/drive/folders/0Bw8GuIJD9hBMUzBRVDZmRk5qTGc?usp=sharing

Link to low fidelity wire frames (Sketch file):
https://drive.google.com/a/mozilla.com/file/d/0Bw8GuIJD9hBMSHFrMVozRjE1Szg/view?usp=sharing

Comment 2

[Michael Ham]

Purpose of the low-fidelity wireframes...

Ensure we're capturing a sub navigation that allows visitors to move fluidly through the sub pages while providing them a breadcumb during the visit. (Initially this will need to be hidden as we'll only have one page going live to start. Just need to build it into our planning.)

Creating a modular system for varied content to flow into – including supporting articles, newly written content, embedded video, a clear CTA when applicable, links out to related content, and a newsletter signup. This is all still TBD, so all content areas shown are merely to get a sense of space and hierarchy on the page.

Evaluate whether we're meeting the requirements from the brief, namely –

    Visitors are learning more about the issue
    Vistors are learning what Mozilla's POV is on the issue and what we're doing about it
    Visitors are going to be able to keep up on the issue (email sign up) or get involved (action)

Wireframe PNG:
https://drive.google.com/a/mozilla.com/file/d/0Bw8GuIJD9hBMQnVGdEJJU01pVEk/view?usp=sharing

Wireframe PDF:
https://drive.google.com/a/mozilla.com/file/d/0Bw8GuIJD9hBMZXVjSGc5eFBtNVk/view?usp=sharing

Design Project Folder w/Sketch File:
https://drive.google.com/drive/folders/0Bw8GuIJD9hBMUzBRVDZmRk5qTGc?usp=sharing

More to come as we determine copy needs from the appropriate teams and start to get a sense of the components we'll want to include on these sub pages.

Comment 3

[Michael Ham]

Brief:
https://docs.google.com/a/mozilla.com/document/d/16cr9R3MPj68Yycc0qdEavtHTDflOCXAaOMBCBVsK6Wg/edit?usp=sharing

Copy:
https://docs.google.com/document/d/1gy3EGP_KSjhNyKU3oMFPAx6zmVTQpRo9wlaobTfexN4/edit

Comment 4

[Michael Ham]

Latest wireframe (1024px viewports and higher):
https://drive.google.com/a/mozilla.com/file/d/0Bw8GuIJD9hBMSUlyRTdOd3lhUTA/view?usp=sharing

This includes the latest version of Troy's copy (2nd draft)

Comment 5

[Michael Ham]

Attachment: Privacy & Securty Sub Page v03 - Desktop Viewport Wireframe

Comment 6

[Michael Ham]

Attachment: Privacy & Securty Sub Page v03 - Mobile Viewport Wireframe

Comment 7

[Michael Ham]

Privacy & Security Sub Page v03 – Mobile Viewport Wire Frame available here as a PDF:
https://drive.google.com/a/mozilla.com/file/d/0Bw8GuIJD9hBMX0tmcUhFMWhkR2s/view?usp=sharing

Comment 8

[Eric Renaud [:erenaud]]

Michaela - please provide us with the URL to the Internet Health Report site landing page

Comment 9

[Craig Cook (:craigcook)]

What should the URL for this new page be? I suggest mozilla.org/internet-health/privacy-security/ unless anyone has something else in mind?

Comment 10

[[e-mail]]

(In reply to Eric Renaud from comment #8)
> Michaela - please provide us with the URL to the Internet Health Report site
> landing page

The brief for the Internet Health Report says the URL will be: https://internethealthreport.org. I am confirming this now over email with Solana.

Comment 11

[[e-mail]]

(In reply to Craig Cook (:craigcook) from comment #9)
> What should the URL for this new page be? I suggest
> mozilla.org/internet-health/privacy-security/ unless anyone has something
> else in mind?

This URL sounds great, Craig. Let's do it. 

In addition to this standard URL, could we also create a vanity URL that is mozilla.org/onlineprivacy? (We'd like to use this in future podcast promotions so that when spoken, it is easy for listeners to remember.)

Comment 12

[[e-mail]]

(In reply to [e-mail] from comment #10)
> (In reply to Eric Renaud from comment #8)
> > Michaela - please provide us with the URL to the Internet Health Report site
> > landing page
> 
> The brief for the Internet Health Report says the URL will be:
> https://internethealthreport.org. I am confirming this now over email with
> Solana.

Solana has confirmed this URL for the Internet Health Report.

Comment 13

[Michael Ham]

Attachment: mozilla_internet-health_subpages_wire-frames_v04.pdf

Latest wire frames as a 2-page PDF. Mobile, then wide view ports.

Comment 14

[pgerman]

Hey Guys,

Some SEO things to consider WRT this page:
1. We want to make sure this page is attractive to users from the Search Results Page (SRP)
   a) Make sure the title describes the content on the page
   b) The initial headline describes what folks can expect to see on the rest of the page
   c) Meta description contains supporting information on why a user should click through 

2. The search engine knows that this pages supports the internet health page
   a) We'll want to include a link to internet health in the nav
   b) If possible include bread crumbs below the nav (it's not on the rest of the site so this may be part of a broader conversation) 
   c) The internet health page will link to this page

3. We create content that search engines think will be relevant to folks for a variety of keywords
   a) Include relevant words from this list as appropriate (don't just stuff as many in as possible): https://docs.google.com/spreadsheets/d/1FPBCZtkkgJEBfxgBTvWx1X91KdaCfJdQgl0y4o-gtIM/edit#gid=1581088648
   b) We link to this page from as many relevant places from within the Mozilla ecosystem as possible.

Please let me know if you have any questions.

Thanks,

PG

Comment 15

[pgerman]

Also, internet security is far more competitive than privacy. Most security searches take folks to a laundry list of anti-virus tools to the such as 'Norton', 'McAfee', etc . Without serious investment, it seems unlikely for us to displace those guys. 

As a result, we should focus on Privacy related terms.

Comment 16

[[e-mail]]

Hi all – just wanted to paste the metatag request here so that the request doesn't get lost. Below is the request for the metatags on the page:

Title: A Healthy Internet is Secure and Private
Description: Security and privacy on the internet are fundamental and must not be treated as optional.
Metaimage: To be pulled in from header image. 

One question I have, though: is it possible to have several metaimages on the page? We could have one that pulls in the meta image (as planned), and several more that are visuals of the quotes being used in the copy. This would give us more imagery to play with for social sharing purposes. 

Let me know.

Comment 17

[Eric Renaud [:erenaud]]

Craig  ^^  please review Michaela's questions in comment 16

Comment 18

[Craig Cook (:craigcook)]

Yes, we can include multiple images and Facebook will let the user choose which one to attach when they share the page.

Comment 19

[[e-mail]]

(In reply to Craig Cook (:craigcook) from comment #18)
> Yes, we can include multiple images and Facebook will let the user choose
> which one to attach when they share the page.

Awesome. Would love to plan on doing that if possible. Let me know if Michael / Rachel is able to support that. (I'm just assuming there is an additional design need there, but could be wrong if it's pulled exactly from the page.)

Note: if the multiple images delay the page going live by the 20th, it's not worth it. The date is more important.

Comment 20

[Eric Renaud [:erenaud]]

Craig - FINAL copy is here - https://docs.google.com/document/d/1g5DmM37joO_uuCoy1tsCqKr3BbWmaw4jESEj8BV8lLw/edit?ts=587e5d9b

Comment 21

[Craig Cook (:craigcook)]

The page is updated with final copy and design on a demo server at https://bedrock-demo-craigcook.us-west.moz.works/en-US/internet-health/privacy-security/

One copy question. The latest design mockup had headings like "What you can do about user control" but the final copy deck still had the non-specific "What you can do about it." Which treatment should we go with? 

I personally like the greater specificity and feel like restating the purpose of each section is good for readability/accessibility, as well as SEO. But I can be persuaded otherwise if the repetition of those headings in each section is intentional.

Comment 22

[Rachel Wong]

I would also prefer to keep the restating of the purpose of each section so that it grounds the content as the user scrolls down the page.

Comment 23

[[e-mail]]

(In reply to Rachel Wong from comment #22)
> I would also prefer to keep the restating of the purpose of each section so
> that it grounds the content as the user scrolls down the page.

Works great for me.

Comment 24

[Craig Cook (:craigcook)]

Attachment: Github pull request https://github.com/mozilla/bedrock/pull/4591

Comment 25

[[e-mail]]

Hi team — just checking in on timing. Do you anticipate this being able to go live tomorrow?

Comment 26

[pgerman]

hey craig, is it possible to add '?surveillance' to the end of the destination URL for the surveillance section's "Choose strong, unique pins and passwords" and "password manager" links?

I'll build the tag manager rules to use those query parameters to differentiate the links in the security and surveillance sections.

Comment 27

[Craig Cook (:craigcook)]

(In reply to [e-mail] from comment #25)
> Hi team — just checking in on timing. Do you anticipate this being able to
> go live tomorrow?

Yup, we're code complete and ready to go live tomorrow, just need to add Peter's analytics bits above. 

Apart from that the demo server is up to date at https://bedrock-demo-craigcook.us-west.moz.works/en-US/internet-health/privacy-security/. This is last call for (minor!) changes so if you see anything horribly wrong let me know by end of day.

Comment 28

[pgerman]

can you also add query parameters on the following links:
User Control's lean data practices - "?control"

Comment 29

[Eric Renaud [:erenaud]]

Craig - so it's logged in the proper place (here in the bug): go live needs to happen at 7am PT (give or take some minutes) tomorrow, 1/20, but *can* happen anytime before then.

Comment 30

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/bdd1ac15c3d5dd8a415da3a10f6e71c64d8cde3e
[fix bug 1322959] Internet Health subpage, privacy and security

https://github.com/mozilla/bedrock/commit/e1837483de3c91e778d9b34933a60f68994ee29c
Merge pull request #4591 from craigcook/bug-1322959-health-subpage-privacy-security

[fix bug 1322959] Internet Health subpage, privacy and security

Comment 31

[Alex Gibson [:agibson]]

(In reply to Eric Renaud from comment #29)
> Craig - so it's logged in the proper place (here in the bug): go live needs
> to happen at 7am PT (give or take some minutes) tomorrow, 1/20, but *can*
> happen anytime before then.

This is now live: https://www.mozilla.org/en-US/internet-health/privacy-security/

Comment 32

[pgerman]

Hey Craig,

Can you ping me when the homepage link to the IHR is live on a demo? It would be good to know roughly when you are expecting that to be in advance so I can carve out some time.

Thanks,

PG

Comment 33

[[e-mail]]

(In reply to [e-mail] from comment #19)
> (In reply to Craig Cook (:craigcook) from comment #18)
> > Yes, we can include multiple images and Facebook will let the user choose
> > which one to attach when they share the page.
> 
> Awesome. Would love to plan on doing that if possible. Let me know if
> Michael / Rachel is able to support that. (I'm just assuming there is an
> additional design need there, but could be wrong if it's pulled exactly from
> the page.)
> 
> Note: if the multiple images delay the page going live by the 20th, it's not
> worth it. The date is more important.

Good morning Craig and Eric! How wonderful is is to see it in the wild! Congrats on this launch. 

Let me know if you would be able to add the metatags for sharing on both Facebook and Twitter today. That would be ideal. And, then we can call this DONE.

Thank you!
Michaela

Comment 34

[Craig Cook (:craigcook)]

> Let me know if you would be able to add the metatags for sharing on both
> Facebook and Twitter today. That would be ideal. And, then we can call this
> DONE.

They're already included. 

Unfortunately adding multiple images turned out to be a little more complex than I thought it would be (we have to make updates in our base template that could impact a lot more pages) so there's only one image for now, but I'd like to be able to add more soon. I'll file a bug for adding multiple image support into our base templates.

Comment 35

[Craig Cook (:craigcook)]

Attachment: Twitter card

Comment 36

[Craig Cook (:craigcook)]

Attachment: facebook-share.png

Comment 37

[[e-mail]]

(In reply to Craig Cook (:craigcook) from comment #34)
> > Let me know if you would be able to add the metatags for sharing on both
> > Facebook and Twitter today. That would be ideal. And, then we can call this
> > DONE.
> 
> They're already included. 
> 
> Unfortunately adding multiple images turned out to be a little more complex
> than I thought it would be (we have to make updates in our base template
> that could impact a lot more pages) so there's only one image for now, but
> I'd like to be able to add more soon. I'll file a bug for adding multiple
> image support into our base templates.

Okay, not a problem and thanks for the explanation! So happy to see all of this live.

Comment 38

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/962af7e4e720b8f7f33412389116cb4c413e8ebc
Bug 1322959 - IHR Privacy-Security page, fix syntax error (unwrapped string)

https://github.com/mozilla/bedrock/commit/c46dd8a4d4a239d9a99384b854b354d083533042
Merge pull request #4595 from flodolo/bug1322959

Bug 1322959 - IHR Privacy-Security page, fix syntax error (unwrapped string)