Ticket #194 (closed Task: worksforme)

Opened 9 years ago

Last modified 9 years ago

Website: Restructure and redesign header

Reported by: jri Owned by: Malte
Priority: Major Milestone:
Component: Drupal Website Version:
Keywords: Cc: rk, silke, irau, JuergeN
Complexity: 3 Area:
Module:

Description

The website header should be revised according to the attached screenshot.

Main issues:

  • Move Login and Register functions to the header (currently in sidebar)
  • Move the language switch to header (currently in sidebar)
  • Put some love to title and slogan design (font size, padding)
  • Reduce the header's overall height

The concept is to put the meta-functions to the header and dedicate the sidebar for content only.

About the Login and Register functions:

  • The "Login" link leads to an extra page with login dialog and "Request new password" function
  • The "Register" feature is not mixed up with the login dialog

The concept is to clearly separate these 2 situations the user is in, and to provide a consistent wording for that:

  1. She *has* an account: "Login" / "Request new password" (german: "Login" / "Neues Passwort anfordern")
  2. She has *no* account: "Register" (german: "Registrieren")

The "Register" function must not be mixed up with the Login dialog as these are mutually exclusive use cases. User tests have shown new users do press the "Anmelden" button (without entering a username and password) when they mean "Registrieren".

We never want use the wording "Anmelden" as it is ambiguous (could apply to both, "Login" and "Registrieren"). See #177.

Attachments

website-header.png (76.7 KB) - added by jri 9 years ago.
login-out-of-place.png (11.8 KB) - added by jri 9 years ago.

Change History

Changed 9 years ago by jri

comment:1 Changed 9 years ago by Malte

  • Status changed from new to accepted

oh, just seen your graphic.

comment:2 Changed 9 years ago by Malte

new ticket status: feedback

comment:3 Changed 9 years ago by jri

Sorry, but the header is currently not satisfiable.
In fact it is worse than before.

  • There is no search function anymore! Why that?
  • The "Register" function has vanished from the frontpage! Why that? As I wrote, it is not acceptable to hide the "Register" function in the "Login" dialog as these are 2 different use cases. "Register" must be clearly available on the frontpage.
  • The big LANGUAGES label is redundant and provides no help but clutters the header without reason. Drop it!
  • Overall, if there is no other good reason I would appreciate very much to see the proposed design realized (see the screenshot).

Don't work that late! :)

comment:4 Changed 9 years ago by jri

The language switch and search look very good already. Let it this way! :-)

However, Login and Register are out of place (actually beyond website) for the moment.

comment:5 Changed 9 years ago by jri

Meanwhile I tracked it down more specifically: Login and Register are out of place (actually beyond website) in case of the browser window's width is too small (see today's screenshot). In contrast, if the browser window is large enough, everything is fine (tested in Safari and Firefox).

Note: the language switch and search box doesn't show this window-size dependant layout. That is the way it is meant to be.

All in all I'm happy to see the progress here.

Changed 9 years ago by jri

comment:6 Changed 9 years ago by Malte

on ubuntu neither with chrome nor with firefox this display error occurs.
note: we decided to fix the websites width to 810 (as with fixing the min-width of our content area to fit the visual guides) + min 280px (sidebar) to 1190px.

but it is somehow reasonable that this disply error occurs, cause the login area and the search-area, as both block-areas positioned within the "header"-area of the site, are relatively positioned from top and left, to get where they are now.

easiest fix, without writing a template for this specific block that suits us (like for #201) would be, to position the login-area at the top of the site, left to the language switch, untouched as it is now. thus the login area would move away from just over the blue-vertical bar to the top of the site.

comment:7 Changed 9 years ago by jri

Sorry, I don't fully understand what you mean.
Both, the language switch and the search box shows perfect behavoir: they stick to the right window border (so, they are right-relative, not left-relative). Could the login area not use just the same rule?

The login area should not be moved next to the language switch. The current alignment is perfectly balanced (provided the window is large enough).

The only problem is, the login area falls out-of-place if the window is not large enough.

comment:8 Changed 9 years ago by Malte

see my comment on ticket #201 - same applies here. if you inspect the containers it might get clearer for you. i cant reproduce this issue with latest firefox, chromium and chrome on ubuntu 10.04.1. we will find a way to put it right, but i am not completely sure yet how we can achieve this. hints very welcome, there must be some cross platform compatible workaround for this rendering issue. does this just occur in your safari browser or in all browsers on your platform?

comment:9 Changed 9 years ago by jri

Yes, the layout error happens in latest Safari and Firefox 10 browsers on Mac OS X.
Have you tried to reduce the browser window width below 1280px? This is when the error occurs for me.

Meanwhile I inspected the containers.
The error can be fixed similar to #201:

For #block-block-4 (line 84 in local.css) instead of

position: relative;
top: 141px;
left: 450px;

use

position: absolute;
top: 162px;
right: 62px;

Note "right" is used here instead of "left". Together with position absolute this creates the right-alignment we want.

Ooh... I just recognized the behavoir is not perfect, when changing the window width.
However, the original error could be fixed this way.

Perhaps (with the help I provided here) you can find the perfect fix.
The Login block is supposed to to be right-aligned with language switch and search box.

comment:10 Changed 9 years ago by Malte

  • Status changed from accepted to closed
  • Resolution set to worksforme

done. i think the upper header is OK!

comment:11 Changed 9 years ago by jri

Login block layout and window resize behavior is now perfect on OS X.
Thank you very much!

Note: See TracTickets for help on using tickets.