Join

32

Octablog readers

As many other web developers probably do – we encountered a layout problem: too much information to display on the page, too little horizontal space, and a strong desire to avoid scrolling when possible.

So, after a nice brainstorming meeting, with a few possible solutions in the air – we decided to give tabs a try. I took the concept and started playing around with it, trying to fit it to the rest of the design. As I went along, things very quickly fell into place, and most of it felt right.
After showing the first draft to my colleagues, it was obvious to all of us that it is the right step to take. So, after a few more rounds of fixes and tweaks, the design looks good, and the implementation of tabs begins.

The tab design has many up-sides:
- Functionality is clear and stays intuitive
- Much screen space is conserved for content (1-2 text lines instead of a menu column that takes up a significant chunk of vertical space)
- Spices up the design, adding some graphical elements that make the overall feeling more interesting.

Thus far I’ve encountered only one downside – fitting many different content panels with tabs – when there are more than 8-10 tabs, it starts to get a bit tight. But we’ll find the solution to that as well.

Here are the before and after designs:

That’s it for now,
Tal.