Etikettarkiv: viewport

Anpassa din sajt för mobiler

iphone_heroVi lever i en tid då fler och fler surfar med sina mobiltelefoner, och den utvecklingen lär knappast stanna av. Därför blir det allt viktigare att mobilanpassa din webbsida för att inte missa en allt större del av dina potentiella besökares surftider.

Även om mobiltelefoner som t ex Iphone hanterar fullstora sidor på ett schysst sätt trots sin lilla skärm så finns det stora fördelar med att anpassa din sajt. Dels slipper användaren zooma in och ut frenetiskt, men framför allt så kan du hålla ner tyngden på sidan och på så sätt göra det drägligt att surfa på den även med låga uppkopplingshastigheter (utbyggnaden av snabba mobilnät har ju en bit kvar för att vara helt tillfredsställande).

De stora problemen när man ska anpassa sin sajt för mobiltelefoner är den hejdlösa mängden storlekar på skärmar och den otroligt varierande kvaliteten på webbläsarna.

Det är helt enkelt ett offantligt arbete att se till att sidan fungerar på alla upptänkliga mobiltelefoner. Därför är det smart att börja med att anpassa efter de telefoner som användas mest för att surfa med. Om man får tro den statistik jag hittat på nätet från t ex IDG.se och Webbdevelopersnotes.com så står Iphone och Ipod Touch just nu för 50-70% av allt mobilt surfande. Detta kommer självklart att ändras med tiden då fokus hos många tillverkare ligger på att få till en bättre surfupplevelse i mobilen. Men genom att anpassa din sajt för Iphone så kommer den att fungera bra i många andra moderna mobila webbläsare också.

  1. Det första du bör göra är som sagt att se till att sidan inte är tungladdad. Strukturera om och ta bort så mycket överflödiga element som möjligt. Man bör även passa sig lite för javascript, dels är stödet lite si och så (även om det fungerar i princip smärtfritt i just Iphone), men det kan även tynga ner sajten rejält.
  2. Med hjälp av metataggen ”viewport” kan du sedan se till att bredden på sidan anpassas efter skärmen på telefonen. Många moderna webbläsare har stöd för viewport, t ex de i Iphone, Android, Blackberry samt Opera Mobile.
    <meta name=”viewport” content=”width=
    device-width, initial-scale=1.0″/>
  3. Akta dig sedan för att sätta fasta storlekar på objekt på sajten, använder du istället procentsatser kan sidan anpassa sig riktigt bra efter olika skärmars storlekar.
  4. Sedan 2006 finns en toppdomänen ”.mobi” som enbart är tänkt för mobilsajter. Så när du ändå är igång, passa på att regga ditt namn även som .mobi (119:-/år) och styr den till din nya fina mobilsajt. Med hjälp av tipslänkarna nedan kan du dessutom automatiskt peka om de som besöker din vanliga sajt från en mobiltelefon till den mobilanpassade sidan.

Länkar till flera tips i ämnet:

Lycka till!

Ni som redan har mobila sajter, kom gärna med tips och lägg upp länkar till era sajter i kommentarerna som inspiration.

Dela detta inlägg: