Hur man konverterar en webbplats till en mobilwebbläsare

Mobila enheter, som smartphones och surfplattor, står för mer än hälften av all internettrafik. Ändå, enligt forskning utförd av BrightEdge 2014, är över en fjärdedel av webbplatserna som människor besöker inte konfigurerade ordentligt för dessa enheter - vilket kostar dem i genomsnitt 68 procent förlust av trafik. För att korrekt ändra din egen webbplats för mobila webbläsare krävs planering och testning. Kodningen i sig är dock vanligtvis inte särskilt utmanande, särskilt om du redan är bekant med CSS. Om du använder en plattform som WordPress behöver du inte veta koden alls.

Gemensamma plattformar

Sedan iPhone kom, har utvecklare bakom webbplatsplattformar som WordPress, Joomla och Drupal integrerat mobil design. Drupal kommer till exempel med mobilvänliga teman i sin ursprungliga installation. Var och en av dessa plattformar har mobila teman som är utformade för att starta så snart din webbplats upptäcker att den nås av en mobilwebbläsare. Andra teman är redan mobilvänliga och kommer att svara på beröringsgester precis som de svarar på musklick, utan att väsentligt ändra designen eller layouten på din webbplats över olika enheter.

Använda CSS och HTML

För HTML-webbplatser använder du ett kaskad stilark eller CSS-fil för att presentera mobilversionen av dina sidor när de nås via en mobilwebbläsare. Även om det är möjligt att koda CSS för att upptäcka specifika enheter, är en vanligare metod att specificera layouter baserat på skärmstorlek i pixlar. Om så önskas kan du ha en stil för stora skärmar, en för surfplattor och en för mobiltelefoner. Att använda CSS har den extra fördelen att man bara behöver skriva koden en gång - i CSS-filen. Var och en av dina sidor behöver då bara en rad kod för att rita dess stilar från CSS.

Pekskärms interaktiva funktioner

Om du har konfigurerat en webbsida för att vara en interaktiv upplevelse för besökare som använder JavaScript eller HTML5, är det viktigt att du vet hur din webbplats kommer att reagera på pekhändelser, inte bara i en mobil webbläsare utan också på ett växande antal pekskärmsdatorer. . I de flesta fall bör du överväga att lägga till beröringshändelser och gester i din designkod. I JQuery är till exempel motsvarigheten till ett musklick på en pekskärm en kranhändelse, utlöst när en användare rör och sedan lyfter ett finger från skärmen. Beroende på din sida kanske du också vill inaktivera standardinställningarna i mobilwebbläsaren, som att klämma för att zooma eller dra för att bläddra, genom att använda "preventDefault" -händelser.

Testning och verifiering

Det bästa sättet att testa din nya mobila webbplats är att använda din egen mobila enhet. Undersök stilen och sidlayouten, navigera med beröringar och gester och titta noga på dina bilder för att se till att de ser skarpa ut. Du kan också använda datorns webbläsare för att emulera en mobilskärm. I Google Chrome trycker du till exempel på "F12" för att öppna utvecklarens konsol. Klicka på ikonen "Inställningar" och klicka sedan på fliken "Emulering" för att välja en enhet som en Google Nexus eller Apple iPad.