Design mobil receptiv. Aspect adaptiv sau versiune mobilă? Ce zici de conversie și CTR?

Odată cu începutul erei de boom a dispozitivelor mobile, dezvoltatorii s-au confruntat cu o alegere: ar trebui să păstreze versiunile mobile ale site-urilor lor împreună cu cele „cu drepturi depline” sau ar trebui site-urile să devină adaptive și să se adapteze în mod independent la diferite dimensiuni de ecran?

În prezent, atunci când construiești versiuni mobile ale site-urilor web, există 3 moduri principale de a le crea:

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

Fiecare metodă are propriile sale avantaje și dezavantaje, pe care voi încerca să le descriu în detaliu.

Design receptiv

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

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

Beneficiile designului responsiv

Ușurință de dezvoltare - Cu aspectul adaptiv, întreaga structură a site-ului se adaptează 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... Ținând cont de disponibilitatea cadrelor precum Bootstrap, o astfel de dezvoltare nu este foarte dificilă cu un standard implementare. Mai mult, susținerea unui astfel de produs va fi o sarcină relativ simplă.
O adresă URL - ne salvează de redirecționări inutile și de necesitatea ca utilizatorul să-și amintească adresa versiunii mobile (chiar dacă este doar prefixul m.). De asemenea, a avea o singură adresă va avea un efect pozitiv asupra promovării site-ului, deoarece va fi „mai convenabil” ca motoarele de căutare să funcționeze.

Dezavantajele designului responsiv

Diverse sarcini - Sarcinile tipice ale utilizatorilor „mobili” ai site-urilor mari diferă de obicei de sarcinile utilizatorilor de computere. Dacă sunteți client bancar, atunci cel mai probabil, în versiunea mobilă a site-ului veți fi interesat 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 web obișnuit și de a implementa nevoile tuturor grupurilor de public țintă în aspectul pentru telefoane. Dar apoi puteți uita de utilitate. Secțiunile secundare necesare de cinci la sută dintre vizitatori vor crea inconveniente pentru majoritatea clienților.
lipsa de speranta - Unul dintre avantajele incontestabile ale versiunii mobile: dacă nu vă place, îl puteți dezactiva și trece la un domeniu obișnuit. Site-urile de design responsive nu vă oferă această alegere simplă, dar importantă. Dacă aspectul adaptat este incomod, cu probleme sau dacă ascunde un element important de navigare, notează-l: nu poți face nimic pentru a-l vedea din nou. Va trebui să alergi să cauți un desktop sau un site web al unui concurent. Puteți veni cu „cârje” pentru a ocoli această limitare (utilizați cookie-uri și conectați diferite foi de stil). Dar această abordare complică dezvoltarea.

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

Versiune mobilă separată a site-ului

Pentru a face un site convenabil pentru utilizatorii de telefonie mobilă, sunt adesea create versiuni separate de site-uri - vizate în mod specific utilizatorilor cu un smartphone/tabletă. Cea mai obișnuită practică este redirecționarea utilizatorilor de dispozitive mobile către un subdomeniu special (m.example.com, mobile.example.com etc.). Probabil, în 99% din cazuri, versiunea mobilă este o versiune principală dezintegrată - doar cu funcționalitatea care, în opinia dezvoltatorilor, va fi necesară și utilă pentru utilizatorii de dispozitive mobile și tablete.

Avantajele versiunii mobile

Ușurință de schimbare -Întrucât site-ul există, de facto, separat de versiunea principală, este mult mai ușoară efectuarea modificărilor acestuia legate doar de versiunea mobilă, deoarece versiunea mobilă de cele mai multe ori nu oferă funcționalități redundante, inutile.
Ușurință de utilizare - Versiunea mobilă este de obicei mult simplificată în comparație cu versiunea desktop, astfel încât utilizatorul nu va trebui să meargă departe pentru a găsi 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ă este posibilă trecerea la versiunea principală a site-ului.

Dezavantajele versiunii mobile

