Closed Bug 636483 Opened 9 years ago Closed 9 years ago

Create mobile design for personas landing page


( Graveyard :: Public Pages, defect, P2)



(Not tracked)

Q2 2011


(Reporter: clouserw, Assigned: grlicky)




We need a mobile design for this page in the spirit/layout of the other AMO designs:

This design exists for getpersonas which you can probably mostly steal:
ETA: Early April
Target Milestone: Q1 2011 → Q2 2011
Target Milestone: Q2 2011 → 6.0.7
Here is a first stab at some hi-fi mockups for the landing page:

I'd love to hear your feedback!
Looks awesome!  Comments:

Pagination of featured personas sounds excessive - let's just say there is a limit of 10 featured personas on this page. :)

I think we're getting rid of that fox mask everywhere.

The header you have on there is different than what is on MAMO right now.  I assume you did that on purpose ;), but I'm reluctant to maintain yet another version of the header on AMO.  Can we use the existing header for all these pages?

The preview flow is nicely adapted to mobile devices.

The "persona info" link seems hard to click.  Might just be me.

Anyone else have comments?
Looks really nice. My only comment is the amount of space taken up by the content above the Search field:

1. Logo + "Mobile Add-ons" + Menu
2. "Mobile Add-ons Home"
3. Logo + "Personas: Easy to use themes for Firefox"

Since the URLBar will have the "Personas" title (or could), I would even be so bold as to suggest removing #2 and #3. It gives a non-trivial amount of usable space back to the page.
Target Milestone: 6.0.7 → Q2 2011
Thanks for the feedback!

I'm definitely OK with limiting it to 10 featured personas :D

Since it's on its way out, I've replaced the fox mask logo with an upscaled version of the icon that appears in about:addons on desktop next to "Appearance." Of course, if anyone knows what icon Personas is going to be officially adopting, that would work great here. For Mark - gained a some pixels by making the icon/header a bit smaller too!

I should have mentioned this in the mockups, but the "persona info" link should have a hit area that extends vertically from the buttons above it and down to the bottom of the cell, and the text is the same size as the information links on the details page. So it shouldn't be _that_ hard to hit (especially for a secondary action), but this should be tweaked if it turns out to be the case when implemented.

Regarding the header - it's really important to give the user context for what they're looking at. The term "Persona" itself is something we might have to educate the user about, which is why I wouldn't feel comfortable removing the "Easy to use themes for Firefox" tagline. Finally, just like on the desktop, the title bar should never be used as a primary method of providing context, especially on mobile Firefox, where the title will be truncated. I'd be hesitant to remove any of these elements at this time.

Ready to be implemented?
Target Milestone: Q2 2011 → 6.0.7
I like it
Target Milestone: 6.0.7 → Q2 2011
Yeah, the icon thing is something I'll have to sort out with the UX team and Jay -- personally I don't want to abandon the "Personas" name and branding, but I will discuss with the powers that be and get back to you.
Thanks.  Implementation is bug 654308
Closed: 9 years ago
Resolution: --- → FIXED
Chris just landed this in bug 654308.  If you want to help test I'm sure QA would love you. with a mobile UA.  Previews will only work if you whitelist
Will do! How do I whitelist I'm not sure what that means.
Yeah I'm not sure how to whitelist allizom either -- would like to help test :)
(In reply to comment #10)
> Will do! How do I whitelist I'm not sure what that means.

They are considered add-ons so on a desktop client you can edit your preferences to allow the site to install add-ons, or click the page info and allow it from there, or edit about:config.  I don't know how to do any of that on mobile. :(
This is looking great, guys. Very exciting.

Sounds like whitelisting is something we might want to add to the tester tools add-on.
Product: → Graveyard
You need to log in before you can comment on or make changes to this bug.