I’ve been thinking about re-creating the menu in favour of something more simple for a while. When I built this site I decided that I’d be trendy and build a horizontal scrolling menu. Here’s what it looked like:
I think it looked really good, but around a third of the menu was hidden on desktop screens and nearly three quarters of it was off-screen on mobile.
That’s a pretty rubbish user experience (UX).
So I started playing around on the
dev branch of my site’s Github repo and ended up ditching the ‘button’ effect and emojis all together. This is the result:
The entire menu now fits on a single line on larger screens; on mobile it wraps over 2 lines and centres. With the vertical height reduced from removing the button effect, no more vertical screen real-estate is taken away with this new menu, despite it wrapping over 2 lines on mobile. Plus, visitors can see the entire menu now instead of just a quarter of it.
While I was at it I also made my name in the header a
h2 instead of a
h1, which I think works better.
I asked the good folks of Fosstodon what they thought of the new menu vs the old one. The feedback was pretty much unanimous and along the lines of…
The new menu is so much better. What on earth were you thinking with that horizontal mess?
That’s fair, I suppose. So I pushed the change to my
main branch and the changes are now live. Hopefully you guys appreciate the improved UX.
This is post number 08 in my 2021 100 Days To Offload challenge.