Hover har använts på webbplatser i flera år som ett sätt att tillhandahålla 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 designar en webbplats. Eftersom pekskärmar inte kan hantera svävning måste vi titta på alternativ till svävningseffekter. Om du sätter upp din egen webbplats eller inte har resurserna att anställa en professionell webbdesigner, är den här handledningen för dig.
Du kan hantera svävningseffekter med pekskärmar men det kan vara lite besvärligt. Du kanske är bättre att designa dem helt och hållet och använda något helt annat. Om du är inställd på att använda dem på din datorwebbplats, har du vanligtvis tre alternativ till hovringseffekter på mobilwebbplatser:
- Ta bort dem helt och hållet och ersätt dem med den primära åtgärden.
- Lägg till en sekundär meny där du antingen kan trycka en gång för hovringseffekten och en gång till för den primära åtgärden.
- Placera svävningsinformationen 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 i en befintlig design. Du kan kringgå det med JavaScript eller smart jQuery-kod också om du har kunskaperna men om du försöker räkna ut allt själv, kanske du är bättre av att använda designalternativ än kod. Om du vill utforska kodalternativ för svävningseffekter, besök den här sidan.
Ta bort svävningseffekter från din design
Om du inte kan anställa en frilansande webbdesigner för att hjälpa dig, kan det vara bättre att ta bort hovringseffekter helt och hållet. Visst ser de snygga ut och kan ge 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 deskriptorinnehållet för punkten du försöker göra eller något annat. Om du inte har kompetensen att implementera jQuery är detta förmodligen det enklaste alternativet.
Lägg till en sekundär meny
En sekundär meny innehåller den första tryckningen som skulle simulera en hovringseffekt. Du kan inkludera informationen i menyn och visa en andra meny inom samma element. Den andra menyn fungerar som det faktiska valet som det skulle hända på ett skrivbord. Den första tryckningen simulerar svävningen av en mus och den andra tryckningen simulerar användaren som utför den primära åtgärden.
Detta är ett snyggt alternativ till hovringseffekter men begränsas av skärmstorleken och begränsar mängden information du kan lägga till din effekt. Hover-effekter är begränsade av sin natur men är mer begränsade på mobilen av den skärmfastighet du har att göra med. Om du verkligen vill inkludera kompletterande data på ett icke-standardiserat sätt kan detta vara det.
Placera svävningsinformationen på sin egen sida
Ett enklare alternativ skulle kanske vara att inkludera svävningsinformationen på sin egen sida med en textlänk. Detta förenklar din meny och gör navigeringen enkel. 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 eller så för att få det att fungera.
Så länge du kan fylla på informationen tillräckligt noggrant så att den läser bra och tillför ett vä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 kompletterande data är upp till dig och beror på din design, men extra sidor ger dig en extra möjlighet att lägga till uppmaningar, lägga till ditt telefonnummer, e-postadress och all extra information som kan användas att göra en försäljning.
Håller med hovren
Om du vill använda någon form av svävningseffekt på din huvudwebbplats, måste du arbeta in den på din mobilsajt, eller åtminstone den mobila versionen. Det finns växlingsmenyalternativ eller JavaScript-lösningar men de kommer att kräva en expert för att implementera. Den här sidan 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. Man måste verkligen designa något man gillar, men när man överväger användbarhet måste man prioritera publiken. Du måste också ta hänsyn till de enheter de kommer att använda och hur de med största sannolikhet kommer att interagera bäst med din webbplats.
Om din publik är ung kommer de att använda mobilen. Om de använder mobil, är hovringseffekter och andra designalternativ som det inte ditt bästa alternativ.