mai multe adrese -
Incomoditate pentru utilizator - Există adrese diferite pentru versiunile desktop și mobile. Pentru unii, acesta poate fi un plus, pentru alții poate fi un factor extrem de iritant atunci când, pentru a vizualiza comod site-ul, trebuie să vă amintiți o altă adresă. Există și probleme cu motoarele de căutare: pentru a evita conținutul duplicat, specialiștii SEO trebuie să folosească meta-taguri rel=„alternative” și rel=“canonic”. În plus, atunci când un utilizator de căutare mobil Google face clic pe un link din rezultate, acesta va fi dus la versiunea desktop sau redirecționat către versiunea mobilă. Dar dacă versiunea mobilă a acestei pagini nu există, va primi un mesaj de eroare.
limitat - Crearea unui site mobil separat înseamnă a scăpa de 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 ale site-urilor web are rezultate destul de bune, în special pentru proiectele mari. De exemplu, Amazon folosește o versiune specială, mobilă a site-ului.

RESS

Însuși Google, deși acceptă utilizarea designului responsive de către webmasteri, folosește un sistem diferit în produsele sale. Dacă accesați, de exemplu, pagina principală sub diferiți User-Agent, puteți vedea HTML diferit pentru diferite dispozitive. RESS - Responsive Design + Server Side. 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 = "șablon .php"; ) include(dirname(__FILE__) . $DS . "șabloane" . $DS . $tmpl);

Avantajele RESS

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

Minimizarea traficului - JavaScript inutil poate fi eliminat din HTML, ceea ce eliberează procesorul, memoria și memoria cache pe dispozitivul mobil. HTML și CSS pot fi, de asemenea, optimizate special.
Este posibil să utilizați direcționarea - de exemplu, pentru dispozitivele Android se recomandă descărcarea aplicației de pe GooglePlay, iar pentru Apple - de pe iTunes. Puteți face propriul aspect pentru fiecare dispozitiv.

Contra ale RESS

Dificultate in dezvoltare - o astfel de metodă va necesita setări adecvate de server și munca mai multor programatori. De asemenea, va fi necesar să faceți mai multe opțiuni diferite de aspect.
Mecanism de detectare a dispozitivului - Din păcate, nici în vremea noastră nu a fost încă dus la perfecțiune. Povești despre cum telefonul rar al cuiva nu a fost identificat ca un 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.

Relua

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

Nu este un secret pentru nimeni că acum majoritatea oamenilor accesează Internetul de pe telefoanele mobile, deoarece este convenabil și mai familiar. Rețele sociale, site-uri de știri, magazine online și domenii dedicate sectorului de servicii - orice adresă poate fi vizitată de pe un dispozitiv mobil între ele, mai degrabă decât așezată la un computer. Prin urmare, este deosebit de important ca site-ul să fie confortabil pentru a lucra de pe orice dispozitiv.

Ce este responsive design și cât de relevant este? Atunci când creați un site web, este mai bine să folosiți o versiune specială pentru mobil sau una universală potrivită pentru telefon, tabletă, laptop etc.?

Dacă designul site-ului tău este incomod pentru utilizatorii care accesează de pe dispozitive mobile, cel mai probabil aceștia vor merge la concurenții tăi. De asemenea, profitul și traficul nu vor ajunge la dvs. Din acest motiv și din multe alte motive, site-ul tău are nevoie cu siguranță de un design responsive sau de o versiune mobilă. Care dintre aceste opțiuni este de preferat? Să comparăm mai târziu în articolul nostru.

Dacă un site nu are în prezent nici o versiune adaptivă, nici o versiune mobilă, arată destul de ciudat și nu poate ajuta la creșterea traficului și a profiturilor.

Recent, a existat o creștere bruscă a varietății de dispozitive de pe care oamenii accesează site-uri web. Acest lucru necesită necesitatea unei versiuni care să se potrivească fiecărei dimensiuni și rezoluții de ecran. Unii oameni accesează internetul de pe telefoane destul de demodate, în timp ce alții folosesc chiar televizorul ca ecran de computer, iar pentru fiecare dintre aceste opțiuni ar trebui să existe o versiune adecvată.

Întrucât autentificarea de pe telefon este destul de simplă și se poate face oricând, a crescut și numărul utilizatorilor care aleg această metodă, ceea ce crește traficul.

Pentru clasamentul de căutare a unei pagini, este de preferat să aveți o versiune responsive, deoarece aceasta permite luarea în considerare a unui site, fără nicio duplicare a paginilor.

Design receptiv

Se înțelege că designul adaptiv este conceput imediat pentru computer, tabletă și smartphone. Adaptarea automată, scalarea și ajustarea la fiecare dimensiune specifică a ecranului este foarte convenabilă.

