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. Med smartphones och surfplattor som 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 sätter upp din egen webbplats eller inte har resurser 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 helt använda något 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:
- 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 att hålla effekt och en gång till för den primära åtgärden.
- Placera hoverinformationen på sin egen sida.
Alla kommer att fungera 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 arbeta runt det med JavaScript eller smart jQuery-kod också om du har färdigheterna, men om du försöker räkna ut det hela själv kan du vara bättre på att använda designalternativ än kod. Om du vill utforska kodalternativ för museffekter, besök 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 hovereffekter 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, popups, öka beskrivarens innehåll 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är meny innehåller den första kranen som skulle simulera en svävande effekt. 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 sväveffekter 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 svävarinformationen på sin egen sida med en textlänk. Detta förenklar din meny och håller navigering enkelt. Hyperlänkning 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 läsa noggrant informationen 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 beror på din design men extra sidor ger dig en extra möjlighet att lägga till samtal till handling, att 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 för hovereffekt 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 med din webbplats.
Om din publik är ung kommer de att använda mobil. Om de använder mobil är hovereffekter och andra designalternativ som det inte ditt bästa alternativ.
