Care este versiunea mobilă. Ce să alegeți: versiune mobilă sau design receptiv? Căutați trafic mobil

Salutări, dragi cititori, în acest articol, vreau să vorbesc cu voi despre versiunea mobilă a site-ului. Sau mai bine zis, aveți nevoie de o versiune mobilă și care sunt avantajele acesteia.

De ce am decis să încep un subiect despre versiunile mobile ale site-urilor? Totul este foarte simplu! Dacă comparăm acum traficul site-urilor și, să zicem, chiar și acum 2-3 ani, există o mulțime de utilizatori care folosesc smartphone-uri și tablete. Și există o mulțime de astfel de utilizatori! Prin urmare, ei ar trebui să-și facă viața mai convenabilă, vedeți, versiunea completă a site-ului, pentru citirea pe un smartphone, nu este foarte prietenoasă. Despre asta vom vorbi, dar mai întâi vreau să explic ce este o versiune mobilă a unui site.

Versiunea mobilă a site-ului- aceasta este o versiune separată a site-ului care o duplică pe cea principală, dar este trunchiată, relativ desktop și, de regulă, versiunea mobilă este realizată într-o singură coloană, pentru o utilizare confortabilă pe smartphone-uri fără a utiliza scalarea. În versiunea mobilă, rămâne doar cea mai simplă funcționalitate a site-ului, iar toate cele secundare sunt eliminate. Astfel, utilizatorul poate naviga confortabil pe site, poate citi informații despre acesta și poate primi un răspuns complet la întrebarea sa.

După cum puteți vedea, totul este destul de simplu, versiunea mobilă a site-ului este un aspect special, care va fi confortabil de vizionat pe smartphone-uri și tablete. Dar acestea sunt doar lucruri generale, deoarece versiunile mobile ale site-ului pot fi împărțite în diferite opțiuni pentru implementarea lor, în principal, există 3 tipuri diferite de aspect al site-ului mobil: design adaptiv, versiune mobilă separată, RESS(Responsive Design + Server Side). Să aruncăm o privire la fiecare implementare separat.

Design adaptiv

Designul receptiv este de departe cel mai popular. Există multe motive pentru aceasta, despre care vom vorbi puțin mai departe, dar acum vă voi spune ce este designul receptiv și care sunt trăsăturile sale distinctive.

Design adaptiv- aceasta este una dintre opțiunile pentru implementarea versiunii mobile a site-ului. Principala caracteristică a designului receptiv este absența unei versiuni separate a site-ului, adică designul în sine se adaptează utilizatorului, ținând cont de rezoluția ecranului. Aspectarea designului receptiv se face datorită CSS3, utilizând interogări media - Interogări media. Cel mai important lucru este că designul receptiv este același pentru toate dispozitivele, atât pentru computere, cât și pentru telefoane și tablete, adică nu este un site separat.

Datorită interogărilor media, puteți rezolva diverse sarcini, de la setarea lățimii unei pagini sau a unui element, până la dezactivarea elementelor mai puțin importante, astfel încât acestea să nu interfereze cu citirea conținutului de pe smartphone-uri și tablete. Mai mult, pentru telefoane și tablete, puteți face diferite versiuni, adică pentru tablete, eliminați câteva blocuri inutile, lăsându-le pe cele mai importante, iar pe telefon, reduceți-le la minimum, astfel încât să nu interfereze cu percepția conţinut.

Pentru a arăta mai clar modul în care se realizează un aspect receptiv, vă voi oferi o mică bucată de cod și vă voi explica funcționarea.

@media screen and (min-width: 360px) (div (display: none;)) @media screen and (min-width: 720px) (div (display: block;))

Acest cod spune că dacă rezoluția dispozitivului este de 360px sau mai mult, atunci blocul div nu va fi afișat, dacă rezoluția este de 720px sau mai mult, atunci divul va fi afișat ca element de bloc. Astfel, puteți prescrie absolut orice proprietăți tuturor elementelor la rezoluții diferite. Adică, poate fi atât lățime, cât și înălțime, și vizibilitate, și o opțiune de poziționare, sau orice altceva în general, chiar și un font diferit. Dar cel mai important, atunci când utilizați interogări media, ar trebui să aibă un design receptiv dispunerea cauciucului... Acum, să aruncăm o privire la avantajele și dezavantajele unui aspect de site web receptiv.

Avantajele unui aspect receptiv atunci când implementați o versiune mobilă a site-ului:

- Confort și ușurință de creație... Proiectarea receptivă este destul de ușor de dezvoltat, deoarece dintr-o singură lovitură mai multe versiuni ale site-ului sunt alcătuite simultan (desktop (computer), tabletă (opțional) și mobil). Având un aspect gata făcut al paginii principale în HTML, trebuie să începeți să scrieți interogări media pentru rezoluții mai mici, adică pentru tablete și telefoane mobile.

- O adresă a site-ului... Cu un aspect receptiv, versiunea mobilă a site-ului dvs. va avea aceeași adresă ca versiunea completă a site-ului, ceea ce este practic foarte bun. Nu este nevoie să configurați redirecționări între diferite versiuni, iar utilizatorul își va aminti o altă adresă a site-ului, chiar dacă doar i se adaugă m.

Dezavantaje ale aspectului receptiv atunci când implementați o versiune mobilă a site-ului:

... Timpul lung de încărcare se datorează faptului că, deși site-ul este conceput pentru dispozitive mobile, designul se adaptează dispozitivului, adică smartphone-ul dvs. trebuie să descarce toate fișierele HTML și toate fișierele CSS. Adică, în ciuda designului cel mai simplificat al versiunii mobile, care cântărește câțiva kiloocteți, trebuie să încărcați totul, adică greutatea totală a paginii va fi versiune completă + mobil... Și dacă semnalul rețelei de telefonie mobilă este defect, atunci un astfel de site poate dura foarte mult timp să se încarce, trebuie să recunoașteți că nu este bine să faceți utilizatorul să aștepte foarte mult timp.

- Complexitatea editării... Dificultatea constă în faptul că toate versiunile site-ului dvs. se află într-un singur document, adică desktop, tabletă și mobil. Desigur, dacă sunteți bine versat în aspect, atunci nu veți avea probleme speciale, dar totuși aceasta este o complexitate sporită, comparativ cu o versiune separată pentru mobil.

- Lipsa alegerii versiunii site-ului... Cea mai mare problemă cu aspectul receptiv este că nu puteți alege să treceți la versiunea desktop. Și se dovedește că, dacă tăiați funcționalitatea necesară a site-ului, atunci utilizatorul mobil nu va putea să-l folosească în niciun fel, doar dacă nu începe să se acceseze cu crawlere în codul sursă al paginii. Dar nimeni nu va face acest lucru, ci va merge pur și simplu la un concurent.

Prin urmare, în ciuda tuturor dezavantajelor pe care le are designul receptiv, acesta este un concept foarte popular pentru implementarea unei versiuni mobile a site-ului, deoarece potențialul său nu este suficient de rău și cu o abordare competentă, unele dintre probleme pot fi evitate.

Versiune mobilă separată a site-ului

O versiune mobilă separată a site-ului este probabil cea mai veche implementare a accesului convenabil la site pentru proprietarii de smartphone-uri. Acum vă voi spune mai multe despre versiunea mobilă a site-ului.