Este important ca toate informațiile și funcționalitățile să fie afișate și să funcționeze corect, indiferent de tipul de dispozitiv. Când accesați un site web de pe un smartphone care nu are o versiune responsive, trebuie să scalați manual pagina făcând butoanele mai mari sau mai mici. Acest mod de lucru este foarte incomod, iar versiunea adaptivă în sine scalează corect blocurile de pe site pentru tine.

Ce opțiuni de aspect sunt folosite pentru un site web responsive?

Cauciuc. În zilele noastre, acest tip de aspect se îndepărtează treptat, deoarece pur și simplu comprimă blocurile de pe pagină. În versiunea mobilă, acest aspect formează pur și simplu blocuri pe site într-un flux continuu.
Mai multe machete disponibile. Această abordare va necesita o cantitate semnificativă de resurse financiare, umane și de timp, deoarece implică crearea unui aspect pentru fiecare rezoluție specifică a ecranului, luând în considerare toate configurațiile posibile. Este cea mai înaltă calitate în ceea ce privește rezultatele, dar și cea mai intensivă în muncă.
Scalare – dacă site-ul dvs. nu are o structură complexă, de exemplu, este o pagină de destinație, atunci poate fi scalat pur și simplu.

Designul responsive are un număr imens de avantaje

De exemplu, atunci când utilizați versiunea adaptivă veți avea doar un singur domeniu, 1 cod de site pentru toate dispozitivele și din nou un conținut și o bază de date.

Aceste avantaje ale versiunii adaptive devin dezavantaje ale versiunii mobile - va necesita un subdomeniu cu prefixul m, programatorii vor trebui să creeze această opțiune separat, iar completarea acesteia cu informații se va întâmpla și separat și, din nou, vor exista două baze de date ( pentru versiunea mobilă și pentru versiunea desktop).

Designul adaptiv se mai numește și responsive și aceasta este o definiție foarte bună pentru înțelegerea tuturor proprietăților sale. Adaptiv are un anumit flexibilitate– blocurile de pe site își schimbă locația, adaptându-se la un computer, smartphone și tabletă.

Cel mai evident avantaj al versiunii adaptive este comoditatea– posibilitatea de a vizualiza site-ul de pe orice dispozitiv va atrage utilizatorul.

Pentru programatori, designeri și clienții înșiși, acesta este un avantaj imens rapiditate dezvoltare, deoarece trebuie să vă gândiți și să scrieți o singură versiune, și nu două (desktop + pentru smartphone).

Pentru Departamentul SEO De asemenea, este mai convenabil să lucrați cu o abordare adaptativă, deoarece altfel vor fi necesare proceduri separate pentru a ajunge în partea de sus a motoarelor de căutare. În plus, roboților nu le plac paginile duplicate și materialele identice pe două site-uri. Este mult mai ușor să lucrezi cu o singură adresă URL. În plus, în contul dvs. Google Analytics veți avea imediat informații despre vizitatorii site-ului desktop și mobil, iar indicatorii vor crește.

Suportul pentru site-ul web este mai convenabil pentru versiunea adaptivă, deoarece este posibil să schimbați toate informațiile deodată, și nu în două versiuni, cum este cazul celei mobile. De foarte multe ori trebuie să schimbați și să adăugați ceva pe site și, prin urmare, economisirea efortului este o prioritate. Dacă este posibil să minimizați sarcinile de rutină, atunci merită să faceți acest lucru, astfel încât timpul specialiștilor să poată fi cheltuit pe sarcini mai utile și mai complexe.

Am menționat economisirea timpului la dezvoltare, merită menționat cost. Prețurile pentru crearea unui site web obișnuit + o versiune mobilă și o versiune adaptivă variază în funcție de studio web sau agenție digitală, dar în general prețurile sunt aproximativ la același nivel sau versiunea adaptivă va costa mai puțin.

Criteriul din versiunea adaptativă este ambiguu pentru evaluare. Pentru unii utilizatori care se conectează de pe un dispozitiv mobil, este atât neinteresant, cât și incomod să vizualizeze toate blocurile de informații. Dimpotrivă, cineva are nevoie de informații detaliate, iar o versiune mobilă ușor „dezgolită” nu va fi pe placul său. Aici influențează factor umanși preferințele specifice ale fiecărui utilizator.

Desigur, designul responsive are și dezavantajele sale. De exemplu, absolut toate blocurile de informații și funcționalitățile site-ului se vor încărca pentru utilizator, chiar dacă s-a autentificat de pe telefonul său. Acest lucru poate dura destul de mult din cauza vitezei scăzute a internetului. În plus, nu toți oamenii pot avea răbdarea să parcurgă toate informațiile site-ului de pe un smartphone, căutând, de exemplu, un număr de telefon.

