Opened 4 years ago

Closed 3 years ago

#17880 closed defect (fixed)

Create a similar donation banner (from about:tor) to torproject.org homepage

Reported by: isabela Owned by: Sebastian
Priority: Medium Milestone:
Component: Webpages/Website Version:
Severity: Normal Keywords:
Cc: leiah21@… Actual Points:
Parent ID: #17534 Points:
Reviewer: Sponsor:

Description (last modified by arthuredelstein)

Last Tor Browser release came with a banner for our crowdfunding campaign [see attached screenshots].

You can find the code for it here:
https://github.com/arthuredelstein/torbutton/commit/unified-banner-patch

We would like to have these banners (if possible with the rotation like we did for TBB) at the torproject.org homepage only.

Thanks!

Child Tickets

Attachments (5)

cory-doctorow.png (195.2 KB) - added by isabela 4 years ago.
cory doctorow tbb banner
laura-poitras.png (202.9 KB) - added by isabela 4 years ago.
laura poitras tbb banner
roger-dingledine.png (193.7 KB) - added by isabela 4 years ago.
roger tbb banner
Bildschirmfoto 2015-12-18 um 04.03.42 nachm..png (435.6 KB) - added by arthuredelstein 4 years ago.
tpo-homepage.jpg (909.0 KB) - added by leiah 4 years ago.

Download all attachments as: .zip

Change History (20)

Changed 4 years ago by isabela

Attachment: cory-doctorow.png added

cory doctorow tbb banner

Changed 4 years ago by isabela

Attachment: laura-poitras.png added

laura poitras tbb banner

Changed 4 years ago by isabela

Attachment: roger-dingledine.png added

roger tbb banner

comment:1 Changed 4 years ago by arthuredelstein

Description: modified (diff)

The final code for the banners in Tor Browser is across multiple patches in torbutton. I changed the link in the description to show all of those patches combined.

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

Changed 4 years ago by arthuredelstein

comment:2 Changed 4 years ago by arthuredelstein

Status: newneeds_review

Here's a patch, for review, that would add a donation banner on the torproject.org homepage, using Leiah's latest banner images:

https://github.com/arthuredelstein/webml/commit/12dd212fcdf7163bd91f0ac4f650eed65c8b795c

One of the several champions is shown at random each time the page loads. There's a live demo at https://torpat.ch/tpo

Here's an example screenshot:


comment:3 Changed 4 years ago by arthuredelstein

Resolution: fixed
Status: needs_reviewclosed

comment:4 Changed 4 years ago by mrphs

Resolution: fixed
Status: closedreopened

I've just seen this design and while I appreciate the hard work that has gone into it, I think that we can still strive for a more polished and professional look that properly represents the quality of the community.

