Navbar
 

I have reduced my navbar template from the stock 219 lines of code to 5:
Simplicity > Javascript, plus I completely rewrote the navbar into the header (around 20 lines of code there) maintaining the links I wanted. Behold the power of semantic markup.

I disagree I dont care for your approach, but to each their own.

How so? I think vBulletin has gotten far too complex for the average Internet user, but as you say, each to his own.

Congratulations - you've stripped out all the Menu Items which make it easy to navigate and still keep the screen somewhat organized.

*shakes head*

So like where are the links?

My users would hate this, and they are not all computer oriented.

They're in the header, which itself is very little markup styled with a lot of CSS. http://www.webdesignforums.net/sitew...t_5_21452.html has screenshots.

The markup is only around a hundred lines total for my entire header, navbar, and footer. The style is backed by 23.5 KB of CSS (which only needs to be downloaded once by the user and is then cached to save bandwidth).

Great numbers of menus != ease of navigation. You may find it intuitive simply because you are used to using discussion forum software for so long, especially vBulletin. Others have no clue where to start. It took me forever to learn that the "CP" in "User CP" meant "Control Panel." Just saying "Control Panel" (what I do now in WDF v5) or "Edit Profile" or "Edit Options" is clearer.

It's the little things.

edit: also note the clearly exposed and labeled Seach field in the screenshots, something critical to a design I have come to learn. Exposing it behind a DHTML menu is not as beneficial.

/me runs to find a dictionary

Now to look up about half the words you said :-D..haha.

~Curt

Youy think the navbar is too complicated but css and javascript aren't? LOL

Well I can appreciate what you've done, although I wouldn't go down that route myself.. :)

it's sweet in my opinion, of course i have my greivences (sp:?) with your simplcising (word:?) mehtods, as i think some make it harder to nav, especially for vB-experts, but i like the overall idea, and it's not too close to my next overall idea :)

CSS by itself is not complicated compared to non-semantic markup like using tables for layout (yes you should use them for tabular data...i.e., data that is naturally represented as a table in other mediums). I only used a bit of Javascript (none for rollovers, CSS for that) and that Javascript is for entirely nonessential functionality.

I do agree that for those who browse default vB layouts in their sleep that it would be more difficult to use. However, those people are a tiny minority of forum users. And yes, I did a survey (no I didn't).

My new layout is just as functional as the old one. It simply presents the options in a clearer manner for more inexperienced users, IMO.

edit: next I'm going to gut headinclude as much as possible. My current design already doesn't use a single line of standard vB CSS, just all my own selectors. I suppose that is a bigger challenge. I haven't looked at the visual style editor yet for this new design and don't really plan to, given I'm doing it all manually. I can't wait to see how much bandwidth I'll save, probably over 50% per page.

Grievances, simplification. I use big words. :(

I regret to inform you that it is now 7 lines of code. I write such bloat.
Needed that <div> in there for some styling.

Hint: here's part of the CSS:
And here's the top of my master framework style sheet:
Modularity == good. Most of those CSS files are only 20 lines or so. The one controlling vB's frustrating tables is a whopping 125 and named wittingly (and does not bear repeating here, although wait until the final version).

I like reading my own comments:

Saving bandwidth is nice. However, I think it is not that important keeping in mind that most users will have broadband access anyway.

True, especially for my forum. I'm more concerned with the bandwidth savings that I'll enjoy. I recently upgraded my hosting plan to 29 GB/month and hopefully won't have to do it again for a very long time.

(edited your post by accident, Kirby, but restored it...I'm such a jackass)

29 GB/month is not much ... i'v got 100 included with my crappy VPS.
Our board produces approx. 200 GB/month.

My site uses more bandwidth than that in a day. :)

I really do need to cut down on my menu options though. However, the moment I remove one link, my members complain.

Regarding vBulletin:
I agree the navbar is BLOATED.
The search dropdown is a huge MISTAKE.

Regarding your modifications:
Your target audience understands the function of "breadcrumbs".

The "You are here" prepended to the breadcrumbs will only confuse people. If you really want to add such a feature I recommend that you append "You are here" to breadcrumb; also, you may want to style it different from the breadcrumbs. On your site, the "You are here" looks like it is part of the breadcrumb. eg. Am I at "You are here" or "WDF v5 sneak peek, part 5"?

I would actually leave "You are here" out of the "breadcrumbs". Now-a-days, breadcrumbs are standard and visiible on all big sites. In other words, people understand what "breadcrumbs" are or could easily intepret the function of the "breadcrumbs". (repeat)

The 23k CSS file is a bit bloated don't you think? I do understand that it is needed especially for something like a vbulletin-run site. But, you may want to split it and use what is necessary. In this manner, the initial load for a dial-up user will not be as bad. (First impression is important.)

Overall, I think the project looks great and applaud your effort. :up:

I've always admired your work and congratulate you on your new project. Keep it up! :)

I disagree on that.
Most users don't need nor understand the Standard (Advanced) Search Form.
So why making it more complicated for them when the simple Keyword Input is enough?
I had zero complaints from my Users (about 35K at the moment) when we Implemented the dropdowns - in fact we got many congrats about the much cleaner/easier layout.

I would agree with Kirby on the search ..... I do understand the advanced search as with every other part of the board ... And I woud rather use the dropdown menu .. No other reason that it saves me waitin for the next page ..

Lazy I know LOL

I didn't say anything regarding the 'advanced search' ... my point is that the search function should be easily accessible and visible to everyone.

The search function shouldn't be hidden.
You shouldn't make your users 'search' for it.

In fact, it should be the first thing that is VISIBLE on your site. That...and a link to your site map.

The key here is to provide the standard site tools in a usable manner so that your new and existing users can enjoy your site.


Just think about it for a moment...

A new user visits your site...
They have questions but would rather search first -- Where is the search function?
Do you have one?
It's not visible?
Wait, they don't give up there ... they start looking for a "search" link starting from the top.
They find one. But are disappointed that it's not on the page.
They click on the link.
IT'S A DROP DOWN!


I'm not sure about you but at this point why not direct user to serch page? You made them do all this work. For what? A dropdown.

Now, if they want to use the advanced search they will have to click another link. :)

What do you think is easier?
Search for link / click a link for a dropdown / input / submit
OR
Input / submit

It is visible for everyone.
JS users will click and see the input, Non-JS will click and see the form.
How more intuitive could it be (except directly displaying the input on every page, which is just clutter IMHO)?.

If I want to search somewhere I click search, what do you do?

I think this is easier than linking to the form.
Basically it's the same discussion we had about linking the edit button to quick edit instead of linking to the full editor as it was in older versions.

USABILITY is the key to success.

I'm sure you will agree with the below statement:

• In order for a product to be successful, it has to be user-friendly, efficient, and accessible by everyone.
• A goal (searching for item) should be achieved with little interaction.

Which one do you think meets the above criteria?

1. search visible on all pages
2. search in a dropdown

:)
Different opinions.
Search is visible on all Pages (except standard_error if I am right).

Personally I think clicking 'search' to search would constitute little interaction.

YOU SHOULD NOT HAVE TO CLICK EVER TO EXPOSE A SEARCH FIELD. It is the single most important element to display on any moderately-sized site.

No need for shouting :)
It's your opion, please accept that others might have other opinions - thank you.

I am a very opinionated individual. Sorry if it came across as shouting.

All uppercase = shouting :)

All uppercase == shouting :p

No, it's:

All UPPERCASE = shouting. ;)

Strictly speaking, yes :D