Versiunea mobilă a site-ului

Versiunea mobilă este destinată exclusiv ecranelor smartphone-urilor.

Să începem cu avantajele incontestabile ale versiunii mobile.

Viteza de incarcare: Versiunea mobilă este concepută special pentru descărcare prin internetul mobil, care de obicei nu funcționează bine. Pentru ca versiunea mobilă să se încarce mai repede, în etapa de planificare se gândește cum să elimini unele dintre informațiile care nu vor fi foarte solicitate și necesare utilizatorilor care se conectează de pe un smartphone.

În plus, este mult mai convenabil pentru utilizatorii înșiși atunci când pot găsi imediat informații folosind acest lucru funcționalitate minimă. După cum am spus deja, volumul traficului mobil crește rapid și nu trebuie să ratam cei care preferă să navigheze pe internet de pe telefon.

Ce principii sunt folosite pentru a determina cum să faci versiunea mobilă a unui site mai ușoară? De obicei, oamenii preferă să facă orice procese complexe, importante și în mai multe etape versiune desktop site-ul. De exemplu, puțini oameni o vor face intocmeste documente prin telefonul mobil, completați formulare importante sau alegeți un apartament. Prin urmare, este puțin probabil să fie necesare în versiunea mobilă a site-ului tabele, calculatoare, articole extinse etc.

Comoditatea este un alt avantaj al versiunii de telefon. Dar aici depind mult de dezvoltatori - interacțiunea ar trebui să fie cu adevărat confortabilă, convenabilă și eficientă pentru utilizatori. Merită să ne amintim despre SEO - dacă clientului îi este incomod să lucreze pe site, pur și simplu îl va închide și roboții de căutare vor urmări acest lucru, scăzând poziția site-ului în rezultatele căutării.

Când sunteți în versiunea mobilă, există întotdeauna un link vizibil pentru a accesa versiunea completă a site-ului dacă aveți nevoie de informații sau funcționalități mai complete. Nu există o astfel de opțiune în versiunea adaptivă.

Versiunea pentru smartphone are și dezavantajele ei. Crearea unei versiuni pentru telefon va necesita timp și bani suplimentari și nu toți clienții sunt dispuși să aștepte mai mult și, prin urmare, să aleagă versiunea adaptivă.

Astăzi am vorbit despre ce este mai bine, design responsive sau versiunea mobilă. Ambele opțiuni au avantajele și dezavantajele lor. În zilele noastre, este considerată o practică bună să aveți o versiune mobilă din mai multe motive. Acesta este atât confortul pentru viitorii tăi clienți (clienți, vizitatori, etc.), cât și dorința de a face SEO să funcționeze pentru tine (motoarele de căutare clasifică mai bine site-urile care au o versiune mobilă). Opțiunea adaptivă este convenabilă datorită versatilității sale. Alegerea depinde de parametrii prioritari.

În orice caz, doar clientul decide ce versiune a site-ului este necesară.

Costul promovării motoarelor de căutare și rezultatele acestuia depind de modul în care adaptăm site-ul pentru dispozitivele mobile.

Marcaje

Dmitry Mrachkovsky, un optimizator de la Ashmanov and Partners, a spus cum să alegeți între un site adaptabil și cel mobil și ce probleme neevidente veți întâmpina.

Beneficiile site-urilor web responsive și mobile

Este dificil de a răspunde definitiv la întrebarea care tehnologie de adaptare pentru smartphone-uri și tablete este mai eficientă din punct de vedere SEO. Nici în rândul jucătorilor majori nu am observat o preponderență în favoarea vreunei soluții. M.Video, DNS, Wildberries, Aviasales folosesc un aspect adaptiv, iar Lamoda, 220 Volt, Yulmart, Yandex.Market folosesc site-uri mobile. Dar să ne uităm la ce beneficii primesc primul și al doilea.

Aspect adaptiv al site-ului M.Video și versiunea mobilă a site-ului 220 Volt

Aspectul adaptiv vă ajută să evitați dezvoltarea unei versiuni mobile separate. Aceasta are avantaje:

