Vi använder allt oftare våra smarta telefoner för att surfa på nätet. Så hur ska man skapa en hemsida som fungerar på både telefoner och vanliga datorskärmar? Hemsida24 ger dig tips om hur du gör det lättare för din hemsida att se bra ut på mobilskärmen.
Mer och mer internettrafik går via de smarta telefonerna, och det är inte så konstigt – de kan ju användas nästan var och när som helst och har blivit oumbärliga för många som snabbt vill ha information när de inte har tillgång till en dator.
Men många hemsidor som är snygga och lättanvända på en datorskärm blir klumpiga och svåra att läsa på en smart telefon, ofta för att man inte har tänkt på telefonens mindre format eller att stora sidor tar lång tid att ladda. Därför kan det vara bra att ha mobiltelefonens besökare i åtanke när du skapar din hemsida: hur vill du att din sida ska se ut när man besöker den via en smart telefon?
När besökare kommer till din hemsida via mobilen är de oftast på en plats där de inte har dator och har kanske inte lika sort intresse av att surfa runt på din sida. Försök därför att hålla din hemsida så ren och enkel som möjligt: börja med det viktigaste, och undvik långa texter.
Den största skillnaden mellan en datorskärm och en smart telefon är självklart storleken: den smarta telefonens skärm gör att hemsidor ”skalas ner” till en mindre version. Det innebär att många saker ska få plats på ett litet utrymme, vilket i värsta fall ge ett rörigt och svårnavigerat intryck om hemsidan är gjord på fel sätt. Fundera därför på enkelheten i sidan du skapar: använd mycket vitt, hoppa över bakgrundsbilder och mönster, och placera det mest centrala högt upp på din sida.
En annan viktig skillnad mellan telefoner och datorer är att telefonernas skärmar är vertikala, till skillnad från dators horisontella form. Tänk därför vertikalt när du designar en hemsida som ska fungera på mobilen. Lägg ditt material i spalter, och använd gärna inte mer än två eller tre kolumner – huvudregeln är att det är lättare att bläddra uppåt och nedåt än åt sidorna på en mobilskärm.
Många hemsidor har menyer eller länkar längst upp på sidan. Dessa fungerar bra på en dator men kan på mobilen riskera att ta över skärmen. Det är viktigt att besökaren genast får en uppfattning av hemsidans innehåll vid första anblick – undvik därför att lägga in länkar och knappar som inte är helt viktiga för innehållet högst upp: besökaren ska inte behöva bläddra långt ner på sidan för att komma till huvudmaterialet.
Mobiltelefoner används ofta utomhus, och på många telefonskärmar kan det vara svårt att se innehåll i exempelvis dagsljus. Tänk därför på att inte använda för starka eller klara färger på din hemsida – enkla kontraster, svart på vitt, fungerar i regel bäst på telefonskärmen.
När det gäller bilder så skalas de ned till mindre storlek i mobilläsarens fönster, men i vissa fall kan bilder ge upphov till problem om de är i fel filformat eller är för stora i storlek. Undvik därför alltför många eller stora bilder – det är bättre om hemsidan går snabbt att ladda än att den är fylld med bilder (om de inte är viktiga!) – och håll dig till .jpeg eller .png-filer för att inte riskera att bilderna inte skalas ned korrekt.
Om materialet på en hemsida är för tungt kan det alltså ta lång tid att ladda sidan på telefonen. Om du har mycket material – dela upp det i undergrupper som du exempelvis länkar till via en sidokolumn. Det här är en balansgång – samtidigt som du inte vill att hemsidan ska laddas långsamt vill du ju inte heller att besökare ska behöva leta omkring för länge efter informationen. Testa lite och se hur olika uppdelningar känns innan du bestämmer dig.
Java och Flash fungerar dåligt på mobiler, och filmer tenderar att ta mycket plats och upplevas som störande i mobiltelefonsfönstret. Håll dig alltså borta från sådana element om du vill att din hemsida ska vara smidig att surfa på i mobilen.
