Idag går de flesta online via mobila prylar – surfplattor, telefoner, i detta avseende når webbplatsoptimeringen också en ny nivå. Om en användare kommer in och ser att sajten inte är optimerad för mobila enheter: bilden kan inte ses, knapparna har flyttats ut, teckensnitten är små och oläsliga, designen är skev - 99 av 100 % att han kommer att lämna och börja leta efter en annan mer bekväm. Och sökroboten kommer att markera rutan att resursen är irrelevant, det vill säga att den inte matchar sökfrågan. Därför måste sidans design anpassas till olika mobila enheter. Vad är en mobilversion av webbplatsen, hur gör man den och vad är det bästa sättet att tillämpa den? Läs mer i den här artikeln.
Så det finns fyra viktiga sätt att göra din webbplats mobilvänlig.
Method One - Responsiv Design
Responsiva mallar ändrar webbplatsens bild beroende på skärmstorleken. Som regel är de inställda på standard 1600, 1500, 1280, 1100, 1024 och 980 pixlar. För implementering används CSS3 Media Queries. Webbplatsens design i sig ändras inte.
Fördelarna med denna metod inkluderar:
- bekväm utveckling,eftersom strukturen i sig anpassar sig till skärmparametrarna, och alla uppdateringar inte kräver designutveckling från början, räcker det med att justera CSS och HTML;
- en webbadress – användaren behöver inte komma ihåg flera namn, det finns inget behov av en omdirigering (omdirigering från en adress till en annan), vilket kan komplicera arbetet för en webbansvarig, och det är lättare för en sökning motor för att sortera och rangordna en resurs med en enda adress.
Självklart har adaptiva mallar sina nackdelar, som för övrigt är mer än fördelar. Ändå följer många utvecklare detta koncept, till exempel Google Corporation, vars mobilversion av webbplatsen har en adaptiv design. Så, nackdelar:
- Responsiv design stöder inte samma uppgifter på mobilen som den gör på PC. Om detta till exempel är en mobilversion av en banks webbplats, där information om växelkursen eller närmaste uttagsautomater är mer sannolikt att vara viktig för användaren, så räcker denna design. Men om detta är en komplex strukturerad resurs med många sektioner och underavdelningar, kommer besökarna knappast att gilla adaptiv layout.
- Långsam laddning förvandlar en favoritsajt till en hatisk. Detta gäller särskilt för resurser där animationer, videor, popup-fönster och andra aktiva element finns i överflöd. På grund av den höga vikten kommer sidan helt enkelt att "bromsa ner", användaren blir arg och lämnar och webbplatsens sökpositioner kommer att falla.
- Oförmågan att stänga av mobilversionen är en annan betydande nackdel. Om något element döljs av en sådan layout, kan dudet finns inget du kan göra för att öppna det, till skillnad från webbplatser där du kan stänga av det och byta till en vanlig domän.
Men en sådan mobil version av sajten kan snabbt, utan speciella kunskaper och kostnader, anpassa resursen till alla prylar. Men med tanke på de angivna bristerna kommer det att passa små, enkla resurser med ett minimum av information och multimedia, utan komplex navigering och animering. För en komplex webbplats är två andra metoder lämpliga.
Andra metoden - en separat version av webbplatsen
Denna metod är mycket vanlig och är ofta framgångsrik för att göra webbplatsen mer läsbar på en mobil enhet. Dess kärna är att skapa en separat version av sidan, ritad för applikationen och placerad på en separat URL eller underdomän, till exempel m.vk.com. Samtidigt bevaras huvudfunktionaliteten, designen på webbplatsen ser bara annorlunda ut. Fördelarna med denna metod är uppenbara:
- användarvänligt gränssnitt;
- lätt att ändra och redigera eftersom versionen finns separat från huvudresursen;
- på grund av den låga vikten fungerar en separat version av sajten mycket snabbare än en adaptiv mall;
- oftast går det att gå till huvudversionen av sidan från mobilen.
Men det fanns några nackdelar här också:
- Flera adresser – stationär och mobil version av webbplatsen. Hur får man användaren att komma ihåg två alternativ? Webbmästare föreskriver ofta en omdirigering (omdirigering) från skrivbordsversionen till mobilversionen, men samtidigt, om den här sidan finns i mobilenversion inte existerar kommer användaren att få ett felmeddelande. Här uppstår svårigheter med sökmotorer, som har svårt att rangordna 2 identiska resurser, och detta påverkar direkt marknadsföringen.
- Mobilversionen av webbplatsen från en dator, om användaren besöker den av misstag, kommer att se löjlig ut, vilket också kan påverka trafiken.
- Den här versionen är ofta kraftigt begränsad, stationär, så användaren kommer att få mycket begränsad funktionalitet. Men samtidigt, om något saknas, kan besökaren gå till den fullständiga versionen av sidan.
I allmänhet motiverar en separat mobilsajt sig själv och är det vanligaste sättet att anpassa en resurs för mobila enheter. Det är populärt bland stora nätbutiker som Amazon.
Tredje vägen - RESS-design
Googles sökmotor stöder aktivt denna inriktning av mobildesign. Detta är den mest komplexa, kostsamma, men effektiva metoden för att anpassa sajten till en telefon eller surfplatta. Det heter RESS. Detta riktar in en resurs till en mobilapplikation som kan laddas ner för varje enhet separat. För Android - med GooglePlay och för Apple - med iTunes.
Sådana applikationer är snabba, gratis, bekväma, har förmågan att ta emot olika typer av information, samtidigt som telefonens minne och internettrafik inte äts upp som när man besöker en webbplats via en webbläsare. De är lätta att komma åt, eftersom länken alltid finns på skärmen till hands och det finns ingen anledning att ange ett komplext namn i webbläsarens adressfält.
Det finns naturligtvis här ochdess brister, såsom komplexitet i utvecklingen, de höga arbetskostnaderna för ett stort antal programmerare, behovet av att göra flera layout alternativ. Ibland känns inte den mobila enheten igen av applikationen. Regelbunden teknisk support, korrigering av brister är nödvändig. Ändå anses detta alternativ vara det bästa av de tre föreslagna på grund av dess produktiva, oavbrutna funktion.
Det billigaste sättet att skapa en mobilwebbplats
Alla ovanstående metoder innebär, om än inte alltid långt och svårt, men ändå bet alt arbete av en webbansvarig. Om du inte ser ett akut behov av sådan utveckling kommer en enkel och gratis mobilversion av sajten att passa dig. Vad är det enklaste sättet att göra det?
Ladda ner speciella mallar (plugins) för responsiv design. Till exempel WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile och andra. De hjälper till att visa sajten mer korrekt på telefonen, samtidigt som du får lite tips på vad som bör korrigeras för att bättre anpassa sidan till mobilversionen.
Naturligtvis är den här metoden knappast lämplig för seriösa resurser. Snarare är den här gratisfunktionen avsedd för små och enkla sajter, bloggar, nyhetsflöden. Glöm inte att Googles sökmotor, såväl som Yandex, idag ställer stora krav på mobilversioner, så det finns en enorm chans att sänka dina positioner med den här metoden.
Med den här metoden kommer annonser och popup-fönster troligen att stängas avbanners, men sidan kommer att laddas snabbt och utan "lags".
Principer för att skapa mobilversioner
Det spelar ingen roll om den mobila versionen av webbplatsen skapades gratis eller med hjälp av en stab av webbansvariga, den gjordes på RESS-systemet eller med hjälp av en adaptiv mall. Viktigast av allt, för dess effektiva funktion, krävs det att man följer flera extremt viktiga principer. Så, vad ska den mobila versionen av webbplatsen vara? Hur gör man det produktivt, effektivt och produktivt?
Ta bort allt som är onödigt
Minimalism är vad utvecklaren av den mobila versionen av sajten bör sträva efter. Föreställ dig hur svårt det är att uppfatta information som är fylld av färger, knappar, banderoller och som du oändligt måste scrolla igenom på jakt efter rätt material. Mobildesign ska vara enkel och ren. Välj 2-3 färger för att dela upp utrymmet (till exempel märkesvaror). Bättre om en av dem är vit. Dela upp utrymmet på en liten skärm i begripliga och läsbara zoner. Virtuella nycklar ska vara synliga så att användaren tydligt vet var han ska trycka och ser - här är produkten, här är formuläret för att fylla i uppgifterna, här finns informationen om leverans och betalning.
Alla ytterligare alternativ som skulle vara användbara i skrivbordsversionen och göra livet enklare för användaren kommer bara att medföra svårigheter här. Lämna bara de viktigaste delarna. Animation, reklambanners, multimedia kommer troligen bara att sakta ner arbetet på webbplatsen eller applikationen och distrahera frånmain.
Alignment
Frågan om anpassning är inte mindre akut, för om det görs på fel sätt kommer användaren bara att få ändelserna på viktiga ord. Vänsterjusterad och vertikal justering är allmänt accepterad. Föreställ dig att du bläddrar igenom nyhetsflödet på din telefon. Du gör det uppifrån och ner, inte till vänster eller höger.
Unification
När det inte finns någon möjlighet till en lång kedja av övergångar, försök att kombinera flera steg till ett. Till exempel kräver sajten datainmatning i flera steg - ett namn, sedan en adress, där det i varje enskild cell finns ett separat hus, gata, lägenhet etc. För att inte tvinga användaren att försöka träffa många små celler, be honom att endast fylla i 2 - namn och adress.
Och frånkoppling
Ibland, tvärtom, krävs det att man separerar för mycket information. Till exempel, i rullgardinsmenyn har du en lista över mer än 80 städer där leverans utförs. Gruppera dem efter region så att användaren inte behöver bläddra igenom denna enorma lista. När han håller muspekaren över det regionala centret eller regionen kommer en annan lista med städer att falla bort.
Listings
Förresten, om listorna. Det finns två av dem - fixerade i alfabetisk eller annan ordning och med substitution. Deras val beror på vad som kommer att listas.
Fixed är användbart om användaren vet exakt vad de letar efter. Till exempel stad, nummer eller datum. Det andra alternativet är lämpligt för långa komplexa namn eller för fall där det finns många varianter av ett och sammasamma namn, och varje rullgardinslista tar användaren ett steg närmare målet. Alternativet för automatisk ersättning används oftare när en besökare behöver hjälp. Till exempel erbjuder en stickplats att köpa stickor. Användaren anger sökfrågan "Metal stickor", och i verktygstipset ser han "Stickstickor 5 mm", "Stickstickor 4,5 mm", etc.
Autofyll
Denna artikel är särskilt relevant för webbplatser som säljer något online, och du måste fylla i standardformulär för betalning, leverans, etc. Om en person gör ett köp från en telefon, har han troligen inte tid att komma till en dator, vilket innebär att köpprocessen ska göras så snabb och bekväm som möjligt.
För detta kan formulären innehålla redan ifyllda uppgifter, du kan tillgripa de mest populära svaren. Ange till exempel dagens datum, kontant betalningsmetod, stad om du arbetar i samma region. De kan ändras, men om du träffar målet kommer användarens tid att sparas.
Allt är läst, allt visas
När du designar den mobila versionen av webbplatsen, kom ihåg att allas telefoner är olika, och det är deras syn också. Kanske kommer din webbplats att ses från en liten skärm, så typsnitten bör vara enkla och läsbara, knapparna bör vara tillräckligt stora så att de kan klickas på utan att tas till en annan sida, och bilderna bör öppnas separat, stora, speciellt när det kommer till Internet. store.
Vissa statistik
När man talar om anpassningen av sajten till mobila enheter kan man inte låta bli att ta till statistik för att förstå hur viktig denna process är föronlinekampanj.
Siffrorna är följande. Idag används prylar av 87% av befolkningen, tydligen, förutom de minsta barnen och vissa äldre. Ekonomer förutspår att mobilhandel kommer att växa 100 gånger under de kommande 5 åren. Samtidigt är endast 21 % av sajterna anpassade för att fungera med mobila enheter. Det betyder att endast en liten femtedel av internettrafiken och e-handelsmarknaden är upptagen.
Tänk på de här siffrorna. Är det vettigt att anpassa sin resurs? Såklart ja. Dessutom, även om det finns så mycket utrymme på den här marknaden, kan du skapa ditt eget segment på den.
Där du behöver en mobilversion
Att använda den mobila versionen är vettigt för alla plattformar som syftar till att få en hög ranking. När allt kommer omkring är detta en direkt inverkan på användaren, vilket skapar bekväma förutsättningar för honom att stanna på din webbplats.
Kan inte existera utan mobilversion:
- nyhetsportaler, eftersom de flesta av dem ses från telefonen på väg till jobbet eller skolan;
- sociala nätverk - av samma anledning, plus att det finns en onlinekommunikationsfaktor, vilket innebär att en bekväm, begriplig chatt bör skapas för detta;
- referens, navigeringswebbplatser, etc., dit folk går när de letar efter något;
- nätbutiker – en möjlighet att locka kunder som inte slösar tid på shopping, utan köper allt via mobilt internet.
Istället för en slutsats
Idag finns mobilteknik iaktiv tillväxt och utveckling, därför, strävar efter ledarskap på marknaden, måste varje företag se till att dess Internetresurs uppfyller kraven. På grund av användarens växande krav måste webbplatser ständigt uppgraderas och anpassas till olika enheter. Det är tydligt att om en person är obekväm att vara på en viss resurs kan han inte få information om en produkt eller pris där, lägga en beställning, ta reda på leverans, då kommer han att hitta platsen där allt detta kommer att bli möjligt. För att vinna tävlingen är det därför viktigt att ha en flexibel, bekväm, funktionell och intressant resurs.
Mobilversionen av Android- eller Ios-webbplatsen hjälper till att göra detta. För att göra detta måste du välja en av ovanstående redesignmetoder - en adaptiv mall, skapa en ny webbplats på en underdomän och omdirigera till den, använda gratismallar eller skapa en mobilapplikation som gör det lättare för användaren att komma in och vara på sidan.
Det här tillvägagångssättet kommer inte bara att bidra till att upprätthålla lojaliteten hos befintliga kunder, utan kommer också att ge en möjlighet att locka nya besökare.