Nu avem nevoie de o structură separată a paginii pentru afișarea pe dispozitivele mobile. Este suficient să ajustați versiunea desktop a site-ului folosind CSS.
O singură adresă URL este utilizată pentru versiunile desktop și mobile. Prin urmare, conținutul site-ului nu este duplicat, paginile nu concurează între ele, iar activitatea de promovare afectează clasamentele în căutările desktop și mobile.

Versiunea mobilă este o soluție mai scumpă și mai flexibilă. Poate fi editat fără a afecta site-ul principal. Aceasta oferă avantaje:

Un site mobil poate fi încărcat cât mai ușor și rapid posibil prin eliminarea funcționalităților inutile la nivel de cod.
Interfața poate fi îmbunătățită pentru utilizatorii de telefonie mobilă prin adăugarea de funcționalități care nu erau disponibile pe versiunea desktop a site-ului.
Utilizatorul poate oricând să treacă la versiunea principală a site-ului pe un dispozitiv mobil dacă dorește.

Aș dori să menționez încă o tehnologie - RESS. Afișează șabloanele desktop sau mobile ale utilizatorului, în funcție de dispozitiv, dar adresa URL a paginii nu se modifică. RESS combină avantajele versiunilor adaptive și mobile descrise mai sus. Dar are și două dezavantaje: implementare complexă și costisitoare și erori în identificarea modelelor de telefoane rare și nepopulare.

Probleme cu aspectul adaptiv

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

Interpretarea greșită a adaptivului

Unii oameni implementează incorect aspectul adaptiv și afișează două șabloane pe o singură pagină în cod simultan - desktop și mobil. În funcție de dispozitivul utilizatorului, partea dorită a codului rămâne vizibilă, iar restul este ascuns folosind afișajul: none . Acest lucru creează trei probleme:

Toate elementele de conținut sunt încărcate de două ori: texte, imagini, titluri H1 și H6, breadcrumbs, produse conexe și recomandate și așa mai departe. Și motoarele de căutare chiar nu le plac duplicatele.
Părțile neutilizate ale conținutului sunt ascunse folosind CSS. Opinia motoarelor de căutare cu privire la această problemă este ambiguă. Google a declarat că ignoră conținutul blocurilor ascunse, iar Yandex a declarat că ia în considerare conținutul întregii pagini. Majoritatea specialiștilor SEO sunt de acord că o astfel de schemă creează riscul de a intra sub sancțiuni.
Codul este duplicat și site-ul se încarcă mai lent.

O astfel de implementare este abordarea greșită a tehnologiei RESS.

Ascunderea elementelor inutile

Pentru a face interfața versiunii adaptive mai convenabilă, unii scapă de unele dintre funcționalități: blocuri care distrag atenția, texte mari în categorii de catalog și așa mai departe. Orice lucru inutil este ascuns folosind display: none . Dar problema este că tot codul este folosit pentru a încărca pagina și site-ul este lent. În plus, după cum am menționat mai sus, motoarele de căutare au o atitudine controversată față de un astfel de conținut - există riscul de a intra sub sancțiuni.

Utilizarea incorectă a JavaScript

Unii oameni folosesc JS pentru a evita afișarea blocurilor inutile pe dispozitivele mobile. Dar această metodă nu este mai bună decât afișarea: niciuna. Există riscul ca motoarele de căutare să nu indexeze conținutul destinat acestora, chiar și pe versiunea desktop. Motoarele de căutare, în general, nu percep întotdeauna corect conținutul AJAX, mai ales dacă nu sunt îndeplinite o serie de condiții pentru o indexare corectă.

De ce oamenii încă folosesc design responsive?

Alegerea adaptivului se datorează de obicei două avantaje principale: dezvoltarea unei singure versiuni a site-ului și absența problemelor cu mai multe URL-uri.

Aceasta este, de asemenea, o soluție convenabilă pentru promovarea în mai multe regiuni. Ne concentrăm toate eforturile pe un singur domeniu și obținem rezultate în căutările desktop și mobile. Pentru a face acest lucru, trebuie să conectați regiunile de interes la site în Yandex.Directory.

Iar pentru Google, creați o pagină cu adrese de filiale, astfel încât motorul de căutare să înțeleagă în ce regiuni vă desfășurați activitatea. Aspectul adaptiv cu un singur domeniu este folosit cu mare succes de M.Video. Magazinul are poziții înalte în rezultatele căutării pe dispozitive mobile și desktop pentru interogări despre produse, categorii și informații.

