Status

RESOLVED FIXED
4 years ago
4 years ago

People

(Reporter: peterbe, Assigned: anuragchaudhury)

Tracking

Trunk
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments, 5 obsolete attachments)

(Reporter)

Description

4 years ago
Created attachment 8535823 [details]
Maybe like this?

At the moment we put the "Sign-in" button near the top of the right-hand sidebar. If we're going to remove or drop the side-bar we're potentially make it very hard to find the Sign-in button. 

E.g. We're thinking of making the video window much larger and make the content currently in the sidebar appear somehow below. Like a footer.

Let's move the Sign-in function to the top nav. 

We can either use the cute little orange/grey Persona button or we can use the same font as the other links in the top nav. 

First step would be to move the Persona sign-in button up there and see how it looks. If it looks good, we'll go with that. Alternatively we try the same font as the rest of the top nav. 

An advantage with using the Persona sign-in button is that it's a "brand" (kinda) and something people might recognize and not miss.
(Reporter)

Updated

4 years ago
Blocks: 1084487
(Assignee)

Comment 1

4 years ago
Created attachment 8535951 [details]
persona_sign.png

Sample with persona in nav main
(Assignee)

Comment 2

4 years ago
Created attachment 8535953 [details]
normal_sign.png

Without persona
(Assignee)

Comment 3

4 years ago
Hey Peter,

Let me know what you think. I personally thought the persona sign in looks pretty decent but the normal "sign in" feels more consistent with the other buttons.

I also wanted to add that MDN's website has an interesting layout. All the nav buttons + the persona sign in + search are in the top section of the page, and the content is throughout the breadth of the page. Air Mozilla's content is all sort of centrally aligned. Since, the idea is inclined towards making the video window larger, if the content is spread out like in MDN, with the right sidebar essentially to the far right. Just thought of mentioning it . :D
(Assignee)

Updated

4 years ago
Attachment #8535953 - Flags: feedback?(peterbe)
(Reporter)

Comment 4

4 years ago
1. If we are to put the "Sign-in" in the top nav, we should stop having it in the sidebar. 

2. Why is your Persona sign-in button in the screenshot orange?? :)

3. Note the MDN uses a cute button for the sign-in. 

4. I'd love to see another screenshot where you simply move the Persona button up into the top nav bar. 

5. I'd love for Air Mozilla to have an entirely new design which uses more width. Perhaps with the right media queries we could do that too. Thus being able to have wider video windows AND the sidebar there. However, unless you are on a wide screen the sidebar might sooner or later have to make way for a bigger "main area" so whatever we do we'll have to move that Sign-in button so it's accessible without having to scroll. 

6. Please please when you're building your prototype, check how it works on smartphone device screens.
(Assignee)

Comment 5

4 years ago
Created attachment 8536685 [details]
persona_sign.png
Attachment #8535953 - Attachment is obsolete: true
Attachment #8535953 - Flags: feedback?(peterbe)
(Assignee)

Comment 6

4 years ago
Created attachment 8536688 [details]
persona_dark_nav.png

the persona sign in on the navbar (dark theme)
Attachment #8536685 - Attachment is obsolete: true
Attachment #8535951 - Attachment is obsolete: true
(Assignee)

Comment 7

4 years ago
Created attachment 8536690 [details]
sign_in_nav.png

Normal sign in without the sign in on the sidebar
Attachment #8536690 - Flags: feedback?(peterbe)
(Assignee)

Comment 8

4 years ago
1. I was playing with the theme settings, so it turned out orange :D. 
2. Yeah I noticed their button is different and it has the github sign in integrated as well.
3. I checked with the smartphone view,should I attach a screenshot?
(Reporter)

Comment 9

4 years ago
That's a good screenshot. 
Can you make one now that uses the Persona button too?
(Assignee)

Updated

4 years ago
Attachment #8536688 - Flags: feedback?(peterbe)
(Assignee)

Comment 10

4 years ago
Hey Peter. I already did a Persona one. I just attached the feedback with that.
(Reporter)

Comment 11

4 years ago
(In reply to Anurag Chaudhury from comment #10)
> Hey Peter. I already did a Persona one. I just attached the feedback with
> that.

Oh. This one? https://bug1111003.bugzilla.mozilla.org/attachment.cgi?id=8536688
Something seems to have gone wrong there. The button is huge all of a sudden. And the little white semi-circle over "HOME" is now hovering below the top.
(Reporter)

Comment 12

4 years ago
Comment on attachment 8536688 [details]
persona_dark_nav.png

I'm guessing this was a mistake as the CSS seems to have gone wrong on this one.
Attachment #8536688 - Flags: feedback?(peterbe) → feedback-
(Reporter)

Comment 13

4 years ago
Comment on attachment 8536690 [details]
sign_in_nav.png

Thanks for doing that one. It's good material for making a decision. 
Now, if we can get the Persona button right we can better compare.
Attachment #8536690 - Flags: feedback?(peterbe)
(Assignee)

Comment 14

4 years ago
Created attachment 8536861 [details]
persona_nav_revised.png

Fixed the css. There was some padding,text changes from the other css files which was affecting the button. For an initial mockup, I just put the override in an inline style but if you guys decide to go with this, we can just put it as a more specific selector in the css file, I believe.
Attachment #8536688 - Attachment is obsolete: true
Attachment #8536861 - Flags: feedback?(peterbe)
(Assignee)

Comment 15

4 years ago
Created attachment 8536864 [details]
persona_nav_rev2.png

Just realized that I had changed the text-transform for the entire nav there, so updated it.
Attachment #8536861 - Attachment is obsolete: true
Attachment #8536861 - Flags: feedback?(peterbe)
Attachment #8536864 - Flags: feedback?(peterbe)
(Reporter)

Comment 17

4 years ago
Comment on attachment 8536864 [details]
persona_nav_rev2.png

This is great by the way. 

I think this is the design to go for. Just wanted to hear what Richard had to say.
Attachment #8536864 - Flags: feedback?(peterbe)
I love it!

Great work Anurag!
Flags: needinfo?(richard)
(Reporter)

Comment 19

4 years ago
(In reply to Richard A Milewski[:richard] from comment #18)
> I love it!
> 
> Great work Anurag!

Which one do you prefer?
(Reporter)

Comment 20

4 years ago
Anurag,

I talked to Richard and he agrees that moving the whole Persona icon like https://bug1111003.bugzilla.mozilla.org/attachment.cgi?id=8536864 would be best. 
Can you make a PR with that?
Assignee: nobody → anuragchaudhury
(Reporter)

Comment 23

4 years ago
This has been merged and deployed on prod. 

Perhaps next one to work on is: https://bugzilla.mozilla.org/show_bug.cgi?id=1104806
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.