O versiune mobilă separată a site-ului este versiunea site-ului la care accesează utilizatorii de smartphone-uri și tablete trecând la cea principală. Are o adresă separată, de obicei un prefix la domeniul principal m. sau mobil. O versiune mobilă separată este un site separat care folosește baza de date principală pentru a afișa același conținut, dar un aspect complet diferit, optimizat pentru dispozitivele mobile. De regulă, cele mai importante funcții ale site-ului sunt incluse în versiunea mobilă, cele care nu sunt necesare utilizatorilor de dispozitive mobile sunt eliminate.

Dacă luăm un design receptiv, atunci ne-a venit cu noi caracteristici ale CSS3, iar o versiune separată a site-ului a existat cu mult înainte de apariția aspectului receptiv. În ciuda faptului că această soluție este cea mai veche, nu își pierde popularitatea. Chiar și multe resurse populare folosesc o versiune mobilă separată a site-ului, deoarece are o serie de avantaje pe care nu le are un aspect receptiv. Versiunile mobile pot fi văzute pe site-uri precum: m.yandex.ru; m.vk.com; m.ok.ru și mulți alții. Adică, puteți vedea că Yandex și social mare. rețelele din runet utilizează versiuni mobile și nu trec la design receptiv.

Avantajele unei versiuni mobile separate a site-ului:

- Viteză rapidă de lucru... Viteza se explică prin faptul că șablonul este optimizat pentru dispozitive mobile și într-o versiune separată nu este nevoie să încărcați diverse „gunoi”. Când utilizați o versiune separată a site-ului, puteți realiza încărcări rapide, chiar și în condiții de conexiune slabă sau de rețea 2g. Acesta este pur și simplu un plus imens pentru utilizatorii care vă vizitează de pe dispozitive mobile.

- Ușurința în utilizare... O versiune separată a site-ului este foarte bine gândită pentru a atinge un nivel ridicat de utilizare. Nu are „funcții de gunoi” de care utilizatorul smartphone-ului pur și simplu nu are nevoie și toate informațiile necesare se află la câțiva pași, ceea ce este foarte bun.

- Ușor de editat... Atunci când editați codul, nu este nevoie să căutați ceva în cod, veți avea în fața ochilor codul unei versiuni mobile specifice și veți lucra special cu acesta, fără a perturba activitatea versiunii desktop.

- Posibilitatea de a trece la versiunea desktop... Un lucru foarte important, dacă, să zicem, un utilizator are nevoie de funcționalitatea completă a site-ului dvs., el poate trece la versiunea desktop fără probleme și poate folosi tot ce are nevoie acolo.

Dezavantajele unei versiuni mobile separate a site-ului:

- Muncă SEO excesivă... Faptul este că site-ul se află pe un subdomeniu, iar motoarele de căutare îl găsesc ca o copie a celui principal. Pentru a rezolva această problemă, trebuie să utilizați metaetichetele rel = "alternative" și rel = "canonice". Apoi, robotul de căutare va vedea că aceasta este o adresă alternativă pentru accesarea site-ului dvs. și nu va aplica sancțiuni pentru conținutul duplicat.

— Posibile discrepanțe... Dacă utilizați două baze de date diferite, este posibil ca site-urile dvs. să nu se duplice complet reciproc, ceea ce va afecta negativ SEO. De asemenea, dacă uitați să adăugați o nouă pagină la versiunea mobilă, aceasta va fi afișată pe site-ul principal, dar nu și pe versiunea mobilă. Dar această problemă este ușor rezolvată de o bază de date comună.

După cum puteți vedea, această metodă de implementare a versiunii pentru mobil are puncte pro și contra complet diferite, astfel încât ambele metode sunt utilizate.

RESS(Design receptiv + partea serverului)

Acesta este probabil modul meu preferat de a implementa versiunea mobilă a site-ului. Într-o anumită măsură, combină atât designul receptiv, cât și versiunea mobilă a site-ului. Dar această metodă este mai dificil de implementat, deoarece necesită cunoștințe mai mari de programare și nu toată lumea o poate implementa. Acum vă voi spune ce este.

RESS (Responsive Design + Server Side) este implementarea versiunii mobile pe site, prin determinarea dispozitivului de pe care utilizatorul s-a autentificat și, în conformitate cu tipul de dispozitiv, lansarea șablonului necesar corespunzător dispozitivului. De regulă, acest lucru este implementat prin verificarea utilizatorului-agent al utilizatorului.

După cum ați înțeles deja în această metodă, dispozitivul este determinat și apoi este încărcat șablonul necesar. Acum voi încerca să arăt cum se realizează implementarea RESS folosind un exemplu de cod.

