Statistici de utilizare a rezoluției ecranului. Cum să recuperezi traficul pierdut sau cum sunt utile statisticile privind rezoluțiile afișajului?

Poate că nici măcar nu știi că site-ul tău nu este afișat corect pe un ecran cu o rezoluție de 320 × 480 și toți cititorii cu un astfel de smartphone părăsesc blogul tău fără să fi studiat informațiile de pe acesta.

Să existe informații super interesante (pentru un blog), prețul cel mai mic pentru un produs (pentru un magazin online), un curs super util, dar dacă pagina este strâmbă, butoanele nu sunt vizibile, rândurile de text se suprapun, atunci cu o asemenea afișare a paginilor de vânzări tu să nu fii văzut.

Prin urmare, este necesar să se analizeze în statistici și să se identifice permisiunile din care pleacă vizitatorii și să se ia măsuri pentru remedierea erorilor.

Statistici privind rezoluția ecranului

Totul este clar acolo, introduceți adresa URL a site-ului:

Acum puteți alege între diferite opțiuni. Mai mult, ca rezoluții standard pentru smartphone (fila 3):

Și formați în mod arbitrar rezoluția în numere (a cincea filă):

Ți-am arătat cum să folosești instrumentul, acum improvizează pentru site-urile tale.

Cum să remediați erorile

La final, apare întrebarea: „De ce am nevoie de toate acestea, studiez browserele, permisiunile și așa mai departe?”

Răspunsul este simplu - pentru a crește traficul și vânzările.

În cazul meu, pierderile sunt minime, mai puțin de 2% dintre vizitatori au plecat într-un an, pentru că blogul meu era prost afișat pe dispozitivul lor, de pe care au intrat pe site. Acestea sunt numere mici, pot fi mai mari sau mai mici pentru tine, dar trebuie să înțelegi că din astfel de fluxuri, în total, poate rezulta un flux mare de pierderi.

Autorul site-ului poate crede că are un design prost, uzabilitate, nu știe să scrie corect articole, sau are un produs prost, un preț mare, dar de fapt, motivul poate fi altul. Dacă o cunoști, atunci problema poate fi rezolvată, amintește-ți asta.

Dacă site-ul dvs. are multe probleme de rezolvare, sunt șanse ca șablonul să nu fie receptiv sau să fie de proastă calitate și să fie înlocuit. Rețineți că traficul mobil va crește doar de-a lungul anilor, așa că trebuie să vă gândiți la un șablon adaptiv (sau la o versiune mobilă a site-ului) cât mai curând posibil.

Am vorbit în detaliu despre acest subiect aici:

Aș dori să aud despre rezultatele analizei site-ului dvs., care rezoluții de ecran au cele mai multe respingeri?

Pentru orice întrebări, scrieți în comentarii, vă voi ajuta cu siguranță.

Note

Un proces foarte multiplu. Dar totuși, toate etapele sale pot fi împărțite în două componente principale - funcționalitatea și carcasa externă. Sau, după cum se obișnuiește printre webmasteri, back-end și, respectiv, front-end. Oamenii care își comandă site-urile de la studiourile de dezvoltare web cred adesea în mod naiv că merită să se concentreze doar pe funcționalitate, iar aceasta va fi decizia corectă. Dar acest lucru este valabil în cazuri foarte, foarte rare, de obicei pentru proiectele de pornire în faza de testare beta. În rest, designul grafic și interfața cu utilizatorul trebuie pur și simplu să fie convenabile, dar nu uitați de viitorul site-ului, luând în considerare acesta.

Prima piatră de temelie cu care se confruntă un designer de interfețe, sau un designer, este lățimea aspectului site-ului. La urma urmei, necesită interfețe de randare. În mod pur intuitiv, apar două abordări - fie creați machete separate pentru fiecare rezoluție populară de ecran, fie creați o versiune a site-ului pentru toate afișajele. Și ambele opțiuni vor fi greșite, dar pe primul loc.

Lățimea site-ului web standard în pixeli pentru Runet

Înainte de dezvoltarea aspectului responsive, dezvoltarea unui site cu o lățime de o mie de pixeli era un fenomen masiv. Acest număr a fost ales dintr-un motiv simplu - astfel încât site-ul să se potrivească pe orice ecran. Și asta are propria sa logică, dar să presupunem că o persoană mai are cel puțin un monitor HD pe un desktop. În acest caz, aspectul dvs. va părea ca o bandă minusculă în mijlocul ecranului, unde totul este pietruit împreună și există un spațiu imens nefolosit pe laterale. Acum, să presupunem că o persoană v-a vizitat site-ul de pe o tabletă cu un ecran lat de 800 pixeli, cu caseta de selectare „Afișați versiunea completă a site-ului” selectată în setări. În acest caz, site-ul dvs. va fi afișat incorect, deoarece pur și simplu nu se va potrivi pe ecran.

