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, door ervaringen te creëren die geschikt zijn voor telefoons en andere mobiele apparaten.
Als je eenmaal de tijd hebt besteed aan het leren hoe je webpagina's ontwerpen voor mobiele telefoons, en het implementeren van uw strategie, wilt u er ook voor zorgen dat de bezoekers van uw site die ontwerpen kunnen zien. Er zijn veel manieren waarop u dit kunt 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 tegen het einde voor wat de beste methode is om dit te bereiken op het internet van vandaag.
Geef een link naar een andere siteversie
Dit is verreweg de gemakkelijkste methode om met gebruikers van mobiele telefoons om te gaan. In plaats van zich zorgen te maken of ze uw pagina's wel of niet kunnen zien, plaatst u gewoon een link ergens bovenaan de pagina die verwijst naar een afzonderlijke mobiele versie van uw site. 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. Het vereist dat u een geoptimaliseerde versie voor mobiel maakt en vervolgens een link ergens bovenaan de normale sitepagina's toevoegt.
De nadelen zijn:
- Voor mobiele gebruikers moet u een aparte versie van de site onderhouden. Naarmate uw site groter wordt, vergeet u misschien die tweede versie te onderhouden en kunnen uw sites niet meer synchroon lopen.
- Maken jullie 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.
- Je moet een lelijke link bovenaan de pagina plaatsen die niet-mobiele lezers kunnen zien (en eventueel op klikken).
Uiteindelijk is deze aanpak een achterhaalde aanpak die waarschijnlijk geen deel uitmaakt van een moderne mobiele strategie. Het wordt soms gebruikt als een tijdelijke oplossing terwijl er een betere oplossing wordt ontwikkeld, maar het is op dit moment echt een pleister op korte termijn.
JavaScript gebruiken Use
In een variatie op de bovengenoemde aanpak gebruiken sommige ontwikkelaars een soort browserdetectie script om te detecteren of de klant zich op een mobiel apparaat bevindt en deze vervolgens om te leiden naar die afzonderlijke mobiele telefoon plaats. Het probleem met browser detectie en mobiele apparaten is dat er duizenden mobiele apparaten zijn. Als u probeert ze allemaal met één JavaScript te detecteren, kunnen al uw pagina's in een downloadnachtmerrie veranderen - en u ondervindt nog steeds veel van dezelfde nadelen als de bovengenoemde aanpak.
CSS @media Handheld gebruiken
Het CSS-commando @media handheld lijkt een ideale manier om weer te geven CSS stijlen alleen 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 stylesheets. De eerste voor het mediatype "scherm" geeft uw pagina een opmaak voor monitoren en computerschermen. De tweede voor de 'handheld'-stijlen van uw pagina voor kleine apparaten zoals die mobiele telefoons. Klinkt makkelijk, maar in de praktijk werkt het niet echt.
Het grootste voordeel van deze methode is dat je geen twee versies van je website hoeft te onderhouden. Je onderhoudt gewoon die ene, en de and stylesheet bepaalt hoe het eruit moet zien - wat eigenlijk dichter bij de eindoplossing komt die we willen.
Een probleem met deze methode is dat veel telefoons het mediatype niet ondersteunen - ze geven hun pagina's in plaats daarvan 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 scripttaal of CSS die het mobiele apparaat niet gebruikt. In plaats daarvan gebruikt het een server-side taal (PHP, ASP, JSP, ColdFusion, etc.) om naar de user-agent te kijken en vervolgens de HTTP-verzoek om naar een mobiele pagina te verwijzen als het een mobiel apparaat is.
Een eenvoudige PHP-code om dit te doen, ziet er als volgt uit:
Het probleem hier is dat er heel veel andere potentiële user-agents zijn die door mobiele apparaten worden gebruikt. Dit script zal veel van hen opvangen en omleiden, maar lang niet allemaal. En er komen er steeds meer bij.
Plus, net als bij de andere oplossingen hierboven, moet je nog steeds een aparte mobiele site voor deze lezers onderhouden! Dit nadeel van het moeten beheren van twee (of meer!) websites is reden genoeg om op zoek te gaan naar een betere oplossing.
Gebruik WURFL
Als u nog steeds vastbesloten bent om uw mobiele gebruikers om te leiden naar een aparte site, dan WURFL (Wireless Universal Resource File) is een goede oplossing. Dit is een XML-bestand (en nu een DB-bestand) en verschillende DBI-bibliotheken die niet alleen up-to-date draadloze user-agent-gegevens bevatten, maar ook welke functies en mogelijkheden die user-agents ondersteunen.
Om WURFL te gebruiken, downloadt u het XML-configuratiebestand, kiest u uw taal en implementeert u de API op uw website. Er zijn tools om WURFL te gebruiken met Java, PHP, Perl, Ruby, Python, Net, XSLTen C++.
Het voordeel van het gebruik van WURFL is dat veel mensen het configuratiebestand voortdurend bijwerken en toevoegen. Dus hoewel het bestand dat u gebruikt al verouderd is bijna voordat u klaar bent met downloaden, is de kans groot dat als u download het een keer per maand of zo, je hebt alle mobiele browsers die je lezers gewoonlijk gebruiken zonder enige problemen. Het nadeel is natuurlijk dat je dit voortdurend moet downloaden en bijwerken - allemaal zodat je gebruikers naar een tweede website kunt leiden en de nadelen die dat met zich meebrengt.
De beste oplossing is een responsief ontwerp
Dus als het onderhouden van verschillende sites voor verschillende apparaten niet het antwoord is, wat dan wel? Responsief webdesign.
Bij responsief ontwerp gebruikt u CSS-mediaquery's om stijlen te definiëren voor apparaten met verschillende breedtes. Met responsive design 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 moet weergeven of vergeet u niet om de laatste wijzigingen over te zetten naar uw mobiele site. 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 (waarvan de meeste tegenwoordig zeer beperkt worden gebruikt en u zich geen zorgen hoeft te maken), maar omdat het additief (stijlen toevoegen aan de inhoud, in plaats van inhoud weg te nemen) deze lezers zullen nog steeds in staat zijn om uw website te lezen, het ziet er alleen niet ideaal uit op hun oude apparaat of browser.