Hvordan konvertere et nettsted for en mobil nettleser

Mobile enheter, som smarttelefoner og nettbrett, står for mer enn halvparten av all internettrafikk. Likevel, ifølge forskning gjort av BrightEdge i 2014, er ikke over en fjerdedel av nettstedene folk besøker konfigurert riktig for disse enhetene, og koster dem i gjennomsnitt 68 prosent tap av trafikk. Riktig modifisering av ditt eget nettsted for mobile nettlesere krever planlegging og testing. Selve kodingen er imidlertid 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.

Vanlige plattformer

Siden adventen av iPhone har utviklere bak nettstedplattformer som WordPress, Joomla og Drupal integrert mobildesign. Drupal, for eksempel, kommer med mobilvennlige temaer i sin opprinnelige installasjon. Hver av disse plattformene har mobile temaer som er designet for å sparke inn så snart nettstedet ditt oppdager at det blir åpnet av en mobil nettleser. Andre temaer er allerede mobilvennlige og vil svare på berøringsbevegelser akkurat som de svarer på museklikk, uten å endre utformingen eller utformingen av nettstedet ditt på tvers av forskjellige enheter.

Bruker CSS og HTML

For HTML-nettsteder, bruk et kaskadestilark eller CSS-fil for å presentere mobilversjonen av sidene dine når de er tilgjengelige via en mobil nettleser. Selv om det er mulig å kode CSS for å oppdage spesifikke enheter, er en mer vanlig tilnærming å spesifisere oppsett basert på skjermstørrelse i piksler. Hvis ønskelig, kan du ha en stil for store skjermer, en for nettbrett og en for mobiltelefoner. Bruk av CSS har den ekstra fordelen at du bare trenger å skrive koden en gang - i CSS-filen. Hver av sidene dine trenger da bare en enkelt kodelinje for å tegne stilene fra CSS.

Berøringsskjerm interaktive funksjoner

Hvis du har konfigurert en webside til å være en interaktiv opplevelse for besøkende som bruker JavaScript eller HTML5, er det viktig at du vet hvordan nettstedet ditt vil reagere på berøringshendelser, ikke bare i en mobil nettleser, men også på et økende antall berøringsskjermdisker. . I de fleste tilfeller bør du vurdere å legge til berøringshendelser og bevegelser i designkoden. I JQuery, for eksempel, tilsvarer et museklikk på en berøringsskjerm en trykkhendelse, utløst når en bruker berører og deretter løfter en finger fra skjermen. Avhengig av siden din, vil du kanskje også deaktivere standardinnstillingene i mobilnettleseren, for eksempel å klype for å zoome eller dra for å bla, ved å bruke "preventDefault" -hendelser.

Testing og verifisering

Den beste måten å teste ditt nye mobile nettsted er å bruke din egen mobile enhet. Undersøk stilen og sidelayouten, naviger med berøringer og bevegelser, og se nøye på bildene dine for å sikre at de ser skarpe ut. Du kan også bruke datamaskinens nettleser til å etterligne en mobilskjerm. På Google Chrome, for eksempel, trykk "F12" for å åpne utviklerkonsollen. Klikk på "Innstillinger" -ikonet og deretter på "Emulering" -fanen for å velge en enhet som en Google Nexus eller Apple iPad.