The mobile menu on every design has been rebuilt. It is smaller, it opens faster, and the last item is no longer below the bottom of the screen.
What was wrong
The old menu was a desktop menu with bigger padding. Each item was tall enough that a site with eight pages needed scrolling inside the menu, which almost nobody realizes is possible, so the last two items were effectively invisible.
On a small phone, with a browser bar at the top and a system bar at the bottom, the usable height is less than people building websites tend to assume.
What changed
- Tighter items. Still comfortably large enough to tap, considerably shorter than before. Nine items now fit without scrolling on a small phone.
- Opens from the bottom. A menu anchored to the bottom of the screen is reachable with a thumb. One anchored to the top requires shifting your grip, which people do not do, they close it instead.
- Smaller control. The open control was oversized and taking space from your content on every page.
- Faster. No animation library. The transition is a stylesheet, so it opens instantly on an old phone.
- Closes properly. Tapping outside it, or the back gesture, closes the menu rather than leaving the page.
That last one was a real bug
On several designs the back gesture with the menu open navigated away from the site entirely. Somebody opening your menu, deciding not to use it, and using the standard gesture to dismiss it left your site. There is no way to know how often that happened, and it is unpleasant to think about.
Why this is worth a whole post
Because for most actor sites the majority of visits are on a phone, as the numbers in website statistics consistently show. Mobile is not the secondary case, it is the main one, and a menu that hides its last two items on the main case is a serious fault rather than a rough edge.
Related
Sticky navigation uses the same compact bar. Menu order matters more on a phone, where the first three items get nearly all the taps. Long menus are better handled with two-level menus.
Older reading: optimizing your actor website for mobile.
Create your free actor website and check it on your own phone.
Reading about actor websites, or building one?
It takes about 76 seconds and it starts free, with your credits, headshots and reels already in it.
Build mine free→