Anpassa din sajt för mobiler

Vi 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:

• 29 guider för att hjälpa dig att bygga din mobila sajt
• Snyggt och roligt statistikverktyg att lägga in på din mobila sida, för att hålla koll vad dina besökare använder för telefoner.
• För att anpassa din sida specifikt till olika webbläsare, eller för att automatiskt skicka mobilbesökare till din mobilsajt, behöver du identifiera besökarens webbläsare/telefon:
  • Här finns en färdig PHP-lösning för detta
  • Använder du .NET  så är det parametern IsMobileDevice i objektet HttpBrowserCapabilities som gäller. Vilka telefoner som identifierar sig korrekt i denna parameter hittar du här
• Lista med information om hur bra olika modeller stödjer CSS
• Det är tyvärr ont om emulatorer för mobila webbläsare, så möjligheten att testa på olika enheter utan att ha tillgång till dem rent fysiskt är liten. Men i den här wikin finns åtminstone tips på några stycken.
• Apples tips om att anpassa sajten för Iphone

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.