Here are some of the issues I'd like to bring to attention"

  • the text on the image is actually image, not text. For about:tor page, it's somewhat understandable but for the home page, it really isn't. It takes much longer to load. The content wouldn't be indexed and this design totally ignores visually impaired users, which is tbh offensive to them.
  • the image has a width and even worse, its width is less than the main body.
  • borders on the sides? :( it makes me feel like 1997
  • champion's photo is in a circle... there's no other place on this page or even the whole website that we've used circles. Everything is in a rectangle or square.
  • the font is a whole different font family...

Reopening this ticket, because I don't think this is how we should present ourselves to the world. Let alone, asking for their contribution...

Last edited 4 years ago by mrphs (previous) (diff)

comment:5 in reply to:  4 ; Changed 4 years ago by isabela

Hi there,

Thanks for bringing it up, I will reply below - but first, what needs to take into consideration here is the lack of capacity we have at the moment to have a banner in time for the last two weeks of the campaign. So many of the things listed below were decided to be that way because of that.

If we have more capacity we will apply changes, but we might not have it to make it better - and yes, we do know is not great and it should be better. But right now we are with time and capacity problem. So please keep this in mind if you don't see some of the suggestions applied to it. What we want to avoid is to drag this for too long and miss the opportunity to have it for more time in the HP.

  • the text on the image is actually image, not text. For about:tor page, it's somewhat understandable but for the home page, it really isn't. It takes much longer to load. The content wouldn't be indexed and this design totally ignores visually impaired users, which is tbh offensive to them.

Yes, we decided to go with image because it would be faster and since we are not translating this one, we could do img instead of txt. I agree with the problems you listed. But again, consideration here is capacity.

  • the image has a width and even worse, its width is less than the main body.

Yes, we discussed it last night, I gave a go for it because it will be up for 2 weeks only and again, we are balancing time and capacity.

  • borders on the sides? :( it makes me feel like 1997
  • champion's photo is in a circle... there's no other place on this page or even the whole website that we've used circles. Everything is in a rectangle or square.

Both follows the same layout we have on TBB and tbh I think is trivial here in relationship to the main goal, specially because it will be there for 2 weeks only.

  • the font is a whole different font family...

Reopening this ticket, because I don't think this is how we should present ourselves to the world. Let alone, asking for their contribution...

hmmm I think this is a little bit of an exaggeration don't you think? Because we are already presenting ourselves like this to the world on our blog, tor browser and tweets - because is the same art we are using on those channels as well....

comment:6 in reply to:  4 Changed 4 years ago by isabela

Hi there,

Thanks for bringing it up, I will reply below - but first, what needs to take into consideration here is the lack of capacity we have at the moment to have a banner in time for the last two weeks of the campaign. So many of the things listed below were decided to be that way because of that.

If we have more capacity we will apply changes, but we might not have it to make it better - and yes, we do know is not great and it should be better. But right now we are with time and capacity problem. So please keep this in mind if you don't see some of the suggestions applied to it. What we want to avoid is to drag this for too long and miss the opportunity to have it for more time in the HP.

  • the text on the image is actually image, not text. For about:tor page, it's somewhat understandable but for the home page, it really isn't. It takes much longer to load. The content wouldn't be indexed and this design totally ignores visually impaired users, which is tbh offensive to them.

Yes, we decided to go with image because it would be faster and since we are not translating this one, we could do img instead of txt. I agree with the problems you listed. But again, consideration here is capacity.

  • the image has a width and even worse, its width is less than the main body.

Yes, we discussed it last night, I gave a go for it because it will be up for 2 weeks only and again, we are balancing time and capacity.

  • borders on the sides? :( it makes me feel like 1997
  • champion's photo is in a circle... there's no other place on this page or even the whole website that we've used circles. Everything is in a rectangle or square.

Both follows the same layout we have on TBB and tbh I think is trivial here in relationship to the main goal, specially because it will be there for 2 weeks only.

  • the font is a whole different font family...

Reopening this ticket, because I don't think this is how we should present ourselves to the world. Let alone, asking for their contribution...

hmmm I think this is a little bit of an exaggeration don't you think? Because we are already presenting ourselves like this to the world on our blog, tor browser and tweets - because is the same art we are using on those channels as well....

Changed 4 years ago by leiah

Attachment: tpo-homepage.jpg added

comment:7 Changed 4 years ago by leiah

Hi Nima,

I understand some of your design cringing, but please know that these banners were designed for Tor Browser and not specifically for the homepage. That's why the width isn't full. I was asked to just take the banners specifically made for TBB and flatten the text so they could go up right away.

The font *is* different than the homepage, but it is the same as all other campaign graphics, so it's not completely random. The borders around the edges also match other campaign graphics we've been sharing for the past month:
https://twitter.com/torproject/status/669197408715284481
https://twitter.com/torproject/status/671027089131347968
https://twitter.com/torproject/status/671821341658509312
https://twitter.com/torproject/status/677226482683486208

Did you think they looked like 1997 this whole time, or just right now?

Perhaps an easy fix would be to repurpose the purple rectangle-photo text-based banner you created for the donate page and affix it to the top of the homepage, like this (but add a green DONATE button):
https://trac.torproject.org/projects/tor/attachment/ticket/17880/tpo-homepage.jpg

Maybe that'd be easy enough to do quickly?

Last edited 4 years ago by leiah (previous) (diff)

comment:8 Changed 4 years ago by leiah

Cc: leiah21@… added

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

Replying to leiah:

Perhaps an easy fix would be to repurpose the purple rectangle-photo text-based banner you created for the donate page and affix it to the top of the homepage, like this (but add a green DONATE button):
https://trac.torproject.org/projects/tor/attachment/ticket/17880/tpo-homepage.jpg

I prefer the current banner design on the homepage -- it's cheerful and less imposing.

comment:10 in reply to:  5 Changed 4 years ago by mrphs

Replying to isabela:

Thanks for bringing it up, I will reply below - but first, what needs to take into consideration here is the lack of capacity we have at the moment to have a banner in time for the last two weeks of the campaign. So many of the things listed below were decided to be that way because of that.

If we have more capacity we will apply changes, but we might not have it to make it better - and yes, we do know is not great and it should be better. But right now we are with time and capacity problem. So please keep this in mind if you don't see some of the suggestions applied to it. What we want to avoid is to drag this for too long and miss the opportunity to have it for more time in the HP.


I appreciate the 'get it done' attitude, and I understand we're under staffed and have too many things to do, but I don't think capacity argument applies to this context. I know you as our valued and appreciated PM are overwhelmed but my comments were not to criticize your work, nor I'm asking to take this down. I'm simply offering what could make us look much better.

  • the text on the image is actually image, not text. For about:tor page, it's somewhat understandable but for the home page, it really isn't. It takes much longer to load. The content wouldn't be indexed and this design totally ignores visually impaired users, which is tbh offensive to them.

Yes, we decided to go with image because it would be faster and since we are not translating this one, we could do img instead of txt. I agree with the problems you listed. But again, consideration here is capacity.


the about:tor page is different. We had so many limitations there, and I understood the capacity issue there, hence I didn't say anything. about:tor doesn't get indexed by search-engines, we couldn't update its content after TB was released, and we were under a serious time pressure to ship, and we couldn't update it after it was shipped with TB. None of this are the case with the home page.

Replying to leiah:

Did you think they looked like 1997 this whole time, or just right now?


We need different designs for different places. What works on twitter doesn't necessarily work on the home page. It can be still a bold and flashy and eye catching design but doesn't have to break the layout...

Perhaps an easy fix would be to repurpose the purple rectangle-photo text-based banner you created for the donate page and affix it to the top of the homepage, like this (but add a green DONATE button):
https://trac.torproject.org/projects/tor/attachment/ticket/17880/tpo-homepage.jpg

Maybe that'd be easy enough to do quickly?


I like this better than the current design. But it doesn't have to be exactly what we have on tpo/donate nor has to be in purple. Do you think if we can come up with something that addresses all the issues I've listed above and is still catchy?

Unfortunately, I don't have photoshop to make mock-ups etc, but I can certainly help with getting the new design into the website.

Last edited 4 years ago by mrphs (previous) (diff)

comment:11 in reply to:  4 ; Changed 4 years ago by teor

Replying to mrphs:

  • the text on the image is actually image, not text. For about:tor page, it's somewhat understandable but for the home page, it really isn't. It takes much longer to load. The content wouldn't be indexed and this design totally ignores visually impaired users, which is tbh offensive to them.

One relatively quick fix for this issue is to provide an "alt" text for the image, containing the text on the banner. This will assist search engine indexing and visually impaired users. (The alt text is currently blank.)

comment:12 in reply to:  11 Changed 4 years ago by arthuredelstein

Replying to teor:

Replying to mrphs:

  • the text on the image is actually image, not text. For about:tor page, it's somewhat understandable but for the home page, it really isn't. It takes much longer to load. The content wouldn't be indexed and this design totally ignores visually impaired users, which is tbh offensive to them.

One relatively quick fix for this issue is to provide an "alt" text for the image, containing the text on the banner. This will assist search engine indexing and visually impaired users. (The alt text is currently blank.)

Thanks for the suggestion. Here's a patch to do that:

https://github.com/arthuredelstein/webml/commit/17880+1

comment:13 Changed 4 years ago by Sebastian

merged, thanks

comment:14 Changed 3 years ago by bugzilla

Reopening this ticket, because I don't think this is how we should present ourselves to the world. Let alone, asking for their contribution...

Commenter says right things. Ticket's type 'defect' agrees with him.

comment:15 Changed 3 years ago by Sebastian

Resolution: fixed
Status: reopenedclosed
Note: See TracTickets for help on using tickets.