Versiunea mobilă a pieselor. Ce să alegeți: Versiunea mobilă vs Design adaptiv? Cum este dezvoltarea unei versiuni mobile în studioul nostru web

Sergey Lukkin.

03/26/2015 | | 0 comentarii

Internetul a schimbat radical comportamentul cumpărătorilor. De mult timp nu merg la magazin pentru a alege bunurile. Un invers complet: la început "urcă" pe Internet, găsiți bunurile, comparați-l cu concurența, apoi găsiți un magazin, comparați-l cu alții și numai apoi luați o decizie pentru a face o achiziție.

Numai după aceea, vor merge la magazinul selectat sau pur și simplu să comande bunurile pe Internet. Astăzi, mai mult de 60% dintre cumpărători vin în acest fel.
Se pare că succesul este necesar ca compania dvs. să aibă un site web sau un magazin online și asta este. Cu toate acestea, acum acest lucru nu este suficient.

De ce este versiunea mobilă a site-ului sau a designului adaptiv important pentru afaceri?

Faptul este că, odată cu apariția smartphone-urilor și a tabletelor, tot mai mulți cumpărători caută bunuri și servicii pe Internet cu ajutorul acestor dispozitive și nu din computere staționare sau laptop-uri. Și toate pentru că este foarte convenabil. Oriunde este cumpărătorul, el poate căuta direct de pe telefonul său mobil și nu este nevoie să includeți un computer.
Este minunat, dar dimensiunea fizică a ecranului gadget imens, fie că este vorba de un comprimat sau un smartphone, destul de mic și, prin urmare, site-ul care arată grozav pe un computer sau laptop este foarte incomod pentru a vizualiza dispozitivul mobil pe ecran.
Acesta este motivul pentru care acum, mai mult decât oricând, a devenit important dacă site-ul dvs. este potrivit pentru utilizarea pe smartphone-uri, tablete sau fronturi (Fablet - ceva mediu cu dimensiunile, între smartphone și tabletă).

Cum se face un site prietenos pentru dispozitive mobile?

Pentru a rezolva această problemă, există două abordări:

Creați o versiune separată a site-ului care se deschide pe un dispozitiv mobil.
Creați un site cu un design adaptiv care este ajustat pentru orice dimensiune a ecranului

Cea mai răspândită a fost cea de-a doua opțiune, deoarece este mai ieftină în dezvoltare. Cele mai multe situri moderne sunt inițial concepute astfel încât acestea să fie la fel de convenabile pentru vizualizarea ecranelor diferite.
Site-ul adaptiv este reglat automat pentru dimensiunile ecranului dispozitivului pe care se răsfoaie.
De exemplu, site-ul laboratorului nostru. Așa arată acest articol pe ecranul computerului.

Și seamănă cu un ecran smartphone

După cum puteți vedea, chiar și pe un smartphone, nimic nu trebuie mărit. Toate comenzile, legăturile, precum și imaginile și fonturile sunt foarte convenabile pentru muncă, chiar și pe un ecran mic.
Desigur, costul și termenul limită pentru dezvoltarea unui site adaptiv a devenit mai mult, dar, indiferent de piața pe care o faceți, site-ul cu un design adaptiv este o investiție foarte în timp util în afacerea dvs. Dar lista celor mai importante motive.

5 motive principale pentru a face un site de afaceri cu design adaptiv

Căutare mobilă. Potrivit statisticilor (la momentul scrierii acestui articol), mai mult de 50% dintre cumpărători caută bunuri și servicii pe internet de la dispozitive mobile. Și această cifră crește foarte repede. Mai recent, Google a raportat că site-urile care nu au o versiune mobilă vor fi foarte scăzute în rezultatele căutării de la dispozitive mobile. Prin urmare, dacă nu aveți o versiune mobilă a site-ului, nu vă surprindeți că veți fi dificil să găsiți în găsirea unui smartphone.
Confort pentru utilizatori. Din nou, pe aceleași statistici, mai mult de 40% dintre utilizatori au spus că vor merge la un alt site, în cazul în care actuala versiune mobilă nu are. Și din nou, cota lor crește încrezător. Pentru afaceri, acest lucru înseamnă că cumpărătorul va posta furnizorul, al cărui site este convenabil pe orice dispozitiv.
Contact direct. Smartphone-ul permite utilizatorului să efectueze imediat un apel pe numărul de telefon indicat pe site (dacă funcția clic-to-call este implementată pe site). Astfel, deveniți mult mai aproape de potențialul cumpărător.
Promovarea noilor oportunități. Astăzi, publicitatea mobilă este larg răspândită, dar dacă nu aveți un site mobil, eficacitatea sa va fi scăzută catastrofală. Dimpotrivă, site-urile, prietenos pentru dispozitivele mobile, obțineți o altă promoție puternică a canalului.
Avantaj competitiv. Și ultimul. Verificați dacă concurenții dvs. au versiuni mobile ale site-urilor. Dacă nu, atunci aveți o ocazie excelentă de a crea un avantaj competitiv puternic și de a obține acei clienți care părăsesc site-urile învechite ale adversarilor dvs.

În epoca Internet, cel care este maxim disponibil pentru majoritatea utilizatorilor de rețea, unul care este mai ușor de găsit și care este mai ușor de interacțiunea cu orice dispozitiv este mai ușor de interacționat cu oricine.
Încă mai îndoiți dacă aveți nevoie de o versiune mobilă a site-ului sau a designului adaptiv?

Acest articol vă va ajuta să decideți dacă aveți nevoie de o versiune mobilă a site-ului, de ce aveți nevoie de ea și ce fel de versiuni au. De asemenea, vom împărtăși numere interesante pe această temă.