Din aceste considerente, putem concluziona că lățimea fixă ​​pentru aspect nu este cu siguranță potrivită pentru noi și trebuie să căutăm o altă cale. Să analizăm ideea unui aspect separat pentru fiecare lățime a ecranului.

Aspecte pentru toate ocaziile

Dacă ați ales ca strategie să creați machete pentru toate dimensiunile de ecran de pe piață, atunci site-ul dvs. va deveni cel mai unic de pe întregul Internet. La urma urmei, este pur și simplu imposibil astăzi să acoperiți întreaga gamă de dispozitive, încercând să faceți setări precise pentru fiecare opțiune. Dar dacă te concentrezi pe cele mai populare rezoluții ale monitoarelor și ecranelor dispozitivelor, atunci ideea nu este rea. Singurul său dezavantaj sunt costurile financiare. La urma urmei, atunci când designerul de interfață, designerul și designerul de layout sunt forțați să facă aceeași muncă de 5 sau 6 ori, proiectul va costa disproporționat mai mult decât prețul stabilit inițial în buget.

Prin urmare, numai site-urile cu o singură pagină, al căror scop este să vândă un singur produs și să fie sigur că o faceți bine, se pot lăuda cu o abundență de versiuni pentru diferite ecrane. Ei bine, dacă nu aveți una dintre aceste pagini de destinație, ci un site cu mai multe pagini, atunci merită să vă gândiți mai departe.

Cele mai populare dimensiuni ale site-urilor web

Compartimentul dintre cele două extreme este reprezentarea aspectului pentru trei sau patru. Printre acestea, unul trebuie să fie neapărat aspectul pentru dispozitivele mobile. Restul ar trebui adaptat pentru ecrane desktop mici, medii și mari. Cum alegi lățimea site-ului? Mai jos sunt statisticile serviciului HotLog pentru luna mai 2017, care ne arată distribuția popularității diferitelor rezoluții de ecran ale dispozitivelor, precum și dinamica modificărilor acestui indicator.

Din tabel puteți afla cum să determinați dimensiunea site-ului de utilizat. În plus, putem concluziona că cel mai comun format astăzi este un ecran de 1366 x 768 pixeli. Astfel de ecrane sunt instalate în laptop-uri de buget, așa că popularitatea lor este firească. Următorul cel mai popular este monitorul Full HD, care este standardul de aur pentru videoclipuri, jocuri și, prin urmare, aspectul site-urilor web. Mai departe în tabel vedem rezoluția dispozitivelor mobile 360 ​​pe 640 pixeli, precum și diverse opțiuni pentru ecranele desktop și mobile după aceasta.

Proiectăm layout-ul

Deci, după analiza statisticilor, putem concluziona că lățimea optimă a site-ului are 4 variații:

1. Versiune pentru laptopuri cu o latime de 1366 pixeli.
2. Versiune Full HD.
3. Aspect cu o lățime de 800 de pixeli pentru afișare pe monitoare desktop mici.
4. Versiunea mobilă a site-ului are o lățime de 360 ​​de pixeli.

Să presupunem că am decis ce dimensiune să folosim pentru sursa generată pentru site. Dar un astfel de proiect va fi în continuare costisitor. Deci, să ne uităm la câteva opțiuni, de data aceasta fără a folosi o lățime fixă.

Făcând aspectul flexibil

Există o abordare alternativă, când merită ajustată doar la dimensiunea minimă a ecranului, iar dimensiunile site-ului în sine vor fi stabilite în procente. În același timp, precum meniurile, butoanele și logo-ul pot fi setate în valori absolute, concentrându-se pe dimensiunea minimă a lățimii ecranului în pixeli. Blocurile de conținut, pe de altă parte, se vor întinde în funcție de procentul specificat din lățimea zonei ecranului. Această abordare vă permite să nu mai percepeți dimensiunea site-urilor ca o limitare pentru designer și să vă jucați talentat cu această nuanță.

Ce este Raportul de Aur și cum o aplicați la aspectul paginii dvs. web?

În Renaștere, mulți arhitecți și artiști au încercat să ofere creațiilor lor forma și proporția perfectă. Pentru răspunsuri la întrebări despre valorile unei astfel de proporții, au apelat la regina tuturor științelor - matematica.

