Hover har använts på webbplatser i flera år som ett sätt att ge ett utdrag av information till besökare utan att utlösa en åtgärd. När smartphones och surfplattor gradvis tar över Internet måste vi ge dem ökad uppmärksamhet när vi utformar en webbplats. Eftersom pekskärmar inte kan hantera svävar måste vi titta på alternativ till sväveffekter. Om du skapar din egen webbplats eller inte har resurser för att anställa en professionell webbdesigner är denna handledning för dig.

Du kan hantera svävareffekter med pekskärmar men det kan vara lite besvärligt. Du kanske är bättre på att designa dem helt och använda helt annat. Om du vill använda dem på din stationära webbplats har du i allmänhet tre alternativ att sväva effekter på mobila webbplatser:

  1. Ta bort dem helt och ersätt dem med den primära åtgärden. Lägg till en sekundär meny där du antingen kan knacka en gång för hovereffekten och en gång till för den primära åtgärden. Placera hoverinformationen på sin egen sida.

Alla fungerar bra på pekskärmar och stationära datorer men kommer att kräva några designjusteringar för att implementera inom en befintlig design. Du kan lösa det med JavaScript eller smart jQuery-kod också om du har färdigheterna, men om du försöker hitta det hela själv, kan du vara bättre på att använda designalternativ än kod. Om du vill utforska kodalternativ för sväveffekter besöker du den här sidan.

Ta bort museffekter från din design

Om du inte kan anställa en frilansande webbdesigner för att hjälpa dig, kan du vara bättre på att ta bort svävareffekter helt. Visst ser de snygga ut och kan erbjuda användbar kompletterande information men det finns alltid andra sätt att uppnå samma effekt.

Du kan behålla menyåtgärden som den primära åtgärden och inkludera den kompletterande informationen någon annanstans på sidan. Du kan använda breakout-rutor, popup-fönster, öka beskrivningsinnehållet för den punkt du försöker göra eller något annat. Om du inte har färdigheter att implementera jQuery, är detta förmodligen det enklaste alternativet.

Lägg till en sekundärmeny

En sekundärmeny innehåller den första kranen som skulle simulera en svävareffekt. Du kan inkludera informationen i menyn och visa en andra meny i samma element. Den andra menyn fungerar som det faktiska valet som det skulle hända på ett skrivbord. Det första trycket simulerar muspekaren och det andra trycket simulerar användaren som gör den primära åtgärden.

Detta är ett snyggt alternativ till muspekareeffekter men begränsas av skärmstorlek och begränsar mängden information du kan lägga till din effekt. Hover-effekter är begränsade av sin karaktär men är mer begränsade på mobilen av skärmen fastigheter du har att göra med. Om du verkligen vill inkludera kompletterande data på ett icke-standardiserat sätt kan det vara det.

Placera hoverinformationen på sin egen sida

Kanske ett enklare alternativ skulle vara att inkludera hoverinformationen på sin egen sida med en textlänk. Detta förenklar din meny och håller navigering enkelt. Hyperlänk fungerar över enheter och du får en extra sida för webbplatsstorlek och SEO. Nackdelen är att du måste öka tilläggsinnehållet med minst 300 ord för att få det att fungera.

Så länge du kan tappa informationen noggrant så att den läser bra och ger mervärde för läsaren, tycker jag personligen att detta är det bästa alternativet. Att bestämma var du ska placera dessa länkar till tilläggsdata är upp till dig och kommer att bero på din design men extra sidor ger dig en extra möjlighet att lägga till samtal till handling, lägga till ditt telefonnummer, e-postadress och all extra information som kan användas att göra en försäljning.

Stannar med musen

Om du vill använda någon form av svävande effekt på din huvudwebbplats, kommer du att behöva bearbeta den till din mobilwebbplats eller mobilversionen åtminstone. Det finns växlande menyalternativ eller JavaScript-lösningar men de kommer att kräva en expert för att implementera. Denna sida diskuterar dina alternativ om du vill utforska dem ytterligare.

En av de enklaste fällorna att falla i när du börjar på egen hand eller bygger din första webbplats är att designa för dig själv och inte för din publik. Du måste verkligen utforma något du gillar, men när du överväger användbarhet måste du prioritera publiken. Du måste också ta hänsyn till enheterna de kommer att använda och hur de mest troligt kommer att engagera sig bäst på din webbplats.

Om din publik är ung kommer de att använda mobil. Om de använder mobil är inte hovereffekter och andra designalternativ som det bästa alternativet.