Aproximativ 25% din traficul pe Internet cade pe sistemele de operare mobile, acest indicator crește în fiecare zi. Împreună cu creșterea numărului de utilizatori ai Internetului folosind un dispozitiv mobil, apare întrebarea, pentru a adapta site-ul la traficul mobil, ce metode există și merită forțele petrecute? Mirare!

De ce versiunea mobilă a site-ului?

Utilizarea versiunii mobile a site-ului de la gadgets este mult mai convenabil: nu este nevoie de o derulare orizontală a site-ului, întreaga funcționalitate a site-ului funcționează corect, vizualizarea site-ului oferă plăcerea utilizatorului;
Versiunea mobilă a site-ului este mult mai ușoară, are un cod mai puțin surround, datorită acestui lucru, site-ul de pe gadget-urile mobile va fi încărcat de mai multe ori mai rapid, inclusiv acest lucru va ajuta la salvarea megaocteților prețioase pentru utilizator;
O versiune special concepută a site-ului pentru telefoanele mobile vă permite să lucrați cu această audiență țintă, de exemplu, pentru versiunea mobilă a magazinului online, puteți introduce trimiterea mesajelor SMS direct de la versiunea mobilă sau pentru a determina locația și distanța la cel mai apropiat punct de vânzări;
Motoarele de căutare utilizează căutarea mobilă pentru telefoane, astfel încât versiunea mobilă a resurselor dvs. va fi clasată mai sus, respectiv numărul de tranziții va crește.

Tipuri de versiune mobilă a site-ului

Design adaptiv. Utilizând CSS3, puteți seta stilurile dvs. pentru diferite dimensiuni ale ecranului site-ului. Această metodă este utilizată pe scară largă astăzi și este bună de faptul că nu necesită producerea de pagini de site-uri suplimentare. Minusul este că nu totul este optimizat pe site, greutatea paginii este încă mare, dar aderarea la principiul "mai întâi mobil" Acest lucru poate fi evitat (principiul atunci când site-ul este optimizat pentru prima dată pentru telefoanele mobile).
Site-ul mobil separat. Modificările aduse unei astfel de versiuni sunt mai ușor de implementat, deoarece structura versiunii mobile și a desktopului nu depinde reciproc în ceea ce privește codul.
Rese.. În această metodă de pe partea de service, dispozitivul definește dispozitivul și afișează HTML și CSS pentru el. Contra aici constă în faptul că tehnologia de definiție tehnologică nu este ideală și este o sarcină suplimentară pe server.
- aplicație separată. Nu este exact ceea ce se potrivește cu definiția speciilor. Mai degrabă, aceasta este o adăugare. Aplicațiile devin din ce în ce mai mult, iar unii utilizatori au început să facă achiziții și să vizualizeze știrile site-ului în principal prin ele. Această soluție este să se gândească la proiectele de Internet mari și vizitate sau să fie condamnată pentru a vizita succesul comercial.

Funcțiile necesare în versiunea mobilă a site-ului

Compatibilitate. Site-ul trebuie afișat corect pe cele mai populare rezoluții de ecrane (480x320, 1280x720, etc.). Pe astfel de site-uri este mai bine să utilizați XHTML, JavaScript este mai bine să ajungeți în jurul feței.
Yuzabilitate. Navigare - Gaj de succes și o bună navigație - cale directă spre victorie, încercați să faceți totul excelent, puneți în mod constant prietenii sau pe diverse forumuri pentru a evalua versiunea propusă de corecțiile utilizatorilor, ia în considerare cu dezvoltarea ulterioară;
Optimizarea conținutului. Acest element se aplică în special imaginilor: ele ar trebui să fie luminoase în kilobytes și în dimensiuni;
Proiecta. Cea mai importantă componentă. Tendința actuală de proiectare pentru mobil este ușurința maximă și ușor de utilizat.

Ceea ce site-ul este în primul rând o versiune mobilă

Studiile de diferite portaluri de internet vă permit să estimați fezabilitatea creării unei versiuni mobile pentru următoarele subiecte:

Rețele sociale și servicii similare;
Mass-media;
Magazine online;
Portaluri de referință.

Pentru a afla exact dacă aveți nevoie de versiunea dvs. mobilă, analizați traficul de resurse în ultimul an prin orice sistem de analiză și dacă ponderea traficului mobil este de 18 ani sau mai mult, gândiți-vă la viteza rapidă de a crea o versiune mobilă.

Încă mai te gândești? Oferim să ne gândim la aceste statistici mici:

Telefoanele mobile sunt utilizate mai mult 87% populația, restul de 13% sunt copii sub 5 ani;
Creșterea comerțului mobil până în 2020 în funcție de diferitele organizații va crește în mai mult de 99 de ori..

Din modul în care adaptăm site-ul pentru dispozitivele mobile, costurile de căutare a promoției de căutare și rezultatul acestuia sunt dependente.

La marcaje

Dmitri Mrachkovsky, un optimizator de la Ashmanov și parteneri, a declarat cum să aleagă între un site adaptiv și mobil și cu ceea ce se confruntă cu probleme non-evidente.

Avantajele site-urilor adaptive și mobile

Este dificil să răspundeți cu siguranță la întrebarea despre care adaptarea tehnologică a smartphone-urilor și a tabletelor este mai eficientă din punct de vedere al SEO. Chiar și printre jucătorii majori, nu am observat avantajul în favoarea unei decizii. "M.Video", DNS, câțiva pași, aviasales folosesc aspectul adaptiv și Lamodul, "220 Volt", "Yulmart", Yandex.Market - site-uri mobile. Dar să ne uităm la ce avantaje sunt primul și al doilea.