Puteți merge în altă direcție - utilizați geosubdomenii pentru a crește relevanța textuală a paginilor. În acest caz, subdomenii precum spb.site.ru, samara.site.ru, kazan.site.ru sunt alocate regiuni prin Yandex.Webmaster și apoi sunt scrise anteturi și metaetichete indicând toponimul. Un alt plus este că este ușor să configurați analize separate pentru geosubdomenii pentru a urmări rezultatele în funcție de regiune. Această metodă de promovare este practicată de MediaMarkt.

Probleme cu versiunile mobile ale site-urilor

Costul relativ ridicat de dezvoltare nu este singurul dezavantaj al site-urilor mobile. Iată o listă cu probleme mai puțin evidente pe care le puteți întâmpina atunci când alegeți această tehnologie.

Munca de promovare dubla

Site-ul mobil este optimizat și promovat separat de cel principal, iar acest lucru necesită mai multe resurse decât în cazul unui site adaptiv. Trebuie să începeți optimizarea asigurându-vă că versiunea mobilă este indexată corect și nu concurează cu versiunea desktop. Pentru a face acest lucru, conectați-le în Yandex.Webmaster și Search Console, specificați atributele corecte rel="alternate", configurați indexarea și generarea hărții XML.

Haos din cauza legăturilor absolute în conținut

Șabloanele desktop și mobile încarcă conținut din aceeași bază de date în 99% din cazuri. Dacă folosește link-uri absolute către pagina internă a site-ului desktop indicând protocolul și domeniul, atunci acestea vor fi afișate pe pagina mobilă. Când faceți clic pe link, se va întâmpla unul dintre cele două scenarii:

Dacă versiunea desktop are un user agent definit, versiunea mobilă a paginii se va deschide utilizatorului.
În alte cazuri, utilizatorul va vedea pagina de desktop, iar munca de creare a unei versiuni pentru mobil va fi în zadar.

În acest caz, link-ul intern al site-ului poate fi rupt. Pentru a evita această problemă, utilizați linkuri relative în conținutul dvs. Adică, pentru atributul href, specificați /page/ în loc de https://site.ru/page/ .

Conținutul și structura site-urilor desktop și mobile pot diferi. Prin urmare, este logic să indexați conținutul ambelor în căutare pentru a evita erorile. Google recomandă să se indice pe versiunea mobilă că conținutul site-ului desktop este canonic. Pe de altă parte, motorul de căutare spune că nu se ia în considerare conținutul paginilor non-canonice.

Yandex este clar în această privință - indexează separat conținutul paginilor mobile și desktop. Pentru a face acest lucru, trebuie doar să setați atributul rel="alternate" din versiunea principală la cea mobilă și puteți configura și redirecționări 301 din versiunea desktop către cea mobilă, ținând cont de agentul utilizator al dispozitivului.

Ambiguitatea cerințelor de index pentru mobil-first

Pentru a vă pregăti pentru tranziția la un index pe mobil, este logic să selectați versiunea mobilă a site-ului ca pagină canonică. Adevărat, recomandările referitoare la mobile-first au propriile ambiguități. De exemplu, regulile Google spun că conținutul versiunilor mobile și desktop ar trebui să fie similar, dar nu dezvăluie gradul de „asemănare”.

Ce se întâmplă dacă clasarea în căutarea pe desktop necesită un anumit bloc de conținut, care va fi de prisos în versiunea mobilă, dar prioritate va fi acordată versiunii mobile?

Extras din ghidul Google pentru indexarea site-urilor mobile

Extras din raportul Google cu privire la implementarea indexului mobile-first

Utilizarea necugetat a paginilor turbo

Unii oameni introduc inovații pentru motoarele de căutare fără discernământ, cu așteptarea să afecteze clasamentele. De exemplu, paginile Yandex turbo, care nu înlocuiesc paginile mobile cu drepturi depline în căutare, includ o mică parte din funcționalitatea utilizatorului și generează mai puține conversii. Dacă aveți un site web comercial și aveți încredere în calitatea versiunii mobile, nu vă grăbiți să implementați „turbo” - chiar și pentru paginile cu articole și recenzii.

Reducerea efectului legăturilor externe

Linkurile sunt încă importante pentru clasare, mai ales în căutarea pe Google. Când avem un subdomeniu mobil, unii utilizatori încep să creeze un link către el în rețelele sociale și forumuri. Și cealaltă parte folosește link-uri către adresa site-ului principal. Drept urmare, linkurile au un efect mai mic în căutările mobile și desktop decât dacă am avea un singur domeniu.

