[Theme: Fanwood] Still obviously "beta" — comments on demo site

This looks like a really promising theme — I hope I can use it sometime, but right now there are too many apparent program glitches and poor user-interface choices showing on the theme’s demo site (https://devpress.com/demo/fanwood/) to use it for a real site yet. It’s still at the “0.1.x” version, and I’ll probably wait until version 0.9 or so.

Program Glitches in the Demo

1. The search box appears twice in the header.
2. The responsive template attempts to maintain excessively wide left and right margins as the browser width is reduced: the first jump in formatting, which I estimate happens at about 1000px (1024 perhaps?) creates margins that take up a full 1/3 of the browser width. That means another jump isn’t needed until less than 800px width, but it appears to waste space on some screens. (I can’t reduce resolution on the screen I’m using right now without messing up my icons but I’ll try it on a different screen later.) A better approach might be to scale the fonts and widths between format jumps, or else space the format jumps more closely. (Between the first and second format changes, scaling the column widths would be particularly effective.)
3. When the format changes at 1000px or so, the repeated search boxes are joined by repeated “Menu” links — 3 of them! The first two are for the mini-menus that have social links in them — but those are small enough that they don’t really need shrinking into an “accordion” menu. The third (main) menu link expands to the ENTIRE menu tree, which can potentially be very long, especially if there are any third-level menus. (The demo only has second-level menu items, which is a shortcoming of the demo design.) I see what the designer is trying to do, but it just looks weird. Even giving each menu a distinct name (“Social Links 1”, “Social Links 2”, “Main Menu”) would help a bit, though it might make more sense to just put the all the first-level menu items in a vertical arrangement (or two columns) and “accordion” only sub-menus below that.

Poor User-Interface Choices

1. As noted above, when the browser narrows, the menu switches to a fully-expanded menu tree, which can overwhelm a user, and makes for a lot of scrolling-down on a narrower screen. Progressive expansion of menus and submenus would be more usable.
2. The switch from a menu-bar to a menu “accordion” occurs at about 1000px, which means that even 800px wide screens (SVGA) can’t show a menu bar. At that width the menu might need to go to 2 lines if there are a lot of elements, but 800-900px seems too wide to give up on a horizontal menu altogether.
3. Layouts 7-12 provide a more compact/dense layout with less “header” space. But they move the menu-bar to the bottom of the page. Less experienced Web users may never think to look for it there, and will assume there is no menu on that page. More experienced users will think to hunt for it, but even if they’ve been to the site before and know it’s at the bottom, that’s a very awkward and inefficient location for users. The bar should be at the top, directly below the tabs — i.e. the very first content in the black-background area.

Suggestions for the Demo

The demo could be a more effective sales tool with the following improvements:

• Fix the issues above.
• Make the tabs at the top work.
• Show an example of a third-level menu. Main menu items that have “children” are marked with a “+” sign — is that true of the next level? Can’t tell without an example.
• The aesthetics could be improved. I know those are subject to individual tastes, but DevPress should give the colors, fonts, and backgrounds a second look. The bright yellow and black color scheme is usually (in the U.S. anyway) associated with construction, emergency signs, and mining/earthmoving equipment — which I don’t think is your primary target clientele. The font used for headings is not particularly attractive, and it also has an industrial look to it. And the wavy lines and crumpled-paper black-gray backgrounds are not particularly attractive either. Also, there are areas that should be colored like the background but are colored like tabs or menu items. For example, the area to the left of the three yellow tabs is also tab-colored, which actually makes the tabs stand out less and looks like it’s missing content. And the area to the right of “More Layout Options” in the main menu is also colored like a menu item, but with missing content.