Adaptarea adaptivă a site-ului "M.Video" și versiunea mobilă a site-ului "220 volt"

Adaptiv aspectul ajută la realizarea fără a dezvolta o versiune mobilă separată. Are avantaje:

Nu avem nevoie de o structură separată a paginii pentru a fi afișată pe dispozitivele mobile. Este suficient să ajustați versiunea desktop a site-ului folosind CSS.
Pentru versiuni desktop și mobile, se utilizează o singură adresă URL. Prin urmare, conținutul site-ului nu este duplicat, paginile nu concurează între ele, iar lucrările de promovare afectează clasarea în desktop și căutările mobile.

Versiunea mobilă - Soluție mai costisitoare și mai flexibilă. Poate fi editat fără a afecta site-ul principal. Acest lucru oferă avantaje:

Site-ul Mobile poate fi mai ușor și accelerarea descărcării, eliminând funcționalitatea excesivă la nivelul codului.
Interfața poate fi îmbunătățită pentru utilizatorii mobili prin adăugarea de funcționalități care nu a fost pe versiunea desktop a site-ului.
Utilizatorul va putea întotdeauna să treacă la versiunea principală a site-ului de pe dispozitivul mobil dacă dorește.

Vreau să sărbătoresc o altă tehnologie - res. Afișează șabloanele desktop sau mobile, în funcție de dispozitiv, dar adresa URL a paginii nu se schimbă. Res combină plusurile versiunii adaptive și mobile descrise mai sus. Dar are două minus: o implementare complexă și costisitoare și o eroare cu definiția modelelor rare și nepopulare.

Cele mai grave probleme adaptate

Adaptive este o soluție economică și convenabilă, dar din punctul de vedere al promovării căutării are mai multe capcane.

Interpretarea eronată a adaptivă

Unele implementează incorect un strat adaptiv și afișat pe o singură pagină din cod câte două șabloane - desktop și mobil. În funcție de dispozitivul de utilizator, partea dorită a codului rămâne vizibilă, iar restul este ascuns folosind afișajul: Nici unul. Deci, există trei probleme:

Toate elementele de conținut sunt încărcate de două ori: texte, imagini, anteturi H1 și H6, bumbac de pâine, bunuri legate și recomandate și așa mai departe. Și motoarele de căutare nu-i plac foarte mult Dupils.
Porțiunile neutilizate ale conținutului sunt ascunse folosind CSS. Opinia motoarelor de căutare pe această temă este ambiguă. Google a declarat că ignoră conținutul blocurilor ascunse și Yandex - care ia în considerare în întregime conținutul paginii. Majoritatea specialiștilor SEO converg că o astfel de schemă creează riscul de a cădea sub sancțiuni.
Codul este duplicat, iar site-ul este încărcat mai lent.

O astfel de implementare este o abordare incorectă a tehnologiei RESS.

Ascunderea elementelor inutile

Pentru a face o interfață adaptivă mai convenabilă, unii scapă de o parte din funcționalitate: distragerea blocurilor, textele mari în categoriile de catalogare și așa mai departe. Toată lumea este ascunsă de ascuns folosind afișajul: nici unul. Dar problema este că întregul cod este utilizat pentru a încărca pagina, iar site-ul funcționează încet. În plus, după cum sa menționat deja mai sus, motoarele de căutare au o atitudine controversată față de un astfel de conținut - există riscul de a cădea sub sancțiuni.

Utilizarea nevalidă a JavaScript

Unele utilizează JS pentru a nu afișa blocuri suplimentare pe dispozitivele mobile. Dar această metodă nu este un afișaj mai bun: nici unul. Există riscul ca motoarele de căutare să nu indexeze conținutul destinat acestora chiar pe versiunea desktop. Motoarele de căutare deloc nu percep întotdeauna conținutul AJAX, mai ales dacă o serie de condiții nu sunt îndeplinite pentru indexarea corectă.

De ce să utilizați încă designul adaptiv

Alegerea unui adaptabil se datorează, de obicei, două avantaje principale: dezvoltarea unei singure versiuni a site-ului și a lipsei de probleme cu mai multe adrese URL.

Este, de asemenea, o soluție convenabilă pentru deplasarea în mai multe regiuni. Trimitem toate eforturile la un domeniu și primim rezultatul în căutarea desktopului și a căutării mobile. Pentru a face acest lucru, trebuie să vă obligați la site-ul regiunilor de interes pentru Yandex.frash.

Și pentru Google, creați o pagină cu adresele ramurilor, astfel încât motorul de căutare să înțeleagă, în care regiunile lucrați. Stratul adaptiv cu un singur domeniu utilizează foarte mult M.Video. Magazinul are locuri înalte în problemele mobile și desktop pentru cererile de mărfuri, categorii și informații.

Puteți merge la un alt mod - de a utiliza Geopoddomin pentru a crește relevanța textului paginilor. În acest caz, subdomeniile cum ar fi spb.site.ru, samara.site.ru, kazan.site.ru Atribuiți regiuni prin Yandex.vebmaster și apoi prescrieți titluri și meta etichete cu toponim. Un alt plus - pentru geopodomene este ușor de configurat analitice separate pentru a urmări rezultatele pe regiune. Această metodă de promovare practică Mediamarkt.

Versiuni mobile ale site-urilor

Costul relativ ridicat al dezvoltării nu este singurul dezavantaj al site-urilor mobile. Iată o listă a problemelor mai puțin evidente cu care vă puteți confrunta, alegerea acestei tehnologii.

Double Promotion Work

