Experts zeggen al jaren dat het verkeer naar websites van bezoekers op mobiele apparaten enorm is toegenomen. Om deze reden zijn veel bedrijven slim begonnen met het omarmen van een mobiele strategie voor hun online aanwezigheid, het creëren van ervaringen die geschikt zijn voor telefoon en andere mobiele apparaten.
Nadat u de tijd hebt genomen om webpagina's voor mobiele telefoons te ontwerpen en uw strategie te implementeren, moet u er ook voor zorgen dat de bezoekers van uw site die ontwerpen kunnen zien. Er zijn veel manieren om dit te doen en sommige werken beter dan andere. Hier is een blik op de methode die u kunt gebruiken om mobiele ondersteuning op uw websites te implementeren - samen met een aanbeveling aan het einde voor wat de beste methode om dit te bereiken is op het internet van vandaag!
Geef een link naar een andere siteversie
Dit is verreweg de gemakkelijkste manier om mobiele telefoongebruikers te gebruiken. In plaats van zorgen te maken of ze uw pagina's wel of niet kunnen zien, plaatst u eenvoudig een link bovenaan de pagina die naar een afzonderlijke mobiele versie van uw site verwijst. Vervolgens kunnen de lezers zelf kiezen of ze de mobiele versie willen zien of doorgaan met de "normale" versie.
Het voordeel van deze oplossing is dat deze eenvoudig te implementeren is. Hiervoor moet u een geoptimaliseerde versie voor mobiel maken en vervolgens een link toevoegen ergens in de buurt van de bovenkant van de normale site-pagina's.
De nadelen zijn:
- U moet een afzonderlijke versie van de site bijhouden voor mobiele gebruikers. Naarmate uw site groter wordt, kunt u vergeten die tweede versie te onderhouden en kunnen uw sites niet meer synchroon lopen.
- Maak je ook een derde versie voor tablets? Wat dacht je van een vierde versie voor wearables? Dit concept van apparaatspecifieke versies kan zeer snel uit de hand lopen.
- U moet een lelijke link boven aan de pagina plaatsen die niet-mobiele lezers kunnen zien (en mogelijk op klikken).
Uiteindelijk is deze aanpak een verouderde methode die waarschijnlijk geen deel zal uitmaken van een moderne mobiele strategie. Het wordt soms gebruikt als een stop-gap fix terwijl er een betere oplossing wordt ontwikkeld, maar het is echt een korte-termijn pleister op dit moment.
Gebruik JavaScript
In een variant van de bovengenoemde benadering gebruiken sommige ontwikkelaars een bepaald type browsedetectiescript om te detecteren of de klant zich op een mobiel apparaat bevindt en vervolgens door te sturen naar die afzonderlijke mobiele site. Het probleem met browserdetectie en mobiele apparaten is dat er duizenden mobiele apparaten zijn. Als u probeert ze allemaal met één JavaScript te detecteren, kan dit al uw pagina's omtoveren tot een download-nachtmerrie - en u ondervindt nog steeds veel van dezelfde nadelen als de bovengenoemde aanpak.
Gebruik CSS @media Handheld
De CSS-opdracht @media-rekenmachine lijkt een ideale manier om CSS-stijlen weer te geven voor draagbare apparaten, zoals mobiele telefoons. Dit lijkt een ideale oplossing voor het weergeven van pagina's voor mobiele apparaten. U schrijft één webpagina en maakt vervolgens twee stijlpagina's. De eerste voor het mediatype "scherm" geeft uw pagina een stijl voor monitoren en computerschermen. De tweede voor de "handheld" vormt je pagina voor kleine apparaten zoals die mobiele telefoons. Klinkt eenvoudig, maar in de praktijk werkt het niet echt.
Het grootste voordeel van deze methode is dat u niet twee versies van uw website hoeft te onderhouden. U behoudt gewoon die ene en de stylesheet bepaalt hoe deze eruit zou moeten zien - wat eigenlijk dichter bij de uiteindelijke oplossing komt die we willen.
Een probleem met deze methode is dat veel telefoons het mediatype niet ondersteunen; in plaats hiervan geven ze hun pagina's weer met het schermmediatype. En veel oudere mobiele telefoons en handhelds ondersteunen helemaal geen CSS. Uiteindelijk is deze methode onbetrouwbaar en wordt daarom zelden gebruikt om mobiele versies van een website te leveren.
Gebruik PHP, JSP, ASP om de User-agent te detecteren
Dit is een veel betere manier om mobiele gebruikers om te leiden naar een mobiele versie van de website omdat deze niet afhankelijk is van een scriptingtaal of CSS die het mobiele apparaat niet gebruikt. In plaats daarvan gebruikt het een taal aan de serverkant (PHP, ASP, JSP, ColdFusion, enz.) Om de user-agent te bekijken en vervolgens het HTTP-verzoek te wijzigen om naar een mobiele pagina te verwijzen als het een mobiel apparaat is.
Een eenvoudige PHP-code om dit te doen zou er als volgt uitzien:
stristr ($ ua, "Windows CE") ofstristr ($ ua, "AvantGo") ofstristr ($ ua, "Mazingo") ofstristr ($ ua, "Mobile") ofstristr ($ ua, "T68") ofstristr ($ ua, "Syncalot") ofstristr ($ ua, "Blazer")) {$ DEVICE_TYPE = "MOBILE";}if (isset ($ DEVICE_TYPE) en $ DEVICE_TYPE == "MOBILE") {$ Locatie = 'mobile / index.php';header ('Locatie:'. $ locatie);Uitgang;}?>
Het probleem hier is dat er veel en veel andere potentiële user-agents zijn die worden gebruikt door mobiele apparaten. Dit script zal veel van hen vangen en omleiden, maar niet allemaal. En er worden er steeds meer aan toegevoegd.
Plus, net als bij de andere oplossingen hierboven, moet je nog steeds een aparte mobiele site hebben voor deze lezers! Dit nadeel van het moeten beheren van twee (of meer!) Websites is reden genoeg om een betere oplossing te zoeken.
Gebruik WURFL
Als u nog steeds vastbesloten bent om uw mobiele gebruikers om te leiden naar een aparte site, dan is WURFL (Wireless Universal Resource File) een goede oplossing. Dit is een XML-bestand (en nu een DB-bestand) en verschillende DBI-bibliotheken die niet alleen up-to-date gegevens over draadloze gebruikersagent bevatten, maar ook welke functies en mogelijkheden die user-agents ondersteunen.
Om WURFL te gebruiken, downloadt u het XML-configuratiebestand en kiest u vervolgens uw taal en implementeert u de API op uw website. Er zijn tools voor het gebruik van WURFL met Java, PHP, Perl, Ruby, Python, Net, XSLT en C ++.
Het voordeel van het gebruik van WURFL is dat er veel mensen zijn die het bestand constant bijwerken en toevoegen aan het configuratiebestand. Dus hoewel het bestand dat je gebruikt, is verouderd voordat je het hebt gedownload, is de kans groot dat als je het een keer per maand downloadt, je alle browsers hebt die je lezers gewoonlijk gebruiken zonder problemen. Het nadeel is natuurlijk dat je dit continu moet downloaden en updaten, zodat je gebruikers naar een tweede website kunt leiden en de nadelen die dit met zich meebrengt.
De beste oplossing is responsief ontwerp
Dus als het bijhouden van verschillende sites voor verschillende apparaten niet het antwoord is, wat dan wel? Responsief webontwerp.
Bij responsief ontwerp gebruikt u CSS-mediaquery's om stijlen te definiëren voor apparaten met verschillende breedten. Met responsief ontwerp kunt u één webpagina maken voor zowel mobiele als niet-mobiele gebruikers. Dan hoeft u zich geen zorgen te maken over welke inhoud u op de mobiele site wilt weergeven of onthoudt u de laatste wijzigingen aan uw mobiele site over te dragen. En als je eenmaal de CSS hebt geschreven, hoef je niets nieuws te downloaden.
Responsief ontwerp werkt mogelijk niet perfect op extreem oude apparaten en browsers (de meeste daarvan zijn tegenwoordig erg klein en het zou geen zorgelijk moment voor u moeten zijn), maar omdat het additief is (stijlen toevoegen aan de inhoud, in plaats van inhoud te nemen) weg) zullen deze lezers uw website nog steeds kunnen lezen, het ziet er gewoon niet ideaal uit op hun oude apparaat of browser.
