Hur du mobilanpassar din webbsida

Idag är det vanligt att folk använder en mobil enhet när de besöker din webbsida. Är webbsidan inte mobilanpassad kan det innebära att designen inte ser ut som du har tänkt för besökare på en mobiltelefon eller surfplatta. I värsta fall fungerar inte webbsidan alls, vilket innebär att du går miste om trafik. I Sverige är det inte ovanligt att personer som tänkt köpa något via nätet helt enkelt avstår om webbsidan inte är mobilanpassad. Därför är det klokt att anta den mobila utmaningen innan det är försent.

Hur du gör för att mobilanpassa

Tanken är att den mobilanpassade sidan ska fungera på samma sätt på en mobil enhet som den hade gjort på datorn. Det betyder att den behöver kunna anpassa sig till mindre skärmstorlekar. Inom webbdesign brukar man använda begreppet “responsiv design”. Vad det innebär i WordPress cmspraktiken är att webbsidan känner av vilken skärmstorlek och skärmupplösning som besökaren har, sedan anpassar den sig.
Använder du ett modernt CMS (Content Management System) för att skapa din webbsida, till exempel WordPress eller Joomla, är det sannolikt att din webbsida redan har responsiv design. På senare år har man blivit allt mer medvetna om hur viktigt det är att mobilanpassa. Detsamma gäller för tillägg och teman till just sådana lösningar. Bygger du din hemsida från grunden måste du däremot se till att menyer och andra delar av webbsidan kan ändra i storlek. Istället för att ange en statisk höjd och bredd i pixlar för ett visst objekt får man koda att den ska utgöra en viss procent av besökarens skärmbredd eller skärmhöjd och så vidare.

Går det att se om en webbsida är mobilanpassad?

Ett enkelt test är att besöka webbsidan med din mobiltelefon. Om den inte anpassar designen till en liten skärm och om menyer och dylikt inte fungerar så är den inte lämplig för mobilanvändare. Även om du sitter vid datorn kan du prova att ändra storleken på webbläsarens fönster och kontrollera att layouten ändras som det är tänkt.

Post A Comment

Your email address will not be published. Required fields are marked *