Support » Theme: Fanwood » [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 ( 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.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author tungdo


    Hi there. I’m the author behind this theme. To clarify some of the misunderstandings and admit shortcomings on my end =)…

    • The search box showing up twice in the header is an oversight. The theme settings allow you to attach a search form to either or both menus in the header.
    • The menu bar switch is for mobile device users. At the moment, there is mobile friendly solution for drop-down menu items, which is why I opted to display the menu in its entirety. Otherwise, mobile users cannot use dropdown menus at all because dropdown menus typically depend on CSS hover.
    • Layout 7-12 simply hides the second menu. The menu you see at the bottom is a different menu displaying the same links. I realize now the way I’ve set up the demo is a bit confusing =).

    This theme is too massive for one single demo to demonstrate. Like the 7-12 layouts, its meant for a different use but confusing when shown along with other layouts because elements like menus changes.

    Thank you for your suggestions by the way.

    Theme Author tungdo


    I forgot to add that it’s NOT beta material. It simply follows WordPress’s versioning method.


    I’m probably one of the first users of this theme, and have been playing with it for over 4 months. It provides a lot of layout options and takes time to figure out how to best use them for the display of your own individual content. I appreciate the efforts on your above comments, but also notice that they were based upon the theme’s demo…and not an actual online website.

    Because of that, I offer you a link to my own website: Tools for Mobile Responsive Web Design, and ask that you click through as many pages and/or links as you will take the time, and then respond with what you Like or Strongly Dislike about the way that I have personally used this theme.

    It is my belief that your comments will actually contribute to the better evolution and development of this theme. Your additional comments will help me improve my own efforts.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Theme: Fanwood] Still obviously "beta" — comments on demo site’ is closed to new replies.