This site is under re-construction for 2012. Right now I am playing with HTML5 and CSS3, so this page changes fairly frequently as I experiment with user interface and navigation schemes.
Inline Navigation Buttons: I broke out the basic inline navigation button functionality into one class, then added different classes to style various kinds of button size transformations during hover.
Default Interactivity: The default navigation button behavior does not change the button size. While this is not quite as eye-catching as enlarging the hovered button, it avoids causing a page re-layout below the button in a number of cases - many of which occur if the viewport is more narrow. The button below, which allows you to see the prior version of this webpage for comparison of these latest revisions, uses the default, non-resizing, button behavior.
Hover Increases Width and Height: I like the look of enlarging the hovered button but I don't like the page re-layout that occurrs in my first version. I created a class style that uses margin spacing in the normal view to reserve space for when button size increase during hover. This allows for a highly interactive feel within the list of buttons without having the rest of the page text jump up and down as you move from button to button. That is the version I am using for the navigation list at the top of this page.
Hover Increases Width Only:Another option, which allows some eye-catching resize, is to only increase the button's width. This will work for a single button, as well as for a multi-line button, both of which do not avoid re-layout in the increase width and height style class. The button below uses width-only resizing.
In-Place Expandable Notes:The "Additional Comments" section above expands when you hover over it, and the comment text replaces the placeholder text. Trivial to implement, compared to the side tabs, but I was just doing it for the amusement value.
Expandable Side Tabs:I revised my side tabs to use classes and significantly cleaned up the CSS code, though there is still a bit more cleanup to do. I made the tab background semi-transparent, and the buttons are opaque. To me this gives the feeling that the tabs are not interfering as much with the main content, and emphasizes their transient nature.
There are now two general classes of side tabs - ones that are "fixed" relative to the browser viewport (the blue and green tabs on either side in this page), and ones that float along the edge of the document presumably near the content that they support. (For eample, the beige tab to the left of this paragraph.)
That tab is a fixed-width tab to continue to illustrate the animated slide-out on supporting browsers (eg Firefox). I shortened the transition duration to 0.1s to make it feel more responsive.
I fixed the vertical spacing issue on the fixed tab sets. Floating tabs can still overlap, or spread out, depending on their parallel content, but that's actually the intended design as I want them to be able to scroll over the fixed tabs as the user moves through the document. (You can see that by making your browser window short and then scrolling to the bottom of this page. There are some more sophisticated tweaks I could do to increase the usability when the tabs overlap, but I am not going to pursue those right now. In practice I've had no problems accessing the tabs I wanted to see.
One thing to bear in mind with the fixed tabs is that since they are relative to the browser viewport they may not be visible if the user has a shorter screen than you designed for. Because they are rendered using a fixed position, there is no way to view or interract with sections that lie outside of the viewport.
Last update: Thursday, November 17, 2011.
The NetRun website is maintained by Terri Rashid.