Site-ul mobil este optimizat și mutat separat de cea principală și necesită mai multe resurse decât în \u200b\u200bcazul unui adaptabil. Trebuie să începeți optimizarea cu versiunea mobilă indexată corect și nu a concurat cu desktopul. Pentru a face acest lucru, legați-le la Yandex.vebmaster și consola de căutare, scrieți atributele corecte Rel \u003d "alternativ", configurați indexarea și generarea unui card XML.

Haos din cauza referințelor absolute în conținut

Șabloane de desktop și mobile în 99% din cazuri de încărcare a conținutului de la o bază. Dacă există legături absolute la pagina internă a site-ului desktop cu protocolul și domeniul, atunci vor apărea pe pagina mobilă. Când mergeți la link, unul dintre cele două scenarii vor apărea:

Dacă versiunea desktop este definită de agentul utilizator, utilizatorul va deschide versiunea mobilă a paginii.
În alte cazuri, utilizatorul va vedea o pagină desktop și va lucra la crearea unei versiuni mobile va fi în zadar.

În acest caz, greutatea internă de referință a site-ului poate rupe. Pentru că problema nu apare, utilizați legături relative în conținut. Adică atributul href indică / pagină / în loc de https://site.ru/page/.

Conținutul și structura site-urilor desktop și mobil pot diferi. Prin urmare, este logic să indexați conținutul de căutare pe care alții să evite erorile. Google recomandă pe versiunea mobilă pentru a indica faptul că canonicul este conținutul site-ului desktop. Pe de altă parte, motorul de căutare spune că conținutul paginilor non-canonice nu este luat în considerare.

Yandex are totul clar în această privință - indici separat conținutul paginilor mobile și desktop. Pentru a face acest lucru, este suficient să instalați atributul Rel \u003d "alternativ" de la versiunea de bază la telefonul mobil și puteți configura în continuare 301-redirecționare de la versiunea desktop la Mobile, având în vedere dispozitivul de agent utilizator.

Nonconsucția cerințelor Indicele Mobile-Primului

Pentru a vă pregăti pentru tranziția la Indexul mobil mobil, este logic să alegeți o versiune mobilă a site-ului ca o pagină canonică. Adevărat, în recomandări privind mobilul mobil are propriile sale ambiguități. De exemplu, în Manualul Google se spune că conținutul versiunilor mobile și desktop ar trebui să fie similar, dar nu dezvăluie gradul de "similitudine".

Și dacă un anumit conținut este obligat să clasifice în căutarea desktopului, care va fi inutilă în versiunea mobilă, dar va fi acordată prioritatea versiunii mobile?

Extras din Manualul Google despre indexarea site-ului mobil

Extras din raportul Google privind implementarea indicelui-ului mobil

Folosirea fără îndoială a constructorilor turbo

Unii introduc inovații de motoare de căutare fără parsare, cu calculul pentru a influența clasamentul. De exemplu, turbozitățile Yandex care nu înlocuiesc paginile mobile cu drepturi depline în căutare, includ o mică parte a funcționalității utilizatorului și sunt mai puțină conversie. Dacă aveți un site comercial și sunteți încrezător ca o versiune mobilă, nu vă grăbiți să implementați "Turbo" - chiar și pentru paginile cu articole și recenzii.

Efect redus față de legăturile externe

Link-urile sunt încă importante pentru clasament, în special în căutarea Google. Când apare subdomeniu mobil, unii dintre utilizatori încep să se refere la acesta în rețelele și forumurile sociale. Iar cealaltă parte utilizează legături către adresa principală a site-ului. Ca urmare, legăturile oferă un efect mai puțin în căutarea mobilă și în căutarea desktop decât dacă am avea un domeniu.

Caracteristicile de promovare în regiuni

Mai sus, am vorbit despre două moduri de avansare regională - folosind un singur domeniu și Geopoddenov. Luați în considerare aceste opțiuni pentru versiunile mobile.

În primul caz, promovăm domeniul principal și subdomeniul mobil M.Site.ru. Fiecare dintre ele trebuie să stabilească regiunile prin Yandex.spravik. Problema este că uneori este imposibil să legați versiunea mobilă a site-ului la ramură. Va trebui să contactăm asistența tehnică, dar nu garantează rezultatul. Este imposibil să se creeze o organizație separată sub versiunea mobilă a site-ului. Prin urmare, dacă există multe ramuri, legarea poate întârzia mult timp.

O opțiune folosind subdomeni precum m.spb.site.ru sau spb.m.site.ru În general, excludem. Deși "frigider.ru", de exemplu, îl folosește. Dar, în acest caz, trebuie să personalizați adresa între toate regiunile versiunilor mobile și desktop, să le mențineți la curent, urmăriți modificările și monitorizarea serviciilor pentru webmasteri. Aceasta este o lucrare enormă care este puțin probabil să plătească.

Trimiterea la verificarea "mobilității"

Dacă nu trimiteți o versiune optimizată a site-ului în Yandex.vebmaster pentru a verifica "mobilitatea", este posibil să nu apară în emisiunea mobilă. Problema se referă la adaptarea. Acest lucru nu se întâmplă întotdeauna, dar vă recomand să vizionați mesaje în WebMister.

Fragment de comunicare cu suport tehnic "Yandex" despre cesiunea regiunii versiunii mobile a site-ului

De ce se utilizează versiunile mobile

Principalele avantaje ale versiunilor mobile sunt, fără îndoială, capacitatea de a crea un șablon separat și o viteză mare de încărcare. În plus, site-urile vechi sunt mai ușor de a crea o versiune mobilă separată decât pentru a implementa adaptivă.

De asemenea, mulți specialiști SEO au remarcat creșterea traficului de căutare după introducerea unui site mobil în loc de adaptor. Deși nu exclud că motivul creșterii a fost că există greșeli în aspectul adaptiv, care au avut un efect negativ asupra clasamentului.

Ce opțiune să alegeți

Dacă dezvoltați un site de la zero sau aveți un proiect mic, aruncați o privire la aspectul adaptiv. Aceasta este o soluție mai economică și mai rapidă. Numai funcționalitatea este mai bine să planificați imediat, astfel încât să nu trebuie să ascundă parte din site-ul de pe dispozitive mobile.

Dacă puneți o experiență de utilizator în capitolul Unghi, merită să faceți o alegere în favoarea versiunii mobile. Acesta poate fi schimbat fără consecințe pentru desktop. Acest lucru este important dacă site-ul ocupă o poziție de lider în emiterea desktopului în segmentul său.

De asemenea, puteți utiliza tehnologia Ress, dar amintiți-vă că în acest caz Google oferă preferință versiunii mobile.

Expunerea din Manualul Google despre site-urile de indexare utilizând resursa

Indiferent de tehnologia pe care o alegeți, încercați să faceți site-ul și versiunile sale indexate corect, încărcate cât mai repede posibil și afișate pe toate dispozitivele fără probleme.

Vă mulțumim specialiștilor SEO

Toți cei care nu sunt leneși se spune despre mobilitate: de la agenții mici de marketing la Yandex și Google Giants.

În acest articol vom spune de ce versiunea mobilă a site-ului provoacă o astfel de emoție, ce cerințe pentru acesta și dacă este necesar pentru dvs.

Și voi deschide imediat un mare secret, după introducerea sa, am început să primim mai multe comenzi. Tot. Restul este mai departe.

Pentru ce? Pentru ce? Pentru ce?

Puteți îngriji diferit subiectul necesarului de a adapta site-ul pentru dispozitivele mobile.

Dar la nivel global există două motive bune în favoarea creării unei versiuni mobile a site-ului - obiceiuri și tehnice.

Să rămânem în detaliu pe fiecare. În același timp, ca de obicei, pe scurt și în caz. Apa se lasă în spatele porții.

Confort pentru utilizatori

În 2016, analiștii de la StatCounter au observat mai întâi că ponderea traficului mobil a depășit fracțiunea din desktop: 51,3% față de 48.7.

Aceasta înseamnă că, în medie, orice site de pe Internet de la telefon este vizitat mai des decât de la un computer.

În Rusia, imaginea este aproximativ aceeași: proporția telefoanelor inteligente este mai mare decât proporția computerelor și a altor dispozitive. Acest lucru se spune de către compania de cercetare GFK RUS:

Statistici

În fiecare an, separatorul crește din ce în ce mai mult - de exemplu, în 2018 creșterea a fost de 20%. În plus, analiștii spun că aceasta nu este limita.

Această aliniere ar trebui să te facă să te gândești: Cum arată site-ul dvs. pe ecranul smartphone-urilor.

Și, cel mai probabil, răspunsul este rău. Când deschideți site-ul obișnuit neadaptat de pe telefonul mobil, vizualizarea se transformă în căutarea - trebuie să scalați paginile, să vizați în link-uri minore, să așteptați o descărcare lungă.

Adăugați la aceasta toată graba și o grămadă de factori distrați - deoarece telefonul nu este același cu computerul când vizitatorul este complet concentrat pe monitor.

Utilizatorii nu vor căuta secțiunea dorită și nu vor înțelege interfața - site-ul convenabil al concurentului este întotdeauna deschis în fila următoare.

Preferințe motor de căutare

Google și Yandex vor fi împletit pentru versiuni mobile pentru o lungă perioadă de timp. Primul pentru acest lucru a lansat un algoritm special de index mobil, pe care apreciază confortul unui site mobil și, în funcție de aceasta, determină poziția sa în căutare.

Al doilea algoritm a ieșit mai târziu, dar este cel mai important la același nivel. Numit - "Vladivostok".

Există cauze indirecte care afectează situația versiunii mobile în căutare. În plus față de alți factori, motoarele de căutare iau în considerare caracteristicile comportamentale.

Aceasta este despre cât timp vizitatorii dvs. petrec timpul pe site, câte pagini se deschid, cât de acționează în mod activ pe butoane și comutatoare.

Dacă utilizatorul trece de la un telefon mobil la un site desktop obișnuit, acesta nu va rămâne acolo mult timp.

Și, prin urmare, caracteristicile comportamentale se vor deteriora. Ca rezultat, vă aflați pe cele mai recente pagini nelocuite ale lui Yandex și Google.

Nu v-am convins anterior? Apoi, verificați dacă versiunea dvs. mobilă are nevoie de dvs. sau mai degrabă ce aparate vizitatorii introduceți site-ul dvs.

Puteți să o faceți în Google Analytics în raportul "Audiență -\u003e Dispozitive mobile -\u003e Prezentare generală". Dacă aveți, apoi accesați "Rapoarte -\u003e tehnologie -\u003e Dispozitive".

Analytics.

Dacă vedeți că smartphone-urile sunt mai mari de 15%, atunci pentru dvs. este un clopot alarmant - trebuie doar să optimizați site-ul pentru mobil. Prin urmare, să înțelegem ce metode fac deloc.

Important. Această situație nu este observată deloc. Și în unele zone, utilizarea versiunii mobile este interzisă, indiferent cât de ciudat sună.

tipuri de versiuni mobile

Majoritatea site-urilor și a magazinelor online pe care le-ați întâlnit, utilizează una din cele trei abordări: aspectul adaptiv, site-ul mobil separat și afișajul dinamic.

Ca de obicei, pentru a face alegerea potrivită, trebuie să vă respingeți de sarcinile și oportunitățile voastre.

