Bättre mobilupplevelse

Tweet about this on Twitter0Share on LinkedIn0Google+0

Safari och Chrome är de största webbläsarna för mobiler.[1] Nyligen passerade Chrome faktiskt Safari som den mest använda mobila webbläsaren. Båda använder renderingsmotorn Webkit som används bland annat för css-kodning.

Med en enkel java-snippet, några rader css och lite tålamod går det relativt lätt att förbättra mobilupplevelsen på vilken sajt som helst. Särskilt om det finns animeringar som normalt triggas av en muspekning. Vilket jag har en del av. (Se /tjänster)

Som du vet finns ingen :hover på mobilen. Med hjälp av Stackoverflow[2] kunde jag peta in java-raden

<script> document.addEventListener("touchstart", function(){}, true) </script>

på sajten för att få pseudo-klasserna :hover och :active att aktiveras med fingret på tryckkänsliga skärmar.

Webkit lägger normalt till en mörkare bakgrund på html-element, knappar eller länkar, när du trycker på dem. Det tillstånd som kallas pressed state. Den återkopplingen är bra eftersom du uppfattar vad som händer. Om du slår på animationer och sätter igång hover-effekter enligt ovan så blir det däremot lite stökigt. Därför har jag hävt webkitläsarens automatiska beteende med css.

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none;

Detaljer, men dom gör skillnad.


[1] Netmarketshare: Mobile/Tablet Top Browser Share Trend.
[2] Stackoverflow: How to simulate a hover on touch enabled browsers.


Läs mer om sajten

(Det här blogginlägget har lästs 1606 gånger.)

Tweet about this on Twitter0Share on LinkedIn0Google+0