Sådan konverteres et websted til en mobilbrowser

Mobilenheder, som smartphones og tablets, tegner sig for mere end halvdelen af ​​al internettrafik. Alligevel, ifølge undersøgelser foretaget af BrightEdge i 2014, er over en fjerdedel af de websteder, som folk besøger, ikke konfigureret korrekt til disse enheder - hvilket koster dem et gennemsnit på 68 procent tab i trafik. Korrekt ændring af dit eget websted til mobile browsere kræver planlægning og test. Selve kodningen er dog normalt ikke særlig udfordrende, især hvis du allerede er fortrolig med CSS. Hvis du bruger en platform som WordPress, behøver du slet ikke kende kode.

Fælles platforme

Siden fremkomsten af ​​iPhone har udviklere bag webstedsplatforme som WordPress, Joomla og Drupal integreret mobildesign. Drupal kommer for eksempel med mobilvenlige temaer i sin oprindelige installation. Hver af disse platforme har mobile temaer, der er designet til at sparke ind, så snart dit websted registrerer, at det bliver åbnet af en mobilbrowser. Andre temaer er allerede mobilvenlige og reagerer på berøringsbevægelser, ligesom de reagerer på museklik uden at ændre designet eller layoutet på dit websted væsentligt på tværs af forskellige enheder.

Brug af CSS og HTML

For HTML-websteder skal du bruge et kaskadestilark eller CSS-fil til at præsentere mobilversionen af ​​dine sider, når de er tilgængelige via en mobilbrowser. Mens det er muligt at kode CSS for at detektere bestemte enheder, er en mere almindelig tilgang at specificere layout baseret på skærmstørrelse i pixels. Hvis det ønskes, kan du have en stil til store skærme, en til tablets og en til mobiltelefoner. Brug af CSS har den ekstra fordel, at det kun er nødvendigt at skrive koden én gang - i CSS-filen. Hver af dine sider behøver derefter kun en enkelt linje kode for at tegne dens stilarter fra CSS.

Berøringsskærms interaktive funktioner

Hvis du har konfigureret en webside til at være en interaktiv oplevelse for besøgende, der bruger JavaScript eller HTML5, er det vigtigt, at du ved, hvordan dit websted reagerer på berøringsbegivenheder, ikke kun i en mobilbrowser, men også på et stigende antal berøringsskærmdesktops. . I de fleste tilfælde bør du overveje at tilføje berøringsbegivenheder og bevægelser til din designkode. I JQuery er f.eks. Svaret til et museklik på en berøringsskærm en taphændelse, udløst når en bruger rører ved og derefter løfter en finger fra skærmen. Afhængigt af din side vil du muligvis også deaktivere standardindstillingerne i mobilbrowseren, som at klemme for at zoome eller trække for at rulle ved at bruge "preventDefault" -hændelser.

Test og verifikation

Den bedste måde at teste dit nye mobile websted på er at bruge din egen mobile enhed. Undersøg stilen og sidelayoutet, naviger med berøringer og bevægelser, og se nøje på dine billeder for at sikre, at de ser skarpe ud. Du kan også bruge din computers webbrowser til at efterligne en mobil skærm. I Google Chrome skal du f.eks. Trykke på "F12" for at åbne udviklerens konsol. Klik på ikonet "Indstillinger", og klik derefter på fanen "Emulering" for at vælge en enhed som en Google Nexus eller Apple iPad.