1. Layout adaptiv

Din punct de vedere tehnic, acesta este un site, dar structura paginilor este ajustată pentru dimensiunea dispozitivului.

În versiunea simplificată arată astfel: Pentru computere, deschideți toate elementele de meniu și construiți bunuri în trei coloane.

Pentru tablete, arătăm doar cosul și bunurile locului în două coloane; Smartphone-uri - Ascundeți totul în butonul Meniu, mărfurile au una pentru fiecare șir.

Adaptive layout.

Principalul plus al unei astfel de adaptabilități al site-ului este că telefonul mobil și versiunea desktop este același site.

Deci, orice modificări sunt suficiente pentru a face o dată, după care adaptarea site-ului pentru toate ecranele se va automatiza automat.

Poate fi adăugând un articol, schimbarea sortării, o nouă culoare a butoanelor. Alte avantaje ale adaptive:

Ieftine și pur și simplu - fiind dezvoltate relativ și ieftin, puteți chiar să introduceți adaptarea la un site existent;
O adresă de pagină este convenabilă pentru utilizatori și corect în termeni tehnici (mai puține wraplininți cu optimizarea motorului de căutare);
Deci recomandă Google. Pe pagina dezvoltatorului există o recomandare formală de a utiliza un aspect adaptiv. Nu există argumente specifice, dar acesta este Google însuși.

De asemenea, sunt disponibile dezavantajele aspectului adaptiv. Deși în raport cu alte opțiuni sunt destul de invizibile. Dar totuși, așa cum a spus deja, ei sunt:

Site-ul cu o mare funcționalitate este dificil de adaptat pentru telefoanele mobile. Acesta va fi sau inconvenient sau va trebui să sacrifice unele posibilități;
Încărcare lentă. Amintiți-vă, am spus că același site este încărcat pentru computere și pentru computere?
Acestea sunt imagini grele și meniuri lungi și restul informațiilor. Pentru a rezolva problema, unii dezvoltatori folosesc compresia paginilor, dar necesită, de asemenea, cereri suplimentare către server și, prin urmare, timpul;
Este imposibil să treceți la versiunea completă. Utilizatorul nu va putea trece la versiunea desktop pentru a utiliza toate posibilitățile, deoarece site-ul însuși decide ce versiune să-i arate.

Cu toate acestea, designul adaptiv este cea mai populară versiune a versiunii mobile de pe Internet.

Folosește multe motoare, designeri și totuși, avem pe unii.

2. Versiunea mobilă separată

În acest caz, veți avea două site-uri diferite - toată lumea are propria lor adresă, design și capabilități. Acesta este răspunsul la întrebarea: "Care este diferența dintre versiunea mobilă a site-ului de la adaptor?".

Site-ul în sine determină dimensiunea ecranului vizitatorului și decide că versiunea mobilă a site-ului sau desktop-ului va fi afișată.

Cel mai adesea, este versiunea mobilă care începe în referință cu litera M (tradusă ca "mobilă").

Versiunea telefonică separată

Această abordare este convenabilă pentru că nu depindeți deloc de versiunea desktop. Vă puteți concentra pe deplin asupra confortului utilizatorilor de telefonie mobilă, lăsați numai cele mai de bază funcții și luați în considerare toate lucrurile mici din utilizare.

Aspectul versiunii mobile va fi foarte diferit de desktop. Cu siguranta pasiti sa pastrezi vizitatorul împrossit, care cel mai probabil împinge pe autobuz sau se uită la telefonul smartphone până când vede capul.

Toate butoanele și comutatoarele pot fi făcute enorme pentru a ajunge la ele pentru a obține un deget.

Există, de asemenea, alte argumente pentru a crea o versiune mobilă a site-ului separat: viteza de descărcare rapidă - într-o versiune separată Imagini luminoase cu o calitate medie și în general pagina este tăiată la elementele de bază.

Și este posibil să mergeți la versiunea completă a site-ului dacă vizitatorul decide că nu există suficiente funcții mobile.

Justiție de dragul versiunii individuale a site-ului pentru dispozitive mobile Există dezavantaje:

Adrese diferite ale site-ului la telefoanele mobile și pe desktop. Acest lucru poate crea probleme cu motoarele de căutare SEO - Căutați două site-uri diferite cu același conținut.
Și poziții inferioare pentru duplicare. Pentru a obține în jurul problemei, va trebui să conectați resurse suplimentare;
Este incomod să stați cu comprimatul - este rupt în întregul ecran.
Și pentru versiunea desktop, ecranul tabletei nu va fi suficient de mare. Se pare că vizitatorul intră într-un capăt mort;
Costă mai mult. Deși versiunea mobilă și funcționalitatea limitată, dar totuși, consideră că acesta este un nou site care urmează să fie creat de la zero.
Prin urmare, pentru a dezvolta o versiune mobilă a site-ului, puneți un buget în avans;
Timp suplimentar pentru a gestiona. Există două site-uri, menținerea muncii și urmărirea relevanței și acolo și aici.

După cum puteți vedea, vă îngrijorează foarte mult. Dar multe magazine online mari aleg această metodă, deoarece fiecare acțiune incorectă poate suspina clientul să facă o achiziție.

Dacă aveți același vânzări "periculoase", înseamnă că trebuie să acordați atenție dezvoltării site-urilor de comerț electronic.

Magazin online de site

3. Afișaj dinamic (RESS)

Iar a treia metodă este simbioza celor două opțiuni anterioare. În primul rând, site-ul definește dispozitivul de vizitatori și, în funcție de dimensiunea ecranului, deschide o versiune desktop, mobilă sau tabletă.

