Hvordan konvertere et nettsted for en mobil nettleser

Mobile enheter, som smarttelefoner og nettbrett, står for mer enn halvparten av all Internett-trafikk. Likevel, i henhold til forskning gjort av BrightEdge i 2014, over en fjerdedel av nettstedene folk besøker er ikke riktig konfigurert for disse enhetene - koster dem et gjennomsnitt på 68 prosent tap i trafikken. Riktig å endre ditt eget nettsted for mobile nettlesere krever planlegging og testing. Kodingen seg selv, men er vanligvis ikke veldig utfordrende, spesielt hvis du allerede er kjent med CSS. Hvis du bruker en plattform som WordPress, trenger du ikke å vite kode i det hele tatt.

felles plattformer

Siden advent av iPhone, har utviklerne bak nettstedet plattformer som WordPress, Joomla og Drupal integrert mobil design. Drupal, for eksempel kommer med mobilvennlige temaer i sin opprinnelige installasjonen. Hver av disse plattformene har mobil temaer som er designet for å sparke inn så snart ditt nettsted oppdager det leses av en mobil nettleser. Andre temaer er allerede mobil-vennlige og vil svare på touch gester akkurat som de reagerer på museklikk, uten vesentlig å endre design og layout av nettstedet på tvers av ulike enheter.

Ved hjelp av CSS og HTML

For HTML nettsteder, bruke et stilark, eller CSS, fil for å presentere den mobile versjonen av sidene dine når de er tilgjengelig via en mobil nettleser. Mens det er mulig å kode CSS for å påvise spesifikke enheter, er en mer felles tilnærming til å angi oppsett basert på skjermstørrelsen i piksler. Om ønskelig kan du ha en stil for store skjermer, en for nettbrett og en for mobiltelefoner. Ved hjelp av CSS har den ekstra fordelen av bare å skrive inn koden én gang - i CSS-filen. Hver av sidene dine da trenger bare en eneste linje med kode for å trekke sine stiler fra CSS.

Berøringsskjerm interaktive funksjoner

Hvis du har konfigurert en webside for å være en interaktiv opplevelse for besøkende ved hjelp av Javascript eller HTML5, er det viktig at du vet hvordan nettstedet vil reagere på berøring hendelser, ikke bare på en mobil nettleser, men på et økende antall berøringsskjerm stasjonære også . I de fleste tilfeller bør du vurdere å legge berørings hendelser og gester til design kode. I JQuery, for eksempel, tilsvarer et museklikk på en berøringsskjerm er en kran hendelse, utløses når en bruker berører og deretter løfter en finger fra skjermen. Avhengig av siden din, kan du også ønsker å deaktivere standardinnstillingene på den mobile nettleseren, som knipe for å zoome eller dra for å bla, ved å bruke "preventDefault" hendelser.

Testing og verifisering

Den beste måten å teste den nye mobile nettsted er å bruke din egen mobiltelefon. Undersøk stilen og sideoppsett, navigere med innslag og gester, og se nøye på bildene for å sikre at de ser skarpe. Du kan også bruke datamaskinens nettleser for å etterligne en mobil skjerm. På Google Chrome, for eksempel, trykk "F12" for å åpne utviklerkonsollen. Klikk på "Settings" ikonet og klikk deretter på "emulering" -kategorien for å velge en enhet som en Google Nexus eller Apple iPad.