Mobilanpassad hemsida

Klicka på knappen ÖVRIGT för att komma åt funktionen MOBILANPASSAD HEMSIDA.

Den här funktionen gör hemsidans mall "responsiv" vilket innebär att den anpassar sig efter upplösningen på besökarens skärm. Funktionen ändrar inte på hemsidans innehåll utan endast hur det presenteras för dina besökare. Du kan därför obehindrat välja att aktivera och deaktivera funktionen när du vill beroende på vad du föredrar eller för att bara testa tillfälligt.

 

Vad bör jag tänka på?

Med en mobilanpassad hemsida som anpassar sig efter besökarens skärm så ställs även lite högre krav på hemsidans innehåll för att det ska visas på ett bra sätt för alla besökare. Här nedan beskrivs ett antal råd och tips som är bra att följa.

Ta hänsyn till besökare med långsam uppkoppling

För att verkligen göra en hemsida mobilanpassad så är det viktigt att inte glömma bort de besökare som surfar från sin mobil via t.ex. en långsam 3G-uppkoppling. Det är inte alla som har konstant tillgång till ett snabbt WiFi eller 4G. Undvik därför att fylla sidor med massor av infogade bilder eftersom detta tar tid att hämta och visa om besökarens uppkoppling inte är särskilt bra. Har du många bilder att visa upp så använd hellre ett eller flera bildgallerier då dessa sidor är anpassade för att hantera och visa stora mängder bilder.

Var även försiktig med egna JavaScript som har lagts in på hemsidan för att t.ex. visa väder, världsklockor, information om besökaren m.m. Vad alla dessa script gör är att efterfråga och hämta information från en tredje part utanför oss. Om de är långsamma eller levererar ett innehåll som inte är särskilt mobilvänligt så går det ut över din egen hemsida.

Undvik stora tabeller med fasta bredder

Det som huvudsakligen justeras och anpassas efter besökaren när responsiv design används är hemsidans bredd för att allt innehåll ska få plats på ett bra sätt utan att behöva scrolla sidan i sidled eller zooma ut. Men om något av hemsidans eget innehåll har en fast bredd och inte kan anpassas så kommer den delen av innehållet att delvis hamna utanför sidan, vilket så klart inte ser särskilt bra ut. Undvik därför stora tabeller med fast bredd eftersom dessa delvis kommer att hamna utanför hemsidan på många mobiler som inte har högupplösta skärmar.

Två mellanslag är ett för mycket

Att justera text och annat innehåll med hjälp av flera mellanslag efter varandra bör alltid undvikas på alla typer av hemsidor, men i synnerhet på hemsidor som är responsiva. Anledningen är att flera mellanslag efter varandra skapar ett så kallat "non-breaking space". Vad det betyder är ett mellanslag som inte radbryts. En lång rad med mellanslag kan därför skapa ett rad som knuffar iväg texter, bilder och t.o.m. delar av själva mallen. Detta blir mycket mer påtagligt på en responsiv hemsida när den visas på en smartphone med liten lågupplöst skärm där inte lika mycket utrymme på bredden finns att tillgå.

Ett enkelt sätt att hitta rader med mellanslag, samt tomma stycken, är att gå till en sida på hemsidan och trycka Ctrl-A (Cmd-A för Mac) på tangentbordet för att markera allt innehåll. Även rader med mellanslag blir då markerade och lyser upp i blått. Hemsidans innehåll kan på det sättet snabbt kontrolleras ifall delar av innehållet verkar ligga placerad utanför mallen eller inte radbryts på samma sätt som resterande innehåll.

Klistra inte in vad som helst på hemsidan

Undvik att klistra in texter eller annat innehåll som har kopierats direkt från andra hemsidor eller dokument. Det är visserligen ett smidigt och tidsbesparande sätt att infoga innehåll vid redigering. Men det kan ibland ställa till med problem. Förutom det som markerades och kopierades så följer även all formatering och annan kod (instruktioner) med i bakgrunden. Det kan i sin tur ställa till med olika bekymmer för vissa webbläsare som inte kommer att kunna visa innehållet på hemsidan så som det var tänkt. Därför är det alltid bäst att först "tvätta" bort all formatering och annat innan texten slutligen klistras in på hemsidan. Här kan du läsa mer om att tvätta texter.

 

Hur vet jag hur hemsidan ser ut för mina besökare?

Om du inte har någon egen mobil (smartphone) men ändå vill veta hur hemsidan ser ut för besökare när funktionen för mobilanpassning används så finns det ett flera externa tjänster för detta som kan vara till hjälp. Här är två exempel:

MobileTest

Screenfly

Observera att tjänster som dessa bara emulerar olika skärmupplösningar på vanliga mobiler och surfplattor. Hur hemsidan verkligen ser ut på en viss mobil kan bara avgöras genom att faktiskt använda just den mobilen. För precis som med vanliga datorer så kan olika webbläsare hantera innehåll och funktioner på hemsidor lite olika även om de alla strävar efter att följa alla standarder.