Closed Bug 1016500 Opened 10 years ago Closed 10 years ago

Implement Manifesto redesign

Categories

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

Product:
www.mozilla.org
Component:
Pages & Content
Version:
Production
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: malexis, Assigned: kohei)

References

(
URL
)

Details

(Whiteboard: [kb=1389915] )

Attachments

(2 files)

pull request
44 bytes, text/x-github-pull-request
Details | Review
mock up June 27
1.67 MB, image/jpeg
Details 
Designs are approved. 

Lee, can you attach PSD here when ready?

We can meet to discuss implementation and interactions with Kohei.
You bet! 
Kohei, here's the PSD: http://cl.ly/1n26370y1S2G

Let me know if you have any questions.
Awesome! Let me check.
What should the signature overlay and the sign button do? The wireframe (Attachment 8337855 [details]) says it will "unlock the ways you can support Mozilla's Manifesto." Maybe it won't be used this time?
(In reply to Kohei Yoshino [:kohei] from comment #3)
> What should the signature overlay and the sign button do? The wireframe
> (Attachment 8337855 [details]) says it will "unlock the ways you can support
> Mozilla's Manifesto." Maybe it won't be used this time?

Hi Kohei-

We aren't using the signature overlay and sign up button at this time.

Thx,
Jen
Sorry if my file was confusing, Kohei. I left that component in my PSD in case we'll want it later - for now, we're leaving it out as Jen said. Thanks!
Okay, thanks :)
Whiteboard: [kb=1389915]
Status: NEW → ASSIGNED
OS: Mac OS X → All
Hardware: x86 → All
Depends on: 1016464
Depends on: 1011692
Kohei, can you put what you have so far on a demo server? We're hoping we can use that link get sign-off from people included in the photos.
Flags: needinfo?(kohei.yoshino)
I'll send a PR tomorrow with the current copy provided, so people will be able to preview the page on a demo server.
Flags: needinfo?(kohei.yoshino)
Attached file pull request — 
A few questions:

* The current "Share this" widget doesn't work properly if there are two or more buttons on the same page. Also, Facebook and Google+ don't allow users to share an arbitrary text, while Twitter does. So I have replaced "Share this" widgets with "Tweet this" links with each principle copy, except one on the header. Is that okay with you?
* Where should the "Our plans and pledge" link go? It's under the "Learn more about…" section.
This is now on a demo server:
https://www-demo4.allizom.org/en-US/about/manifesto/
That's looking great, Kohei - thanks! 

Would it be possible to have the background grid go beyond 2 columns, and spread both ways to fill up 100% background? If it's possible, maybe the photos can randomly switch position with each other (still use the same number of pictures, but swap placement just to add some movement)
I have increased the columns to 3, so the grids will fill the background in most cases. Because the grid rotator plug-in sometimes doesn't work as expected, I think it's safe to keep the number of columns. These photos are randomly placed :)
Some notes and questions.

If you check https://www-demo4.allizom.org/it/about/manifesto/, you'll note that a couple of principles are not localized. 01 has a couple more spaces around –, while 05 has moved from "on Internet" to "on it". Are these changed wanted,and necessary?

I'm not sure the "OUR 10 Principles" design will work at all for l10n:
* it would be nice to avoid using text-transform, just set the string as "OUR 10 Principles"
* "OUR 10" can become quite long. As it is, the design will break ({} will cover only 2 lines, partially overlap with photos).
* manifesto/details needs to pick up strings from manifesto.lang
Forgot the most important thing: how do we plan to enable this new design, once it's ready? 