Încă din antichitate s-a inventat proporția, pe care ochiul nostru o percepe ca fiind cea mai naturală și mai grațioasă, deoarece este omniprezentă în natură. Descoperitorul formulei pentru un astfel de raport a fost un arhitect grec antic talentat pe nume Phidias. El a calculat că, dacă cea mai mare parte a proporției este legată de cel mai mic, deoarece întregul este legat de cel mai mare, atunci acea proporție va arăta cel mai bine. Dar asta dacă doriți să împărțiți obiectul asimetric. Această proporție a fost numită mai târziu proporția de aur, care încă nu își supraestimează importanța pentru istoria mondială a culturii.

Înapoi la design web

Este foarte simplu - folosind proporția de aur, poți crea pagini cât mai plăcute ochiului uman. După ce am calculat conform definiției formulei raportului de aur, obținem un număr irațional 1,6180339887 ..., dar pentru comoditate, puteți folosi valoarea rotunjită de 1,62. Aceasta va însemna că blocurile paginii noastre ar trebui să fie 62% și 38% din totalitate, indiferent de dimensiunea sursei generate pentru site-ul pe care îl utilizați. Puteți vedea un exemplu în diagrama următoare:

Utilizați noile tehnologii

Tehnologiile moderne pentru aspectul site-ului web fac posibilă transmiterea ideii de designer și designer cât mai precis posibil, așa că acum vă puteți permite să implementați idei mai îndrăznețe decât în ​​zorii tehnologiilor internetului. Nu mai trebuie să-ți strângi prea mult mintea peste dimensiunea site-ului. Odată cu apariția unor astfel de lucruri, cum ar fi aspectul bloc responsive, încărcarea dinamică a conținutului și a fonturilor, dezvoltarea site-ului web a devenit mult mai plăcută. La urma urmei, astfel de tehnologii au mai puține restricții, deși încă există. Dar, după cum știți, nu ar exista artă fără restricții. Vă invităm să utilizați o abordare de design cu adevărat creativă - raportul de aur. Cu acesta, puteți completa eficient și frumos orice dimensiune de site specificați în șabloanele dvs.

Cum să măriți spațiul de lucru al site-ului

Sunt șanse să nu aveți suficient spațiu pentru a încadra toate elementele interfeței într-un aspect mic. În acest caz, va trebui să începi să gândești creativ sau chiar mai creativ decât ai făcut-o înainte.

Puteți elibera spațiu pe site cât mai mult posibil ascunzând navigarea în meniul pop-up. Această abordare este logic să fie utilizată nu numai pe dispozitive mobile, ci și pe desktop-uri. La urma urmei, utilizatorul nu trebuie să se uite tot timpul la ce categorii sunt pe site-ul tău - a venit pentru conținut. Și dorințele utilizatorului trebuie respectate.

Un exemplu de modalitate bună de a ascunde un meniu este următorul aspect (foto de mai jos).

În colțul de sus al zonei roșii, puteți vedea o cruce, făcând clic pe care va ascunde meniul într-o pictogramă mică, lăsând utilizatorul singur cu conținutul site-ului.

Cu toate acestea, acest lucru este opțional, puteți părăsi navigarea, care va fi mereu la vedere. Dar puteți face din acesta un element de design frumos și nu doar o listă de link-uri populare de pe site. Utilizați pictograme intuitive în plus față de, sau chiar în loc de, link-urile text. De asemenea, va permite site-ului dvs. să folosească mai eficient spațiul ecranului de pe dispozitivul utilizatorului.

Cel mai bun site - responsive

Dacă nu știi ce aspect să alegi pentru site-ul tău, atunci totul este simplu pentru tine. Pentru a economisi costurile de dezvoltare și pentru a nu pierde publicul din cauza unui aspect slab pentru anumite dispozitive, utilizați un design receptiv.

Un design receptiv este un design care arată la fel de bine pe diferite dispozitive. Această abordare va permite site-ului dvs. să fie ușor de înțeles și convenabil chiar și pe un laptop, chiar și pe o tabletă sau chiar pe un smartphone. Acest efect este obținut prin modificarea automată a lățimii zonei de lucru a ecranului. Folosind foi de stil pentru site-uri web receptive, luați cea mai bună decizie posibilă.

Cum diferă designul responsive de a avea versiuni diferite ale unui site web?

