Need feedback: Fixed header

Be sure to read and follow the guidelines for our forums.

Sep 28, 2017 2:10 pm
As you may know, I'm currently working on rebuilding the site into a new technology, which will help me push future updates faster, along with making the site a lot faster and fun to use (I hope). Part of the update is also me fixing a lot of the smaller buggy things and UI issues no one likes.

One of these things I'm thinking about removing and want some feedback on is the fixed header. Right now, as you scroll, the header sticks to the top of the page, going from a taller height to a smaller one as you scroll down. I'm 100% getting rid of that functionality; the header will be large on the logged out landing page, and smaller everywhere else. I figure if you're already on the site, logged in, you don't care about site logo.

What I'm looking for feedback on is the "fixed" part, meaning it stays stuck to the top of the page as you scroll. You've probably noticed it causes issues on pages like the forums when you jump to a part of the page, and the part you jump to is under the header. It's a silly bug that's easily removed by not making the header sticky. Another solution is to move the menu to the left, leaving just user stuff up top, a la Facebook, but I don't have the design chops to find a clean solution for that (do you have any ideas?). I also suspect there's an easy CSS solution to the jumping problem that I just can't think of.

Anyway, feedback?
Sep 28, 2017 3:08 pm
I'm not super well versed in building a webpage at that level, but could you set the header to hide and pull-out when it's being moused-over? Then it doesn't block (as much) of the page behind it most of the time.

This also has the disadvantage of being harder to use on mobile devices, but I don't know how high a priority that is.
Sep 28, 2017 3:11 pm
Thanks for the thoughts FaustianFlakes.
FaustianFlakes says:
I'm not super well versed in building a webpage at that level, but could you set the header to hide and pull-out when it's being moused-over? Then it doesn't block (as much) of the page behind it most of the time.
It'd be tough to use, as the top of the page window is not the top of the app window, so you'd have to be precise. It's a good idea if I ever build a GP app.
FaustianFlakes says:
This also has the disadvantage of being harder to use on mobile devices, but I don't know how high a priority that is.
Mobile is a big chunk of who visits GP. I have ideas on improving navigation for mobile that will play into whatever decision is made here.

Maybe I need to really look into navigating on the page correctly...
Sep 28, 2017 3:30 pm
I personally enjoy the sticky header part, but mainly because of the speed it lets me get into things like Characters and the Forums link. The other things, I find I don't really access while I'm in my daily use of the site.

I do like the idea of having everything shift to a side vertical menu that stays sticky. Not sure what implications that would have on the general mobile interaction, unless you were to give it a button to hide/unhide the side bar so its possible to push it off to the side while you are reading things.
Sep 28, 2017 3:33 pm
Dramasailor says:
I do like the idea of having everything shift to a side vertical menu that stays sticky. Not sure what implications that would have on the general mobile interaction, unless you were to give it a button to hide/unhide the side bar so its possible to push it off to the side while you are reading things.
On mobile, what I'm considering is actually a small top sticky header, click on a hamburger menu (those triple bar things you've almost definitely seen), and open a menu on the left or right.
Sep 28, 2017 4:16 pm
That makes a ton of sense. I guess my love of the side menu, especially on the desktop version, is that with the resolutions I live in I end up with a lot of white space at the sides that never gets used. So if a menu could live there, freeing up some of the vertical reading territory, and possibly a static dice roller on the right side (:-D) that would make my screen real estate utilization very happy.
Sep 28, 2017 4:40 pm
I love the fixed header. I constantly use it to quickly go to Characters, Games, Forums, and PMs.
Sep 28, 2017 4:51 pm
Fixed header is a must for me. I constantly use that function, so make sure it sticks around. A sidebar is a good choice for the desktop version, but obviously not so much for mobile, but you've already addressed that concern.
Sep 28, 2017 4:57 pm
I think its fine. i do wish there was a GamersPlane app though
Sep 28, 2017 5:50 pm
Oh man, I'd love an app, but that's... forever away. Unless I can get more devs on board.

So ok, we'll keep the fixed header. I'll have to address jumping to a portion of the page another way.
Sep 28, 2017 6:11 pm
I agree that the functionality of the sticky header is worth keeping.

Keleth, there are some interesting solutions in this stackoverflow question: https://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors. Seems like they are pretty simple and worth exploring.
Last edited September 28, 2017 6:11 pm
Sep 28, 2017 6:20 pm
acox89 says:
I agree that the functionality of the sticky header is worth keeping.

Keleth, there are some interesting solutions in this stackoverflow question: https://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors. Seems like they are pretty simple and worth exploring.
Interesting solutions. Not sure I like the padding one, but the before solution could work. I don't mind a JS solution, as this will all be implemented in Angular, so I could just put in my own custom "jump to".
Sep 28, 2017 7:05 pm
Keleth says:
acox89 says:
I agree that the functionality of the sticky header is worth keeping.

Keleth, there are some interesting solutions in this stackoverflow question: https://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors. Seems like they are pretty simple and worth exploring.
Interesting solutions. Not sure I like the padding one, but the before solution could work. I don't mind a JS solution, as this will all be implemented in Angular, so I could just put in my own custom "jump to".
Yea I liked the before with a fixed height and negative margin-top.

I don't know Angular at all but yea that seems feasible too.
Sep 28, 2017 7:09 pm
acox89 says:
I don't know Angular at all but yea that seems feasible too.
It's my go-to for frontends these days. It's making front-end dev fun again.
Sep 30, 2017 1:32 pm
Count me in with a 'fixed header' person. Because navigating from game to game requires me to scroll back up after a thread, I typically use the fixed header (Forums) to get to where I need to go next.
Sep 30, 2017 3:46 pm
Over all, I'm also realizing I'll have to hire a professional UI firm to help me redesign the site, unless one of you guys is a UI/UX expert and wants to help me? Time to start saving up again.
Sep 30, 2017 6:36 pm
Nooooo! Don't take my header away!!!!
Oct 1, 2017 1:57 pm
Keleth says:
Over all, I'm also realizing I'll have to hire a professional UI firm to help me redesign the site, unless one of you guys is a UI/UX expert and wants to help me? Time to start saving up again.
Alas. Not my skill set.

You do not have permission to post in this thread.