Curve2

[Antechinus]

Yes, although both FB and Twitter are notorious for annoying users.

[Arantor]

Not for that, though, and those have been hugely consistent for years about their structure and placement...

[Antechinus]

True. Personally I don't really mind either layout. As long as things are relatively sane (ie: not Discourse) I can pretty much work with anything. Stuff is at the top of the page, which is where you look first. No worries. I think a lot of people are also fairly flexible, simply due to the number of different interfaces they will use in their daily perambulations. It really comes down to what look you prefer.

[Sir Osis of Liver]

If we're down to emulating garabage like FB or Twitter, then things are worse than I thought.

[Arantor]

We're not emulating anything, we're following what has become standard user expectation of putting user centric stuff at the top, and site content underneath.

[Sir Osis of Liver]

I believe there's still some value in original design, but I suppose I'm in the minority of forum users who've never been to FB or Twitter, and don't expect all websites to look the same.

[Arantor]

But surely, original design is incompatible with providing an experience that is familiar to the user?

But going beyond FB/Twitter, it's really not hard to find sites that follow the exact same logic for the exact same reason: put the user stuff at the top, out the way, so there's more room to focus on content.

[Kindred]

yup... pretty much this.

We just revised the UI (as in a complete rewrite) of my company's software.

original design is ok. but, unless you are a singular source of information or function -- familiar layout is more critical to a smooth user experience

[Antechinus]

But surely, original design is incompatible with providing an experience that is familiar to the user?

But going beyond FB/Twitter, it's really not hard to find sites that follow the exact same logic for the exact same reason: put the user stuff at the top, out the way, so there's more room to focus on content.

I realise it's a convention now, but this reasoning isn't really solid. Content has always been below the menu and breadcrumbs, and on most pages content will overflow the screen height anyway. This means that "leaving more room to focus on content" is not actually a relevant consideration. It's just a knee-jerk rationalisation for worshipping of the Great God Content, which is trendy at the moment.

[Sir Osis of Liver]

Still think the guiding principle should be to have everything out front and easy to use, regardless of what anyone else is doing.

[Kindred]

I tend to disagree with your contentions about UI, Sir Osis.. 

[Sir Osis of Liver]

Then we'll once again agree to disagree.  Someone else decides which way to go, not me, and I'm good with that.

[Arantor]

I'm merely outlining why I did what I did. I stand by the decisions I made, too.

[Antechinus]

Ok, have got the thing working as a sidebar when js is disabled. It's basically just a case of setting the second level ul to display: block; instead of display: none;

Incidentally, display: none; is the mostest awesomest way ever of making sure people on screen readers can't use your menu content. Cannot remember how may times this has been mentioned in the past. Probably somewhere between 5 million and infinity. Hey ho.

Which is why the ARIA roles were added to the main menu coding way back when in alpha. They have now disappeared. Has anyone tested the menus for a11y on a screen reader? Just wondering, since SMF is traditionally supposed to take account of a11y and AFAICT the menus aint so good for a11y the way they are now.

Anyway, leaving a11y aside, if you just want a basic demo of a sidebar with javascript disabled, throw this on the end of index.css:

Code Select Expand

/* Custom sidebar testing. */
#admin_content {
margin: 0 0 0 17.5em;
}
#genericmenu {
float: left;
}

#genericmenu .dropmenu>li {
display: block;
margin: 0;
padding: 0;
}

/* Levels 2 and 3 submenu wrapper. */
#genericmenu .dropmenu>.subsections>ul {
z-index: 0;
position: static;
display: block;
min-width: 18.2em;
padding: 0.5em;
font-weight: normal;
border: none;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-radius: 0;
box-shadow: none;
background: #fff;
}

/* Levels 2 and 3 submenu wrapper. */
#genericmenu .dropmenu>.subsections:last-child>ul {
border-bottom: 1px solid #ccc;
}

#genericmenu .dropmenu>li>a {
background: #557ea0;
border-bottom: 1px solid #777;
padding: 0 6px;
color: #fff;
font-size: 1.111em;
font-weight: 700;
border-radius: 0;
box-shadow: 0 16px 20px rgba(255, 255, 255, 0.15) inset;
}

#genericmenu .dropmenu>.subsections:first-child>a {
border-radius: 6px 6px 0 0;
}

#genericmenu .dropmenu>li>a.active {
background: orange;
font-weight: bold;
border: 1px solid #f49a3a;
box-shadow: 0 5px 5px rgba(255, 255, 255, 0.2) inset;
}

Which is just "wallop it with a hammer" code and has not really been cleaned up yet. I realise javascript will have to be enabled for general use, and it is possible to have sidebars that work with Superfish enabled, but at the moment I can't recall how I did them. Elk has them, so I'll go pig around in Elk code and figure it out again.

[Antechinus]

Bugger me, the edit time for posts is incredibly short in this here board.

Anyway have refreshed my memory. The targeting for Superfish hides in default/scripts/theme.js so it's just a matter of editing that to be more specific. Which is easy if you just want to make everyone use the sidebar. If you want people to have the option of sidebar or mass of droppies, that will require some markup changes (otherwise the js won't know what to target when someone changes their menu display). Markup changes aren't a big deal though.

[Antechinus]

Ok, edits for the javascript stuffz.

default/scripts/theme.js

Code (Find) Select Expand

$(function() {
$('ul.dropmenu, ul.quickbuttons').superfish({delay : 250, speed: 100, sensitivity : 8, interval : 50, timeout : 1});

Code (Replace) Select Expand

$(function() {
$('#main_menu ul.dropmenu, ul.subsections_dropmenu, ul.quickbuttons').superfish({delay : 250, speed: 100, sensitivity : 8, interval : 50, timeout : 1});

default/GenericMenu.template.php

Code (Find) Select Expand

<li ', !empty($section['areas']) ? 'class="subsections"' : '', '><a class="', !empty($section['selected']) ? 'active ' : '', '" href="', $section['url'], $menu_context['extra_parameters'], '">', $section['title'], !empty($section['amt']) ? ' <span class="amt">' . $section['amt'] . '</span>' : '', '</a>
<ul>';

Code (Replace) Select Expand

<li ', !empty($section['areas']) ? 'class="subsections"' : '', '><a class="', !empty($section['selected']) ? 'active ' : '', '" href="', $section['url'], $menu_context['extra_parameters'], '">', $section['title'], !empty($section['amt']) ? ' <span class="amt">' . $section['amt'] . '</span>' : '', '</a>
<ul class="subsections_dropmenu">';

That works. If that's basically what you're after, can sort the responsive and rtl shiz to match. If you want more bells and whistles, figure out which ones you want and I'll butcher some extra code.

[Sir Osis of Liver]

  Will give it a try soon as I get a chance.

[Biology Forums]

People always talk about javascript being disabled. When does that ever happen?!?!

[Antechinus]

In this instance I was just sorting out the presentation without having to worry about the js getting in the way.

[Dave J]

but I suppose I'm in the minority of forum users who've never been to FB or Twitter, and don't expect all websites to look the same.

That's now a minority of two as I don't have an accounts of either of them