904758 - Make the header look good on small screens.

Status: VERIFIED FIXED

(Participation Infrastructure :: Phonebook, defect)

Description

[William Reynolds [:williamr]]

Attachment: Non-centered wordmarks and Persona button

When viewing mozillians.org in portrait view on an iPhone 5 in mobile Safari, the layout has some oddness that can be improved fairly easily.

Specifically:
- Horizontally center the mozillians wordmark and Persona sign in buttons in the header
- Remove the clipping on the left side of the search box
- Fix the text overlap for the 'Welcome to the Mozilla community directory' text

Also, is there a way to prevent the search box help text from being cut off?

Credit goes to Barry for reporting these paper cuts.

Comment 1

[William Reynolds [:williamr]]

Attachment: Clipped search box and overlapping text

Comment 2

[Justin Crawford [:hoosteeno] [:jcrawford]]

A similar bug 908210 (we'll call it a dupe) points out that this is true on the signed-in pages as well as the signed-out pages depicted above, and is exacerbated by the addition of a search bar to the header on some signed-in pages. This bug's fix should address the fact that the header is not shaped quite right in any case on narrow screens: signed in, signed out, with search bar, without. 

One approach that might work on signed-in pages with search bar:

* Keep signin/account and tabzilla at the top; perhaps make signin/account narrower, even by eliminating some of its elements if need be
* Collapse left margins on search and logo and keep them left justified

Comment 4

[Justin Crawford [:hoosteeno] [:jcrawford]]

Added a second bug for the search box/text overlap since the header is big enough for one bug.

Comment 5

[Julia Elman]

William: would it be ok to change the string for the log in button from "Sign in with Persona" to "Sign in"? I think that with the Persona icon branding, it is enough of a signifier that the user will be logging in with Persona. Thoughts?

Comment 6

[Julia Elman]

Attachment: "Sign in" string change example

Changing string on Persona button to fit on smaller screens

Comment 7

[William Reynolds [:williamr]]

(In reply to Julia Elman from comment #5)
> William: would it be ok to change the string for the log in button from
> "Sign in with Persona" to "Sign in"? I think that with the Persona icon
> branding, it is enough of a signifier that the user will be logging in with
> Persona. Thoughts?

Yes, it is okay to change to the "Sign in" string. Let's do it!

Comment 8

[Julia Elman]

Pull request submitted here: https://github.com/mozilla/mozillians/pull/600

Comment 9

[[github robot]]

Commits pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/c97fd76eb3647a3a3613ead7ac5d10ff4a4591a6
[Fix Bug 904758] Make header look good on small screens

https://github.com/mozilla/mozillians/commit/b3d9037e96312951d84dd975a272851b3453215d
Merge pull request #600 from juliaelman/904758-fix-header

[Fix Bug 904758] Make header look good on small screens

Comment 10

[Matt Brandt [:mbrandt]]

Attachment: qa_reopened.png

Reopening: tested on dev, hasn't landed on stage

Two observations/questions:
1. [homepage] I can't recall the if the mobile view was supposed to include the search field on the logged in view? The field is available in other views but not for the logged-in view of a user's homepage.

2. The search field helper text is clipped on the /invite/ page.

Comment 11

[William Reynolds [:williamr]]

(In reply to Matt Brandt [:mbrandt] from comment #10)
> Created attachment 799811 [details]
> qa_reopened.png
> 
> Reopening: tested on dev, hasn't landed on stage
> 
> Two observations/questions:
> 1. [homepage] I can't recall the if the mobile view was supposed to include
> the search field on the logged in view? The field is available in other
> views but not for the logged-in view of a user's homepage.

Yes, we do want to include the search field on the logged in view. Good find.

> 2. The search field helper text is clipped on the /invite/ page.

Nice catch as well. Reopening for these two issues :)

Comment 12

[Julia Elman]

Thanks for the feedback, all!

In regards to the search box goes on the homepage, there should already be a search box on the page itself (see attached screen shot). Since there is a already a search box in the main content of the page, we decided it didn't need to be in the header. Are we wanting to change that and have the search box in both places on the logged in homepage?

Comment 13

[Julia Elman]

Attachment: Logged in hompage w/search box

Comment 14

[Matt Brandt [:mbrandt]]

(In reply to Julia Elman from comment #13)
> Created attachment 800298 [details]
> Logged in hompage w/search box

Good point .. perhaps we should move the search field to a more prominent location like the top of the page. On small screened devices it is not visible unless the user scolls down to it.

Comment 15

[Julia Elman]

(In reply to Matt Brandt [:mbrandt] from comment #14)
> (In reply to Julia Elman from comment #13)
> > Created attachment 800298 [details]
> > Logged in hompage w/search box
> 
> Good point .. perhaps we should move the search field to a more prominent
> location like the top of the page. On small screened devices it is not
> visible unless the user scolls down to it.

What about making the search box visible in the header on smaller screens and hide the one in the main content area? Sound good?

Comment 16

[Matt Brandt [:mbrandt]]

(In reply to Julia Elman from comment #15)
> What about making the search box visible in the header on smaller screens
> and hide the one in the main content area? Sound good?

Heck to the yaya! +1

Comment 17

[Julia Elman]

Pull request submitted here: https://github.com/mozilla/mozillians/pull/602

Comment 18

[Giorgos Logiotatidis [:giorgos]]

I believe the 'mozillians' logo should move between the 'menu button' and the 'tabzilla'. Maybe we should make the 'menu button' a bit smaller. Thoughts?

Comment 19

[Julia Elman]

Hey Giorgos! I don't think there is a enough room to do that on really small screens. What break are you looking at that you think it would look good at? Could you provide a screenshot?

Comment 20

[Giorgos Logiotatidis [:giorgos]]

Attachment: Mozillians: Mozilla Community Directory 2013-09-12 11-32-34.png

With the latest changes, this is the screen on 320x480 (resolution of FirefoxOS ZTE Open). I think we can do way better in the header. Maybe 30% of it's area is unused.

Comment 21

[[github robot]]

Commits pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/1cefe90472f28d87eb7701c77ec25d1fbb2b4dbd
[Fix Bug 904758] Fixes search box placeholder text cut off and search on logged in homepage.

https://github.com/mozilla/mozillians/commit/1d2dbfb89f1696401582062d088f2dfc06d10917
Merge pull request #602 from juliaelman/904758-fix-header

[Fix Bug 904758] Fixes search box placeholder text cut off and search on logged in homepage.

Comment 22

[Justin Crawford [:hoosteeno] [:jcrawford]]

Attachment: NEW logged-in view

This is one of the nicest looking headers I've ever had the pleasure to interact with. Seriously. Nice work everyone!

Comment 23

[Giorgos Logiotatidis [:giorgos]]

Attachment: Mozillians: Lalos Mikros44 2013-09-17 18-21-10.png

I agree with Justin! Great work ;)

Can we give the same love to the logged-out view of pages other than the homepage?

For example here is the screenshot for logged out view of public profile on mobile

https://mozillians.allizom.org/en-US/u/giorgos/


Should I open a new bug to track this?

Comment 24

[William Reynolds [:williamr]]

(In reply to Giorgos Logiotatidis [:giorgos] from comment #23)
> Can we give the same love to the logged-out view of pages other than the
> homepage?

Yes :)

> Should I open a new bug to track this?

I opened bug 917343 to track this.