On mobile devices the screen estate is small, and it has to be as the mobile screens are not that big (see image below). Common screen sizes are around the 360 pixels in width, this does not leave much room for any menu elements. This is why most website rely on the hamburger menu icon for a menu. This is a bad user experience, as you are hiding all the important menu items. Hamburgers menus also tend to be at the top of your screen. We need a reachable mobile menu that is easily accessible and does not hide our most important menu items and leaves room for the content on the page.
Source: StatCounter Global Stats – Screen Resolution Market Share
Bottom navigation
The hamburger menu is usually located in the top of the website. Either in a normal or fixed header. The top of the screen is hard to reach with your thumb. This makes the hamburger menu a not so easily reachable mobile menu. I have drawn a figure to illustrate this problem. Now this is the assumption that you use the phone with one hand. Which most people do most of the times.
So putting the trigger for the most important feature of your mobile website, the menu, out of reach seems like a bad design choice (I know this website has it to at the time of writing.)
Some apps and websites solved this problem by introducing a tab menu bar at the bottom of the screen. Facebook is a good example and material design also has a chapter written about bottom navigation.
Most of the times using a bottom navigation bar there will be icons. The problem with just using icons is that they can be ambiguous, and be interpreted wrong. So then you put labels underneath them. Using more and more screen estate.
Facebook on android has a new menu for some time now at the bottom of the screen. It just uses labels. While this is good for keeping it clear and small. It also leaves little room for more options. If your website has multiple languages you have to keep in mind that some languages need more space for the same words in English. German words for example can get quite long. “Register” for example in German is “registrieren” (thank you google translate).
Take the road in the middle, a reachable mobile menu
Based on Johnny Vino’s work posted on dribble, this post specifically, I began re-creating his work in HTML/CSS. Johhny Vino made a reachable mobile menu which sits vertical at the side of the screen. Here is the GIF from his dribble.
Making this I also learned a neat little trick I never needed before but definitely am going to use in the future. Let’s say you have a hover effect set up in the CSS. You could set a transition on the parent element and it would use that for the mouse over and mouse out states. But when you add another transition to the CSS class for the :hover and it will use a different effect for the transition when the user moves their mouse out of the element. You could add a timeout or a different easing effect. Or you could add a different transition for each CSS attribute. I think this could be a post in the near future. Just look in the example below for now.
In the example below this is noticeable when clicking the red/magenta colored button. The panel will slide open and the fake text containers rotate in a particular fashion. When you close the window, the animations needs to work differently. The text containers will pop back quicker than the opening animation. The background for the menu needs to collapse a little bit faster.
See the Pen Slick UI mobile menu transition by Skippy (@Skippy) on CodePen.dark
Do I need this?
Probably not. As the menu items in the example are already limited to just 3 items and this is with a fixed screen height. It is, however a cool proof of concept. It uses minimal screen estate, while not obscuring the most important menu items and keeping the trigger in the safe zone for the thumb. This could work in some very limited use cases. Like a small online clothing store with a limited selection.
The plus about this menu is that when expanded, the root menu items leave room in between them. So you could easily add a finer selection of menu items. I made this because I like to create stuff in my free time and it was a good lesson for me and hopefully for you to. Leave a comment below for suggestions.
0 Comments