[Privacy Day 2015] Landing Page implementation

RESOLVED FIXED

Status

www.mozilla.org
Pages & Content
RESOLVED FIXED
3 years ago
2 years ago

People

(Reporter: lizzn, Assigned: sgarrity)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [kb=1622440] , URL)

Attachments

(3 attachments)

(Reporter)

Description

3 years ago
>>Project/Request Title:
[Privacy Day 2015] Landing Page Design Update

>>Project Overview:
Overview brief: https://docs.google.com/a/mozilla.com/document/d/12Qh3ZQbv-Amus21dE0Q4V2J-g1qZaTDrkYLkLeHZC-U/edit?pli=1#heading=h.8hiqy4potx5

Mozilla.org- 2015 Privacy Day Landing Page
- taking template from Firefox Usage Campaign and making a new Privacy and You page (https://www.mozilla.org/en-US/privacy/you/).
https://www.mozilla.org/en-US/firefox/desktop/tips/
- this will include tabs that take the user on a multi-step journey to good online Personal Privacy Practices. It will include the best of Mobile 
- Mozilla branding, not Firefox

Basically, we'll take the above template and use it to re-skin https://www.mozilla.org/en-US/privacy/you/

>> Creative Help Needed:
Copy:    No 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
In template

>>CTA and Design:
TBD - Troy is copywriting. 

>>Creative Due Date:
2015-01-07

>>Launch Date:
2015-01-28

>>Mozilla Goal:
Privacy & Policy

>>Points of Contact:
gjost@mozilla.com, ehull@mozilla.com, dbondi@mozilla.com, Mnovak@Mozilla.com, troy@troypalmer.net, ahua@mozilla.com, smartin@mozilla.com
(Reporter)

Updated

3 years ago
Assignee: jbalaco → nobody
Component: Design → Webdev
Product: Marketing → mozilla.org
Target Milestone: --- → B2G C4 (2jan on)
Version: unspecified → other
(Reporter)

Updated

3 years ago
Assignee: nobody → steven
Status: NEW → ASSIGNED
(Reporter)

Comment 1

3 years ago
Steven will make the page updates, with Ty informing.
(Reporter)

Updated

3 years ago
Blocks: 1109324

Updated

3 years ago
Component: Webdev → Pages & Content
Product: mozilla.org → www.mozilla.org
Target Milestone: B2G C4 (2jan on) → ---

Updated

3 years ago
Depends on: 1111877
PSD  http://cl.ly/2l1m3l3b281D
Summary: [Privacy Day 2015] Landing Page Design Update → [Privacy Day 2015] Landing Page implementation

Updated

3 years ago
Whiteboard: [kb=1622440]
(Assignee)

Comment 3

3 years ago
PSD received. Implementation underway!

Updated

3 years ago
Depends on: 1118933
(Assignee)

Updated

3 years ago
Depends on: 1121114
(Assignee)

Comment 4

3 years ago
It turns out we have two different sharing widgets on this set of pages. The first (a) is the socialshare widget to the left of the tabs, and the second (b) is the "SHARE THIS SITE" button on the DISCUSS tab.

(a) just takes builds the contents of the tweet from the page URL and the page title

(b) can take a custom URL and tweet text, though not (quickly/easy) one where the URL is embedded within the middle of the text, as is the case for our custom text:

 I’m taking control of my online privacy. Here’s how you can, too: [LINK] #SmartOnPrivacy
(Assignee)

Comment 5

3 years ago
Created attachment 8549115 [details] [review]
https://github.com/mozilla/bedrock/pull/2660
(Assignee)

Comment 6

3 years ago
This is now up on demo1: https://www-demo1.allizom.org/en-US/privacy/tips/

Please review and let me know of any issues.

Comment 7

3 years ago
(In reply to Steven Garrity [:sgarrity] from comment #6)
> This is now up on demo1: https://www-demo1.allizom.org/en-US/privacy/tips/
> 
> Please review and let me know of any issues.

Looking great, Steven.

I think there have been some copy updates recently, which may have happened after you grabbed the text. In particular, I saw a shorter subhead floating around.

Troy, could you review to see if there are any other copy changes that need to be made?

I think we're also adding a glyph to the header area section. Ty should be able to get you that.

One other thing I noticed is that the tabs all feel pushed a little to the left. I'm guessing they're still positioned as if there were five tabs. Could we move all that so it's centered under the headline and subhead?

Thanks.
Flags: needinfo?(troy)
Flags: needinfo?(tflanagan)

Comment 8

3 years ago
One other thing: When you use the buttons to navigate through the site, rather than the tabs, it feels like it should take you to the top of the tab that you're navigating to, rather than keeping you lower on the page. Is that possible?
(Assignee)

Comment 9

3 years ago
(In reply to Matej Novak [:matej] from comment #7)
> I think there have been some copy updates recently, which may have happened
> after you grabbed the text. In particular, I saw a shorter subhead floating
> around.
> Troy, could you review to see if there are any other copy changes that need
> to be made?

Egad! I assumed the PSD I was working from had up-to-date copy. L10N is blocked on this as well. Can we consider this string-frozen based on the Google Doc? https://docs.google.com/a/silverorange.com/document/d/1bSkOAXr48Jemvtzigrip87MQTpe3-KsCJZ9TbmPjktQ/edit?pli=1

> I think we're also adding a glyph to the header area section. Ty should be
> able to get you that.

Ty, can you confirm?

> One other thing I noticed is that the tabs all feel pushed a little to the
> left. I'm guessing they're still positioned as if there were five tabs.
> Could we move all that so it's centered under the headline and subhead?

Indeed. They are intended to be centered, but you're right that they are centered based on 5-tabs. Will update.

(In reply to Matej Novak [:matej] from comment #8)
> One other thing: When you use the buttons to navigate through the site,
> rather than the tabs, it feels like it should take you to the top of the tab
> that you're navigating to, rather than keeping you lower on the page. Is
> that possible?

Yeah, this has been bothering me as well. I'll see what I can do.

Comment 10

3 years ago
Looking at the copy now. I don't think there are too many things that need to be updated, but I have seen a few.

(In reply to Matej Novak [:matej] from comment #7)
> (In reply to Steven Garrity [:sgarrity] from comment #6)
> > This is now up on demo1: https://www-demo1.allizom.org/en-US/privacy/tips/
> > 
> > Please review and let me know of any issues.
> 
> Looking great, Steven.
> 
> I think there have been some copy updates recently, which may have happened
> after you grabbed the text. In particular, I saw a shorter subhead floating
> around.
> 
> Troy, could you review to see if there are any other copy changes that need
> to be made?
> 
> I think we're also adding a glyph to the header area section. Ty should be
> able to get you that.
> 
> One other thing I noticed is that the tabs all feel pushed a little to the
> left. I'm guessing they're still positioned as if there were five tabs.
> Could we move all that so it's centered under the headline and subhead?
> 
> Thanks.
Flags: needinfo?(troy)

Comment 11

3 years ago
Here are the things I noticed that need to be updated:

SUBHEAD
Change to: In four easy steps

TAB 3: ACT
SUBHEADS
“Private Add-ons” should be “Privacy Add-ons”

“Privacy tips from StaySafeOnline.org” should be “Tips and Guides”

In the copy:
“a one stop shop” should be “an easy reference” 


TAB 4: DISCUSS

In the copy, the second line should be:

If you’re feeling smarter already, share what you’ve learned here with your friends and family. It’s as easy as starting a conversation.

Questions should be updated to the following:
1. When you think about your online life, does privacy matter to you, and why?

2. How much do you think about who has access to your online data (advertisers, corporations, governments, etc.)?
3. How do you protect and manage your personal information on social networks? On your phone?

Thanks,
Troy
(Assignee)

Comment 12

3 years ago
I've made these text changes (will push to demo1 shortly). flod has pushed the strings out to L10N and wants us to know that any string changes "would make flod very sad".
(In reply to Steven Garrity [:sgarrity] from comment #12)
> I've made these text changes (will push to demo1 shortly). flod has pushed
> the strings out to L10N and wants us to know that any string changes "would
> make flod very sad".

I chatted with Greg yesterday and he confirmed that the copy in the gdoc is final. If anyone requests any additional changes, we'll let them know they have to take it up with flod.

Comment 14

3 years ago
Hey Steven,
Looking at this in more details today and one thing I'm noticing is that the margins between elements (e.g. tab and header, subhead and previous paragraphs...) are pretty small compared to the original layout. I am assuming you tried to minimize the vertical scroll which is a good call, but I wonder if there may be a better balance?

The content feels a bit squished together right now, a bit of space would help I think. Thoughts?
(In reply to Gregory Jost from comment #14)
> Hey Steven,
> Looking at this in more details today and one thing I'm noticing is that the
> margins between elements (e.g. tab and header, subhead and previous
> paragraphs...) are pretty small compared to the original layout. I am
> assuming you tried to minimize the vertical scroll which is a good call, but
> I wonder if there may be a better balance?
> 
> The content feels a bit squished together right now, a bit of space would
> help I think. Thoughts?

Hi Greg,

Ty sent Steven some revision notes by email yesterday, which I believe will help resolve these kinds of things.

Thanks.
(Assignee)

Comment 16

3 years ago
The demo server has been updated with the latest changes: https://www-demo1.allizom.org/en-US/privacy/tips/

These changes include a set of visual adjustments thanks to Ty's helpful notes.

Ty: one thing I didn't change is the background color of the footer. This page is using the default site footer background color. Should I over-ride that default?

I have also replaced the top-left 'socialshare' widget with the new mozilla-share-cta widget. This new widget is simpler and allows a custom twitter message. I realize this is not an insignificant visual change. I've pushed this to the demo server for feedback/approval.
Steven, I had to disable adblock plus to see the tabs and sharing widget. 

Maybe you need to hide or rename the div `#share-nav-wrapper` as alex did here for the tips page:

https://bugzilla.mozilla.org/show_bug.cgi?id=1121733#c1

Comment 18

3 years ago
Hi Steven,
After spending some time on the question of sharing "private browsing for all browsers", the team has decided to pull that content. Can you remove that section from the page ("3. act" tab)? Here;s what we can do:

- Keep Easy ways anyone can protect their privacy header (h4)
- Remove the private browsing section sub-head (H5), paragraph and links,
- Remove "tips and guides" sub-head (H5)

The rest remains unchanged.

Apologies for the late notice. It was a decision taken over the weekend and involved a lot of discussion between several teams.
(Assignee)

Comment 19

3 years ago
The demo server has been updated with:
1. the sharing widget fix from comment #17
2. the text changes from comment #18
3. the footer color update

Comment 20

3 years ago
Great! Thanks Steven.
A nit-pick I just noticed playing with localized versions: can you force a line-break when tab headlines are longer than the main column? See what it currently looks like with long headlines (and this may be the only occurence): https://www-demo1.allizom.org/fr/privacy/tips/#ask
Hi Steven-

Could you please add this meta data to the page?

Title: 

Get Smart on Privacy


Description Option: 

Feel like you've lost control of how your information is used online? Here are 4 easy steps to raising your privacy IQ & protecting yourself online.


Thx,
Jen
Flags: needinfo?(steven)

Comment 22

3 years ago
Hi Steven! While we're talking about meta data, a meta image for the landing page is being created for social sharing purposes. Here's the bug for that image: https://bugzilla.mozilla.org/show_bug.cgi?id=1123160
(Assignee)

Comment 23

3 years ago
(In reply to Jennifer Bertsch [:jbertsch] from comment #21)
> Could you please add this meta data to the page?
> 
> Title: 
> Get Smart on Privacy
> 
> Description Option: 
> Feel like you've lost control of how your information is used online? Here
> are 4 easy steps to raising your privacy IQ & protecting yourself online.

It turns out we've already got these in the template. However, the title we have is Sentence-case: "Get smart on privacy". Is it ok if we keep that capitalization so we don't have to re-translate?
Flags: needinfo?(steven)
(In reply to Steven Garrity [:sgarrity] from comment #23)
> (In reply to Jennifer Bertsch [:jbertsch] from comment #21)
> > Could you please add this meta data to the page?
> > 
> > Title: 
> > Get Smart on Privacy
> > 
> > Description Option: 
> > Feel like you've lost control of how your information is used online? Here
> > are 4 easy steps to raising your privacy IQ & protecting yourself online.
> 
> It turns out we've already got these in the template. However, the title we
> have is Sentence-case: "Get smart on privacy". Is it ok if we keep that
> capitalization so we don't have to re-translate?

Yes, let's keep as is. Thanks.
(Assignee)

Comment 25

3 years ago
I still need a http://mzl.la/ short link for the twitter content on this page. Who can set that up? Thanks.


(In reply to Liz Hull from comment #22)
> Hi Steven! While we're talking about meta data, a meta image for the landing
> page is being created for social sharing purposes. Here's the bug for that
> image: https://bugzilla.mozilla.org/show_bug.cgi?id=1123160


Liz, can you CC me on this bug? It's private. Thanks.
Flags: needinfo?(gjost)
Flags: needinfo?(ehull)

Comment 26

3 years ago
Hey Steven! You're now added to the bug (the correct one, it doesn't look like I linked the right one). 

Also, I'll set up the mzl.la link - just to be clear: this will be the link that auto-populates with the share message when someone clicks the tweet button on the page? I'm going to put tracking tags on the URL so just want to be double sure they're the right ones. 

Thanks!
Flags: needinfo?(ehull)
(Assignee)

Comment 27

3 years ago
(In reply to Liz Hull from comment #26)
> Hey Steven! You're now added to the bug (the correct one, it doesn't look
> like I linked the right one). 
> 
> Also, I'll set up the mzl.la link - just to be clear: this will be the link
> that auto-populates with the share message when someone clicks the tweet
> button on the page? I'm going to put tracking tags on the URL so just want
> to be double sure they're the right ones. 

Exactly. Thanks.
Steven, it was brought up in a creative review that the top nav should be sticky but I don't believe we communicated that to you. Is that something you can implement this week?

Comment 29

3 years ago
Steven, here is the shortened link exclusively tagged for the landing page share functionality: http://mzl.la/1E63Mxm 

Thanks!

Updated

3 years ago
Flags: needinfo?(tflanagan)
(Assignee)

Comment 30

3 years ago
The short link and sticky nav have both been implemented. I have also added this image [1] as the og:image sharing tile.

I think we may have everything in place. Please review: https://www-demo1.allizom.org/en-US/privacy/tips/

As soon as this gets through review and code-review, can it go into production, or does it need to wait until the day before Privacy Day?

[1] https://bug1123931.bugzilla.mozilla.org/attachment.cgi?id=8552756

Comment 31

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

https://github.com/mozilla/bedrock/commit/e979d48008c643436484ded8c02901a659a0dc1d
Bug 1109318 Privacy Day landing page for 2015

https://github.com/mozilla/bedrock/commit/02e9ea40314745f9fcc3203fc57f472818672e27
Merge pull request #2660 from mozilla/bug-1109318-privacy-day

Bug 1109318 Privacy Day landing page for 2015
Depends on: 1125971

Comment 32

3 years ago
Hi there,
I just noticed that the Facebook and Google+ sharing links don't use the right campaign ID in the sharing url.

It should In both links, we have utm_campaign=Privacy2015 where we should have utm_campaign=DPD15
Is it still time to make that change?
Flags: needinfo?(steven)
Flags: needinfo?(jbertsch)
Flags: needinfo?(gjost)
(Assignee)

Comment 33

3 years ago
(In reply to Gregory Jost from comment #32)
> It should In both links, we have utm_campaign=Privacy2015 where we should
> have utm_campaign=DPD15
> Is it still time to make that change?

I've got this changed locally. If we can get it out today, is that worth doing, or should we leave it if there is already data coming in with the other utm var?
Flags: needinfo?(steven)
Flags: needinfo?(jbertsch)
Flags: needinfo?(gjost)

Comment 34

3 years ago
Definitely worth doing today. Our promotion starts tomorrow but with have an email going out today, better make that change before it's sent out.
Flags: needinfo?(gjost)
(Assignee)

Comment 35

3 years ago
Created attachment 8555426 [details] [review]
https://github.com/mozilla/bedrock/pull/2687

Here's the PR to update the GA campaign variables.

Comment 36

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

https://github.com/mozilla/bedrock/commit/a83d23a144143c07443b965e68d96eb30e662bf0
Bug 1109318 Update GA campaign for Privay Day

https://github.com/mozilla/bedrock/commit/4e244ea0a83b51d86ecaeae3d168db2c6c80119d
Merge pull request #2687 from sgarrity/bug-1109318-privacy-day

 Bug 1109318 Update GA campaign for Privay Day

Comment 37

3 years ago
We noticed that on Twitter, Mozilla gets cut out from the meta image used for sharing. Is it possible to replace it with this one instead: https://bugzilla.mozilla.org/attachment.cgi?id=8555576&action=edit

Not sure if this requires a PR or can simply be switched on the server...
(Assignee)

Comment 38

3 years ago
Created attachment 8555603 [details] [review]
Link to Github pull-request: https://github.com/mozilla/bedrock/pull/2690

Comment 39

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

https://github.com/mozilla/bedrock/commit/65a60fe2c7bea20fa0c329922d927bdc8bec7cd7
Bug 1109318 Update sharing tile image

https://github.com/mozilla/bedrock/commit/4537da8050d4818b7b1c683af10892de36aa44e7
Merge pull request #2690 from sgarrity/bug-1109318-privacy-day

Bug 1109318 Update sharing tile image
(Assignee)

Updated

3 years ago
Status: ASSIGNED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED

Comment 40

3 years ago
I believe we didn't use the right link for privacy add-ons. Whenever bandwidth allows, can we replace the current add-on link with this one: https://addons.mozilla.org/firefox/collections/mozilla/privacy/?
Status: RESOLVED → REOPENED
Resolution: FIXED → ---

Updated

2 years ago
Depends on: 1205489
The /privacy/tips/ page has been removed in Bug 1238687.
Status: REOPENED → RESOLVED
Last Resolved: 3 years ago2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.