Mobilanpassad hemsida
Fler och fler inser att en mobilanpassad hemsida kan få fler besökare att stanna på deras hemsidor och att det även har en direkt effekt på hur många besökare som konverterar (blir betalande kunder). I denna artikeln ska jag försöka förklara vad mobilanpassad hemsida innebär och lite övergripande hur man går tillväga för att göra sin webbdesign mobilanpassad.
Fördelarna med mobilanpassad hemsida
Fler och fler surfar med surfplattor och mobiltelefoner varje dag. Nya typer av enheter med olika storlekar på skärmar kommer hela tiden och alla är kopplade till internet. Att inte anpassa sin hemsida efter dessa enheter är som att be om att tappa potentiella kunder. Surfar man på sin mobil och kommer till en sida som känns krångligt uppbyggd så lämnar man den sidan ganska kvickt. Om man då istället anpassat hemsidan efter mobiler så att den fungerar precis lika smidigt i telefonen som om man hade surfat till den från en dator så ökar man möjligheten att denna besökare ska bli en ny kund.
Hur man bygger en mobilanpassad hemsida
För att bygga en mobilanpassad hemsida använder man sig av en teknik som kallas Responsiv webbdesign. Responsiv webbdesign fungerar på så sätt att man i sin CSS-kod som styr utseendet på sidan sätter en basdesign att falla tillbaka på. Därefter kan man sätta flera olika designer som styrs av bredden på enheten man surfar på. Om man t.ex. surfar på en enhet som är 480 pixlar bred så skulle man kunna bygga en egen design för denna bredd genom att t.ex. använda sig av nedan kod.
@media only screen and (max-width: 500px) {
/* Specifik designkod för enheter mindre än 500 pixlar */
}
Ofta så har man flera av dessa kodstycken för att designen ska ändras beroende på vilken typ av enhet man har. Det bästa användningsområdet för responsiv webbdesign tycker jag är att ändra utseendet på menyer. På en vanlig datorskärm som oftast är relativt bred så är det bäst att bygga menyvalen på bredden. När bredden på enheten är mindre som i t.ex. en telefon så börjar det istället bli bättre att bygga menyvalen på höjden, och för att göra detta extra smidigt så brukar man slå ihop alla menyval till en rullgardinsmeny. Detta tycker jag fungerar väldigt bra och är en riktigt snygg lösning.
Här finns ett exempel på en sida jag byggt med responsiv webbdesign. Testa gärna att förstora/förminska fönstret om du surfar från en dator så får du se hur sidan förändras beroende på vilken bredd du har på fönstret.
Jag hjälper gärna till att mobilanpassa er befintliga hemsida, eller om ni hellre vill skapa en hemsida där mobilanpassning ingår. Kontakta mig gärna så kan vi diskutera saken.