Caracteristici ale promovării în regiuni

Mai sus am vorbit despre două moduri de a promova la nivel regional un produs adaptiv - folosind un singur domeniu și geo-subdomenii. Să luăm î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ă fie specificate regiuni prin Yandex.Directory. Problema este că uneori este imposibil să conectați în mod independent versiunea mobilă a site-ului la ramură. Va trebui să contactați asistența tehnică, dar acest lucru nu garantează rezultate. Nu puteți crea o organizație separată pentru versiunea mobilă a site-ului. Prin urmare, dacă există multe ramuri, legarea poate dura mult timp.

În general, excludem opțiunea de a folosi subdomenii precum m.spb.site.ru sau spb.m.site.ru. Deși Kholodilnik.ru, de exemplu, îl folosește. Dar, în acest caz, trebuie să configurați adresarea între toate regiunile versiunilor mobile și desktop, să le mențineți la zi, să urmăriți modificările și să monitorizați serviciile pentru webmasteri. Aceasta este o mulțime de muncă care este puțin probabil să dea roade.

Trimiterea pentru teste de adecvare mobilă

Dacă nu trimiteți versiunea optimizată a site-ului către Yandex.Webmaster pentru testarea compatibilității cu dispozitivele mobile, este posibil să nu apară în rezultatele căutării mobile. Problema se aplică și la adaptativ. Acest lucru nu se întâmplă întotdeauna, dar vă recomand să urmăriți mesajele în Webmaster.

Fragment de comunicare cu suportul tehnic Yandex despre atribuirea unei regiuni la versiunea mobilă a site-ului

De ce să folosiți versiunile mobile?

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

De asemenea, mulți specialiști SEO au observat o creștere a traficului de căutare după introducerea unui site mobil în locul unuia adaptiv. Deși nu exclud că motivul creșterii a fost că au existat erori în aspectul lor adaptiv care au afectat negativ clasamentul.

Ce opțiune să alegeți

Dacă dezvoltați un site web de la zero sau aveți un proiect mic, aruncați o privire mai atentă asupra aspectului adaptiv. Aceasta este o soluție mai economică și mai rapidă. Este mai bine să planificați funcționalitatea imediat, astfel încât să nu trebuiască să ascundeți o parte a site-ului pentru a nu fi afișată pe dispozitivele mobile în viitor.

Scrie

În prezent, atunci când construiești versiuni mobile ale site-urilor web, există 3 moduri principale de a le crea:

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

Fiecare metodă are propriile sale avantaje și dezavantaje, pe care voi încerca să le descriu în detaliu.

Design receptiv

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

Beneficiile designului responsiv

Ușurință de dezvoltare - Cu aspectul adaptiv, întreaga structură a site-ului se adaptează 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... Ținând cont de disponibilitatea cadrelor precum Bootstrap, o astfel de dezvoltare nu este foarte dificilă cu un standard implementare. Mai mult, susținerea unui astfel de produs va fi o sarcină relativ simplă.
O adresă URL - ne salvează de redirecționări inutile și de necesitatea ca utilizatorul să-și amintească adresa versiunii mobile (chiar dacă este doar prefixul m.). De asemenea, a avea o singură adresă va avea un efect pozitiv asupra promovării site-ului, deoarece va fi „mai convenabil” ca motoarele de căutare să funcționeze.

Dezavantajele designului responsiv

Diverse sarcini - Sarcinile tipice ale utilizatorilor „mobili” ai site-urilor mari diferă de obicei de sarcinile utilizatorilor de computere. Dacă sunteți client bancar, atunci cel mai probabil, în versiunea mobilă a site-ului veți fi interesat 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 web obișnuit și de a implementa nevoile tuturor grupurilor de public țintă în aspectul pentru telefoane. Dar apoi puteți uita de utilitate. Secțiunile secundare necesare de cinci la sută dintre vizitatori vor crea inconveniente pentru majoritatea clienților.
lipsa de speranta - Unul dintre avantajele incontestabile ale versiunii mobile: dacă nu vă place, îl puteți dezactiva și trece la un domeniu obișnuit. Site-urile de design responsive nu vă oferă această alegere simplă, dar importantă. Dacă aspectul adaptat este incomod, cu probleme sau dacă ascunde un element important de navigare, notează-l: nu poți face nimic pentru a-l vedea din nou. Va trebui să alergi să cauți un desktop sau un site web al unui concurent. Puteți veni cu „cârje” pentru a ocoli această limitare (utilizați cookie-uri și conectați diferite foi de stil). Dar această abordare complică dezvoltarea.

