O fișă cheat pentru designul mobil: design responsiv, difuzare dinamică și site-uri mobile

Actualizarea editorului (iulie 2015): în aprilie 2015, Google a făcut o actualizare pre-anunțată a algoritmului care clasifică rezultatele căutării mobile. Utilitatea unui site pentru dispozitive mobile este un semnal de clasare confirmat pentru clasamentele de căutare pe mobil. Luați notă și faceți site-ul dvs. prietenos pentru dispozitive mobile cu ajutorul articolului următor.

Cu toții am auzit statisticile: 2014 este anul în care mai mulți oameni accesează internetul pe un smartphone decât pe un computer sau laptop. Designul mobil este viitorul. Nu vrei ca site-ul tău să fie lăsat în urmă, dar cum programezi exact pentru acest internet din ce în ce mai mobil? Există trei opțiuni principale, fiecare cu propriile avantaje și dezavantaje. În această postare, voi detalia opțiunile dvs. de pregătire pentru dispozitive mobile, oferindu-vă avantajele și dezavantajele fiecăruia pentru a vă ajuta să alegeți cea mai bună cale de urmat pentru site-ul dvs. web și strategia SEO.

Opțiunea 1: Design receptiv

Designul receptiv determină rezoluția ecranului pe care o pagină este vizualizată folosind interogări media, apoi ajustează dimensiunea și aspectul paginii în mod corespunzător. Google a declarat că preferă designul web responsiv, ceea ce îl face cel mai mare lucru în această discuție.

Pro :

1. Există o singură versiune a fiecărei pagini. Aceeași pagină se adaptează tipului de dispozitiv care o afișează (mai degrabă decât să detecteze tipul de dispozitiv și apoi să difuzeze conținut diferit pe baza acestuia). Având același HTML și URL pe toate dispozitivele, vă simplifică întreținerea site-ului.
2. Designul receptiv nu se bazează pe detectarea user-agent, așa cum se bazează pe celelalte două opțiuni. Detectarea user-agent (adică detectarea browserului sau dispozitivului care solicită o pagină web) nu este rea în sine, dar nu este perfectă, iar dacă există o eroare în proces, utilizatorii pot primi versiunea greșită a site-ului dvs. În plus, acest lucru îi scutește pe păianjenii motoarelor de căutare de a fi nevoiți să acceseze cu crawlere site-ul dvs. ca mai mulți utilizatori-agenți diferiți, ceea ce înseamnă că mai mult site-ul dvs. este accesat cu crawlere.
3. În general, responsive se încarcă mai repede în browsere. Deoarece toate dispozitivele primesc același conținut, nu există niciun proces de solicitare-detecție a agentului utilizator-posibilă redirecționare. Și oricine i-a fost vreodată foame și a căutat un restaurant bun pe smartphone știe că viteza contează.

Contra:

1. Reproiectarea unui site existent poate fi un proces lung și intens. Deci, dacă aveți un site mare, trecerea la responsive poate să nu fie cea mai bună alegere.
2. În funcție de aspectul site-ului dvs., poate fi pur și simplu prea dificil să înghesuiți conținutul pe un ecran mobil. Site-uri precum NYTimes.com mențin site-uri mobile separate, deoarece este mai ușor să divizați conținutul decât să îl puneți într-o singură pagină.
3. Elementele de navigare nu se redimensionează întotdeauna bine; elementele de trecere cu mouse-ul nu funcționează deloc pe un ecran tactil. Prin urmare, a fi receptiv poate însemna schimbarea navigației.
4. Au existat cazuri în care paginile responsive cu multe imagini s-au încărcat mai lent cu design responsive. Ar trebui să subliniez că aceasta nu este norma, dar s-a întâmplat.

Dacă optați pentru un design responsive, rețineți că veți dori să vă optimizați imaginile și să vă testați site-ul pe diverse browsere și dispozitive (sau să utilizați un emulator bun user-agent) înainte de a-l pune live.

Opțiunea 2: Servire dinamică

Denumită uneori „sniffing” de user-agent, servirea dinamică poate fi realizată în două moduri și este dificil de implementat. De fapt, Google subliniază câteva greșeli comune făcute cu difuzarea dinamică. Ceea ce face această tehnică este să detecteze agentul utilizator al unui vizitator (adică, ce dispozitiv folosește pentru a vizualiza site-ul dvs.) și apoi redirecționează la nivel de server . O modalitate de a implementa difuzarea dinamică este redirecționarea unidirecțională , în care linkurile către un site sunt implicite către site-ul desktop, dar dispozitivele mobile sunt redirecționate de pe site-ul desktop către site-ul mobil.

Al doilea tip, redirecționarea bidirecțională , are cod atât pe site-urile desktop, cât și pe cele mobile, asigurându-se că oricărui vizitator, indiferent de dispozitiv, i se servește conținutul corespunzător. (Aceste bucăți de cod sunt uneori numite etichete switchboard.) Implementarea înseamnă punerea unei etichete rel=”alternative” pe desktop, care indică site-ul mobil; și, pe site-ul mobil, punerea unei etichete rel="canonical" care indică către site-ul desktop.

Pro:

1. Deoarece redirecționarea se face la nivel de server, aveți nevoie de o singură adresă URL pe pagină.
2. Servirea dinamică funcționează bine și pentru telefoanele cu caracteristici . După cum este definit de PCMag.com, un telefon cu funcții este un „telefon mobil care conține un set fix de funcții dincolo de apelurile vocale și mesajele text, dar nu este la fel de extins ca un smartphone”. De exemplu, telefoanele cu funcții de obicei nu pot descărca aplicații, dar de obicei au o anumită capacitate de navigare pe web. Potrivit Google, cea mai mare diferență este că telefoanele cu caracteristici nu pot procesa CSS, așa că nu pot gestiona foarte bine designul responsive. Prin urmare, este important să vă cunoașteți publicul și ce tip de dispozitive mobile folosesc.
3. Dacă doriți să aveți un set separat de cuvinte cheie special pentru utilizatorii dvs. de telefonie mobilă, atunci această opțiune vă va permite să faceți acest lucru, deoarece utilizatorii de dispozitive mobile și utilizatorii de desktop văd fiecare HTML distinct. (Search Engine Land are un articol grozav care discută cuvinte cheie specifice pentru dispozitive mobile.)

Contra:

1. Redirecționarea dinamică vă dublează munca de întreținere a site-ului, deoarece creează un site separat pentru mobil, cu un set separat de HTML indexat care necesită un proiect SEO separat.
2. Lista necesară de șiruri user-agent necesită, de asemenea, întreținere constantă, deoarece trebuie adăugate șiruri noi ori de câte ori este lansat un nou dispozitiv mobil.
3. În cele din urmă, rețineți că va trebui să utilizați un antet „Vary HTTP-User Agents” dacă site-ul dvs. difuzează conținut în mod dinamic. Antetul ajută conținutul să fie difuzat corect și ajută motoarele să-l memoreze în cache în mod corespunzător. Google are detalii despre cum să adăugați acest antet.

Opțiunea 3: Un site mobil

Această opțiune, după cum sugerează și numele, implică crearea unui domeniu separat special pentru utilizatorii de telefonie mobilă. Cele mai comune exemple sunt m.domain.com sau mobile.domain.com . Este o opțiune populară pentru marii comercianți cu amănuntul; Bridget Randolph subliniază că „73% dintre site-urile web clasate în Top 100.000 de site-uri Quantcast au folosit redirecționări URL către o adresă URL specifică pentru mobil”. La fel ca difuzarea dinamică, această tehnică implică dezvoltarea de conținut special pentru vizitatori care folosesc un dispozitiv mobil; cu toate acestea, adresele URL ale unui site mobil separat sunt distincte, deci nu există nicio redirecționare la nivel de server.

Pro:

1. Pentru site-urile mai mari, cu un număr de pagini de sute de mii sau milioane, implementarea designului responsive poate fi pur și simplu prea multă muncă. Un site mobil vă permite să personalizați experiența utilizatorului și să construiți încet o experiență mobilă unică.
2. La fel ca difuzarea dinamică, un site mobil este mai bun pentru telefoanele cu caracteristici decât designul responsive. În funcție de demografia site-ului dvs., acesta poate să nu fie un criteriu; dar pentru unele afaceri, este un aspect important.

Contra :

1. Site-ul dvs. mobil nu va beneficia de niciun profil pozitiv de backlink pe care l-a creat site-ul dvs. desktop (cu excepția cazului în care implementați redirecționări bidirecționale). Deci, dacă doriți să convingeți utilizatorii dvs. de mobil să vă găsească în căutarea organică, acesta poate fi un adevărat eșec.
2. Site-ul dvs. mobil va necesita ceva lucru SEO suplimentar. Va trebui să trimiteți un Sitemap XML separat la Google și Bing Webmaster Tools. În plus, ecranele mai mici înseamnă SERP-uri mai mici, așa că poate fi necesar să editați etichetele meta. Metaetichetele specifice pentru dispozitive mobile ar trebui să fie mai scurte decât cele pentru un site desktop.

După cum puteți vedea, conținutul a fost reformatat dramatic și redus pentru a-l face citibil pe un dispozitiv mobil.

Certând toate aceste informații pentru a face alegerea potrivită pentru site-ul dvs., nu uitați să vă întrebați câți dintre vizitatorii dvs. folosesc dispozitive mobile pentru a accesa site-ul. Verifică-ți analizele. Dacă procentul total de trafic mobil este sub cinci procente, atunci probabil că puteți aștepta să implementați designul mobil. Pentru acum. Dacă previziunile sunt corecte, atunci utilizarea mobilului va continua doar să pretindă din ce în ce mai mult trafic pe internet.

Pentru informații despre cum să vă optimizați paginile pentru viteza și SEO mobil, vă recomandăm să începeți cu aceste resurse:

• Lista de verificare All-In-One Mobile SEO & Design
• 7 Cele mai bune practici de navigare pentru mobil
• Ghid SEO: SEO mobil și optimizare UX
• Optimizarea imaginii: Lucrul numărul 1 pe care îl puteți face pentru a îmbunătăți UX mobil
• Ghidul pentru webmasteri pentru mobil de la Google Developers