Designul responsive diferă de versiunea mobilă a site-ului prin aceea că, în acest ultim caz, utilizatorul primește un cod html care diferă de cel desktop. Acesta este un dezavantaj în ceea ce privește optimizarea performanței serverului, precum și optimizarea motorului de căutare. În plus, devine mai dificil să se calculeze statistici pentru diferite versiuni ale site-ului. Abordarea adaptativă este lipsită de astfel de dezavantaje.

Adaptabilitatea pentru diferite dispozitive se realizează printr-un layout cu o setare procentuală a lățimii, fie prin transferarea blocurilor în spațiul disponibil (într-un plan vertical pe un smartphone în loc de unul orizontal pe un desktop), fie prin crearea de layout-uri individuale pentru diferite dispozitive. ecrane.

Puteți afla mai multe despre proiectarea și dezvoltarea responsive din tutoriale.

Astăzi pe piața investițiilor există un număr mare de produse din diverse domenii. Ne-am gândit că merită să vă atragem atenția asupra pieței în creștere rapidă a dispozitivelor mobile. Nu, nu vor fi recenzii aici, vrem să luăm în considerare această piață prin prisma caracteristicilor ecranului. Telefonul mobil, tableta, laptopul sunt deja ferm înrădăcinate în viața noastră, de fapt, petrecem mai mult timp cu ei decât cu oamenii vii din jurul nostru.

Ce spun statisticile

Am studiat de multă vreme rapoartele statistice ale diferitelor valori de pe site-urile partenere. Ne-am uitat la caracteristicile tehnice ale celor mai populare dispozitive mobile. Situația este de așa natură încât telefoanele mobile mari au început să domine piața printre toate dispozitivele mobile, a căror diagonală începe de la 5,5 "și se termină la 6,2". Să adăugăm aici dorința Apple de a lansa pe piață un produs de 6,5" până la sfârșitul anului. Iar creierul nostru începe să digere nevoia unei astfel de tehnologii cu greu. Nu mai poți pune asta în buzunar și nu orice geantă. se va potrivi. Cu toate acestea, dacă te uiți la modalitățile de utilizare a telefonului unui smartphone modern, atunci devine clar de ce. Acesta este un fapt ciudat: telefonul pare să fi fost inventat pentru comunicarea vocală și este folosit din ce în ce mai des. ca dispozitiv pentru navigarea pe Internet.Cu cuvinte mai simple, tendința modernă este un telefon mobil bun de înaltă calitate, cu un ecran excelent, o cameră și internet. Acesta este un „recoltator” convenabil, trebuie doar să-l încărcați o dată pe zi.

Acum despre permisiuni. Cele mai populare rezoluții au rămas 1366 * 738 și 1920 * 1080, Acestea nu sunt rezoluții mobile. Dar cea mai populară rezoluție mobilă este 360 ​​* 640. De fapt, acestea sunt primele trei.

Tabelul complet cu informații despre piață este următorul:

Concluzie

Piața dispozitivelor mobile nu stă pe loc. Astăzi trebuie să căutăm opțiuni pentru a investi pe această piață.

Pe baza materialelor de pe site-ul Deviceatlas

Știind ce rezoluții ale ecranului smartphone-ului sunt cele mai populare astăzi, vă va ajuta să vă optimizați site-ul web pentru diferențele dintre diferitele dispozitive. DeviceAtlas a colectat cele mai recente statistici privind utilizarea dispozitivului legate de această problemă.

Noi rezoluții de ecran pe piață

În ultimii ani, toate dispozitivele emblematice cu sistem de operare Android au avut rezoluții Full HD (1080x1920) și QHD (1440x2560). În 2017 au apărut pe piață mai multe dispozitive cu rezoluții nestandard – în principal datorită noii tendințe pentru ecranele edge-to-edge (lățimea completă a dispozitivului). Inclusiv:

• Samsung Galaxy Note 8: 1440 x 2960 pixeli
• Samsung Galaxy S8: 1440 x 2960 pixeli
• LG V30: 1440 x 2880 pixeli
• LG G6: 1440 x 2880 pixeli
• Sony Xperia XZ Premium: 3840 x 2160 pixeli
• iPhone X: 1125 x 2436 pixeli (numai anunțat)

Desigur, aceste rezoluții non-standard nu sunt încă incluse în statisticile noastre. Dar, într-un fel sau altul, ne putem aștepta ca standardul S8 să devină unul dintre cele mai populare de pe listă datorită popularității uriașe a familiei Galaxy S: de exemplu, modelul anterior, S7, a devenit cel mai comun Android. dispozitiv din lume.

Cea mai utilizată rezoluție de ecran a unui smartphone este 720x1280

