123Greeting.com Tab Menu
When we start revamp 123Greeting.com our plan is to set well and easy navigation systems. Where we can load all of our category and followed by the sub category as a 2nd level navigation. We start finding which type of navigation will fit for our site. Even one things we have to keep in mind that we have to keep balance with the exiting site. With the new navigation systems the user doesn’t needs to learn more. What we like to mean that user should complete their task is less time.
How I start
(1) Plan for accessibility at each stage of development.
(2) Start with designing with markup ‘semantically’.
(3) All functionality must be keyboard accessible.
(4) Use of <ul>, <ol>, <li> for list of items.
(5) Place important content first (Source order independent).
(6) Microformats .
Why <div> not <table>
Div is used to describe content that cannot be properly described by other more semantic tags. Adding semantic meaning to content probably makes websites rank higher. div element marks up only one block at a time, the code base is much smaller than that of a table-based structure. Less code is code that is more readable, easier to maintain, faster to develop, less buggy, smaller in size.
1 Level top navigation (tabs)
User navigation is the “main thoroughfare” that takes the user from the opening of an application to the content area where the user works. Where I found the tabs is the best navigational systems which can fit for our systems. Why I choose tab navigation for our first level navigation.
Horizontal navigation bars are very neat. Because top-down flow is slightly superior to left-right flow, it’s natural for high-level navigation to sit above content.
The obvious problem is when a top bar gets wider than the page. It’s normal for web pages to extend vertically, and users are used to scrolling vertically. Horizontal scrolling is to be avoided at all costs! If viewer use text-based navigation, and it’s re sizable, viewer navigation could get bigger or smaller depending on the user’s browser settings.
Horizontal bars are therefore appropriate where the number of items is known in advance, there are not going to be any more items added, and there is enough width to accommodate all items safely in the target screen resolution.
HTML elements
For page navigation, <a> is the element I use because of its attribute href to link to other page. Besides this, there are other 2 CSS syntax for <a> which are very useful. a:hover {background:#fff} changes background color to white on hover, which in fact removes the use of javascript onmouseover. Another useful css syntax is {display:block}. It could expand hover area to the whole area of parentNode with proper {padding:xx}.
we use <span> as the parentNode of <a> , we use <li> instead because it’s simple for naming in CSS. <li> is a block element. So we can foresee there are 2 techniques to generate tabs.
inline <li> + <a>
<li> + block <a>
inline <li> + <a>
CSS li {display:inline} changes the elements of <li> to inline ones. And they will display horizontally as inline elements. >ul> serves as a natual container for all <li> elements. You could select to add a content box or not.
One point that may be aware is you may not use CSS li {margin:0px} to set the gaps between the tabs to 0. There are always 5px of gap between the tabs. The reason for that is when a block elements are changed to inline. If there’s whitespace between the elements, the browser will display 5px space for the whitespace between the inline elements.
<li> + block <a>
CSS {display:block} changes the element <a> to block ones so we get better hover effect. CSS li {float:left} makes <li> elements float horizontally. This is another way of making tabs, which you don’t need to consider the effect of white space between the <li> elements. But the tabs can be designed under the content box by changing the position of the <ul> and content box <div> upside down. A javascript script has been developed to make it possible for the tabs located in the top, bottom, left and right side of the content box for the content navigation.
Posted in Interface Design, Usability
