I åratal har experter sagt att trafiken till webbplatser från besökare på mobila enheter har ökat dramatiskt. Av denna anledning har många företag smart börjat anamma en mobilstrategi för sin online-närvaro och skapat upplevelser som passar telefon och andra mobila enheter.
När du väl har spenderat tiden på att lära dig hur utforma webbsidor för mobiltelefoneroch genomföra din strategi, vill du också se till att webbplatsens besökare kan se dessa mönster. Det finns många sätt du kan göra detta och vissa fungerar bättre än andra. Här är en titt på metoden du kan använda för att implementera mobilsupport på dina webbplatser - tillsammans med en rekommendation i slutet av vad den bästa metoden för att uppnå detta är på dagens webb.
Ge en länk till en annan webbplatsversion
Detta är överlägset den enklaste metoden att hantera mobiltelefonanvändare. Istället för att oroa sig för om de kan eller inte kan se dina sidor, lägg bara till en länk någonstans högst upp på sidan som pekar på en separat mobilversion av din webbplats. Sedan kan läsarna själv välja om de vill se mobilversionen eller fortsätta med den "normala" versionen.
Fördelen med denna lösning är att den är enkel att implementera. Det kräver att du skapar en optimerad version för mobil och sedan lägger till en länk någonstans nära toppen av de normala sidorna.
Nackdelarna är:
- Du måste ha en separat version av webbplatsen för mobilanvändare. När din webbplats blir större kan du glömma att behålla den andra versionen och dina webbplatser kan komma att synkroniseras.
- Skapar du också en tredje version för surfplattor? Vad sägs om en fjärde version för användbara? Detta koncept för enhetsspecifika versioner kan gå ur kontroll mycket snabbt.
- Du måste sätta en ful länk högst upp på sidan som läsare som inte är mobila kan se (och eventuellt klicka på).
I slutändan är detta tillvägagångssätt föråldrat som sannolikt inte kommer att ingå i en modern mobilstrategi. Det används ibland som en fix-gap fix medan en bättre lösning utvecklas, men det är verkligen ett kortvarigt plåster vid denna tidpunkt.
Använd JavaScript
I en variant av ovanstående tillvägagångssätt använder vissa utvecklare någon typ av webbläsaridentifiering skript för att upptäcka om kunden är på en mobil enhet och sedan omdirigera dem till den separata mobilen webbplats. Problemet med webbläsare upptäckt och mobila enheter är att det finns tusentals mobila enheter där ute. Att försöka upptäcka dem alla med en JavaScript kan göra alla dina sidor till en nedladdningsbar mardröm - och du är fortfarande föremål för många av samma nackdelar som ovan nämnda tillvägagångssätt.
Använd CSS @media Handheld
CSS-kommandot @media handhållen verkar som om det skulle vara ett perfekt sätt att visa CSS stilar bara för handhållna enheter - som mobiltelefoner. Detta verkar vara en idealisk lösning för att visa sidor för mobila enheter. Du skriver en webbsida och skapar sedan två formatmallar. Den första för "skärm" mediatyp utformar din sida för bildskärmar och datorskärmar. Den andra för "handhållna" stilar din sida för små enheter som dessa mobiltelefoner. Låter enkelt, men det fungerar inte riktigt i praktiken.
Den största fördelen med denna metod är att du inte behöver behålla två versioner av din webbplats. Du behåller bara den, och den stilark definierar hur det ska se ut - vilket faktiskt närmar sig den slutlösning vi vill ha.
Ett problem med den här metoden är att många telefoner inte stöder medietypen - de visar istället sina sidor med skärmmedietypen. Och många äldre mobiltelefoner och handdatorer stöder inte CSS alls. I slutändan är denna metod opålitlig och används därför sällan för att leverera mobilversioner av en webbplats.
Använd PHP, JSP, ASP för att upptäcka User-Agent
Detta är ett mycket bättre sätt att omdirigera mobilanvändare till en mobilversion på webbplatsen eftersom den inte är beroende av ett skriptspråk eller CSS som den mobila enheten inte använder. Istället använder den ett serversidespråk (PHP, ASP, JSP, ColdFusion, etc.) för att titta på användaragenten och sedan ändra HTTP-begäran att peka på en mobil sida om det är en mobil enhet.
En enkel PHP-kod för att göra detta skulle se ut så här:
Problemet här är att det finns massor av andra potentiella användaragenter som används av mobila enheter. Detta skript kommer att fånga och omdirigera många av dem men inte alla på något sätt. Och fler läggs till hela tiden.
Dessutom, som med de andra lösningarna ovan, måste du fortfarande ha en separat mobilwebbplats för dessa läsare! Denna nackdel med att behöva hantera två (eller fler!) Webbplatser är tillräckligt skäl för att hitta en bättre lösning.
Använd WURFL
Om du fortfarande är fast besluten att omdirigera dina mobilanvändare till en separat webbplats, då WURFL (Wireless Universal Resource File) är en bra lösning. Detta är en XML-fil (och nu en DB-fil) och olika DBI-bibliotek som inte bara innehåller uppdaterade data om trådlös användaragent utan också vilka funktioner och funktioner dessa användaragenter stöder.
För att använda WURFL laddar du ner XML-konfigurationsfilen och väljer sedan ditt språk och implementerar API på din webbplats. Det finns verktyg för att använda WURFL med Java, PHP, Perl, Ruby, Python, Net, XSLToch C ++.
Fördelen med att använda WURFL är att det finns många människor som uppdaterar och lägger till konfigurationsfilen hela tiden. Så medan filen du använder är föråldrad nästan innan du har laddat ner den, är chansen att om du ladda ner den en gång i månaden eller så har du alla mobila webbläsare som dina läsare vanligtvis använder utan några problem. Nackdelen är naturligtvis att du måste ladda ner och uppdatera detta kontinuerligt - allt så att du kan dirigera användare till en andra webbplats och de nackdelar som skapar.
Den bästa lösningen är responsiv design
Så om det inte är svaret på att underhålla olika webbplatser för olika enheter, vad är det? Responsiv webbdesign.
Responsiv design är där du använder CSS-mediefrågor för att definiera stilar för enheter med olika bredd. Responsiv design låter dig skapa en webbsida för både mobila och icke-mobila användare. Då behöver du inte oroa dig för vilket innehåll som ska visas på mobilwebbplatsen eller komma ihåg att överföra de senaste ändringarna till din mobilwebbplats. Plus, när du väl har skrivit CSS behöver du inte ladda ner något nytt.
Responsiv design kanske inte fungerar perfekt på extremt gamla enheter och webbläsare (varav de flesta är i mycket liten användning idag och borde inte vara mycket oroande för dig), men eftersom det är additiv (lägger till stilar på innehållet snarare än att ta bort innehåll) kommer dessa läsare fortfarande att kunna läsa din webbplats, det ser bara inte ut perfekt på deras gamla enhet eller webbläsare.