Last Comment Bug 1109318 - [Privacy Day 2015] Landing Page implementation
: [Privacy Day 2015] Landing Page implementation
Status: RESOLVED FIXED
[kb=1622440]
:
Product: www.mozilla.org
Classification: Other
Component: Pages & Content (show other bugs)
: other
: All Other
-- normal
: ---
Assigned To: Steven Garrity [:sgarrity]
:
:
Mentors:
https://www.mozilla.org/en-US/privacy...
Depends on: 1111877 1118933 1121114 1125971 1205489
Blocks: 1109324
  Show dependency treegraph
 
Reported: 2014-12-09 14:32 PST by Lizz Noonan (:lizzn)
Modified: 2016-02-13 22:44 PST (History)
19 users (show)
See Also:
Locale:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
https://github.com/mozilla/bedrock/pull/2660 (44 bytes, text/x-github-pull-request)
2015-01-14 12:20 PST, Steven Garrity [:sgarrity]
no flags Details | Review | Splinter Review
https://github.com/mozilla/bedrock/pull/2687 (44 bytes, text/x-github-pull-request)
2015-01-27 11:38 PST, Steven Garrity [:sgarrity]
no flags Details | Review | Splinter Review
Link to Github pull-request: https://github.com/mozilla/bedrock/pull/2690 (44 bytes, text/x-github-pull-request)
2015-01-27 17:32 PST, Steven Garrity [:sgarrity]
no flags Details | Review | Splinter Review

Description User image Lizz Noonan (:lizzn) 2014-12-09 14:32:35 PST
>>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
Comment 1 User image Lizz Noonan (:lizzn) 2014-12-09 14:35:07 PST
Steven will make the page updates, with Ty informing.
Comment 2 User image Mike Alexis [:malexis] 2015-01-06 15:37:19 PST
PSD  http://cl.ly/2l1m3l3b281D
Comment 3 User image Steven Garrity [:sgarrity] 2015-01-07 12:34:38 PST
PSD received. Implementation underway!
Comment 4 User image Steven Garrity [:sgarrity] 2015-01-14 11:20:26 PST
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
Comment 5 User image Steven Garrity [:sgarrity] 2015-01-14 12:20:30 PST
Created attachment 8549115 [details] [review]
https://github.com/mozilla/bedrock/pull/2660
Comment 6 User image Steven Garrity [:sgarrity] 2015-01-14 12:21:12 PST
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 User image Matej Novak [:matej] 2015-01-14 12:34:43 PST
(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.
Comment 8 User image Matej Novak [:matej] 2015-01-14 12:36:02 PST
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?
Comment 9 User image Steven Garrity [:sgarrity] 2015-01-14 12:52:23 PST
(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 User image Troy Palmer 2015-01-14 13:27:41 PST
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.
Comment 11 User image Troy Palmer 2015-01-14 13:44:43 PST
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
Comment 12 User image Steven Garrity [:sgarrity] 2015-01-15 06:25:35 PST
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".
Comment 13 User image Matej Novak [:matej] 2015-01-15 06:46:11 PST
(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 User image Gregory Jost 2015-01-15 15:36:04 PST
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?
Comment 15 User image Matej Novak [:matej] 2015-01-16 05:27:43 PST
(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.
Comment 16 User image Steven Garrity [:sgarrity] 2015-01-20 07:16:26 PST
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.
Comment 17 User image Mike Alexis [:malexis] 2015-01-20 09:25:41 PST
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 User image Gregory Jost 2015-01-20 10:10:11 PST
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.
Comment 19 User image Steven Garrity [:sgarrity] 2015-01-20 10:57:48 PST
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 User image Gregory Jost 2015-01-20 13:58:35 PST
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
Comment 21 User image Jennifer Bertsch [:jbertsch] 2015-01-20 14:37:54 PST
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
Comment 22 User image Liz Hull 2015-01-21 07:26:52 PST
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
Comment 23 User image Steven Garrity [:sgarrity] 2015-01-21 07:53:07 PST
(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?
Comment 24 User image Matej Novak [:matej] 2015-01-21 08:18:11 PST
(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.
Comment 25 User image Steven Garrity [:sgarrity] 2015-01-21 09:03:51 PST
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.
Comment 26 User image Liz Hull 2015-01-21 09:12:35 PST
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!
Comment 27 User image Steven Garrity [:sgarrity] 2015-01-21 09:25:02 PST
(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.
Comment 28 User image Mike Alexis [:malexis] 2015-01-21 09:45:47 PST
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 User image Liz Hull 2015-01-22 08:00:28 PST
Steven, here is the shortened link exclusively tagged for the landing page share functionality: http://mzl.la/1E63Mxm 

Thanks!
Comment 30 User image Steven Garrity [:sgarrity] 2015-01-22 13:00:22 PST
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 User image [github robot] 2015-01-26 11:08:25 PST
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
Comment 32 User image Gregory Jost 2015-01-26 13:16:57 PST
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?
Comment 33 User image Steven Garrity [:sgarrity] 2015-01-27 06:06:12 PST
(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?
Comment 34 User image Gregory Jost 2015-01-27 11:31:49 PST
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.
Comment 35 User image Steven Garrity [:sgarrity] 2015-01-27 11:38:53 PST
Created attachment 8555426 [details] [review]
https://github.com/mozilla/bedrock/pull/2687

Here's the PR to update the GA campaign variables.
Comment 36 User image [github robot] 2015-01-27 11:50:37 PST
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 User image Gregory Jost 2015-01-27 17:19:07 PST
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...
Comment 38 User image Steven Garrity [:sgarrity] 2015-01-27 17:32:55 PST
Created attachment 8555603 [details] [review]
Link to Github pull-request: https://github.com/mozilla/bedrock/pull/2690
Comment 39 User image [github robot] 2015-01-28 06:38:46 PST
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
Comment 40 User image Gregory Jost 2015-02-13 14:52:42 PST
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/?
Comment 41 User image Kohei Yoshino [:kohei] 2016-02-13 22:44:15 PST
The /privacy/tips/ page has been removed in Bug 1238687.

Note You need to log in before you can comment on or make changes to this bug.