Konvertera en webbplats för mobilwebbläsare

Mobilenheter, som smartphones och surfplattor, står för mer än hälften av all internettrafik. Enligt en BrightEdge-undersökning från 2014 är dock över en fjärdedel av webbplatserna som besöks inte optimerade för dessa enheter – vilket kostar besökarna i genomsnitt 68 % av trafiken. Att anpassa din egen webbplats för mobilwebbläsare kräver därför planering och testning. Själva koden är ofta inte särskilt krävande, särskilt om du redan behärskar CSS. Använder du en plattform som WordPress behöver du inte ens koda.

Vanliga plattformar

Sedan iPhone lanserades har plattformar som WordPress, Joomla och Drupal integrerat mobilvänlig design. Drupal levereras till exempel med mobilvänliga teman i standardinstallationen. Alla dessa plattformar har teman som aktiveras automatiskt när en mobilwebbläsare upptäcks. Många teman är redan touch‑vänliga och svarar på pekgester på samma sätt som de svarar på mus‑klick, utan att i hög grad förändra layouten på olika enheter.

Använda CSS och HTML

För HTML‑webbplatser är det enklast att använda ett stilark – CSS – för att presentera mobilversionen när sidan öppnas i en mobilwebbläsare. Även om det går att skriva CSS som känner igen specifika enheter, är det vanligare att definiera layouter efter skärmstorlek i pixlar. Du kan skapa ett stilark för stora skärmar, ett för surfplattor och ett för mobiltelefoner. Fördelen med CSS är att du bara skriver koden en gång i stilarket – varje sida behöver då bara en enda rad för att hämta sina stilar.

Interaktiva funktioner för pekskärmar

Om du har skapat en interaktiv upplevelse med JavaScript eller HTML5 är det viktigt att veta hur din webbplats reagerar på pekhändelser, inte bara i mobilwebbläsare utan även på fler och fler pekskärmsdatorer. I de flesta fall bör du lägga till pekhändelser och gester i din kod. I jQuery motsvaras en mus‑klick på en pekskärm av ett tap-event, som triggas när en användare trycker på och sedan lyfter fingret från skärmen. Beroende på din sida kan du också vilja inaktivera standardfunktioner i mobilwebbläsaren – som pinch‑zoom eller dra‑och‑släpp‑scrollning – genom att använda preventDefault-händelser.

Testning och verifiering

Det bästa sättet att testa din nya mobilwebbplats är att använda din egen enhet. Granska stil, layout, navigering med pekgester och kontrollera att bilderna är skarpa. Du kan också emulera en mobilskärm i din dators webbläsare. I Google Chrome trycker du till exempel på F12 för att öppna utvecklarverktygen, klickar på kugghjulsikonen och väljer sedan fliken Emulation för att välja en enhet som Google Nexus eller Apple iPad.