2

Didn't know whether this was a UI or a UX issue but I have been asked to change our header section so that the navigation items don't wrap to a second line when the user views our site on a smaller device such as a tablet or small laptop.

The site is multi-lingual and also brandable for clients so it's difficult to do this for everyone, but our main language that clients ask for their sites to be set up in is English so if I can get this done for English, I might be able to figure out what to do for other languages.

We have a logo on the left hand side of the header that can be a max-width of 165px OR a max-height of 65px, whichever comes first. On the right we have the users profile which can go to whatever size the users name + profile picture goes to (currently the users profile image is a fixed width of 65px + a margin on the right of 15px to give it some space.

That gives the navigation element around 660px to have space to fit. We have 6 navigational items - one of which is a home icon font - which can all be changed depending on clients requests as to what they want to call the item.

The only thing I can think to do off the top of my head is once the navigation is too big for the 660px container, it goes below the logo and user profile sections.

Does anyone have any best practice tips for what should be done in this situation? I have heard from other UI and UX people that some sites that are multi-lingual have language specific stylesheets that override default properties, is this a good idea?

Here's what we currently have as the navigation design:

enter image description here

  • 1
    If this is a design related question, can you possible show what you have so far (wireframes, visual design, etc)? – Majo0od Nov 18 '15 at 14:01
  • @Majo0od I've added a link to what the header currently looks like in my main post. I've removed the logo and user profile images and names as this site is still in beta. – ChronixPsyc Nov 18 '15 at 14:20
  • Is there a reason why you have a home icon? – Majo0od Nov 18 '15 at 14:27
  • @Majo0od that was how it was design when I picked up the project, I've asked if it's needed but I've always been shot down by the owner of the company whenever I've asked if it can be changed. – ChronixPsyc Nov 18 '15 at 14:30
  • 1
    You might want to have a serious talk with the owner about if he wants the design to change depending on data or biases. If he's not willing to change because he's set in one way, then be ready for a long road for redesigning. Anyway, good to know what's happening. Good luck. At least you have more details for others to provide a good answer – Majo0od Nov 18 '15 at 14:41
0

I came across a similar situation in the past and the way we tackled it was:

We added a responsive menu solution which transformed into a "hamburger" menu for devices with a smaller resolution. This "responsiveness" can be triggered via media queries in the code.

Now, in your case, I am assuming different clients of your can have different menu at the top, so you need to support for "N" menu items. Other parallel task is to add support for multi-language (where a 6 menu item in English may fit into 660px width and a translated Finish or German version may not.

Tablet and Mobile experience

I think converting a menu to a "hamburger" item for tablet and mobile - is an easy solution. That is done via a media query and enforced regardless of how many items you have in the menu and what language.

Desktop experience

I don't think you can purely rely on a common pattern when to break the menu onto it's own line. We've made this an administrative of an author decision. An author / admin (a human essentially) has the ability (at the language level) to control different layout option for the navigation for each client.

I do like the option you suggested to wrap it onto its own line (any you may want to do that by default to eliminate that configuration step) and if the menu grows, you may want to invest into IA work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.