Re: Site Structure: Header

On 20-Oct-09, at 11:06 AM, Burka Daniel wrote:

Further to the discussion about the site structure, I've jumped into html/css and mocked up a potential header for subpages on the site. I've been thinking we'd do a similar but different header on the homepage of PHP.net and then have a consistent and very compact header for all other pages. http://www.whitelands.com/daniel/php/mock1/ Notes: 1) Header is very compact. Much smaller and less intrusive than the current PHP.net header. 2) Primary links are reduced from 12 to 6. Much easier to scan/parse than before. 3) But... I'm using mega-dropdowns** under two of the menu items. This allows very quick access to most parts of the documentation and many of the sections that I've lumped under 'Community'. This could be a nice balance... reduce the number of menu items at the same time as giving more ready access to more areas of the site.

    a) I'm really not sure 'Community' is a good name for this.

    b) The 'Community' mega-dropdown is poorly formatted. I focused more on the doc one.

    c) The mega-drop is a bit awkward in its current design. A non-white background or narrower width could help.

4) Don't pay any attention to the documentation under the header... it's rough/hardly started. 5) Small, compact, simple logo treatment can work at very small sizes. ** Jakob Neilsen has written a bit about the usability of mega-dropdowns. No matter what you think of the guy, he's often right about things. http://www.useit.com/alertbox/mega-dropdown-menus.html Daniel

Hi Daniel, I took a closer look at your mockup the other day. The markup and css are very tidy. That's the first time I've seen sprites in a mockup! I like that the header is simple, but I worry that it is too simple. I think it needs more contrast and visual interest. I worked some of my previous ideas into your mock-up and posted it here: http://ambitious.ca/php/alt-header-1.png I tried other colors, but keep coming back to the black. The mega drop-down is really big, but practical and interesting I think. As you point out it would be better narrower. I think a quick fade effect would be more appropriate than a slide here. A light gray background with a tooltip-style arrow at the top could look nice. Something like this (from apple): http://ambitious.ca/tooltip-ex.png ...Or, would it be weird to have it look like a tooltip? In any case, I like this mega approach. BTW, is that a dig-style drop shadow I detect on the bottom??? Regards, Stew