Closed Bug 654308 Opened 13 years ago Closed 13 years ago

[mobile] Implement the personas landing page

Categories

(addons.mozilla.org Graveyard :: Public Pages, defect, P2)

defect

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: clouserw, Assigned: cvan)

Details

(Whiteboard: [qa+])

Design bug: https://bugzilla.mozilla.org/show_bug.cgi?id=636483
Mockup: http://people.mozilla.com/~jgrlicky/drop/AMO/mobile_mockups/personas/home.html

The design bug might answer a couple questions, otherwise please ask for any clarification.
Target Milestone: Q2 2011 → Q3 2011
Target Milestone: Q3 2011 → 6.1.1
https://github.com/jbalogh/zamboni/commit/1bda6bf
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
w00t, these look awesome
QA:  You'll need to whitelist addons.allizom.org to get the preview stuff working
Whiteboard: [qa+]
This looks great! I'm really happy with the finished product. There are just a couple minor things to note after testing it in the latest Firefox Beta on my Droid 2:

- The preview animations are really quite slow, at least on my (admittedly old) phone. I'm wondering what could be done to increase performance? We might consider eliminating the CSS drop-shadow beneath the persona image? I remember eliminating CSS drop shadows in favor of transparent PNGs was actually really great for Firefox animation performance on https://demos.mozilla.org/.

- There is more padding between the persona image and the edge of the cell than in the mockups. I'm not sure if this was intentional or not.
(In reply to comment #4)
> This looks great! I'm really happy with the finished product. There are just
> a couple minor things to note after testing it in the latest Firefox Beta on
> my Droid 2:

Thanks - the designs were great!

> - The preview animations are really quite slow, at least on my (admittedly
> old) phone. I'm wondering what could be done to increase performance? We
> might consider eliminating the CSS drop-shadow beneath the persona image? I
> remember eliminating CSS drop shadows in favor of transparent PNGs was
> actually really great for Firefox animation performance on
> https://demos.mozilla.org/.

Yes, I can get rid of the box-shadow and try a PNG. I don't have a capable phone to test this. How's the performance on the details page of the main "Try it on" button? Since we're not using any fading effects here, I'd hope this one loads smoothly. I suspect we'd see the largest improvements by eliminating the fading effects used on the other persona previews. Thoughts?

> - There is more padding between the persona image and the edge of the cell
> than in the mockups. I'm not sure if this was intentional or not.

I used the same padding as used elsewhere (e.g., the Reviews button, the main Persona "Try it On" block).

I can decrease the padding, but the persona images won't line up and it may look a bit awkward. I can try it, and send you a screenshot.
There should be phones laying around webdev down there you can use to test this.  If not, let me know.

Also, we should break this out into more bugs if there are changes that will need qa, etc.
(In reply to comment #5)

> How's the performance on the details page of the main
> "Try it on" button? Since we're not using any fading effects here, I'd hope
> this one loads smoothly. I suspect we'd see the largest improvements by
> eliminating the fading effects used on the other persona previews. Thoughts?

It's much much faster on the details preview than on the list previews! Maybe try going sans fading-effects?

> I can decrease the padding, but the persona images won't line up and it may
> look a bit awkward. I can try it, and send you a screenshot.

Truthfully, the padding is not in line with the mockups[1] on the MAMO details page either, so it might be worth making a change there too. If you wouldn't mind trying it out, it might be a good subtle improvement to the look of the site. Of course, if you think it looks worse, we can always not go with it too, but I think the added width to the persona would give a better preview of what the user is getting and make the site feel less horizontally constrained.

[1]: http://people.mozilla.com/~jgrlicky/drop/AMO/mobile_mockups/details.png
cvan, if the global padding there needs changing, feel free to do so to bring it closer into line with the mocks.
https://github.com/jbalogh/zamboni/commit/d9ee3e4

Jason, I'm now using CSS transitions instead of jQuery for the sliding effects, and I also tightened up the padding. Does it look better to you?
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.