I många år 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 startat att omfamna en mobilstrategi för deras online-närvaro, vilket skapar erfarenheter som är lämpliga för telefon och andra mobila enheter.
När du väl har spenderat tid att lära dig hur du utformar webbsidor för mobiltelefoner och implementerar 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 som du kan använda för att implementera mobilt stöd på dina webbplatser - tillsammans med en rekommendation nära slutet för 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. I stället för att oroa dig för om de kan eller inte kan se dina sidor, sätt helt enkelt en länk någonstans högst upp på sidan som pekar på en separat mobilversion av din webbplats. Då kan läsarna självvala om de vill se mobilversionen eller fortsätta med "normal" versionen.
Fördelen med denna lösning är att det är lätt 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 behålla en separat version av webbplatsen för mobila användare. Eftersom din webbplats blir större kan du glömma att behålla den andra versionen och dina webbplatser kan komma att synas.
- Skapar du också en tredje version för tabletter? Vad sägs om en fjärde version för wearables? Detta koncept av enhetsspecifika versioner kan spira ut ur kontroll mycket snabbt.
- Du måste lägga en grim länk högst upp på sidan som icke-mobila läsare kan se (och eventuellt klicka på).
I slutändan är detta tillvägagångssätt en föråldrad en som sannolikt inte kommer att ingå i en modern mobilstrategi. Det används ibland som en stopp-gap fix medan en bättre lösning utvecklas, men det är verkligen ett kortfristigt bandhjälp vid denna tidpunkt.
Använd JavaScript
I en variant av ovanstående tillvägagångssätt använder vissa utvecklare en viss typ av webbläsningsdetektering för att upptäcka om kunden är på en mobil enhet och sedan omdirigera dem till den separata mobilplatsen. Problemet med upptäckt av webbläsare och mobila enheter är att det finns tusentals mobila enheter där ute. Att försöka upptäcka dem alla med ett 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 handheld verkar som om det skulle vara ett perfekt sätt att visa CSS-stilar bara för handhållna enheter - som mobiltelefoner. Detta verkar som en idealisk lösning för att visa sidor för mobila enheter. Du skriver en webbsida och skapar sedan två stilark. Den första för "skärm" -mediatypen utformar din sida för bildskärmar och dataskärmar. Den andra för "handheld" -stilar din sida för små enheter som de mobila telefonerna. Låter enkelt, men det fungerar inte riktigt i praktiken.
Den största fördelen med den här metoden är att du inte behöver behålla två versioner av din webbplats. Du behåller bara den, och stilarken definierar hur den ska se ut - som faktiskt kommer närmare den slutliga lösningen vi vill ha.
Ett problem med den här metoden är att många telefoner inte stöder medietypen - de visar sina sidor med skärmmedietypen istället. Och många äldre mobiltelefoner och handdatorer stöder inte alls CSS. I slutet är denna metod opålitlig och används därför sällan för att leverera mobila versioner av en webbplats.
Använd PHP, JSP, ASP för att upptäcka användaragenten
Detta är ett mycket bättre sätt att omdirigera mobila användare till en mobilversion av 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 språk på serversidan (PHP, ASP, JSP, ColdFusion, etc.) för att titta på användaragenten och sedan ändra HTTP-förfrågan för att peka på en mobilsida om den är en mobilenhet.
En enkel PHP-kod för att göra detta skulle se ut så här:
stristr ($ ua, "Windows CE") ellerstristr ($ ua, "AvantGo") ellerstristr ($ ua, "Mazingo") ellerstristr ($ ua, "Mobile") ellerstristr ($ ua, "T68") ellerstristr ($ ua, "Syncalot") ellerstristr ($ ua, "Blazer")) {$ DEVICE_TYPE = "MOBILE";}om (isset ($ DEVICE_TYPE) och $ DEVICE_TYPE == "MOBILE") {$ Location = 'mobil / index.php';rubrik ("Plats:". $ plats);utgång;}?>
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 mer läggs hela tiden.
Plus, som med de andra lösningarna ovan, måste du fortfarande behålla en separat mobilplats för dessa läsare! Denna nackdel med att hantera två (eller fler!) Webbplatser är anledning nog att söka en bättre lösning.
Använd WURFL
Om du fortfarande är fast besluten att omdirigera dina mobila användare till en separat webbplats, är WURFL (Wireless Universal Resource File) en bra lösning. Det här är en XML-fil (och nu en DB-fil) och olika DBI-bibliotek som inte bara innehåller aktuell data för trådlös användaragent, utan även vilka funktioner och funktioner dessa användaragenter stöder.
För att använda WURFL, hämtar du XML-konfigurationsfilen och väljer sedan ditt språk och implementerar API-en på din webbplats. Det finns verktyg för att använda WURFL med Java, PHP, Perl, Ruby, Python, Net, XSLT och C ++.
Fördelen med att använda WURFL är att det finns många människor som uppdaterar och lägger till config-filen 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 hämtar det en gång i månaden eller så har du alla mobila webbläsare som dina läsare brukar använda utan några problem. Nackdelen är självklart att du måste ständigt ladda ner och uppdatera detta - så att du kan leda användarna till en andra webbplats och de nackdelar som skapar.
Den bästa lösningen är responsiv design
Så om att upprätthålla olika platser för olika enheter är inte svaret, vad är det? Responsiv webbdesign.
Responsiv design är där du använder CSS-mediafrågor för att definiera stilar för enheter med olika bredder. Responsiv design gör att du kan 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 kom ihåg att överföra de senaste ändringarna till din mobila webbplats. Dessutom, när du 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 (de flesta är i mycket liten användning idag och borde inte vara mycket oroliga för dig), men eftersom det är additiv (lägger till stilar på innehållet istället för att ta innehåll bort) kommer dessa läsare fortfarande att kunna läsa din webbplats, det kommer inte att bli idealisk på sin gamla enhet eller webbläsare.