Conform statisticilor de trafic pentru iulie-august 2017, cea mai populară rezoluție a ecranului pe smartphone-uri este 720 × 1280 pixeli, care este folosită pe majoritatea dispozitivelor de gamă medie și buget. Este cea mai utilizată rezoluție în 11 țări din 20 analizate, inclusiv India, Italia și Spania. Este urmat îndeaproape de raportul 750x1334, care este folosit în modelele de iPhone populare în SUA, Marea Britanie și Australia. În Franța și Germania, la rândul lor, cea mai frecventă rezoluție a devenit Full HD în smartphone-urile din clasele medii și bugetare.

Tabelul prezintă cele mai comune rezoluții ale ecranului smartphone-urilor din toate cele 20 de țări chestionate.

Graficele de mai jos arată ponderea traficului care a scăzut pe smartphone-urile cu o rezoluție a ecranului de 720x1280 în iulie-august 2017 în țările participante la studiu.

Full HD cucerește piața, distribuția QHD încetinește

De asemenea, am analizat cât de repede a crescut utilizarea mai multor rezoluții populare de-a lungul anului - de la Q4 2016 până la Q3 2017. În ciuda creșterii puternice din trecut, răspândirea rezoluției QHD (1440 × 2560) a încetinit acum.

În Franța, India, Nigeria și SUA, dispozitivele QHD au pierdut chiar cota de piață (-4% în această din urmă țară). În ultimele 4 trimestre, dispozitivele FHD (1080 × 1920) au crescut mai rapid, adăugând 5-10% în Brazilia, Franța, Japonia, Polonia, Spania și Statele Unite.

Cota de trafic a dispozitivelor Full HD (1080x1920) pentru ultimele 4 trimestre:

Procentajul de trafic al dispozitivelor QHD (1440x2560) pentru ultimele 4 trimestre:

În primul rând, puțin despre teorie. Rezoluția ecranului variază în funcție de dispozitivul pe care îl utilizați. Unii utilizatori cred în mod eronat că dimensiunea ecranului și rezoluția ecranului monitorului sunt aceleași. De exemplu, dimensiunea ecranului și rezoluția maximă a acestuia este de 1600 x 1200, iar utilizatorul poate seta rezoluția, de exemplu, 800 x 600. Desigur, imaginea de pe ecran va fi formată conform principiului care a fost stabilit de utilizatorul însuși. Ca rezultat, se dovedește că dimensiunea ecranului și rezoluția ecranului sunt concepte ușor diferite. Pentru a obține imaginea perfectă, trebuie să setați rezoluția maximă pe care o acceptă monitorul, iar apoi imaginea va fi de cea mai bună calitate.

Ce rezoluții de ecran există?

Astăzi există un număr mare de monitoare și același număr de rezoluții. Trebuie remarcat faptul că toate aceste dispozitive au rapoarte de aspect diferite, de exemplu: 4: 3, 5: 4, 16: 9, 16:10 și multe altele. Dispozitivele cu ecran lat cu un raport de aspect de 21: 9 sunt la mare căutare. Pur și simplu nu este rezonabil să folosiți astfel de dispozitive astăzi, deoarece acestea sunt cele mai potrivite pentru vizionarea de filme filmate conform standardului CinemaScope. Acest lucru este direct legat de faptul că, dacă setați o rezoluție diferită pe un astfel de monitor, de exemplu, FullHD (1920 x 1080p), atunci barele negre largi vor rămâne la marginile monitorului.

În ceea ce privește rezoluția monitoarelor în sine, acestea sunt împărțite între ele, după cum ați putea ghici, după raportul de aspect. Se remarcă următoarele: Pentru raportul de aspect 4: 3 -1024x768, 1280x1024, 1600x1200, 1920x1440, 2048x1536. Pentru raport de aspect 16:9: 1366x768, 1600x900, 1920x1080, 2048x1152, 2560x1440, 3840x2160. Pentru raport de aspect 16:10: 1280x800, 1440x900, 1600x1024, 1680x1050, 1920x1200, 2560x1600, 3840x2400. Cele mai populare rezoluții astăzi sunt 1920x1080, 1280x1024, 1366x768.

Este de remarcat faptul că, cu cât rezoluția ecranului este mai mare, cu atât imaginea în sine va fi mai bună, dar în același timp poate fi foarte mică și unii proprietari de astfel de dispozitive vor trebui să o schimbe cu una mai mică pentru a vedea cel puțin ceva pe monitor. Ca rezultat, desigur, toată lumea poate privi direct înainte de a cumpăra un dispozitiv într-un magazin, ce imagine va fi pe el și dacă i se potrivește.