Opened 3 years ago

Closed 3 years ago

#17565 closed defect (fixed)

Banner on about:tor page

Reported by: arthuredelstein Owned by: arthuredelstein
Priority: High Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: funding, crowdfunding, donations, TorBrowserTeam201512R
Cc: mrphs, Sebastian, isabela, brade, mcs Actual Points:
Parent ID: #17534 Points:
Reviewer: Sponsor:

Description

We should add a banner on Tor Browser's about:tor page that links to the crowdfunding donation page. This will make most users aware of the crowdfunding campaign when Tor Browser updates next.

It might be fun and helpful to users to make it look stylistically similar to the crowdfunding page. Ideally we would translate the banner to several languages.

The next Tor Browser release is December 15, so we should aim for then at the very latest.

Child Tickets

Attachments (3)

Screen Shot 2015-11-30 at 10.28.13 vorm..png (238.3 KB) - added by arthuredelstein 3 years ago.
banner_screenshot
Screen Shot 2015-12-03 at 12.01.01 AM.png (388.6 KB) - added by arthuredelstein 3 years ago.
Screen Shot 2015-12-03 at 1.50.53 PM.png (368.7 KB) - added by arthuredelstein 3 years ago.

Download all attachments as: .zip

Change History (29)

comment:1 Changed 3 years ago by mcs

Cc: brade mcs added

comment:2 Changed 3 years ago by mcs

Should the banner always be present or does it need to be hidden after a certain date?

Note that there is a small, not-very-noticeable "Make a donation" link inside on of the bubbles near the bottom of the about:tor page.

comment:3 Changed 3 years ago by mcs

One more thought: the fundraising banner should probably not be shown if the about:tor page is red (Tor is not working).

comment:4 Changed 3 years ago by mrphs

The banner should be very specific for this campaign. And I think we should show it no matter what. Tor not working for whatever reason shouldn't stop us from promoting the campaign. if anything, their donations helps us make better Tor :)

comment:5 Changed 3 years ago by mrphs

Also I wonder if we can take this chance to integrate check.torproject.org into about:tor -- or even replace the whole about:tor with check.tpo design

comment:6 in reply to:  5 Changed 3 years ago by mcs

Replying to mrphs:

Also I wonder if we can take this chance to integrate check.torproject.org into about:tor -- or even replace the whole about:tor with check.tpo design

If we want to do this (add a crowdfunding banner) and include it in Tor Browser soon we should avoid taking on a redesign of the about:tor page (that probably deserves its own ticket and some dedicated design resources).

That is not to say that a redesign would be a bad thing. I do not know all of the history, especially from a design point of view, but it seems like check.torproject.org and the design for about:tor were produced independently. Part of the technical design of about:tor is that only a local SOCKS port check is done, which is very fast (see #7494) and about:tor does include a "Test Tor Network Settings" to provides access to the remote check.torproject.org site. Whatever redesign is done, I do not think we should switch back to using a remote check since it is not needed most of the time.

comment:7 in reply to:  4 Changed 3 years ago by arthuredelstein

Replying to mrphs:

The banner should be very specific for this campaign. And I think we should show it no matter what. Tor not working for whatever reason shouldn't stop us from promoting the campaign. if anything, their donations helps us make better Tor :)

I think Mark's point here is that clicking on the banner won't work (and will appear broken) if Tor isn't working. The user needs to focus on getting connected to the Tor network first, so maybe it's distracting to have a broken donation banner in that state?

comment:8 Changed 3 years ago by isabela

Do you need any help with design or copy for the banner ? if you want to have an image there, we have photos of our celebrities champions and quotes too! let me know if you need any help with collecting things for design/copy.

comment:9 Changed 3 years ago by isabela

FYI - there will be a /donation-tbb.html url for us to track how many ppl came from this banner:

https://trac.torproject.org/projects/tor/ticket/17571#ticket

comment:10 in reply to:  8 Changed 3 years ago by arthuredelstein

Replying to isabela:

Do you need any help with design or copy for the banner ? if you want to have an image there, we have photos of our celebrities champions and quotes too! let me know if you need any help with collecting things for design/copy.

Yes, I need help on both! :) Images and quotes would be great -- it might be not too hard to show a different random celebrity and quote with each startup. But best to start with something simple and then interate as we get feedback.