Aceasta este, numai opțiunea este încărcată, care este potrivită pentru un dispozitiv specific. Computerele sunt mari și voluminoase, iar smartphone-urile sunt limitate, dar lumină. Abordarea reduce timpul de deschidere.

Principalul dezavantaj al lui Res este lung și scump. Dezvoltați un spectacol dinamic - este ca și cum ați crea mai multe site-uri diferite de la zero.

Da, tehnologia nu este perfectă. Ress este un instrument relativ tânăr, astfel încât se poate întâmpla ca dispozitivul să fie determinat incorect sau nu este determinat deloc.

Google poate fi atribuită lucrătorilor proeminenți care utilizează resurse. În general, după cum sa menționat, tehnologia nu este prinsă și dacă aveți un buget limitat sau apăsați timp, este mai bine să nu riscați. Și să acorde atenție celor două opțiuni anterioare.

Există, de asemenea, un concept ca un aspect de cauciuc. Unii cred că aceasta este o variantă a site-ului mobil, dar nu este.

Important. Aspectul de cauciuc este numai atunci când site-ul este, de asemenea, afișat la telefon, cum ar fi pe PC. Mai mult, complet neschimbată.

Criterii idealitatea

Am spus deja că utilizatorul este cel mai concentrat pe computer pe ceea ce vede pe ecran.

Pentru atenția sa, practic nimic concurează. Indiferent dacă afacerea este potrivită pentru un smartphone - sarcini paralele, drum, alerte, apeluri înconjurătoare. Acest lucru este necesar să se țină seama mai întâi de toate atunci când se dezvoltă.

Prin urmare, indiferent de abordarea aleasă, trebuie să respectați anumite reguli ale site-ului pentru dispozitivele mobile. Iată cele mai importante dintre ele:

Text mare întunecat pe un fundal luminos. Toate textele sunt făcute mai bine prin font clasic - negru pe un substrat alb.
Forme scurte. Lăsați o aplicație, faceți o programare, plasați o achiziție - că utilizatorul nu ar fi intenționat să intre, trebuie să solicitați un minim de date care sunt suficiente pentru primul contact.
Formele lungi sunt speriate în principiu ce să vorbească despre vizitatorii mobili.
Elemente mari clikable. Vizitatorul nu trebuie să vizeze și să prindă butoanele și comutatoarele. Toate elementele interactive sunt mai bune pentru a face mari - încercați pe ele.
Apple și Microsoft sfătuiește să se străduiască pentru dimensiuni 44 pe 44 de pixeli. Pragul minim este de 24x24, dar este ca o ultimă soluție.
Viteza de descărcare a site-ului. Nu există standarde specifice, dar ar trebui să vă deplasați întotdeauna pentru ideal.
Există un astfel de model general - în fiecare secundă care merge pentru a încărca pagina reduce proporțional conversia în vânzări.
Puteți verifica versiunea mobilă a site-ului de pe viteza de descărcare în servicii speciale, despre ele puțin mai mici.
Tipul specificat de formular. La elaborarea unei sarcini tehnice, trebuie să specificați că atunci când telefonul este completat, trebuie afișată numai tastatura digitală.
La fel pentru parole, e-mail și alte câmpuri. Dacă dezvoltați un site, nu fiți leneși să setați fiecare formă de tipul corespunzător.
Contacte clicabile. Ca și în cazul formularelor, datele de contact au, de asemenea, un tip special de referință.
Faceți clic pe telefon - setarea numerică se deschide, pe e-mail - programul de poștă electronică. Utilizatorii vor fi cu siguranță prin contacte.
Informații într-o singură coloană. Nu există scroluri și fotografii orizontale în mai multe coloane pe un singur ecran.
Chiar și emblemele abrupte au un ecran nu este suficient pentru acest lucru. Textul într-o singură coloană este mai convenabil de citit, iar pe fotografii mari va fi posibil să vedeți toate detaliile.

Lifehak. Dacă pur și simplu aveți nevoie de informații complete despre client (pentru livrare, de exemplu), întrerupeți procesul de completare a aplicației pentru mai mulți pași.

În primul pas, cereți numele și numărul, precum și adresa și detaliile sunt următoarele. Chiar dacă utilizatorul este leneș și nu va completa formularul până la sfârșit, veți avea contacte pentru a vă ajuta.

Capturați formularul

Verificați mobilitatea

Cel mai bun expert care vă va spune, indiferent dacă aveți un site convenabil este un vizitator. Petreceți o mică testare a versiunii dvs. mobile prin metoda "gândurilor în zvon".

Alegeți din mediul celui care este mai potrivit pentru o descriere a potențialului dvs. cumpărător: după vârstă, profesie, interese.

Cereți unui voluntar pentru a face o comandă - lăsați-o să treacă prin deplin a cumpărătorului. Doar nu interferați și nu o corectați.

Fie ca totul să fie cât mai realist posibil - nu veți sta lângă fiecare vizitator și explicați unde să apăsați.

Orice dificultăți și confuzie Experimentul dvs. trebuie să comenteze cu voce tare.

Și continuați să jucați un spion: Analizați acțiunile și marcați în mod tăcut nota în notebook. Puteți ajuta doar în cazul extrem, dacă voluntarul a căzut într-un blocaj.

Inspecția tehnică

Când vă asigurați că toate elementele din locurile noastre și interfața este clară și previzibilă, mergeți la partea tehnică.

Săriți site-ul prin diferite servicii pentru a colecta erori și comentarii. Poți - Fixați-vă, nu - veți ști ce să scrieți în programul TK.

Consola de căutare Google. - Serviciul oficial de la Google. Acesta va arăta ce arată site-ul pe ecranul de dimensiuni medii ale smartphone-ului și va oferi recomandări pentru îmbunătățire.

