2

What are the implications of placing the left menu all the way to the left side of the screen vs placing it more towards the center of the screen?

Does anyone know of the pros and cons with these solutions?

YouTube - Example of menu all the way to the left: ![enter image description here

Facebook - Example of menu towards middle: ![enter image description here

3

About the updated question:

As far as I know, Youtube is using Material design guidelines. In it the navigation drawer toolbar (sidebar) is pinned to the edge of the screen and it might or not be toggled.

In this case, the left sidebar is used for the page navigation, while a right sidebar is used for content related elements (this can bee seen when viewing a single video).

The Facebook example uses the rule for the edge sidebar in the right one.

There is probably not "best position for the sidebar" but I would say a sidebar that is not next to the content may refer to the page or a content different to the actual page one, and a sidebar just next to the main content may refer to elements that are more specific and relevant to the current content.


Both menus are on the left of the content area.

The main difference is that in the Youtube example the content area occupies the whole width of the screen, while the Facebook one has a maximum width and is centered. So in both cases the rule is to set the sidebar (menu) on the left of the content, just next to it.

When to use content that occupies the full width and when set a maximum width is a question that was asked here (implicitly), you might want to check it.

  • Thank you. I will take a look at that. (Btw I am aware that both menus are on the left). – Mattias Bregnballe Mar 2 '17 at 11:18
  • @MattiasBregnballe you are welcome. I didn't mean you might not be, just wanted to make emphasis in the fact that they are on the left of the content area. If the content area has a maximum width then it will appear displaced to the center. But the key is the full width vs maximum width. Let me know if I misunderstood something. – Alvaro Mar 2 '17 at 11:26
  • You did not. I just think it was a question of me not knowing the correct terminology. Thank you for clearing it up for me. – Mattias Bregnballe Mar 2 '17 at 11:49
  • It seems the link you provided contains a discussion for and against white space. This is not the issue here. I have updated the original post. It is hopefully easier to understand now. – Mattias Bregnballe Mar 2 '17 at 12:30
  • @MattiasBregnballe Now the case is more interesting, Ill update the answer. – Alvaro Mar 2 '17 at 12:31
1

This is less about left-aligned vs. left of content, but more about difference in implementation of responsive layout.

Although Youtube's left nav is left aligned, it is never far away from the main content in the center. If you increase width of your browser, number of video columns goes up to fill up gutter space. But because thumbnail size remains fixed, the width of gutter space varies.

(If you have large screen and always view your browser in full screen mode, then the gutter space will be bigger. In small resolution, the left nav collapses, but youtube provided redundant pill navigation towards the top.)

enter image description here

enter image description here

Facebook on the other hand, has fixed-width main content. Hence, they had no choice but to position it where it is. Otherwise, the left nav would be so far away from the main content on larger displays.

So the short answer is, left nav should be accessible in the context of the main content. Both Facebook and Youtube fulfill this requirement, but using two different implementations.

  • To adding to this answer, I think those two are using different type of layouts i.e FB using flexbox and YT using their own layout. That may be the implementation you have mentioned and changed entire user interface. – NPN Mar 6 '17 at 0:27

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.