Vandaag de dag gaan de meeste mensen online via mobiele gadgets - tablets, telefoons, in dit opzicht bereikt website-optimalisatie ook een nieuw niveau. Als een gebruiker binnenkomt en ziet dat de site niet is geoptimaliseerd voor mobiele apparaten: de afbeelding kan niet worden bekeken, de knoppen zijn verplaatst, de lettertypen zijn klein en onleesbaar, het ontwerp is scheef - 99 van de 100% dat hij zal afsluiten en ga op zoek naar een andere, handiger. En de zoekrobot vinkt het vakje aan dat de bron niet relevant is, dat wil zeggen dat deze niet overeenkomt met de zoekopdracht. Daarom moet het ontwerp van de pagina worden aangepast aan verschillende mobiele apparaten. Wat is een mobiele versie van de site, hoe maak je deze en wat is de beste manier om deze toe te passen? Lees meer in dit artikel.
Er zijn dus vier belangrijke manieren om uw site mobielvriendelijk te maken.
Methode één - Responsief ontwerp
Responsieve sjablonen veranderen de siteafbeelding afhankelijk van de schermgrootte. In de regel zijn ze standaard ingesteld op 1600, 1500, 1280, 1100, 1024 en 980 pixels. Voor de implementatie worden CSS3 Media Queries gebruikt. Het ontwerp van de site zelf verandert niet.
De voordelen van deze methode zijn:
- handige ontwikkeling,aangezien de structuur zelf zich aanpast aan de schermparameters, en elke update geen ontwerpontwikkeling vanaf het begin vereist, is het voldoende om de CSS en HTML aan te passen;
- one URL – de gebruiker hoeft niet meerdere namen te onthouden, er is geen omleiding nodig (omleiding van het ene adres naar het andere), wat het werk van een webmaster kan bemoeilijken, en het is gemakkelijker om te zoeken engine om een bron met een enkel adres te sorteren en te rangschikken.
Natuurlijk hebben adaptieve sjablonen hun nadelen, die trouwens meer zijn dan voordelen. Desalniettemin houden veel ontwikkelaars zich aan dit concept, bijvoorbeeld Google Corporation, wiens mobiele versie van de site een adaptief ontwerp heeft. Dus nadelen:
- Responsief ontwerp ondersteunt niet dezelfde taken op mobiel als op pc. Als dit bijvoorbeeld een mobiele versie van de website van een bank is, waar informatie over de wisselkoers of de dichtstbijzijnde geldautomaten waarschijnlijk belangrijker is voor de gebruiker, dan is dit ontwerp voldoende. Maar als dit een complexe gestructureerde bron is met veel secties en subsecties, zullen bezoekers een adaptieve lay-out nauwelijks waarderen.
- Langzaam laden verandert een favoriete site in een hatelijke. Dit geldt met name voor bronnen waar animaties, video's, pop-ups en andere actieve elementen in overvloed aanwezig zijn. Vanwege het hoge gewicht zal de pagina gewoon "vertragen", de gebruiker zal boos worden en weggaan, en de zoekposities van de site zullen dalen.
- Het onvermogen om de mobiele versie uit te schakelen is een ander belangrijk nadeel. Als een element door zo'n lay-out wordt verborgen, kunt uer is niets dat u kunt doen om het te openen, in tegenstelling tot sites waar u het kunt uitschakelen en naar een gewoon domein kunt overschakelen.
Met zo'n mobiele versie van de site kunt u echter snel, zonder speciale vaardigheden en kosten, de bron aanpassen aan alle gadgets. Maar gezien de genoemde tekortkomingen, zal het geschikt zijn voor kleine, eenvoudige bronnen met een minimum aan informatie en multimedia, zonder complexe navigatie en animatie. Voor een complexe site zijn 2 andere methoden geschikt.
Tweede methode - een aparte versie van de site
Deze methode is heel gebruikelijk en is vaak succesvol in het beter leesbaar maken van de site op een mobiel apparaat. De essentie is om een aparte versie van de pagina te maken, getekend voor de applicatie en gelokaliseerd op een aparte URL of subdomein, bijvoorbeeld m.vk.com. Tegelijkertijd blijft de hoofdfunctionaliteit behouden, het ontwerp van de site ziet er gewoon anders uit. De voordelen van deze methode zijn duidelijk:
- gebruiksvriendelijke interface;
- gemakkelijk te wijzigen en te bewerken aangezien de versie los van de hoofdbron bestaat;
- door het lage gewicht werkt een aparte versie van de site veel sneller dan een adaptieve sjabloon;
- meestal is het mogelijk om vanaf de mobiel naar de hoofdversie van de pagina te gaan.
Maar er waren ook enkele nadelen:
- Meerdere adressen - desktop- en mobiele versie van de site. Hoe kan de gebruiker twee opties onthouden? Webmasters schrijven vaak een omleiding (redirect) voor van de desktopversie naar de mobiele versie, maar tegelijkertijd, als deze pagina zich in de mobieleversie niet bestaat, krijgt de gebruiker een foutmelding. Hier doen zich problemen voor met zoekmachines, die het moeilijk vinden om 2 identieke bronnen te rangschikken, en dit heeft direct invloed op de promotie.
- De mobiele versie van de site vanaf een computer, als de gebruiker deze per ongeluk bezoekt, ziet er belachelijk uit, wat ook van invloed kan zijn op het verkeer.
- Deze versie is vaak zwaar beperkt, desktop, dus de gebruiker krijgt zeer beperkte functionaliteit. Maar tegelijkertijd, als er iets ontbreekt, kan de bezoeker naar de volledige versie van de pagina gaan.
Over het algemeen rechtvaardigt een afzonderlijke mobiele site zichzelf en is dit de meest gebruikelijke manier om een bron aan te passen voor mobiele apparaten. Het is populair bij grote online winkels zoals Amazon.
Derde manier - RESS-ontwerp
Google-zoekmachine ondersteunt deze richting van mobiel ontwerp actief. Dit is de meest complexe, kostbare, maar effectieve methode om de site aan te passen aan een telefoon of tablet. Het heet RESS. Dit is gericht op een bron in een mobiele applicatie die voor elk apparaat afzonderlijk kan worden gedownload. Voor Android - met GooglePlay en voor Apple - met iTunes.
Dergelijke applicaties zijn snel, gratis, handig en kunnen verschillende soorten informatie bevatten, terwijl het geheugen van de telefoon en het internetverkeer niet worden opgeslokt zoals bij het bezoeken van een site via een browser. Ze zijn gemakkelijk toegankelijk, omdat de link altijd op het scherm bij de hand is en het niet nodig is om een complexe naam in de adresbalk van de browser in te voeren.
Er zijn natuurlijk hier ende tekortkomingen, zoals complexiteit in ontwikkeling, de hoge arbeidskosten van een groot aantal programmeurs, de noodzaak om verschillende lay-outopties te maken. Soms wordt het mobiele apparaat niet herkend door de applicatie. Regelmatige technische ondersteuning, correctie van tekortkomingen is noodzakelijk. Niettemin wordt deze optie als de beste van de drie beschouwd vanwege de productieve, ononderbroken werking.
De goedkoopste manier om een mobiele website te maken
Alle bovenstaande methoden omvatten, hoewel niet altijd lang en moeilijk, maar nog steeds betaald werk van een webmaster. Als u geen dringende behoefte aan een dergelijke ontwikkeling ziet, zal een eenvoudige en gratis mobiele versie van de site bij u passen. Wat is de gemakkelijkste manier om het te maken?
Download speciale sjablonen (plug-ins) voor responsief ontwerp. Bijvoorbeeld WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile en anderen. Ze zullen helpen om de site correcter weer te geven op de telefoon, terwijl u enkele tips krijgt over wat er moet worden gecorrigeerd om de pagina beter aan te passen aan de mobiele versie.
Natuurlijk is deze methode nauwelijks geschikt voor serieuze bronnen. Deze gratis functie is eerder bedoeld voor kleine en eenvoudige sites, blogs, nieuwsfeeds. Vergeet niet dat de Google-zoekmachine, evenals Yandex, tegenwoordig serieuze eisen stelt aan mobiele versies, dus er is een enorme kans om uw posities te verlagen met deze methode.
Met deze methode worden advertenties en pop-ups hoogstwaarschijnlijk afgeslotenbanners, maar de pagina laadt snel en zonder "vertragingen".
Principes voor het maken van mobiele versies
Het maakt niet uit of de mobiele versie van de site gratis is gemaakt of met de hulp van een staf van webmasters, deze is gemaakt op het RESS-systeem of met behulp van een adaptieve sjabloon. Het belangrijkste is dat het voor een effectieve werking moet voldoen aan verschillende uiterst belangrijke principes. Dus, wat moet de mobiele versie van de site zijn? Hoe maak je het productief, efficiënt en productief?
Verwijder alles wat overbodig is
Minimalisme is waar de ontwikkelaar van de mobiele versie van de site naar moet streven. Stel je voor hoe moeilijk het is om informatie waar te nemen die bol staat van kleuren, buttons, banners en waar je eindeloos doorheen moet scrollen op zoek naar het juiste materiaal. Mobiel ontwerp moet eenvoudig en strak zijn. Kies 2-3 kleuren om de ruimte te verdelen (bijvoorbeeld branded). Het is beter als een van hen wit is. Verdeel de ruimte van een klein scherm in begrijpelijke en leesbare zones. Virtuele toetsen moeten zichtbaar zijn zodat de gebruiker duidelijk weet waar hij moet drukken en zien - hier is het product, hier is het formulier voor het invullen van de gegevens, hier is de informatie over levering en betaling.
Alle extra opties die nuttig zouden zijn in de desktopversie en het leven van de gebruiker gemakkelijker zouden maken, zullen hier alleen maar problemen opleveren. Laat alleen de belangrijkste elementen over. Animatie, reclamebanners, multimedia zullen hoogstwaarschijnlijk het werk van de site of applicatie alleen maar vertragen en afleiden vanhoofd.
Uitlijning
Het probleem van uitlijning is niet minder acuut, want als het verkeerd wordt gedaan, krijgt de gebruiker alleen de uitgangen van belangrijke woorden. Links uitgelijnd en verticaal uitlijnen is algemeen aanvaard. Stel je voor dat je door de nieuwsfeed op je telefoon scrolt. Je doet het van boven naar beneden, niet naar links of rechts.
Eenwording
Als er geen mogelijkheid is voor een lange reeks overgangen, probeer dan meerdere stappen in één te combineren. De site vereist bijvoorbeeld gegevensinvoer in verschillende fasen - een naam, dan een adres, waarbij in elke afzonderlijke cel een apart huis, straat, appartement, enz. is. Om de gebruiker niet te dwingen te proberen veel kleine cellen te raken, vraag hem om slechts 2 in te vullen - naam en adres.
En ontkoppeling
Soms is het juist nodig om te veel informatie te scheiden. Zo heb je in het uitklapmenu een lijst van meer dan 80 steden waar bezorging plaatsvindt. Groepeer ze per regio, zodat de gebruiker niet door deze enorme lijst hoeft te scrollen. Wanneer hij over het regionale centrum of de regio zweeft, v alt een andere lijst met steden weg.
Vermeldingen
Trouwens, over de lijsten. Er zijn er twee - vast in alfabetische of andere volgorde en met vervanging. Hun keuze hangt af van wat er zal worden vermeld.
Vast is handig als de gebruiker precies weet waarnaar hij op zoek is. Bijvoorbeeld plaats, nummer of datum. De tweede optie is geschikt voor lange complexe namen of voor gevallen waarin er veel variaties van één en dezelfde zijndezelfde naam, en elke vervolgkeuzelijst brengt de gebruiker een stap dichter bij het doel. De automatische vervangingsoptie wordt vaker gebruikt wanneer een bezoeker hulp nodig heeft. Een breisite biedt bijvoorbeeld aan om breinaalden te kopen. De gebruiker voert de zoekopdracht "Metalen breinaalden" in en in de tooltip ziet hij "Breinaalden 5 mm", "Breinaalden 4,5 mm", enz.
Autofill
Dit item is vooral relevant voor sites die iets online verkopen, en u moet standaardformulieren invullen voor betaling, levering, enz. Als een persoon een aankoop doet vanaf een telefoon, heeft hij hoogstwaarschijnlijk geen tijd om bij een computer te komen, wat betekent dat het aankoopproces zo snel en gemakkelijk mogelijk moet worden gemaakt.
Hiervoor kunnen de formulieren al ingevulde gegevens bevatten, u kunt een beroep doen op de meest populaire antwoorden. Voer bijvoorbeeld de datum van vandaag, de contante betalingsmethode, de stad in als u in dezelfde regio werkt. Ze kunnen worden gewijzigd, maar als je het doel raakt, wordt de tijd van de gebruiker bespaard.
Alles wordt gelezen, alles wordt bekeken
Onthoud bij het ontwerpen van de mobiele versie van de site dat de telefoons van iedereen anders zijn, en dat geldt ook voor hun gezichtsvermogen. Misschien wordt uw site vanaf een klein scherm bekeken, dus de lettertypen moeten eenvoudig en leesbaar zijn, de knoppen moeten groot genoeg zijn zodat er op kan worden geklikt zonder naar een andere pagina te gaan, en de afbeeldingen moeten afzonderlijk worden geopend, groot, vooral wanneer het komt naar het internet.store.
Enkele statistieken
Over de aanpassing van de site aan mobiele apparaten gesproken, men kan niet anders dan zijn toevlucht nemen tot statistieken om te begrijpen hoe belangrijk dit proces is vooronline promotie.
De nummers zijn als volgt. Vandaag de dag worden gadgets blijkbaar door 87% van de bevolking gebruikt, met uitzondering van de kleinste kinderen en sommige ouderen. Economen voorspellen dat mobiele handel de komende 5 jaar 100 keer zal groeien. Tegelijkertijd is slechts 21% van de sites aangepast om met mobiele apparaten te werken. Dit betekent dat slechts een klein 5e deel van het internetverkeer en de e-commercemarkt bezet is.
Denk eens aan deze cijfers. Heeft het zin om uw resource aan te passen? Natuurlijk. Bovendien, hoewel er zoveel ruimte op deze markt is, kun je er je eigen segment in uitstippelen.
Waar je een mobiele versie nodig hebt
Het gebruik van de mobiele versie is logisch voor elk platform dat een hoge ranking wil behalen. Dit heeft tenslotte een directe impact op de gebruiker, waardoor hij comfortabele omstandigheden creëert om op uw site te blijven.
Kan niet bestaan zonder mobiele versie:
- nieuwsportalen, omdat de meeste ervan worden bekeken vanaf de telefoon op weg naar het werk of naar school;
- sociale netwerken - om dezelfde reden, plus er is een online communicatiefactor, wat betekent dat hiervoor een handige, begrijpelijke chat moet worden gemaakt;
- referentiesites, navigatiesites, enz., waar mensen naartoe gaan als ze iets zoeken;
- online winkels - een kans om klanten aan te trekken die geen tijd verspillen met winkelen, maar alles kopen via mobiel internet.
In plaats van een conclusie
Mobiele technologieën zijn tegenwoordig in deactieve groei en ontwikkeling, daarom, strevend naar leiderschap in de markt, moet elk bedrijf ervoor zorgen dat zijn internetbron aan de vereisten voldoet. Vanwege de toenemende eisen van de gebruiker, moeten sites voortdurend worden geüpgraded en aangepast aan verschillende apparaten. Het is duidelijk dat als een persoon zich ongemakkelijk voelt om op een bepaalde bron te zijn, hij daar geen informatie over een product of prijs kan krijgen, een bestelling kan plaatsen, informatie kan krijgen over de levering, dan zal hij de site vinden waar dit allemaal mogelijk zal worden. Om de competitie te winnen, is het daarom belangrijk om een flexibele, handige, functionele en interessante bron te hebben.
De mobiele versie van de Android- of Ios-website zal hierbij helpen. Om dit te doen, moet u een van de bovenstaande herontwerpmethoden kiezen: een adaptieve sjabloon, een nieuwe site maken op een subdomein en ernaar verwijzen, gratis sjablonen gebruiken of een mobiele applicatie maken die het voor de gebruiker gemakkelijker maakt om binnen te komen en wees op de pagina.
Deze aanpak helpt niet alleen de loyaliteit van bestaande klanten te behouden, maar biedt ook de mogelijkheid om nieuwe bezoekers aan te trekken.
