Posts Tagged ‘Tabs’

We are pleased to present below all posts tagged with ‘Tabs’.

Module Tabs in Web Design: Best Practices and Solutions

A module tab is a design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content's corresponding tab control.

Module tabs are seeing an increase of use as websites and web applications push for optimizing web page screen areas without sacrificing the amount of information presented at once. For example, in weblogs, they are used in secondary content sections (such as the sidebar) to present relevant and interesting information such as a listing of blog posts which users can interact with to get to web pages quicker. This inevitably allows for an unobtrusive and compact manner of presenting content.

Vyniknite dot s k uses red highlights for hovers.

This article discusses the use of the module tabs design pattern for use in websites and web-based applications. We share with you some best practices to consider when using module tabs, a listing of real-world examples of websites the take advantage of module tabs, as well as tutorials and free downloadable scripts for building and deploying module tabs in your sites.

Read more...

Showcase Of Well-Designed Tabbed Navigation

There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout.

So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container, like in the example below. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline.

Screenshot

When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.

Read more...

Should Links Open In New Windows?

No, they shouldn't. At first glance the decision to open links in new windows or not depends on the given site and the preferences of its visitors. Visitors of the sites with heavy linking are more willing to have links opened in new windows than open dozens of links in new windows manually. Visitors of less-heavy-linkage-sites are more likely to open some specific link in new window to remain on the site and continue to browse through it afterwards. However, this is not true.

Open links in new tabs

Users also don't like to deal with dozens of opened tabs and some visitors tend to quickly become angry with the disabled back-button. Furthermore, some visitors may not even realize that a new window was opened and hit the back-button mercilessly — without any result. That's not user-friendly and that's not a good user experience we, web designers, strive for.

Read more...

14 Tab-Based Interface Techniques

The popularity of tabs, well-known from tabbed document interfaces (TDI), is rapidly growing, challenging the creativity of both developers and designers. The development of efficient and user-friendly interfaces is quite hard to deal with, and tabs can guarantee a quick access to information without need to open and close dozens of windows at the same time. Tabs-based interfaces allow multiple documents to be contained within a single window and tabs can be used to navigate between them. And exactly this idea is being used more frequently recently.

Read the full article...

However, it doesn't have to be that complex. Using modern approaches, you can create and improve tab-based interfaces in few minutes. With CSS, JavaScript, DHTML and XMLHttpRequest (alltogether Ajax) almost everything is possible. Information isn't loaded in new windows, but loaded instantly with Ajax-based techniques. You can also use Back-button without worrying about losing your data.

Let's take a look at some of the most interesting techniques we've found in the Web, searching for tab-based interface techniques.

Read more...
1

↑ Back to top