$ user = BBrowser :: detectDevice () if ($ device == DEVICE_TYPE_MPHONE) ($ shablon = \ "mobile.php \";) else if ($ device == DEVICE_TYPE_TABLET) ($ shablon = \ "tablet.php \" ;) else ($ shablon = \ "desktop.php \";) include ($ shablon);

În cea mai simplă formă, implementarea Responsive Design + Server Side arată astfel. Adică, mai întâi detectăm dispozitivul de la care au venit pe site-ul nostru și apoi, prin condițiile if and else, sortăm opțiunile posibile, dacă de pe telefon, apoi afișăm mobile.php, dacă de pe tabletă, apoi tablet.php, dacă nu chiar altfel, tipăriți desktop.php. După cum puteți vedea, totul este simplu, site-ul pur și simplu alcătuiește mai multe opțiuni de șablon pentru diferite dispozitive și apoi îl afișează pe cel dorit.

Avantajele proiectării responsive + partea serverului (RESS):

— Economii semnificative de trafic... Ca și în versiunea mobilă, designul a fost creat special pentru un anumit tip de dispozitiv și nu există niciun cod suplimentar care să irosească traficul și să încetinească încărcarea. Se poate obține o greutate foarte mică a paginii.

— O singură adresă... Este convenabil ca utilizatorul să nu aibă nevoie să meargă la subdomenii și să folosească site-ul de pe domeniul principal, ca într-un design receptiv. Dar, în același timp, dezavantajele designului receptiv sunt excluse aici.

— Abilitatea de a comuta între versiuni... Când utilizați Responsive Design + Server Side, puteți comuta între versiuni fără probleme prin adăugarea unui buton de comutare într-un loc proeminent, puteți activa oricând aspectul desktop sau mobil.

Dezavantaje ale Responsive Design + Server Side (RESS):

— Complexitate foarte mare în implementare... Când pentru un design adaptiv este suficient să scrieți doar interogări media, atunci totul nu este atât de simplu, aici aveți nevoie de un algoritm întreg pentru detectarea dispozitivelor, emiterea versiunilor necesare ale layout-ului și comutarea între layout-uri.

— Dispozitivul nu a fost detectat... Există momente când telefonul pur și simplu nu poate fi identificat și i se va oferi o versiune desktop, din păcate, până acum acest algoritm nu a fost încă adus la ideal.

În cele din urmă, vreau să spun că aceasta este metoda mea preferată de implementare a unei versiuni mobile a site-ului, dar este foarte complexă și consumă mult timp, dar dacă o faci, va merita. Dar nu ar trebui să renunțați la alte opțiuni de implementare, deoarece dacă ajungeți la problema prețului implementării (dacă nu cunoașteți programarea), aspectul adaptiv va fi cel mai ieftin și își îndeplinește perfect funcțiile și majoritatea oamenilor sunt înclinat spre el. Ce metodă de implementare a versiunii mobile a site-ului să alegeți depinde de dvs. Aceasta este doar o chestiune de gustul tău. Și acum vă voi spune în cele din urmă de ce aveți nevoie de o versiune mobilă a site-ului.

De ce aveți nevoie de o versiune mobilă a site-ului?

Această întrebare apare pentru mulți webmasteri, de ce să creeze o versiune mobilă a site-ului? Și totul este de fapt foarte simplu, acest lucru se face pentru a maximiza acoperirea publicului din segmentul dvs. În general, pentru magazinele online și diverse companii, cred că este necesară versiunea mobilă! Pentru diverse bloguri și forumuri - de dorit.

Dar, dacă luați în considerare cele mai recente știri: Yandex va afișa acum site-uri care sunt adaptate pentru dispozitive mobile cu rezultate mai mari ale căutării mobile. Pentru ca o pagină să fie considerată compatibilă cu dispozitivele mobile, aceasta trebuie: să nu aibă derulare orizontală și nu trebuie să existe componente java și flash pe pagină, deoarece dispozitivele mobile nu le pot reda. Iată un exemplu de la Yandex despre cum ar trebui să arate o pagină pentru dispozitive mobile.

După cum puteți vedea, conținutul ar trebui să fie într-o singură coloană, ar trebui să fie ușor de citit și toate elementele ar trebui să fie suficient de mari pentru a putea fi apăsat cu un deget. În consecință, acum, neavând o versiune mobilă, puteți uita de o parte semnificativă a traficului către site-ul dvs., deoarece Yandex vă va subestima (dar pentru dispozitivele mobile), pentru dispozitivele desktop clasamentul va rămâne același.

Dar, în general, dacă aveți o versiune mobilă a site-ului, nu contează dacă este un aspect adaptiv sau o versiune mobilă separată sau, în general, Responsive Design + Server Side, acesta va fi deja un mare avantaj, deoarece nu contează ce fel de implementare aveți, principalul lucru: există versiunea mobilă a site-ului. Are avantaje solide: bun pentru utilizatori, mai mult trafic, plus de la motorul de căutare, mai multe venituri din publicitate. pe baza ultimelor știri, părerea mea: este necesară crearea unei versiuni mobile!

Asta-i tot pentru mine, sper că nu te-am obosit cu postarea mea lungă, îți doresc succes în promovarea ta.

De ce aveți nevoie de o versiune mobilă sau de un design de site receptiv?
Dacă tânăra generație de oameni de afaceri nu se îndoiește de această întrebare, atunci o altă parte se va gândi de ce să cheltuiască bani pentru asta.

Care este motivul pentru care este necesară această sau acea versiune pentru dispozitivele mobile.

Conform celor mai recente date, numărul utilizatorilor de internet care utilizează dispozitive mobile a crescut cu 90% pe parcursul anului! Din cei 80 de milioane de utilizatori de internet din întreaga lume, 50 de milioane folosesc dispozitive mobile. În segmentul rus, traficul mobil reprezintă 25% și ajunge la 40% în unele zone.

Principala problemă este că site-urile anterioare au fost inițial concepute cu accent pe rezoluția monitoarelor computerului, dar după cum sa dovedit, aspectul tradițional pentru dispozitivele mobile nu este destul de potrivit, deoarece dimensiunile ecranului smartphone-ului diferă de diagonala monitorului, ceea ce provoacă o discrepanță între grafică și design. Utilizarea unor astfel de site-uri de pe telefoane este complet incomodă: durează mult timp pentru a încărca, textul mic și ilizibil, navigarea incomodă, derularea orizontală, scripturile flash și java nu funcționează. Cei mai mulți vizitatori ai unor astfel de site-uri sunt enervanți și îi părăsesc imediat fără să ia măsuri specifice.

Un alt motiv pentru a vă gândi la dezvoltarea unei versiuni mobile este prezența căutării mobile, iar dacă site-ul dvs. nu are o versiune mobilă, atunci nu va ajunge acolo. Google și Yandex ne spun despre acest lucru în mesajele și recomandările lor, iar acest lucru este de înțeles, deoarece există un fel de situație stabilă în căutarea pe desktop, motoarele de căutare se uită la piața de căutare mobilă în creștere. Toate acestea ne-au determinat să dezvoltăm o versiune mobilă gratuită pentru site-ul dvs.

Scopul motoarelor de căutare este de a oferi oamenilor informații relevante și utile. Motoarele de căutare și dezvoltatorii de site-uri încearcă să se asigure că vizitatorii de pe orice dispozitiv pot naviga ușor și convenabil pe site după ce au trecut de la rezultatele căutării.

Studii recente arată că cei care folosesc smartphone-uri și alte dispozitive mobile pentru a accesa internetul sunt mai predispuși să revină pe site-urile care au o versiune mobilă, deoarece acești utilizatori sunt mai predispuși să facă achiziții pe internet, ceea ce este foarte important. Și din moment ce motoarele de căutare monitorizează toate acestea și încearcă să îmbunătățească calitatea rezultatelor căutării, vizualizarea convenabilă a site-ului de pe astfel de dispozitive a devenit un factor care influențează promovarea site-ului.

Soluții pentru primirea traficului mobil

Există 3 tehnologii pentru crearea unei versiuni mobile:

Versiunea mobilă ca site separat pentru dispozitivele mobile dintr-un subdomeniu;
Design adaptiv;
Aplicații mobile pentru IOS, Android, Windows Phone.

Cu aplicațiile mobile, totul este clar: acestea sunt dezvoltate pentru sistemele de operare mobile, iar vizitatorii site-ului, atunci când intră de pe un dispozitiv mobil, primesc o ofertă pentru a le descărca, de exemplu, precum kinopoisk.ru.

Dezvoltarea unei astfel de aplicații costă proporțional cu versiunea mobilă și, uneori, chiar mai mult.
O astfel de soluție are multe avantaje, este o interfață bine gândită și orice „cipuri”, un cont personal etc.

Dezavantajul este că utilizatorul trebuie încurajat să descarce și să instaleze aplicația, care este un element de cheltuieli separat sau un punct al strategiei de marketing.
Astfel de aplicații trebuie întreținute și actualizate, protejate împotriva hacking-ului etc. Care costă și bani.

Acum să analizăm diferențele dintre versiunea mobilă și designul receptiv.

Design adaptiv

Proiectarea receptivă înseamnă că, datorită anumitor stiluri de cod, site-ul dvs. se adaptează automat în lățime la dimensiunea dispozitivului pe care este deschis, fie că este un monitor PC, smartphone, tabletă. Mai devreme am scris despre aceasta în mai multe articole „Cum se realizează o versiune mobilă a site-ului” și „Utilizarea metaetichetei Viewport”. Atunci când dezvoltă un site, proiectanții de layout nu alcătuiesc un site pentru o anumită dimensiune, de exemplu 800x480 px, ci creează pagini de site din elemente care se ajustează automat la lățimea ecranului. Blocurile își schimbă pur și simplu poziția, iar unele nu sunt deloc afișate pe smartphone-uri. Această opțiune este mai potrivită pentru site-uri de cărți de vizită simple sau bloguri.

Avantajele designului receptiv:

Afișarea competentă a paginilor site-ului și a tuturor elementelor sale pe orice dispozitiv prin adaptarea stilurilor la browserele mobile;
Îndeplinește cerințele de utilizare Google Mobile;
Confort în dezvoltare, costul este mai mic decât crearea unei versiuni mobile;
O adresă URL pentru versiunea obișnuită a site-ului și cu un aspect receptiv, deci nu este nevoie să redirecționați utilizatorii și, de asemenea, vizitatorii nu vor trebui să-și amintească o adresă separată de subdomeniu.
Frumusețea site-ului original, ceva, dar cu toate acestea un design frumos poate fi păstrat și acest lucru este important.

Dezavantaje ale designului receptiv:

Greutatea mare a paginilor site-ului, deoarece designul receptiv nu oferă o oportunitate de a înlocui elementele desktop grele cu cele ușoare, din această cauză, site-ul durează mult timp pentru a se încărca de pe dispozitivele mobile. Ceea ce este foarte critic, deci viteza de descărcare trebuie optimizată;
În caz de probleme cu aspectul adaptiv, vizitatorul site-ului nu poate trece la versiunea obișnuită a site-ului;
Proiectarea receptivă implică reproiectarea tuturor paginilor site-ului, ceea ce poate fi incomod dacă afacerea dvs. depinde complet de site și de activitatea sa.

Versiunea mobilă a site-ului

Versiunea mobilă presupune dezvoltarea unei versiuni a site-ului pe un subdomeniu, de exemplu, m.vk.com, către care vizitatorul este redirecționat în cazul utilizării unui dispozitiv mobil. De regulă, o astfel de versiune este creată pentru ecranele mobile cu o lățime mai mică de 620 px. Această tehnologie vă permite să creați o versiune mini a site-ului cu cele mai importante informații, neîncărcată cu conținut și diverse elemente de design și, cel mai important, cu elemente mari de navigare. Potrivit atât pentru site-uri simple, cât și pentru magazine online, diverse servicii: poștă, știri, rețea socială.

Avantajele versiunii mobile:

Usor de utilizat, deoarece este mult simplificat in comparatie cu versiunea obisnuita. Versiunea mobilă oferă informații cu cea mai mare prioritate și vă permite, de asemenea, să efectuați o comandă / cumpărare cu un minim de acțiuni.
Este ușor să faceți modificări semnificative, deoarece este o versiune separată și nu este nevoie să faceți modificări la site-ul principal;
Încărcarea rapidă a paginilor, deoarece toate elementele necesare au o greutate mai mică.
Este posibil să treceți la versiunea completă a site-ului în caz de probleme pe mobil;

Îndeplinește Regulile de utilizare Google Mobile.

Dezavantaje ale versiunii mobile:

Costul dezvoltării, dezvoltarea unei versiuni mobile este comparabil cu crearea unei aplicații;
Costul întreținerii, este necesar să acceptați versiunea pentru diferite dispozitive;
Unele informații, fișiere și caracteristici ale site-ului vor trebui abandonate.

După cum puteți vedea, ambele opțiuni au avantajele și dezavantajele lor, dar am decis să combinăm cele mai bune dintre ambele versiuni. Drept urmare, am obținut o versiune mobilă cu elemente de design receptiv, puteți difuza atât materiale de pe site-ul principal, cât și va fi adaptat pentru dispozitive mobile sau puteți crea secțiuni separate disponibile numai pentru dispozitive mobile. Toate acestea vă permit să personalizați versiunea mobilă cât mai flexibil posibil.

Versiune mobilă gratuită!

Dezvoltatorilor Nubex le pasă de clienții lor și de calitatea site-urilor pe care le rulează, așa că am pregătit o actualizare complet gratuită, datorită căreia a apărut versiunea mobilă pentru toți cei care folosesc site-ul nostru. Dacă din anumite motive nu aveți nevoie de el, îl puteți opri cu un singur clic. De asemenea, setările sale sunt complet simple și intuitive, puteți configura versiunea mobilă în 5-10 minute.

La crearea unei versiuni mobile am luat în considerare cerințele motoarelor de căutare:

Structura dinamică a site-ului, fereastra de vizualizare trebuie să se adapteze automat la dimensiunea ecranelor, astfel încât utilizatorul să poată evita derularea orizontală a paginii și să schimbe scala.
Schimbarea automată a dimensiunii fonturilor, pentru a crește lizibilitatea textului.
Proiectarea convenabilă a elementelor interactive (butoane etc.), situate la o anumită distanță una de cealaltă, astfel încât, atunci când este apăsat, zona dorită să fie selectată
Proiectare receptivă - totul ar trebui să funcționeze și să se reflecte pe baza tehnologiilor dispozitivelor mobile moderne.

Am luat în calcul și:

meniul principal prăbușit (extinde și economisește spațiu convenabil);
coș de cumpărături, căutare pe site;
afișare convenabilă a fotografiilor, albumelor, glisoarelor și mărfurilor;
pentru magazinele online - o formă convenabilă de comandă on-line de la telefon;
puteți activa sau dezactiva independent afișarea diferitelor blocuri și secțiuni.

Configurați setările versiunii mobile a site-ului sau contactați serviciul nostru de asistență pentru clienți pentru a îmbunătăți calitatea resursei dvs. web.

Odată cu începutul erei de creștere a mobilității, dezvoltatorii s-au confruntat cu o alegere: ar trebui să păstreze versiunile mobile ale site-urilor lor împreună cu cele „depline” sau site-urile ar trebui să devină responsive și să se adapteze independent la diferite dimensiuni de ecran?

În acest moment, când construiți versiuni mobile ale site-urilor, există 3 moduri principale de a le construi:

Design adaptiv;
Versiune mobilă separată a site-ului;
RESS (Responsive Design + Server Side).

Fiecare dintre metode are propriile sale argumente pro și contra, pe care voi încerca să le descriu în detaliu.

Design adaptiv

Interogările CSS3 Media sunt utilizate în mod obișnuit pentru a implementa un design receptiv. În funcție de dimensiunea ecranului, utilizatorul va vedea o imagine diferită:

@media screen and (max-width: 1600px) (div.for-example (width: 1500px;)) @media screen and (max-width: 1280px) (div.for-example (width: 1100px;)) @media ecran și (lățime maximă: 1024px) (div. de exemplu (lățime: 980px;))

Avantajele designului receptiv

Ușurința dezvoltării - cu un aspect receptiv, întreaga structură a site-ului se ajustează automat la diferite lățimi ale ecranului. Pentru a obține un produs funcțional, nu trebuie să scrieți totul de la zero - trebuie doar să modificați CSS și HTML ... Având în vedere prezența unor cadre precum Bootstrap, o astfel de dezvoltare nu este foarte dificilă cu o implementare standard. În plus, menținerea unui astfel de produs ar fi o sarcină relativ simplă.
O adresă URL - ne scutește de redirecționări inutile și de necesitatea ca utilizatorul să-și amintească adresa versiunii mobile (chiar dacă este doar prefixul m.). De asemenea, prezența unei adrese unice va afecta pozitiv promovarea site-ului, deoarece va fi „mai convenabil” ca motoarele de căutare să funcționeze.

Dezavantaje ale designului receptiv

Sarcini diferite - Sarcinile tipice pentru utilizatorii „mobili” de pe site-uri mari sunt de obicei diferite de cele pentru utilizatorii de PC-uri. Dacă sunteți client al unei bănci, atunci, cel mai probabil, în versiunea mobilă a site-ului veți fi interesați de o gamă foarte limitată de informații - adrese ale celor mai apropiate sucursale, bancomate etc.
În general, cu aspectul adaptiv, cea mai comună abordare este de a face o copie a unui site obișnuit, de a implementa nevoile tuturor grupurilor de public țintă în aspectul pentru telefoane. Dar atunci puteți uita de utilitate. Secțiunile secundare necesare pentru cinci la sută din vizitatori vor crea neplăceri pentru cea mai mare parte a clienților.
Disperare - Unul dintre avantajele incontestabile ale versiunii pentru mobil: dacă nu vă place, puteți să o dezactivați și să treceți la un domeniu obișnuit. Site-urile web responsive nu oferă această alegere simplă, dar importantă. Dacă aspectul adaptat este incomod, eronat sau dacă ascunde un element de navigare important, scrieți pierdut: nu puteți face nimic pentru al revedea. Va trebui să fugiți pentru a căuta un desktop sau site-ul unui concurent. Puteți veni cu „cârje” pentru a rezolva această limitare (utilizați cookie-uri și includeți diferite foi de stil). Dar această abordare complică dezvoltarea.

În general, ideea dezvoltării unei versiuni mobile într-un design receptiv este destul de populară, în ciuda dezavantajelor de mai sus. În special, acest concept este susținut pe deplin de giganți precum, de exemplu, Google.

Versiune mobilă separată a site-ului

Pentru a face site-ul convenabil pentru utilizatorii de telefonie mobilă, sunt deseori create și versiuni separate ale site-urilor - destinate în mod special utilizatorului cu un smartphone / tabletă. Cea mai obișnuită practică este de a redirecționa utilizatorii de telefonie mobilă către un subdomeniu special (m.example.com, mobile.example.com etc.). Probabil, în 99% din cazuri, versiunea mobilă este o versiune principală decupată - cu doar funcționalitatea care, potrivit dezvoltatorilor, va fi necesară și utilă pentru utilizatorii de dispozitive mobile și tablete.

Avantajele versiunii mobile

Ușurința schimbării - deoarece site-ul există, de facto, separat de versiunea principală, este mult mai ușor să faceți editări legate doar de versiunea mobilă, deoarece versiunea mobilă de cele mai multe ori nu oferă funcționalități inutile și redundante.
Ușurința în utilizare - versiunea mobilă este de obicei mult simplificată în comparație cu versiunea desktop, astfel încât utilizatorul nu va trebui să caute departe informațiile de care are nevoie.
Viteza - datorită aceleiași simplificări a site-ului, versiunea mobilă se încarcă mai repede. Acest lucru este esențial pentru utilizatorii care încă folosesc GPRS sau 3G slab.
Alegere- cel mai adesea, în versiunea mobilă există posibilitatea de a trece la versiunea principală a site-ului.

Dezavantaje ale versiunii mobile

Adrese multiple -
Inconvenient pentru utilizator - adrese diferite pentru versiunile desktop și mobile. Pentru unii, acest lucru se poate dovedi a fi avantaje, pentru alții, este un factor extrem de iritant, atunci când, pentru a vizualiza în mod convenabil site-ul, trebuie să vă amintiți încă o adresă. Există, de asemenea, probleme cu motoarele de căutare: pentru a evita conținutul duplicat, specialiștii SEO trebuie să utilizeze metaetichetele rel = "alternative" și rel = "canonice". În plus, atunci când un utilizator Google mobil face clic pe un link din rezultate, acesta va fi dus pe desktop sau redirecționat către mobil. Dar dacă versiunea mobilă a acestei pagini nu există, va primi un mesaj de eroare.
Limitare - crearea unui site mobil separat înseamnă a scăpa de o parte din conținut și funcționalitate. În plus, este posibil să aveți două seturi diferite de conținut care pot avea un impact negativ asupra imaginii generale a informațiilor.

În general, crearea de versiuni mobile de site-uri se justifică destul de bine, în special pentru proiecte mari. Ca exemplu - Amazon folosește o versiune specială, mobilă a site-ului.

RESS

Deși Google însuși acceptă utilizarea designului receptiv de către webmasteri, utilizează un sistem diferit în produsele sale. Dacă accesați, de exemplu, pagina principală de sub diferiți utilizatori-agenți, puteți vedea HTML diferit pentru diferite dispozitive. RESS - Design receptiv + partea serverului. Un exemplu de implementare, schițat pe genunchi:

$ DS = DIRECTORY_SEPARATOR; require_once (dirname (__ FILE__). $ DS. "biblioteci". $ DS. "browser.php"); $ device = BBrowser :: detectDevice (); if ($ device == DEVICE_TYPE_MPHONE) ($ tmpl = "template.m.php";) else if ($ device == DEVICE_TYPE_TABLET) ($ tmpl = "template.t.php";) else ($ tmpl = "template .php ";) include (dirname (__ FILE__). $ DS." șabloane ". $ DS. $ tmpl);

Avantaje ale RESS

De fapt, metoda poate include avantajele atât ale unei versiuni mobile și responsive separate a site-urilor, în funcție de implementare. Din ceea ce va fi nou:

Minimizarea traficului - JavaScript inutil poate fi eliminat din HTML, care eliberează CPU, memorie și cache pe dispozitivul mobil. De asemenea, html și css pot fi optimizate special.
Este posibil să utilizați direcționarea - de exemplu, pentru dispozitivele Android, oferiți să descărcați aplicația de pe GooglePlay și pentru Apple - de pe iTunes. Puteți crea propriul aspect pentru fiecare dispozitiv.

Contra RESS

Dificultate în dezvoltare - această metodă va necesita configurarea serverului adecvată și forța de muncă a mai multor programatori. De asemenea, va fi necesar să faceți mai multe opțiuni de aspect diferite.
Mecanismul de detectare a dispozitivelor - din păcate, nici în timpul nostru nu a fost încă adus la perfecțiune. Poveștile despre modul în care telefonul rar al cuiva nu este identificat ca dispozitiv mobil apar destul de des.

În general, RESS este cea mai bună dintre cele trei opțiuni propuse, dar necesită mult mai multă muncă în timpul dezvoltării.

rezumat

În opinia mea personală, nu există o opțiune ideală pe care toată lumea ar trebui să o folosească. Cea mai bună opțiune pentru mine este RESS. Cu toate acestea, aceasta este una dintre opțiunile rare, deoarece necesită mult efort pentru implementare. În general, toate cele 3 opțiuni au argumentele pro și contra, în funcție de esența și concentrarea site-ului.

Cel mai simplu mod de a vedea cum arată site-ul pe un dispozitiv mobil este pe telefonul dvs. Mai mult, o captură de ecran de pe un astfel de dispozitiv real va fi cel mai precis afișaj al site-ului pe dispozitive mobile decât utilizarea oricărui emulator.

Dacă trebuie să verificați versiunea mobilă a site-ului online pe un computer, atunci emulatoarele de dispozitive mobile vin în ajutor. Cele mai exacte dintre acestea sunt instrumente pentru dezvoltatorii de sisteme de operare mobile, dintre care cele mai populare sunt Android Studio și Apple Xcode. Aceste kituri conțin cele mai complete emulatoare ale diferitelor dispozitive și verifică dacă versiunea mobilă a site-ului va fi cea mai apropiată de un dispozitiv mobil real. Cu toate acestea, va fi nevoie de mult timp, experiență și cunoștințe despre proprietatea software-ului pentru a instala instrumentele pentru dezvoltatori pe un computer obișnuit.

Modalități simple de a verifica versiunea mobilă a site-ului

Spre deosebire de cel mai dificil mod de a verifica un site pe dispozitive mobile, discutat în paragraful anterior, cel mai simplu mod este de a reduce lățimea ferestrei browserului la dimensiunea unei coloane înguste. Dacă site-ul dvs. se adaptează la această lățime, atunci versiunea mobilă a site-ului dvs. este realizată utilizând tehnologia de proiectare receptivă.

Cu toate acestea, această metodă nu funcționează dacă versiunea mobilă a site-ului este realizată utilizând un design separat. În acest caz, serverul pe care se află site-ul are nevoie de o indicație explicită că vizitatorul a venit de pe un dispozitiv mobil. Serverul primește aceste date din șirul User Agent, care este solicitat în mod necesar de la browserul dvs. de către orice site vizitat. Prin urmare, pentru a vedea cum arată site-ul pe dispozitivele mobile, este necesar să „păcăliți” serverul și să îl furnizați cu șirul User Agent de pe telefon, nu de pe computer.

A doua cea mai dificilă opțiune care vă permite să verificați versiunea mobilă a site-ului prin intermediul unui computer este instalarea unui browser special. De exemplu, Opera Mobile Classic Emulator. Există versiuni ale acestuia pentru Windows, Mac și Linux. Din păcate, această dezvoltare se bazează pe vechiul motor Presto, utilizat înainte de versiunea 12 a browserului Opera și nu va arăta cu adevărat modul în care site-ul este afișat într-un browser mobil modern. Din 2013, browserul Opera rulează pe motorul software Blink, deci este mai bine să verificați un site mobil pe un browser modern. Poate fi fie Opera, fie Crom rulează pe același motor Blink bazat pe WebKit folosit în Apple Safari.

Trebuie să activați un mod special de dezvoltator în browserele specificate (F12 în Chrome sau Ctrl + Shift + i în Opera) și să treceți la modul dispozitiv mobil:

După aceea, puteți vedea cu ușurință cum arată site-ul pe un dispozitiv mobil.

Dacă o evaluare personală vizuală nu vă este suficientă pentru a verifica un site mobil, atunci există programe speciale care pot analiza site-ul din punctul de vedere al unui dispozitiv mobil și oferă nu numai o evaluare cantitativă a mobilității site-ului, ci și oferă recomandări despre cum să îmbunătățiți vizibilitatea site-ului pe smartphone-uri. Pe site-ul nostru există doar un astfel de serviciu bazat pe tehnologie Google Mobile Friendly... Trebuie doar să conduceți adresa site-ului dvs. într-o linie specială și să faceți clic pe butonul „Verificați”. Robotul va merge la adresa specificată, va face un instantaneu al paginii în formatul unui dispozitiv mobil și va da o opinie cu privire la calitatea site-ului dvs. mobil.
De exemplu, aceasta.

Toată lumea și toată lumea vorbește despre mobilitate: de la mici agenții de marketing la giganți precum Yandex și Google.

În acest articol, vă vom spune de ce versiunea mobilă a site-ului provoacă o asemenea agitație, ce cerințe ar trebui să i se pună și dacă aveți nevoie personală de ea.

Și voi dezvălui imediat un mare secret, după implementarea acestuia, am început să primim mai multe comenzi. Tot. Restul este mai departe.

Pentru ce? Pentru ce? Pentru ce?

Puteți vorbi despre necesitatea adaptării site-ului pentru dispozitive mobile în diferite moduri.

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

Să aruncăm o privire mai atentă la fiecare. În același timp, ca de obicei, scurt și la obiect. Lăsăm apa în afara porților.

Ușurința în utilizare

În 2016, analiștii de la StatCounter au fost primii care au observat că ponderea traficului mobil a depășit ponderea desktopului: 51,3% față de 48,7.

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

În Rusia, imaginea este aproximativ aceeași: ponderea smartphone-urilor este mai mare decât ponderea computerelor și a altor dispozitive. Acest lucru este demonstrat de cercetările companiei GfK Rus:

Statistici

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

Acest aspect ar trebui să vă facă să vă gândiți: cum arată site-ul dvs. pe ecranul smartphone-urilor.

Și cel mai probabil răspunsul este rău. Când deschideți un site normal neadaptat de pe un telefon mobil, vizionarea se transformă într-o misiune - trebuie să scalați paginile, să vizați linkuri mici, să așteptați o încărcare lungă.

Adăugați la asta toată graba și o mulțime de distrageri - la urma urmei, așezarea la telefon nu este la fel ca a sta pe un computer, atunci când vizitatorul este complet concentrat pe monitor.

Utilizatorii nu vor căuta secțiunea dorită pentru o lungă perioadă de timp și vor înțelege interfața - site-ul web al unui concurent convenabil este întotdeauna deschis în fila următoare.

Preferințele motorului de căutare

Google și Yandex se îneacă de mult timp pentru versiunile mobile. În acest scop, primul a lansat un algoritm special Mobile-first Index, prin care evaluează comoditatea unui site mobil și, în funcție de acest lucru, determină poziția acestuia în căutare.

Pentru al doilea, algoritmul a ieșit mai târziu, dar, din punct de vedere al importanței, este la aproximativ același nivel. Se numește „Vladivostok”.

Există, de asemenea, motive indirecte care afectează situația versiunii mobile în căutare. Printre alți factori, motoarele de căutare iau în considerare și caracteristicile comportamentale.

Este vorba despre cât timp petrec vizitatorii dvs. pe site, câte pagini deschid, cât de activ fac clic pe butoane și comutatoare.

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

Aceasta înseamnă că caracteristicile comportamentale se vor deteriora. Drept urmare, vă aflați pe ultimele pagini nelocuite ale Yandex și Google.

Nu v-am convins încă? Apoi verificați singur dacă aveți nevoie de o versiune mobilă sau, mai degrabă, de pe ce dispozitive vin vizitatorii pe site-ul dvs.

Puteți face acest lucru în Google Analytics în raportul „Public -> Mobil -> Prezentare generală”. Dacă aveți, accesați „Rapoarte -> Tehnologii -> Dispozitive”.

Analize

Dacă vedeți că există mai mult de 15% din smartphone-uri, atunci acesta este un apel de trezire pentru dvs. - trebuie doar să vă optimizați site-ul pentru telefoane mobile. Prin urmare, să ne dăm seama ce modalități există în general pentru a face acest lucru.

Important. Această situație nu este observată la toată lumea. Și în unele zone, utilizarea versiunii pentru mobil este interzisă, oricât de ciudat ar suna.

tipuri de versiuni mobile

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

Ca de obicei, pentru a face alegerea corectă, trebuie să vă bazați pe sarcinile și capacitățile dvs.

1. Aspect receptiv

Din punct de vedere tehnic, acesta este un site, dar structura paginii se ajustează la dimensiunea dispozitivului.

Într-o versiune simplificată, arată astfel: pentru computere, deschideți toate elementele de meniu și creați produse în trei coloane.

Pentru tablete, afișăm doar coșul și plasăm mărfurile în două coloane; pentru smartphone-uri - ascundem totul în butonul meniu, plasăm mărfurile, câte una pentru fiecare linie.

Aspect adaptiv

Principalul avantaj al acestei reacții a site-ului este că atât versiunile mobile, cât și cele pentru desktop sunt același site.

Aceasta înseamnă că este suficient să faceți orice schimbări o singură dată, după care adaptarea site-ului pentru toate ecranele va avea loc automat.

Poate fi adăugarea unui articol, schimbarea sortării, o nouă culoare a butoanelor. Alte avantaje ale adaptivului:

Ieftin și simplu - este dezvoltat relativ rapid și ieftin, puteți chiar să implementați adaptorul într-un site existent;
O adresă de o pagină - convenabilă pentru utilizatori și corectă din punct de vedere tehnic (mai puține probleme cu optimizarea motorului de căutare);
Aceasta este ceea ce recomandă Google. Pe pagina pentru dezvoltatori, există o recomandare oficială de a utiliza aspectul receptiv. Nu există argumente specifice, dar acesta este Google însuși.

Există, de asemenea, dezavantaje ale aspectului receptiv. Deși sunt relative la alte opțiuni, ele sunt destul de invizibile. Dar totuși, așa cum am spus, sunt:

Un site cu funcționalități excelente este dificil de adaptat la telefoanele mobile. Va fi fie incomod, fie va trebui să sacrificați unele dintre posibilități;
Încărcare lentă. Nu uitați că am spus că același site este încărcat atât pentru telefoane, cât și pentru computere?
Acestea sunt imagini grele, meniuri lungi și restul informațiilor. Pentru a rezolva problema, unii dezvoltatori folosesc compresia paginilor, dar necesită și cereri suplimentare către server și, prin urmare, timp;
Nu se poate trece la versiunea completă. Dacă se întâmplă ceva, utilizatorul nu va putea trece la versiunea desktop pentru a utiliza toate posibilitățile, deoarece site-ul în sine decide ce versiune să-i arate.

Cu toate acestea, designul receptiv este cea mai populară versiune mobilă de pe web.

Este folosit de multe motoare, constructori și de modul în care suntem pe unele dintre ele.

2. Versiune mobilă separată

În acest caz, veți avea două site-uri diferite - fiecare cu propria adresă, design și capacități. Acesta este răspunsul la întrebarea: „Care este diferența dintre versiunea mobilă a site-ului și cea adaptativă?”

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

Cel mai adesea, versiunea mobilă începe în legătura cu litera m (tradusă ca „mobil”).

Versiune mobilă separată

Această abordare este convenabilă, deoarece nu depindeți deloc de versiunea desktop. Vă puteți concentra complet pe confortul utilizatorilor de telefonie mobilă, puteți lăsa doar cele mai simple funcții și să țineți cont de toate lucrurile mici în utilizare.

Aspectul versiunii mobile va fi foarte diferit de cel pentru desktop. Cu siguranță veți putea păstra un vizitator absent care cel mai probabil se aruncă într-un autobuz sau se uită într-un smartphone până când șeful său îl vede.

Toate butoanele și comutatoarele pot fi făcute uriașe, astfel încât să poată fi lovite cu degetul.

Există, de asemenea, alte argumente pentru a crea o versiune mobilă a site-ului separat: viteză de încărcare rapidă - într-o versiune separată, sunt încărcate imagini luminoase de calitate medie și pagina este în general decupată la elemente de bază.

Și, de asemenea, este posibil să treceți la versiunea completă a site-ului dacă vizitatorul decide că funcțiile mobile nu sunt suficiente pentru el.

Pentru a fi corect, o versiune separată a site-ului pentru dispozitive mobile are, de asemenea, dezavantaje:

Adrese de site diferite pentru telefoane mobile și desktopuri. Acest lucru poate crea probleme SEO - motoarele de căutare văd două site-uri diferite cu același conținut.
Și degradează pozițiile pentru duplicare. Pentru a rezolva problema, va trebui să conectați resurse suplimentare;
Este incomod să stați de pe o tabletă - pe ea elementele sunt neclare pe tot ecranul.
Iar pentru versiunea desktop, ecranul tabletei nu va fi suficient de mare. Se pare că vizitatorul se află într-un punct mort;
Costă mai mult. Deși versiunea mobilă are funcționalități limitate, dar totuși, considerați că acesta este un site nou care trebuie creat de la zero.
Prin urmare, setați un buget în avans pentru dezvoltarea unei versiuni mobile a site-ului;
Timp suplimentar de gestionare. Există două site-uri, trebuie să mențineți activitatea și să monitorizați relevanța atât aici, cât și acolo.

După cum puteți vedea, există multe griji. Dar multe magazine online mari aleg această metodă, deoarece fiecare acțiune greșită poate speria un client de a nu cumpăra.

Dacă aveți aceleași vânzări „periculoase”, atunci trebuie să acordați atenție și dezvoltării site-urilor de comerț electronic.

Site-ul magazinului online

3. Afișaj dinamic (RESS)

Și a treia cale este o simbioză a celor două opțiuni anterioare. În primul rând, site-ul detectează dispozitivul vizitatorilor și, în funcție de dimensiunea ecranului, deschide versiunea desktop, mobil sau tabletă.

Adică, este încărcată doar opțiunea potrivită pentru un anumit dispozitiv. Calculatoarele sunt mari și voluminoase, în timp ce smartphone-urile sunt limitate, dar ușoare. Abordarea reduce considerabil timpul de deschidere.

Principalul dezavantaj al RESS este consumator de timp și costisitor. Dezvoltarea unui ecran dinamic este ca și cum ai crea mai multe site-uri diferite de la zero.

Și nici tehnologia nu este perfectă. RESS este un instrument relativ tânăr, deci se poate întâmpla ca dispozitivul să fie detectat incorect sau deloc.

Cifrele proeminente care folosesc RESS includ Google. În general, așa cum am observat, tehnologia nu este locuită și, dacă aveți un buget limitat sau vă epuizați timpul, este mai bine să nu riscați. Și acordați atenție celor două opțiuni anterioare.

Există, de asemenea, un aspect fluid. Unii oameni cred că aceasta este o variantă a unui site mobil, dar nu este.

Important. Un aspect cauciucat este doar atunci când site-ul este afișat la fel de bine pe telefon, precum este pe computer. Mai mult, complet neschimbat.

CRITERII DE IDEALITATE

Am spus deja că la computer, utilizatorul este concentrat maxim pe ceea ce vede pe ecran.

Aproape nimic nu concurează pentru atenția lui. Fie că este vorba de a sta la un smartphone - sarcini paralele, drum, notificări, apeluri, oameni din jur. Acest lucru ar trebui luat în considerare în primul rând atunci când se dezvoltă.

Prin urmare, indiferent de abordarea pe care o alegeți, trebuie să respectați anumite reguli ale site-ului pentru dispozitive mobile. Iată cele mai importante:

Text mare și întunecat pe un fundal deschis. Este mai bine să proiectați toate textele conform clasicelor - font negru pe fundal alb.
Forme scurte. Lăsați o solicitare, faceți o întâlnire, faceți o achiziție - orice va introduce utilizatorul, trebuie să solicitați un minim de date, care sunt suficiente pentru primul contact.
Formele lungi se sperie în principiu, ca să nu spun nimic despre vizitatorii de pe mobil.
Elemente mari pe care se poate face clic. Vizitatorul nu trebuie să țintească și să prindă butoanele și comutatoarele. Este mai bine să faceți toate elementele interactive mari - încercați să le aruncați singur.
Apple și Microsoft recomandă să vizeze 44 x 44 pixeli. Pragul minim este 24x24, dar aceasta este o ultimă soluție.
Viteza de încărcare a site-ului web. Nu există standarde specifice aici, dar trebuie întotdeauna să te străduiești pentru ideal.
Există un model general - fiecare secundă necesară pentru a încărca o pagină reduce proporțional conversia în vânzări.
Puteți verifica versiunea mobilă a site-ului pentru viteza de încărcare în servicii speciale, despre care puțin mai jos.
Tipul de formular specificat. Când elaborați termenii de referință, asigurați-vă că indicați că, atunci când completați telefonul, trebuie afișată doar tastatura numerică.
Idem pentru parole, e-mail și alte câmpuri. Dacă dezvoltați site-ul dvs., nu fiți leneși să setați tipul adecvat pentru fiecare formular.
Persoane de contact pe care se poate face clic. Ca și în cazul formularelor, informațiile de contact au, de asemenea, un tip special de legătură.
Apăsăm pe telefon - se deschide apelarea numărului, pe mail - programul de mail. Utilizatorii vor trage cu siguranță contactele din obișnuință.
Informații într-o singură coloană. Fără defilare orizontală sau fotografii cu mai multe coloane pe un singur ecran.
Chiar și cele mai tari nave emblematice nu au un ecran mare pentru asta. Textul dintr-o coloană este mai ușor de citit, iar în fotografiile mari puteți vedea toate detaliile.

Truc. Dacă aveți nevoie doar de informații complete despre client (de exemplu, pentru livrare), rupeți procesul de completare a cererii în mai mulți pași.

În primul pas, cereți numele și numărul, precum și adresa și detaliile în cele ce urmează. Chiar dacă utilizatorul este prea leneș și nu completează formularul până la capăt, veți avea contacte pe care să le strângeți.

Formular de captare

Verificarea mobilității

Cel mai bun expert care vă va spune dacă site-ul dvs. este convenabil este vizitatorul dvs. Efectuați o mică testare gândită a versiunii dvs. mobile.

Alegeți din mediu pe cel care se potrivește cel mai bine descrierii potențialului dvs. cumpărător: după vârstă, profesie, interese.

Rugați un voluntar să facă o comandă - lăsați-l să meargă în călătoria completă a clienților. Doar nu interferați și nu o corectați.

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

Orice dificultate sau confuzie trebuie comentată cu voce tare de subiectul dvs.

Și continuați să jucați spionul: analizați acțiunile și faceți notițe în tacere în caiet. Puteți ajuta doar în ultimă instanță, în cazul în care voluntarul se află într-o situație complet mortă.

Verificare tehnică

Când sunteți convins că toate elementele sunt la locul lor, iar interfața este clară și previzibilă, treceți la partea tehnică.

Rulați site-ul prin diferite servicii pentru a colecta erori și comentarii. Dacă puteți - remediați-o singur, nu - veți ști ce să scrieți în TOR pentru programator.

Consola de căutare Google este un serviciu oficial de la Google. El va arăta cum arată site-ul pe ecranul mediu al smartphone-ului și va oferi recomandări de îmbunătățire.

Îți amintești când am vorbit despre algoritmul Mobile-first Index? Serviciul se bazează doar pe activitatea sa, deci nu neglijați acest punct.

Consola de căutare Google

Yandex Webmaster- un serviciu similar de la Yandex. Înainte de a verifica aici, trebuie să adăugați site-ul în panoul webmasterului și să confirmați drepturile asupra acestuia (încărcați un mic fișier emis).

Abia atunci puteți utiliza serviciul accesând „Instrumente -> Verificarea paginilor mobile”. Lucrul este, de asemenea, util - cu recomandări și comentarii.

Yandex Webmaster

Verificare din căutarea Bing. Da, există și un astfel de motor de căutare. Lăsați-l să fie folosit de foarte puțini oameni, dar acum nu mai aveți nevoie de ele.

Serviciul poate vedea erori la care cele două anterioare nu vor fi atenți. Ei bine, așa cum se spune, nu se va înrăutăți.

Verificare din Bing Search

Verificare vizuala

După verificări tehnice, treceți la vizual. Desigur, puteți verifica site-ul de pe telefonul dvs., dar vizitatorii dvs. au dispozitive diferite - de la flagship-uri panoramice la smartphone-uri bugetare.

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

responsinator.com - Afișează toate dispozitivele populare simultan pe o singură pagină. Există zece dintre acestea în serviciu: Pixel 2 (și Android în general), iPhone și iPad-uri.

responsinator.com

iloveadaptive.com - puteți alege ce platforme să afișați simultan fără a amesteca diferite dispozitive.

Dintre bunurile suplimentare: în colțul din dreapta sus există indicatori de bază ai vitezei de încărcare a paginii.

iloveadaptive.com

quirktools.com - afișează un singur dispozitiv odată, dar ce alegere. Toate ecranele sunt împărțite în grupuri: smartphone-uri moderne, telefoane cu buton, computere și televizoare.

Deasupra - o riglă utilă cu dimensiunea ecranului în pixeli și funcții suplimentare pentru rotație și derulare.

quirktools.com

Există o captură în servicii - indiferent cât de mult le-ați încerca, acestea nu vă vor oferi un afișaj complet.

Datorită diferitelor platforme, tehnologii și abordări de dezvoltare, imaginea de pe serviciu și pe un telefon real poate diferi - există mai mulți pixeli, mai puțini pixeli.

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

Apropo. Puteți afla exact cu ce dimensiune de ecran vin vizitatorii dvs. în aceeași valoare. Statisticile sunt localizate în „Rapoarte standard -> Tehnologii -> Rezoluții de afișare”.

Pe scurt despre principalul lucru

Deci, dacă luați versiunea mobilă, alegeți mai întâi metoda potrivită și apoi asigurați-vă că dezvoltatorul nu trișează.

Dar înainte de toate acestea, faceți una bună. La urma urmei, un lucru este ca totul să fie afișat bine și alt lucru să fie vândut. Și pentru aceasta, doar partea tehnică nu este suficientă.

Și, de asemenea, este păcat că te gândești la versiunea mobilă chiar acum. Vremurile în care au spus că acest lucru este foarte relevant au trecut deja și a venit revoluția mobilă.

În zilele noastre, funcția implicită este adaptarea site-ului pentru smartphone-uri. Sfatul nostru de specialitate pentru dvs. - renunțați la îndoieli și treceți la treabă.