versiunea

Într-un articol anterior, v-am spus despre noile tendințe de design și de ce este important ca acesta să fie modern și să fie apreciat de vizitatorii site-ului dvs. Pentru a deveni din ce în ce mai mult vizitatorul dvs., acesta trebuie să fie accesibil peste tot. De aceea, este important ca site-ul dvs. să aibă o versiune mobilă. În 2014, recent, v-am spus despre importanța versiunii mobile. Până în prezent, subiectul este încă printre cele mai fierbinți, mai ales la începerea unui proiect web, așa că am decis să revenim la el și să vă spunem mai detaliat care sunt opțiunile pentru ca site-ul dvs. să devină mobil, cu avantajele și dezavantajele acestora.

Versiunile mobile sunt importante pentru fiecare vizitator al site-ului dvs. Statistici interesante privind utilizarea dispozitivelor mobile pentru navigarea pe web, elaborate de StatCounter, arată că ponderea medie a navigării pe internet prin dispozitive mobile este de 33%, și există țări în care acest procent depășește 70%! În 2015, 48% dintre bulgari spun că folosesc un smartphone și 22% - o tabletă. * Poate că citiți în prezent acest articol pe un dispozitiv mobil! 🙂

Doriți ca site-ul dvs. să fie ușor accesibil de pe orice tip de dispozitiv? Iată ce trebuie să știți!

Există trei opțiuni pe care le puteți utiliza pentru a vă face site-ul mobil:

Proiectare receptivă

Cum arată informațiile de pe site-ul dvs. atunci când sunt încărcate în browser este determinat de codul HTML și CSS al site-ului. Cu un design receptiv, indiferent de dispozitivul pe care îl încarcă site-ul dvs., codul HTML din acesta rămâne același, iar codul CSS îi spune browserului cum aranjează conținutul site-ului să arate bine în funcție de rezoluție, adică. atunci când încărcați site-ul dvs. de pe un dispozitiv mobil, designul se va potrivi în funcție de dimensiunea ecranului. Adresa URL a site-ului este aceeași atunci când se încarcă de pe un dispozitiv mobil și când se încarcă versiunea desktop, ceea ce face ca link-ul (link către site) să fie ușor de partajat pe diferite dispozitive.

Proiectarea receptivă are o serie de avantaje. Cu acesta nu va trebui să reîncărcați conținutul, să redirecționați linkuri către versiunile mobile și desktop, să creați o versiune separată a site-ului dvs., să creați un subdomeniu separat care se încarcă numai pe dispozitivele mobile.

Dacă alegeți un design receptiv ca opțiune pentru o versiune mobilă a site-ului dvs., aveți grijă să nu faceți greșeli obișnuite, cum ar fi:

  • font inadecvat - atunci când redimensionați pagina pentru afișaje mai mici, rețineți că fontul ar trebui să rămână ușor de citit.
  • distanță insuficientă între linkurile de pe site - în versiunile mobile clicul se face prin atingere și linkurile care sunt prea apropiate unele de altele îngreunează lucrul cu site-ul.
  • butoane mici - este de dorit ca butoanele și linkurile text să fie ușor de selectat. Acest lucru va face ca timpul petrecut pe versiunea mobilă a site-ului să fie la fel de plăcut pentru vizitatorii dvs. ca și pentru versiunea desktop.
  • Elemente care nu se încarcă pe versiunea mobilă, cum ar fi video. Erorile nu sunt recomandate pe site, deși explicate cu „acest conținut nu este disponibil pentru versiunea mobilă”.

Notă: Dacă căutați informații suplimentare despre designul adaptiv și receptiv, veți găsi multe articole care le tratează ca sinonime. Dar există de fapt o diferență între ele:

  • Când design receptiv elementele site-ului se adaptează la orice lățime a browserului.
  • Când design adaptiv, modificările vizualizării apar după trecerea unui punct (pixel) în lățime, adică. modificările corespund unor intervale de lățimi diferite.

Difuzare dinamică a conținutului

Spre deosebire de designul receptiv, aici, atunci când încărcați site-ul de pe un dispozitiv mobil și desktop, sunt încărcate două versiuni diferite ale conținutului. Aplicația site recunoaște dispozitivul care trimite solicitarea de încărcare a site-ului și, în consecință, trimite coduri HTML și CSS diferite.

Servirea dinamică a conținutului este după cum urmează: Site-ul oferă conținut diferit, la aceeași adresă URL, în funcție de caracteristicile clientului care accesează site-ul. Acest lucru se realizează prin detectarea utilizatorului-agent al utilizatorului.

Site-ul web poate identifica un utilizator, mobil sau desktop, prin informațiile transmise în antetul HTTP „User-Agent”. Când un utilizator accesează un site web, browserul său web este prezentat serverului web cu antetul User-Agent, conținând informații precum numele browserului, versiunea, sistemul de operare al utilizatorului și multe altele.