Amintiți-vă că am vorbit despre algoritmul de indice mobil? Serviciul se bazează doar pe munca sa, așa că nu neglija acest element.

Consola de căutare Google.

Yandex Webmaster.- Servicii similare de la Yandex. Înainte de a verifica aici, trebuie să adăugați un site în panoul Webmaster și să confirmați drepturile la acesta (descărcați un fișier filetat mic).

Numai atunci puteți utiliza serviciul mergând la "Instrumente -\u003e Verificarea paginilor mobile". Lucrul este, de asemenea, util - cu recomandări și comentarii.

Yandex Webmaster.

Verificați de la căutarea Bing. Da, da, un astfel de motor de căutare este, de asemenea, acolo. Lăsați-i să se bucure de foarte puțini oameni, dar acum nu sunteți nevoie.

Serviciul poate vedea erorile la care cele două anterioare nu vor acorda atenție. Ei bine, așa cum spun ei, nu va fi mai rău.

Verificați din căutarea Bing

Inspectie vizuala

După verificări tehnice, mergeți la vizual. Desigur, puteți verifica site-ul și de pe telefonul dvs., dar vizitatorii dvs. au dispozitive diferite de la embleme cu ecran lat la smartphone-uri bugetare.

Pentru a urmări toate, utilizați servicii pentru a afișa site-ul pe ecrane diferite. Iată câteva dintre ele:

responsabilator.com - Afișează toate dispozitivele populare dintr-o dată pe o singură pagină. În total, sunt zece dintre ele: pixel 2 (și în general Android), iPhone și iPad-uri.

Responsabilator.com.

iloveAdaptive.com - Puteți selecta ce platforme să fie afișate imediat, fără agitare dispozitive diferite.

De la chifle suplimentare: În colțul din dreapta sus există indicatori de bază ai vitezei de încărcare a paginii.

iloveAdaptive.com.

quirktools.com - doar un singur dispozitiv se afișează în același timp, dar ce alegere este. Toate ecranele sunt rupte de grupuri: smartphone-uri moderne, telefoane cu buton, computere și televizoare.

De mai sus - o linie confortabilă cu dimensiunea ecranului în pixeli și funcții suplimentare pentru rotație și derulare.

quirktools.com.

În serviciile există SNAG - indiferent cât de mult le-ați încercat, acestea nu vor fi transmise la afișajul complet.

Datorită diferitelor platforme, tehnologii și abordări ale dezvoltării, imaginea de pe serviciu și în telefonul real poate fi diferită - un pixel mai mult, un pixel mai mic.

În general, nu afectează foarte mult calitatea mobilității, dar este mai bine să țineți cont.

Apropo. Puteți găsi exact ce ecran veți vizita vizitatorii în aceeași metrică. Statisticile sunt în "Rapoarte standard -\u003e Tehnologii -\u003e Permisiuni de afișare".

Pe scurt despre principalul lucru

Deci, dacă luați versiunea mobilă, selectați mai întâi un mod adecvat și apoi asigurați-vă că dezvoltatorul nu se împrăștie.

Dar înainte ca toate acestea să facă bine. La urma urmei, un lucru, astfel încât totul să fie bine afișat și un alt lucru de a vinde totul. Și pentru aceasta, numai partea tehnică este mică.

Și la fel, este o păcat pe care ați crezut-o numai la versiunea mobilă. Times, când au spus că a fost deja relevantă deja, și a venit revoluția mobilă.

Acum, adaptarea site-ului pentru smartphone-uri este funcția implicită. Sfaturile noastre de experți pentru tine - Drop îndoieli și continuați.

Aceasta este o versiune simplificată suplimentară a site-ului, situată, de obicei, pe subdomeniul cu prefixul "M" (de exemplu, M.).

După cum se poate vedea din imaginea de pe tablete, versiunea pentru telefoane se deschide și ea se întinde în lățime, deoarece tableta este un smartphone practic foarte, foarte larg 🙂

În mod extern și stilistic, în mod natural, poate fi făcut ca site-ul principal (astfel încât să nu aibă nici un sentiment că au primit pe o altă pagină): aceleași culori, fonturi, elemente. Dar structura poate diferi radical și cel mai adesea este. Este puțin probabil ca cineva să aleagă un apartament sau să ia o mașină printr-un telefon sau să facă un împrumut într-o bancă. La urma urmei, este incomod, ecranul este mic (comparativ cu laptopul sau computerul). Dar găsiți cea mai apropiată bandă sau adresa de pizzerie - dimpotrivă. Prin urmare, versiunile mobile sunt foarte simplificate, fără calculatoare complexe, tabele uriașe de comparare a două sau mai multe produse similare. Curățați toate cele mai dificile și simplificați accesul la contacte, modul de lucru și așa mai departe.

Beneficii

Deoarece aceasta este o versiune suplimentară a site-ului, este încărcată separat (adică, site-ul principal nu este încărcat). Și încă o dată repetă: De regulă, este foarte simplificată. Prin urmare, este rapid încărcată în raport cu adaptarea.
Mențineți o versiune mobilă este destul de simplă: modificările și îmbunătățirile nu afectează computerele.

dezavantaje

I, ca designer, îmi exprim imediat "taxa" în ceea ce privește tabletele: arată foarte întins de versiunea de lățime pentru smartphone-uri. Nu, este posibil să folosiți ceva. Dar adaptarea în această privință a fugit pe deplin complet.
Toate acestea sunt extrem de incomod pentru optimizarea SEO. Două adrese - site-ul principal și versiunea mobilă înseamnă că conținutul va fi duplicat.