Manifesto is currently localized in 37 locales.
(In reply to Francesco Lodolo [:flod] from comment #13)
> I'm not sure the "OUR 10 Principles" design will work at all for l10n:

I cannot answer about the copy but was thinking about this. We could have some locale-specific tweaks. I'll try to understand how it works in various locales with Google Translate ;)

(In reply to Francesco Lodolo [:flod] from comment #14)
> Forgot the most important thing: how do we plan to enable this new design,
> once it's ready? 

Should we use a tag like Tabzilla promos to switch the old and new design?
Yes, I think a tag would be a good compromise. Some of those locales are slow to react, and disabling completely the page is not great.
OK, I'll introduce a tag something like

{% if l10n_has_tag('manifesto_landing') or settings.DEV %}
  Show the redesigned page
{% else %}
  Show the old page
{% endif %}
(In reply to Mike Alexis [:malexis] from comment #7)
> Kohei, can you put what you have so far on a demo server? We're hoping we
> can use that link get sign-off from people included in the photos.

Please get go-aheads from those people if needed :)
Hi Gareth, I'd like to implement some GA event trackings on this page. It could be something like this. What do you think?

Category: /about/manifesto/ Interactions

Actions and Labels:

* Show modal, section ID (01 to 10)
* Click link, link text
* Tweet, section ID or "Tell your friends" (for the arbitrary text form)

The demo page can be found at https://www-demo4.allizom.org/en-US/about/manifesto/
Flags: needinfo?(garethcull.bugs)
I still have to solve my Comment 9. Any ideas?
Flags: needinfo?(jbertsch)
(In reply to Kohei Yoshino [:kohei] from comment #9)
> Created attachment 8440305 [details] [review]
> pull request
> 
> A few questions:
> 
> * The current "Share this" widget doesn't work properly if there are two or
> more buttons on the same page. Also, Facebook and Google+ don't allow users
> to share an arbitrary text, while Twitter does. So I have replaced "Share
> this" widgets with "Tweet this" links with each principle copy, except one
> on the header. Is that okay with you?
> * Where should the "Our plans and pledge" link go? It's under the "Learn
> more about…" section.

Hi Kohei-

Yes - perfect re:  making Tweet this links within each principle.  Thanks!

Delete the "our plans and pledge" link.

Does that cover it?  I'm so sorry for the slow response on this one.

Thanks!
Flags: needinfo?(jbertsch)
(In reply to Jennifer Bertsch [:jbertsch] from comment #21)
> Yes - perfect re:  making Tweet this links within each principle.  Thanks!
> 
> Delete the "our plans and pledge" link.

Okay, thanks :)
Hi Kohei, I just noticed that the video links in the Learn more overlays take you off the Manifesto site. Can we change that to open a new tab? That way the user doesn't have to use the back button (reload our site) to resume their experience.
(In reply to Kohei Yoshino [:kohei] from comment #19)
> Hi Gareth, I'd like to implement some GA event trackings on this page. It
> could be something like this. What do you think?
> 
> Category: /about/manifesto/ Interactions
> 
> Actions and Labels:
> 
> * Show modal, section ID (01 to 10)

Show modal with section ID as the label looks good. 

> * Click link, link text

Let's change 'Click link' to 'modal link click' Can we concatenate the section ID before the link text within the label. eg. 01: link text

> * Tweet, section ID or "Tell your friends" (for the arbitrary text form)

Tweet, section ID looks good. Could we put some utm parameters on the shared twitter link, so we can understand the inbound traffic by type of content shared. Please use: ?utm_source=twitter&utm_medium=referral&utm_campaign=manifestoshares&utm_content={section ID OR Tell Your Friends}.


Also, can we also place events on the navigation arrows when the modal opens to understand how people are navigating through this experience.

where action is 'next' or 'prev'
and label is section ID they are currently on.

Does that work?
Flags: needinfo?(garethcull.bugs)
(In reply to Lee Tom from comment #23)
> I just noticed that the video links in the Learn more overlays take you off
> the Manifesto site. Can we change that to open a new tab?

Sure, maybe all Learn More and video links should be opened in a new tab.

We could embed those videos instead, but I thought nested modals were confusing and Android users might want to open videos in the native YouTube app.

(In reply to Gareth Cull [:garethc] from comment #24)
> Does that work?

Yes! I'll implement those soon.
I have reorganized GA event actions based on Gareth's comment. Does this work?

Modal actions:

* modal open: section id (01 to 10)
* modal prev: section id
* modal next: section id

Those will help distinguish normal links and YouTube links:

* modal link click: link text
* modal video link click: link text

For links outside the modal, e.g. Read the entire manifesto, Donating to Mozilla:

* content link click: link text

Twitter:

* tweet: section id or 'custom'
Flags: needinfo?(garethcull.bugs)
That works. Thanks Kohei!
Flags: needinfo?(garethcull.bugs)
Got it!
Depends on: 1029532
Hi Kohei-

For launch, can we limit the photos to 4 columns - 2 on the left and 2 on the right?  I love the way 3 columns look, but I think there are too many repeated images and not enough time to gather up more pics of Mozillians.

Thx,
Jen
PS:  Did Mike mention to you that we would like to get the page live on July 2?  Do you think that is possible?  If not, we can pick a later date.  Thx!!!
This is looking really good. I have a few style and interaction comments to improve the ux:

Link styles:
- Visited links appear to be blue in the CSS. This color will not work well on all backgrounds. For instance, step 8 has a green background. 'Visited' blue links are not readable on this color. Screenshot: http://cl.ly/image/323w3L1d3D04
* we need a link color that works across all background colors, but I don't think a separated visited link color is necessary. Let's focus on making links look clickable in the next comment.

- Unvisited links are white and do not look interactive. This white link text is the same color text as non-links and as a result it is not clear what is a link vs. plain text. If all bullet points were a link, this may work since we would set up the expectation that each bullet point is a link. However, some bullet points contain 2 links. Example: "volunteer" and "student ambassador" are 2 separate links in the second bullet point of #8. http://cl.ly/image/0U47113s252C
* we need a link style that distinguishes links from plain text. This could be a text or text background color, for instance. (Lee to advise)

- A link hover state for our "see more" links would make this feel more interactive. http://cl.ly/image/2M1b2n0a3j2Z
* Link hover state could be a link background color, animation ("see more" to "see more >" - adding a carrot on hover), etc and does not need to be constrained to text color only as I know our color options are limited with the dark backgrounds. 


I really like the Left/Right subtle arrow animation on hover in the overlays. Given the limits we have for relying on color to make things look clickable and feel interactive, we can also consider using animation like this to make the interactive elements respond to the user in the items I mentioned above. 

Lee, do you have any style recommendations to solve the few CSS/interactivity issues I mentioned above?
Flags: needinfo?(ltom)
Thanks Holly. I feel there's a pretty clear CTA to initiate the principals overlays - there are 3 changes on hover: Principal number highlights, "see more" appears and the other boxes fade back. I agree that the links on the overlays might not be as clear as they can be.  

Unvisited links
- Maybe the links are underlined by default
- I like the idea of adding a carrot on hover ("Join us" to "Join us »") 
- In the case of #8 where there are 2 links in one bullet, let's separate into one per bullet so adding a carrot on hover doesn't look weird within a single sentence

ie: 
• Join us as a volunteer »
• Join us as a student ambassador »

Link hover state for "see more"
- Let's keep the links white and add the carrot on hover if this helps ("See more" to "See more »")
Flags: needinfo?(ltom)
Hi Kohei-

Here's a new PSD with the final photos:  http://cl.ly/3r0S463v0036

For launch, could we restrict the page to 4 columns of photos total?  I think there are two many repeats with 6 columns and the number of images we have - We probably need to add more images but that is time consuming with obtaining the permissions so I think we'll need to finish up that part later in July.

I'll also update the latest mock up jpg to this bug.

Thx,
Jen
I'll revisit links and update photos shortly!
Hi Kohei-

Also, in Firefox (but not Safari), when I try to tweet, I see two twitter windows pop up.  In Safari, it works as expected and I just see 1 pop up window open.

Thx,
Jen
Hey Kohei, I have just a couple of minor updates to mention. See Lee's last comment (comment 32) regarding link styes. I've reiterated his key feedback below:

1. Link style update for overlay (specific to #8's overlay)
In the case of #8 where there are 2 links in one bullet, let's separate into one per bullet so adding a carrot on hover doesn't look weird within a single sentence
• Join us as a volunteer »
• Join us as a student ambassador »

2. Link hover state for "see more"
Let's keep the links white and add the carrot on hover if this helps ("See more" to "See more »")


Currently, the "see more" has a pulsing animation. Instead of this, could you implement Lee's recommendation? On the overlay for #8 could you also separate the links into 2 bullet points as described?
I have replaced all share links with shorten URLs so people won't see long URLs and the stats can be found at

01: https://bitly.com/1o4BGY1+
02: https://bitly.com/1o4Cmwi+
03: https://bitly.com/1pHvACg+
04: https://bitly.com/1olpxj7+
05: https://bitly.com/V8O1SM+
06: https://bitly.com/TArZa0+
07: https://bitly.com/1mRltrl+
08: https://bitly.com/TMI1Ox+
09: https://bitly.com/1xcEisc+
10: https://bitly.com/1z5HIPk+
custom: https://bitly.com/1iRxjCi+

And fixed the two popup windows issue.
(In reply to Holly Habstritt Gaal [:Habber] from comment #38)
> 1. Link style update for overlay (specific to #8's overlay)
> In the case of #8 where there are 2 links in one bullet, let's separate into
> one per bullet so adding a carrot on hover doesn't look weird within a
> single sentence
> • Join us as a volunteer »
> • Join us as a student ambassador »

I should have left a comment sooner... This string has already been localized into some languages, so I have kept it as is. Maybe we can fix it in the next round.

> 2. Link hover state for "see more"
> Let's keep the links white and add the carrot on hover if this helps ("See
> more" to "See more »")
> 
> 
> Currently, the "see more" has a pulsing animation. Instead of this, could
> you implement Lee's recommendation? On the overlay for #8 could you also
> separate the links into 2 bullet points as described?

Fixed.
Hi, my pull request is now ready to be pushed any time!
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/c93aa029a07f617e95bc8181de7baaf58a4e6584
Fix Bug 1016500 - Implement Manifesto redesign

https://github.com/mozilla/bedrock/commit/c054daace114f0fb5199dc8e4e578ce019ba375f
Merge pull request #2102 from kyoshino/bug-1016500-manifesto-redesign

Fix Bug 1016500 - Implement Manifesto redesign
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Thanks Kohei!
(In reply to Kohei Yoshino [:kohei] from comment #40)
> (In reply to Holly Habstritt Gaal [:Habber] from comment #38)
> > 1. Link style update for overlay (specific to #8's overlay)
> > In the case of #8 where there are 2 links in one bullet, let's separate into
> > one per bullet so adding a carrot on hover doesn't look weird within a
> > single sentence
> > • Join us as a volunteer »
> > • Join us as a student ambassador »
> 
> I should have left a comment sooner... This string has already been
> localized into some languages, so I have kept it as is. Maybe we can fix it
> in the next round.
> 
> > 2. Link hover state for "see more"
> > Let's keep the links white and add the carrot on hover if this helps ("See
> > more" to "See more »")
> > 
> > 
> > Currently, the "see more" has a pulsing animation. Instead of this, could
> > you implement Lee's recommendation? On the overlay for #8 could you also
> > separate the links into 2 bullet points as described?
> 
> Fixed.

Good point about the localization. Let's keep it in mind for the next round of updates. Thanks!
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/16e852a4575ae691a3300500266df5e4f471c2bf
[fix bug 1016500] Small manifesto page CSS style updates and fixes

https://github.com/mozilla/bedrock/commit/71dcff33e69fcb824a9d8ba5cc035d083f20b986
Merge pull request #2185 from mozilla/bug-1016500-small-design-updates-manifesto

[fix bug 1016500] Manifesto page CSS style updates and fixes
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/a81b94f0db8fa6aad8f3d169f32d068d546f9493
[bug 1016500] Fix image rotation on manifesto page

https://github.com/mozilla/bedrock/commit/63e1dd25d9f800a6ae06f64d552fdfe09a97d573
Merge pull request #2224 from alexgibson/bug-1016500-fix-image-rotate-manifesto-page

[bug 1016500] Fix image rotation on manifesto page
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: