Stora klickbara ytor
En riktlinje som är extra viktig för mobiler och touch-enheter är att länkar och klickbara ytor ska vara enkla att använda. Och då gäller främst att länkarna är tillräckligt stora. Man brukar höra råd på minst 1 cm i diameter, som ungefär matchar storleken på en fingertopp. Apple själva rekommenderar minst 44×44 pixlar för iPhone.
Inget :hover och mouseover
När användarna inte använder en mus för att navigera är det flera beteenden som inte gäller. Till exempel förändringar i gränssnittet då man för musen över vissa ytor och länkar (mouseover i javascript och :hover i css). Om man använder sådana effekter i gränssnittet riskerar man att stänga ute en stor grupp användare. Tänk på det nästa gång du t.ex. skapar info-rutor som visas vid onmouseover.
Mer läsning hittar ni här:
- End hover abuse now – Cennydd Bowles
- Tap is the new click – Dan Saffer
- Touch table – Quirksmode
- Att använda wtai för telefonnummer i länkar – lillbra.se
Nya och annorlunda beteenden
För att försöka överkomma det ovan nämnda problemet har webbläsartillverkarna gjort så att vissa mouse-events ändå triggas, fast när användaren trycker på skärmen. Dessutom finns det ett antal nya events unika för touch, som man kan utnyttja. Följande events triggas vid ett tryck (i inbördes ordning): touchstart, mouseover, mousemove, mousedown, mouseup, click,:hover styles applied, touchmove, touchend.
Uppringbara telefonnummer
Att göra länkar av telefonnummer är ett generellt råd för alla webbsidor, som ofta förbises. Men detta är naturligtvis till extra stor hjälp för mobila användare. Genom att använda tel-, callto-, eller wtai-schemat till länkarna, så kan användaren ringa upp numret direkt genom att trycka på länken.