Bottenmenyer på mobilwebb

Det viktiga att komma ihåg är att detta inte sker godtyckligt eller för att det “ser bra ut” (till skillnad från tex ikoner som enbart består av ofyllda linjer). Navigationen bryts ur en app drawer och flyttas till botten av två separata (men ibland överlappande) goda skäl.

Så, precis som det är en no-brainer att lägga en rad med tre fyra snabbval, i botten av en mobilapp så borde det vara detsamma för en modern webbplats. Paradigmet är mobil, inte App vs Mobil. Det som funkar bra i en app funkar med andra ord bra på en mobilwebb.

Eller?

Det är nu det blir lite lurigt. Jag läste bloggposten All Thumbs, Why Reach Navigation Should Replace the Navbar in iOS Design och tyckte det lät vettigt. Inget det står i den är ogörligt på en mobilwebb så det är bara att tuta och köra. Fast då hade jag inte tänkt på att vissa browsers har sina egna bottenmenyer.

En googling senare och det blev uppenbart att till exempel Safaris bottenmeny ställer till med en hel del problem för webbutvecklare. Inte nog med att den tar upp 44px när den visas, den tjingar konstant dessa 44px vad gäller touch events. Klickar en besökare i botten av sidan, där folk helt riktigt vill placera viktiga GUI element, så tar Safari över klicket och använder det till att visa sitt GUI.

Lösningen på detta varierar i grad av kompromissande från att se till att Safaris bottenmeny hela tiden visas till att placera GUI element flytande ca 45px från botten av skärmen.

Ingen av dessa lösningar är direkt fantastisk men frågan är vad som annars går att göra?

• Lägga menyn i toppen av sidan som det var förr. Detta retar mig då det innebär att en potentiell majoritet[1] får en sämre upplevelse pga en specifik browser.
• Olika placering av menyn i olika browsers. Detta känns motigt. Hålla på och trixa med separata kodbaser är något som bör undvikas in i det sista.

Vilket val som än görs så betyder det att en andel av en sidas besökare får en sämre upplevelse än vad de förtjänar. Alla siffror pekar på att både besökare och de som tillhandahåller webbplatsen hade tjänat på att menyn låg i botten, så allt annat är en kompromiss.

I just detta fallet så verkar det tyvärr som att en kompromiss är resultatet oavsett vad som väljs. Jag skulle rekommendera att den aktuella webbplatsens besökarstatistik ska vara avgörande. Då återstår bara frågan om vad som är en representativ majoritet. Räcker det att 51% har massa cruft längst ner i sina browsers för att resten ska få en sämre upplevelse?

På TwoFours egen webbsida har vi till exempel flest besökare från stationära datorer (runt 75%), men vi skulle aldrig drömma om att strunta i att mobilanpassa den bara för det.

Ett annat troligt scenario är att Google lägger till en bottenmeny i Chrome också[2] och plötsligt är det standard att mobilbrowsers har en död zon i botten av skärmen. Så varje lösning måste ta hänsyn till webbens konstanta förändring. Objektivt bäst är att ha en lista med browsers som får menyn i toppen och sen rendera menyn i botten för de övriga. Men som sagt… separata kodbaser gör ingen glad.

Nu har dessutom Apple gått ut och bett apputvecklare att INTE lägga interaktiva element i botten av skärmen på grund av hur iPhone X fungerar.

I slutänden kan jag inte annat än känna en viss uppgivenhet inför problemet. En inbyggd bottenmeny känns som en black om foten för allt utom de mest rudimentära webbplatserna. Är det det gamla “Webben är för dokument, till allt annat finns appar” spöket som visar sitt fula tryne igen?

1 Safari, Opera och Samsung Internet Browser har alla en bottenmeny med fram och bak knappar, bokmärkning, delningsmöjligheter etc. Chrome är dock generellt sett en vanligare browser men det kan som sagt variera från webbplats till webbplats.

2 Så, då har det hänt. Chrome har lagt URL-baren i botten av fönstret i Mobile Chrome.