I imagine the same banner could also be useful at the top of the torproject.org home page (i.e., #10553).

I suppose we can get inspiration from a design like this:

http://gorumors.com/wp-content/uploads/2010/12/wikipedia-fundraiser.jpg

I think the "progress bar" for how much is being raised is quite a compelling thing. Updating it within Tor Browser might be a bit awkward, but it might be nice on the website. Do we have a goal amount for this campaign?

comment:11 in reply to:  8 Changed 3 years ago by arthuredelstein

Another variant on this idea is to have some kind "doorhanger" notification with a banner or otherwise-shaped crowdfunding ad. Here's what a doorhanger notification looks like:

http://cdn.ghacks.net/wp-content/uploads/2013/11/australis-ui-tour-1.jpg

We could give it any shape/size and put pretty much any HTML content inside it that we want.

On the plus side, a doorhanger would still be visible to people who have changed their Tor Browser startup page to something other than about:tor.

On the minus side, a doorhanger is perhaps more intrusive and annoying. But we could set it to only appear a limited number of times.

What do you think, O wise people with good taste?

Changed 3 years ago by arthuredelstein

banner_screenshot

comment:12 Changed 3 years ago by arthuredelstein

I've written a patch that adds a banner to about:tor. The design is heavily based on Leiah's work, but it uses HTML text, so, if there is time, we can translate the banner in-place.

Here is the patch for review: https://github.com/arthuredelstein/torbutton/commit/17565+2

You can also download a torbutton build (XPI) for testing, here: https://people.torproject.org/~arthuredelstein/downloads/banner/

I'm hoping this banner (with any needed revisions) can be included in the December 15 TBB update.

banner_screenshot

Last edited 3 years ago by arthuredelstein (previous) (diff)

comment:13 Changed 3 years ago by arthuredelstein

Keywords: TorBrowserTeam201511R added
Status: newneeds_review

comment:14 Changed 3 years ago by mcs

A few quick comments:

  • To allow localization, the text needs to be moved to the aboutTor.dtd file.
  • Use of "text-align: left" may cause trouble if we translate to an RTL language. Remove it if it is not needed, and consider testing with placeholder Farsi or Arabic text to find potential problems now.
  • There is a lot of inline CSS. Move some of it to aboutTor.css if you have time (that will make the HTML easier to read and make everything more maintainable).
  • If possible, keep line lengths under or near 80. Moving the CSS out of the HTML file should make that possible.

comment:15 Changed 3 years ago by mikeperry

Keywords: TorBrowserTeam201512R added; TorBrowserTeam201511R removed

Changed 3 years ago by arthuredelstein

comment:16 in reply to:  14 Changed 3 years ago by arthuredelstein

Replying to mcs:

A few quick comments:

  • To allow localization, the text needs to be moved to the aboutTor.dtd file.
  • Use of "text-align: left" may cause trouble if we translate to an RTL language. Remove it if it is not needed, and consider testing with placeholder Farsi or Arabic text to find potential problems now.
  • There is a lot of inline CSS. Move some of it to aboutTor.css if you have time (that will make the HTML easier to read and make everything more maintainable).
  • If possible, keep line lengths under or near 80. Moving the CSS out of the HTML file should make that possible.

Thanks for these useful suggestions. I have adopted them in the following revised patch:
https://github.com/arthuredelstein/torbutton/commit/17565+4

This version uses Leiah's new banner design. As currently implemented, the banner will be visible in English only, until January 25 or until the banner has been displayed 10 times (whichever happens first). There are three champions, one of which is shown randomly with each new Tor Browser window.

(If we manage to get the strings translated in time then I will enable the available languages and review the layout for each language.)

Here are two screenshots:


Last edited 3 years ago by arthuredelstein (previous) (diff)

comment:18 Changed 3 years ago by teor

I like how the banners look, but I find it hard to read the green-on-yellow "Please support Tor!"

Does anyone else have this issue, or is it just my eyesight / monitor?

comment:19 in reply to:  18 Changed 3 years ago by mcs

Replying to teor:

I like how the banners look, but I find it hard to read the green-on-yellow "Please support Tor!"

Does anyone else have this issue, or is it just my eyesight / monitor?

Kathy and I can both read the text without any trouble. We do think it might look better with more yellow background above and on the left and right sides. Also, Kathy says that the yellow does not match the overall banner color scheme (but she admits that she is not a color expert).

There is one more small point about the "Please support Tor!" text that Arthur should address: the color of the text changes when you hover over any part of the banner (due to an existing 'a:hover' CSS rule).

comment:20 Changed 3 years ago by mcs

Kathy and I reviewed these changes. We have a bunch of minor code comments:

  • The wrong indent is used in a couple of places: please fix the line where setupDonationBanner() is called and the #donation-banner-text CSS rules.
  • The line that has 'document.getElementById("donation-banner-image").src =' is very long. Please break it up.
  • Since you are doing a Date object inequality comparison, you do not need to use getTime().
  • We would feel better if the call to gStringBundle.GetStringFromName() was wrapped in a try/catch (it would be bad if a bug in the banner translations caused the entire about:tor page to fail).
  • Please move the three top-level-scope lines that set gStringBundle above onLoad() so they are easier to notice.
  • For consistency, we suggest renaming alternates to gBannerAlternates, suffixes to gBannerSuffixes, and populate() to populateBannerText().
  • For consistency with the other Torbutton prefs, the new pref should be named something like extensions.torbutton.donation_banner.shown_count.

comment:21 Changed 3 years ago by mcs

One thing I forgot to mention: the Donate button's "move down" behavior seems unusual to me, at least on Mac OS where most buttons just stay put when you click on them. I think not moving is part of the flat design trend, but I am not a design expert.

comment:22 in reply to:  21 Changed 3 years ago by arthuredelstein

Replying to mcs (comment 19):

Replying to teor:

I like how the banners look, but I find it hard to read the green-on-yellow "Please support Tor!"

Does anyone else have this issue, or is it just my eyesight / monitor?

Kathy and I can both read the text without any trouble. We do think it might look better with more yellow background above and on the left and right sides. Also, Kathy says that the yellow does not match the overall banner color scheme (but she admits that she is not a color expert).

Thank you for the quick reviews, teor, Kathy and Mark! I padded the yellow background some more. The yellow color violates my sensibilities as well, but we are aiming for something that draws the user's attention. Yellow-highlighted text has worked for another famous organization with funding campaign banners, so we're giving it a try.

There is one more small point about the "Please support Tor!" text that Arthur should address: the color of the text changes when you hover over any part of the banner (due to an existing 'a:hover' CSS rule).

Good point -- fixed. The text now stays dark green, which I hope will be easier to read against the yellow background.

Replying to mcs (comment 20):

Kathy and I reviewed these changes. We have a bunch of minor code comments:

  • The wrong indent is used in a couple of places: please fix the line where setupDonationBanner() is called and the #donation-banner-text CSS rules.
  • The line that has 'document.getElementById("donation-banner-image").src =' is very long. Please break it up.
  • Since you are doing a Date object inequality comparison, you do not need to use getTime().
  • We would feel better if the call to gStringBundle.GetStringFromName() was wrapped in a try/catch (it would be bad if a bug in the banner translations caused the entire about:tor page to fail).
  • Please move the three top-level-scope lines that set gStringBundle above onLoad() so they are easier to notice.
  • For consistency, we suggest renaming alternates to gBannerAlternates, suffixes to gBannerSuffixes, and populate() to populateBannerText().
  • For consistency with the other Torbutton prefs, the new pref should be named something like extensions.torbutton.donation_banner.shown_count.

All fixed -- thanks.

Replying to mcs (comment 21):

One thing I forgot to mention: the Donate button's "move down" behavior seems unusual to me, at least on Mac OS where most buttons just stay put when you click on them. I think not moving is part of the flat design trend, but I am not a design expert.

Good point. I have removed that behavior.

Here is the revised patch:
https://github.com/arthuredelstein/torbutton/commit/17565+5

comment:23 Changed 3 years ago by arthuredelstein

The latest version can be downloaded as an XPI, here:
https://people.torproject.org/~arthuredelstein/downloads/banner/

Changed 3 years ago by arthuredelstein

comment:24 Changed 3 years ago by arthuredelstein

And here is the new screenshot:


comment:25 Changed 3 years ago by mcs

r=mcs, r=brade
This looks good to Kathy and me.

comment:26 Changed 3 years ago by gk

Resolution: fixed
Status: needs_reviewclosed

Thanks, cherry-picked to master (5623a3f4ff415eff980b03998b3eff2caf433906) and maint-1.9.3 (ddf8ea3503fc29a601baf4c77d0cbe96391e8fee).

Note: See TracTickets for help on using tickets.