De exemplu Un client care utilizează sistemul de operare Windows și browserul web Mozilla Firefox versiunea 44 va trimite următorul antet în cererea HTTP atunci când încearcă să încarce un site:

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv: 44.0) Gecko/20100101 Firefox/44.0

Pe baza acestor informații, site-ul web va furniza versiunea adecvată a conținutului.

Când un site servește conținut dinamic, este foarte recomandat să își informeze clienții prin antetul HTTP VTP: User-Agent. În acest fel, motoarele de căutare care indexează o pagină de pe site vor ști că aceasta nu este singura versiune a conținutului.

Acest lucru este deosebit de important pentru Google, deoarece roboții săi sunt prezentați ca diferite dispozitive mobile și browsere pentru a accesa și indexa fiecare versiune a site-ului separat. În acest fel, utilizatorii care utilizează diferite dispozitive și platforme vor putea găsi conținutul potrivit pentru ei.

Avantajul difuzării conținutului dinamic este că atât în ​​designul receptiv, cât și aici, URL-ul este păstrat (adică domeniul pentru versiunile mobile și desktop rămâne același). Nu este nevoie să redirecționați linkuri.

Dezavantajele acestei opțiuni constau în faptul că uneori există erori în recunoașterea dispozitivului utilizat.

Adrese URL individuale

Cu această opțiune, aveți două site-uri diferite care se încarcă pe versiunile desktop și mobile. Codul HTML și CSS pentru acestea este diferit. Adresa URL este, de asemenea, diferită. De exemplu, dacă utilizați domeniul superhosting.bg pentru versiunea desktop, atunci versiunea mobilă se află cel mai adesea pe subdomeniul m.superhosting.bg. Datorită agentului utilizator, serverul web înțelege specificul dispozitivului și încarcă versiunea corespunzătoare a site-ului. Diferă de difuzarea conținutului dinamic prin faptul că, dacă tastați superhosting.bg în browserul dvs. mobil, veți fi redirecționat către o nouă adresă - m.superhosting.bg. Redirecționările reprezintă momentul periculos din această opțiune pentru o versiune mobilă a site-ului.

Răspuns: când oricare dintre paginile de pe site-ul dvs. nu au o versiune mobilă, nu redirecționați către altă pagină. Este mai bine să îl lăsați fără redirecționare. Aceasta va încărca versiunea desktop.

Există diferite politici de redirecționare. Unele site-uri redirecționează utilizatorii de telefonie mobilă către pagina mobilă (redirecționare „unidirecțională”), iar altele redirecționează utilizatorii de desktop către versiunea desktop dacă accesează site-ul de la linkul versiunii mobile (redirecționare „cu două sensuri”).

Aici este important să indicați motoarelor de căutare că acestea sunt două variante diferite ale unui site. Acest lucru se face prin adăugarea etichetelor rel = "canonical" (în versiunea mobilă) și rel = "alternate" (în versiunea desktop) la pagini.

Avantajul acestei metode este că puteți publica conținut diferit pentru versiunile desktop și mobile (în cazul în care doriți ca un conținut să fie disponibil pentru o singură versiune). Dezavantajul este posibilele erori de redirecționare, precum și partajarea unui link din versiunea mobilă și încărcarea acestuia pe versiunea desktop, dacă se utilizează redirecționarea unidirecțională (atunci pe ecranul mare, codul (designul) pentru versiunea mobilă va fi fi încărcat).

Util:

Cum să vă faceți noul site mobil?

Dacă utilizați platforme CMS gata preparate precum WordPress, Joomla! sau Drupal, selectați o temă sau un șablon receptiv.

Am deja un site web, cum să aflu dacă există o versiune mobilă și cum arată?

Puteți verifica cu ușurință dacă site-ul dvs. este mobil conform standardelor Google. Acest lucru se face cu instrumentul Mobile-Friendly Test.

Cel mai simplu mod de a verifica dacă site-ul dvs. are o versiune mobilă și cum arată este să îl încărcați prin telefonul mobil. Pentru a vedea cum ar arăta pe alte dispozitive mobile, puteți utiliza Google Chrome (butonul din dreapta => Inspectați => Comutați modul dispozitiv).

Site-ul meu nu este mobil, cum să îl fac?

Dacă utilizați un sistem CMS, puteți lua în considerare opțiunile pentru trecerea la o versiune mobilă - schimbând tema sau pluginurile.

Dacă utilizați un site creat special pentru nevoile dvs., contactați dezvoltatorii care l-au creat.

* Date de pe consumerbarometer.com pentru 2014/2015 pe baza populației totale online și offline din Bulgaria.

Tsvetomira Trifonova (Color)

Color știe cât de greu pare să creeze un site web la început și cât de ușor se dovedește mai târziu. Superputerea culorii este că știe ce întrebări se pun pasionații de web începători și are un răspuns pentru fiecare dintre ele.