Versiune mobilă separată a site-ului

Avantajele versiunii mobile

Ușurință de schimbare -Întrucât site-ul există, de facto, separat de versiunea principală, este mult mai ușoară efectuarea modificărilor acestuia legate doar de versiunea mobilă, deoarece versiunea mobilă de cele mai multe ori nu oferă funcționalități redundante, inutile.
Ușurință de utilizare - Versiunea mobilă este de obicei mult simplificată în comparație cu versiunea desktop, astfel încât utilizatorul nu va trebui să meargă departe pentru a găsi 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ă este posibilă trecerea la versiunea principală a site-ului.

Dezavantajele versiunii mobile

mai multe adrese -
Incomoditate pentru utilizator - Există adrese diferite pentru versiunile desktop și mobile. Pentru unii, acesta poate fi un plus, pentru alții poate fi un factor extrem de iritant atunci când, pentru a vizualiza comod site-ul, trebuie să vă amintiți o altă adresă. Există și probleme cu motoarele de căutare: pentru a evita conținutul duplicat, specialiștii SEO trebuie să folosească meta-taguri rel=„alternative” și rel=“canonic”. În plus, atunci când un utilizator de căutare mobil Google face clic pe un link din rezultate, acesta va fi dus la versiunea desktop sau redirecționat către versiunea mobilă. Dar dacă versiunea mobilă a acestei pagini nu există, va primi un mesaj de eroare.
limitat - Crearea unui site mobil separat înseamnă a scăpa de 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 ale site-urilor web are rezultate destul de bune, în special pentru proiectele mari. De exemplu, Amazon folosește o versiune specială, mobilă a site-ului.

RESS

Avantajele RESS

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

Minimizarea traficului - JavaScript inutil poate fi eliminat din HTML, ceea ce eliberează procesorul, memoria și memoria cache pe dispozitivul mobil. HTML și CSS pot fi, de asemenea, optimizate special.
Este posibil să utilizați direcționarea - de exemplu, pentru dispozitivele Android se recomandă descărcarea aplicației de pe GooglePlay, iar pentru Apple - de pe iTunes. Puteți face propriul aspect pentru fiecare dispozitiv.

Contra ale RESS

Dificultate in dezvoltare - o astfel de metodă va necesita setări adecvate de server și munca mai multor programatori. De asemenea, va fi necesar să faceți mai multe opțiuni diferite de aspect.
Mecanism de detectare a dispozitivului - Din păcate, nici în vremea noastră nu a fost încă dus la perfecțiune. Povești despre cum telefonul rar al cuiva nu a fost identificat ca un 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.

Relua

Aceasta este o versiune suplimentară simplificată a site-ului, de obicei situată pe un subdomeniu cu prefixul „m” (de exemplu, m.site).

După cum puteți vedea din poză, pe tablete se deschide și varianta pentru telefoane și este întinsă în lățime, pentru că o tabletă este practic un smartphone foarte, foarte larg :)

Din punct de vedere extern și stilistic, desigur, poate fi făcut ca site-ul principal (ca să nu simți că ești pe pagina altei persoane): aceleași culori, fonturi, elemente. Dar structura poate fi radical diferită și cel mai adesea este. Este puțin probabil ca cineva să aleagă un apartament sau să ridice o mașină prin telefon sau să solicite un împrumut de la o bancă. La urma urmei, acest lucru este incomod, deoarece ecranul este mic (comparativ cu un laptop sau un computer). Dar găsirea celor mai apropiate bancomate sau a adresei unei pizzerii este invers. Prin urmare, versiunile mobile sunt realizate foarte simplificat, fără calculatoare complexe, tabele uriașe care compară două sau mai multe produse similare. Ele elimină toate cele mai complicate lucruri și simplifică accesul la contacte, orele de lucru și așa mai departe.

Avantaje

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

Defecte

În calitate de designer, îmi voi exprima imediat „sentimentul” despre tablete: versiunea pentru smartphone-uri întinsă pe lățime arată groaznic pe ele. Nu, bineînțeles că îl poți folosi. Dar cel adaptiv a mers foarte departe în acest sens.
Toate acestea sunt extrem de incomod pentru optimizarea SEO. Două adrese - site-ul principal și versiunea mobilă - înseamnă că conținutul va fi duplicat.