Since I'm not that great with web design, CSS, or UX I've started simple with the design of Refynr.com's web app. This is a bad thing at times for my users, who expect a better user experience, so I incrementally improve over time.
One problem was that the content is made up of streams/feeds of data from Twitter & Facebook, so there was a lot of scrolling. As you scrolled in the old version, you lost quick access to the navigation. Being totally out of touch with CSS these days, I didn't even know that I could have a "fixed" header with pure CSS; I actually thought I would have to use dreaded frames! And I had also investigated doing a fancy jQuery menu that annoyingly followed you down the screen, complete with bouncy animations... glad I didn't go that route!
I noticed that my blog theme had a fixed menu (see, on the left), and viewed source: what?! No frames?! So, I did some googling and found a great, beginner article (perfect for me!) to show my how to create fixed headers (or footers) via CSS: http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-begin...
It was pretty easy, I didn't have to reoganize my HTML markup (except for adding an id or two to some DIVs), and voila, it works! I tested on Firefox 3.6, Chrome, Safari, and IE 7, 8 & 9... guess this technique has been available for a while... *sigh*.
Here's what the old version looked like:
But here's the new version... w00t!
