Mobile Responsiveness and Tofuburger Menus
The moment a website goes live can be quite exhilarating. All that work that went in, and now there’s proof of it. We have something to show for it. We can enjoy the fruits of our labor. Then, when I checked out the mobile view a couple days later (yes, remember that I got my site live on Winter Solstice?), well, that’s another story that I’ll start writing up here.
When I opened my site at arts.gloriang.com to inspect the mobile view, I noticed that the hover effects on desktop were not kicking in. Of course, since mobile and tablet are touch-sensitive devices, there is no hover effect that is applicable.
So I chose to create a Tofuburger Menu. Yes, I know you know what I’m talking about. It’s that little button with three horizontal lines in it. Yes, it does have other names. However, let’s just stick with the vegan nomenclature for now, yes?
The Tofuburger menu, when clicked, would open up the navigation for the site. Because each navigation option on my site also has nested items, I needed to add a + sign so the web visitor would know they can click on that button to view the nested items.
Some of my nested items also have items. So I needed to add more + signs for the nested items, too, so the web visiter would know that they can click on those buttons to view the rest of the items.
So that is how my Tofuburger menu works. This menu only shows on mobile and tablet views. When the web visitor is using a desktop device, then this menu is replaced by the regular navigation menu that only shows on desktop devices.
This kind of structure is possible because of component-based architecture, which is a handy modern way of building websites and web applications. My Tofuburger menu was built as a component. My regular navigation menu was built as a component, too. So it was easy to designate which component would show for which kind of device.
For mobile device screen sizes, the Tofuburger menu was an easy choice. For tablet device screen sizes, I had an option to continue with the Tofuburger or the regular navigation menu because with some effort I could get the tablet menu to open up the same way my regular navigation menu opened up on desktop. I didn’t.
Why?
- Tablets do not accommodate for hovering that well. The user would have to touch the menu item for a longer period of time and pretty much drag through the different menu tiers. Too much friction to be user-friendly.
- Tablets are devices that users usually switch from portrait and landscape orientations. While browsing through all the menu tiers with my regular navigation menu would easily fit in the screen on landscape orientation, the most nested menu items would actually be chopped off the screen in portrait orientation of my site.
- On that note, the Tofuburger menu only appears on tablets in portrait orientation. When in landscape orientation, the website will see the regular navigation menu as it appears on desktop devices. I was fine with that, since the majority of users are either mobile or desktop users and I did not want to spend any more time on the styling to get the landscape orientation to also display the Tofuburger menu.
All this talk about tofu and burgers has me feeling hungry. Signing off now….