4

I recently discovered a blog which has an original layout:

  • The left half of the page contains by the name, two menus, the social buttons and the copyright. Most of the space is not used, and is filled with a useless background image.

  • The right half of the page is an actual blog article, i.e. the content which actually matters.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

At first, I found it a very bad idea because half of the page is wasted. But after imagining how would I format the content differently, I ended up with virtually no space gain:

mockup

download bmml source

The copyright and social buttons move to the bottom of the article (since the reader is expected to first read the article, and only then think about sharing it or care about copyright).

I still find there is something inherently wrong with the original layout. My new reasons would be:

  • The fact that it's different from other websites where the primary content is either on the middle or practically middle of the page (like StackExchange sites), or on the left.

  • The dark background of the left pane attracts even more unnecessary attention and distracts from the actual content.

However, it doesn't seem like a strong argument against such layout. So:

Are two layouts I illustrated below (i.e. the original one and my modification) equally valid? Why?

  • I'm assuming this site is also responsive with mobile first...? If it is, then your first design might not be a good responsive design. – Majo0od Oct 5 '16 at 13:49
  • @Majo0od: The site is responsive and displays quite well on small screens: the left pane just moves to the top, letting the article fill the whole width of the page. – Arseni Mourzenko Oct 5 '16 at 14:48
  • How big is the author/blog information? Does it take all of the screen? – Majo0od Oct 5 '16 at 14:49
  • @Majo0od: you mean on mobile? It's OK: too much height for the title and the menu in my humble opinion, but not even one third of the screen. Social buttons and copyright are not shown (at least not in the header). – Arseni Mourzenko Oct 5 '16 at 14:53
2

Most of us are conditioned to start reading on the left. That's why I would put the main content (here, blog text) on the left (assuming one of the "western" LTR languages).

The page split needs not be at 50%, so there's no reason to waste space as you show in your second example.

Another consideration is line length: If lines get too long (i.e., paragraphs get too wide), it gets difficult for readers to follow the line and return to the beginning of the next line. So you should limit line length, which might result in paragraphs much smaller than the screen width. Due to variable width and height of the screen and the way scrolling works, it's difficult to arrange text in smaller columns (as newspapers do).

As an example, see http://practicaltypography.com/line-length.html for width recommendations - there are certainly more discussions of this.

2

Whilst this layout might be less common on websites, it's rapidly becoming more common in high volume usage apps. And for good reason, it's great at providing navigation and content, and matches how we conceive (mentally) of addressing evolvement, from left to right:

enter image description here

enter image description here

On Mac and iPad: Mail & Notes are probably two of the most used apps, both of which put the content to the right and controls to the left.

Historically, navigation was often on the left of websites, and content to the right. Mac's Finder and Windows Explorer also offer ways to operate in this manner, and are probably the most used apps on their respective systems.

So this might be the webification of UI/UX ideas from desktop apps ;)

In direct answer to your question, is this a good idea? I think so. I think it's very good, instinctually comprehensible and intuitive. So long as the responsiveness can adjust to the focus on content when the screen is rotated or resized, I don't see a problem.

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.