I mange år har eksperter sagt at trafikken til nettsteder fra besøkende på mobile enheter har økt dramatisk. Av denne grunn har mange bedrifter smart startet å omfavne en mobilstrategi for deres online tilstedeværelse, og skape erfaringer som passer til telefon og andre mobile enheter.
Når du har brukt tiden til å lære å designe nettsider for mobiltelefoner, og implementere strategien din, vil du også være sikker på at nettstedets besøkende kan se disse designene. Det er mange måter du kan gjøre dette på, og noen fungerer bedre enn andre. Her er en titt på metoden du kan bruke til å implementere mobilstøtte på websidene dine - sammen med en anbefaling nær slutten for hva den beste metoden for å oppnå dette er på dagens web!
Gi en lenke til et annet nettstedversjon
Dette er uten tvil den enkleste metoden for å håndtere mobiltelefonbrukere. I stedet for å bekymre deg for om de kan eller ikke kan se sidene dine, kan du bare sette en kobling et sted nær toppen av siden som peker på en egen mobilversjon av nettstedet ditt. Deretter kan leserne selv velge om de vil se mobilversjonen eller fortsette med "normal" versjonen.
Fordelen med denne løsningen er at det er enkelt å implementere. Det krever at du oppretter en optimalisert versjon for mobil og deretter legger til en kobling et sted nær toppen av de vanlige sidene.
Ulempene er:
- Du må opprettholde en egen versjon av nettstedet for mobilbrukere. Siden nettstedet ditt blir større, kan du glemme å opprettholde den andre versjonen, og nettstedene dine kan ikke synkroniseres.
- Oppretter du også en tredje versjon for tabletter? Hva med en fjerde versjon for wearables? Dette konseptet av enhetsspesifikke versjoner kan spiral ut av kontroll veldig raskt.
- Du må sette en stygg lenke øverst på siden som ikke-mobile lesere kan se (og muligens klikke på).
Til slutt er denne tilnærmingen en utdatert en som ikke er en del av en moderne mobilstrategi. Det brukes noen ganger som en stopp-gap-løsning mens en bedre løsning blir utviklet, men det er virkelig et kortsiktig båndhjelp på dette punktet.
Bruk JavaScript
I en variant av den ovennevnte tilnærmingen bruker noen utviklere en type nettleserdeteksjonsskript for å oppdage om kunden er på en mobil enhet og deretter omdirigere dem til det separate mobilnettstedet. Problemet med nettleserdeteksjon og mobile enheter er at det er tusenvis av mobile enheter der ute. For å forsøke å oppdage dem alle med ett JavaScript, kan alle sidene dine bli et nedlastende mareritt - og du er fortsatt gjenstand for mange av de samme ulempene som den ovennevnte tilnærmingen.
Bruk CSS @media Håndholdt
CSS-kommandoen @media-håndholdte virker som om det ville være en ideell måte å vise CSS-stiler bare på for håndholdte enheter - som mobiltelefoner. Dette virker som en ideell løsning for å vise sider for mobile enheter. Du skriver en webside og lager deretter to stilark. Den første for "skjerm" -medietypen utformer siden din for skjermer og dataskjermer. Den andre for "håndholdte" stiler din side for små enheter som de mobile telefonene. Høres enkelt, men det virker ikke egentlig i praksis.
Den største fordelen med denne metoden er at du ikke behøver å opprettholde to versjoner av nettstedet ditt. Du opprettholder bare den ene, og stilarket definerer hvordan det skal se ut - som faktisk kommer nærmere slutten løsningen vi ønsker.
Et problem med denne metoden er at mange telefoner ikke støtter medietypen - de viser sine sider med skjermmedietypen i stedet. Og mange eldre mobiltelefoner og håndholdte støtter ikke CSS i det hele tatt. Til slutt er denne metoden upålitelig og brukes derfor sjelden til å levere mobile versjoner av et nettsted.
Bruk PHP, JSP, ASP til å oppdage brukeragenten
Dette er en mye bedre måte å omdirigere mobilbrukere til en mobilversjon av nettstedet fordi den ikke stole på et skriptspråk eller CSS som den mobile enheten ikke bruker. I stedet bruker den et server-side språk (PHP, ASP, JSP, ColdFusion, etc.) for å se brukeragenten og deretter endre HTTP-forespørselen for å peke på en mobilside hvis den er en mobilenhet.
En enkel PHP-kode for å gjøre dette ser slik ut:
stristr ($ ua, "Windows CE") ellerstristr ($ ua, "AvantGo") ellerstristr ($ ua, "Mazingo") ellerstristr ($ ua, "Mobile") ellerstristr ($ ua, "T68") ellerstristr ($ ua, "Syncalot") ellerstristr ($ ua, "Blazer")) {$ DEVICE_TYPEen = "MOBILE";}hvis (isset ($ DEVICE_TYPE) og $ DEVICE_TYPE == "MOBILE") {$ Location = 'mobil / index.php';header ('Location:'. $ location);exit;}?>
Problemet her er at det er mange andre potensielle brukeragenter som brukes av mobile enheter. Dette skriptet vil fange og omdirigere mange av dem, men ikke alle på noen måte. Og flere blir lagt hele tiden.
I tillegg til de andre løsningene ovenfor må du fortsatt opprettholde et eget mobilnettsted for disse leserne! Denne ulempen ved å måtte administrere to (eller flere!) Nettsteder er grunn nok til å oppsøke en bedre løsning.
Bruk WURFL
Hvis du fortsatt er fast bestemt på å omdirigere mobilbrukere til et eget nettsted, er WURFL (Wireless Universal Resource File) en god løsning. Dette er en XML-fil (og nå en DB-fil) og ulike DBI-biblioteker som ikke bare inneholder oppdaterte data for trådløs brukeragent, men også hvilke funksjoner og muligheter disse brukeragenter støtter.
For å bruke WURFL, laster du ned XML-konfigurasjonsfilen og velger deretter ditt språk og implementerer API-en på nettstedet ditt. Det finnes verktøy for å bruke WURFL med Java, PHP, Perl, Ruby, Python, Net, XSLT og C ++.
Fordelen med å bruke WURFL er at det er mange mennesker som oppdaterer og legger til config-filen hele tiden. Så mens filen du bruker, er utdatert nesten før du har lastet ned den, er det sjanse for at hvis du laster ned det en gang i måneden eller så, har du alle de mobile nettleserne dine lesere vanligvis bruker uten noen problemer. Ulempen er selvsagt at du stadig må laste ned og oppdatere dette - alt slik at du kan lede brukere til et annet nettsted og ulempene som skaper.
Den beste løsningen er responsiv design
Så hvis du opprettholder forskjellige steder for forskjellige enheter, er ikke svaret, hva er det? Responsivt webdesign.
Responsive design er der du bruker CSS media spørringer for å definere stiler for enheter av ulike bredder. Responsive design lar deg lage en webside for både mobile og ikke-mobile brukere. Da trenger du ikke å bekymre deg for hvilket innhold som skal vises på mobilnettstedet, eller husk å overføre de siste endringene til mobilnettstedet ditt. Pluss, når du har CSS skrevet, trenger du ikke laste ned noe nytt.
Responsive design fungerer kanskje ikke perfekt på ekstremt gamle enheter og nettlesere (de fleste er svært småbrukere i dag, og bør ikke være mye bekymring for deg), men fordi det er additiv (legger stiler på innholdet, i stedet for å ta innhold bort) disse leserne vil fortsatt kunne lese nettstedet ditt, det vil bare ikke se ideelt ut på den gamle enheten eller nettleseren.
