Redesign Request: New Header Bars

LegacyUser

Gordon Collett said: Thank you for your continued work to improve the FamilySearch website. I do overall like the change to give narrower headers. Every bit of space for the main sections of the pages is valuable. I would suggest a couple of improvements in the way that the headers compress as the browser screen is narrowed. From reading other comments, it seems that the biggest concern being raised is the way the items in the middle of the top menu bar vanish without warning and jump to a completely different area of the menu bar.

As it displays on my 21.5 inch monitor using Safari 12.1.2 with macOS 10.14.6, here is the behavior as I narrow my browser window (click on image to enlarge):



In order to keep important menu items visible as long as possible, to make better use of icons, and to not have menu items jump from one position and order on the screen to another, I would propose for your consideration this Photoshopped mockup of a possible modification (click on image to enlarge):



(Note to other users: since there are so many different sizes of monitors with different resolutions, you may want to post what you see at various browser widths on your screens, including the browser and version; screen size; and any zoom setting you are using since it appears that some of you can never see the full headers on your particular systems. This will let the software engineers see what the current design does in the real world.)

LegacyUser

Chas Howell said: Chrome 79.0.3945.130 Win7

20" monitor 1280 x 1024 Top line menu collapse at 110% zoom on the Family Search page before going to Family Tree page

19" monitor 1600 x 1200 No top line menu at zero % zoom on the introduction page, prior to going to the FamilyTree page. The person/detail page still shows okay.

LegacyUser

joe martel said: Good stuff Gordon. The teams are considering options. THanks

LegacyUser

Brett said: Gordon

I certainly do agree with your note.

But ...
That said ...

Many (probably, most) Users/Patrons most likely have NO idea what size of monitor they are using, let alone what resolution is set.

I for one, being one of them, I have not had to worry about such for many years now.

As indicated in my related post on the matter ...

All I know is that I have been using the latest version of 'Google' "Chrome" with "Windows 10" for a long time now with the SAME "Setting" for a number of Years now WITHOUT any problems/issues ...

I have had my "Zoom" set at 125% for many Years now WITHOUT any problems/issues. Hence, my original "Disappointment" very early yesterday morning.

Previously, even when I had increased the "Zoom" to 150%, for something specific, for a short time, it is was nowhere near as BAD as what this.

PLUS, when I was "Testing in the "Beta" ("Test") Environment just a few weeks ago, my "Zoom" was set at 125%; and, I DID NOT encounter the problem/issue that I did early this morning in the "Production" ("Live") Environment.

Something has been "Changed" in the "Coding" from the "Beta" ("Test") Environment just a few weeks ago, to this morning in the "Production" ("Live") Environment; and, it want NOT for the better.

Brett

.

LegacyUser

Gordon Collett said: For size, just take a tape measure and find the longest diagonal. Resolution is probably less important but generally can be found fairly easily. I'm not sure where on a Window's machine or Chromebook but on a Mac just click on the Apple menu in the upper left corner, choose "About this Mac," and click on Displays to come here.



And, of course, screen shots often give the most useful information.

LegacyUser

Jordi Kloosterboer said: I like this design a lot. Nice suggestion! The web designers/engineers should know how the page looks on other computers using the dev tools on Firefox or Chrome. If you are feeling adventurous, press CTRL + SHIFT + M in Firefox (Then you know exactly what pixel widths are used for changing the design layout)
On Chrome it is nicer (press CTRL + SHIFT + I before CTRL + SHIFT + M) because you can show the actual sizes of media queries.

*In order to see all the headers, your screen resolution for the width needs to be at least 1200 px.*



EDIT: Actually in reality the headers need 1080px min width (1080p) to show full headers so not sure why both chrome and Firefox say it changes at 1200px... :P

LegacyUser

Tom Huber said: Another option is to stack the menu items in two or more rows, since they no longer drop down when I mouse over them (Chrome on Windows 10).

While this may not be pretty, it gets rid of the hamburger menu when the screen is too narrow.

LegacyUser

Adrian Bruce said: I would certainly support branding the hamburger icon with the legend "menu" because many will simply not know what it is and nor is it remotely self-evident.

As for whether it should be on the left or the right, I'm not sure.

Left is less disruption for browser based users with less experience elsewhere.

But what about those with more experience elsewhere who might have seen hamburgers - are they used to left or right? I can see, as I'm typing, that Firefox's hamburger is on the right. Chrome doesn't even appear to use a hamburger but three dots stacked on top of one another (a colon with three dots, you might say) - but it is on the right again. Evernote on Android uses a hamburger on the left and three dot colon on the right at the same time and for slightly different purposes!

So - basically, I'l not clear whether left or right is most common currently for hamburgers!

LegacyUser

Adrian Bruce said: By the way - I now realise that the Menu for "Temple" appears in the top bar for Church members - that presumably accounts for why my screen starts morphing when there's still plenty of space as far as I'm concerned - it's counting the hidden "Temple" menu - it would be absurdly difficult not to, of course.

LegacyUser

Tom Huber said: By "stack", I mean to wrap the menu line, rather than truncate it and use that horrid hamburger symbol.

LegacyUser

Adrian Bruce said: I've had to think carefully about this but I think that the problem with a wrapped menu line (e.g. say items 1-3 at the top and 4-6 lower down) is that it would look like items 4-6 were sub-menus of item 1 - or whatever we happen to think is the current "live" item on the top line.