Statistika korištenja rezolucije ekrana. Kako vratiti izgubljeni promet ili kako su statistike o rezolucijama ekrana korisne?

Možda ne znate ni činjenicu da se vaša stranica ne prikazuje ispravno na ekranu rezolucije 320 × 480 i svi čitaoci s takvim pametnim telefonom napuštaju vaš blog a da nisu proučili informacije na njemu.

Neka budu super zanimljive informacije (za blog), najniža cijena za proizvod (za internet prodavnicu), super koristan kurs, ali ako je stranica kriva, dugmad se ne vide, redovi teksta se preklapaju, onda sa ovakvim prikazom prodajnih stranica nećete biti viđeni.

Stoga je potrebno u statistici analizirati i identificirati dozvole iz kojih posjetitelji odlaze i poduzeti mjere za ispravljanje grešaka.

Statistika rezolucije ekrana

Tamo je sve jasno, unesite URL stranice:

Sada možete birati između različitih opcija. Štaviše, kao standardne rezolucije pametnog telefona (kartica 3):

I proizvoljno birajte rezoluciju u brojevima (5. tab):

Pokazao sam vam kako da koristite alat, a sada improvizujte za svoje stranice.

Kako popraviti greške

Na kraju se postavlja pitanje: "Zašto mi sve ovo treba, proučavanje pretraživača, dozvola i tako dalje?"

Odgovor je jednostavan - povećati promet i prodaju.

U mom slučaju gubici su minimalni, manje od 2% posetilaca je otišlo za godinu dana, jer je moj blog bio loše prikazan na njihovom uređaju sa kojeg su ušli na sajt. To su mali brojevi, za vas mogu biti veći ili manji, ali morate shvatiti da iz takvih tokova, ukupno, može proizaći veliki tok gubitaka.

Autor sajta može misliti da ima loš dizajn, upotrebljivost, da ne zna pravilno da piše članke ili da ima loš proizvod, visoku cenu, ali u stvari razlog može biti drugačiji. Ako je poznajete, onda se problem može riješiti, zapamtite ovo.

Ako vaša web lokacija ima puno problema s rješavanjem, velika je vjerojatnost da predložak ne reagira ili je lošeg kvaliteta i da ga treba zamijeniti. Imajte na umu da će se mobilni promet samo povećavati s godinama, tako da morate razmišljati o adaptivnom predlošku (ili mobilnoj verziji stranice) što je prije moguće.

Ovde sam detaljno pričao o ovoj temi:

Želeo bih da čujem o rezultatima vaše analize sajta, koje rezolucije ekrana imaju najviše odbijanja?

Za sva pitanja pišite u komentarima, svakako ću pomoći.

Bilješke

Veoma višestruki proces. Ali ipak, sve njegove faze mogu se podijeliti na dvije glavne komponente - funkcionalnost i vanjsku ljusku. Ili, kao što je uobičajeno među webmasterima, back-end i front-end, respektivno. Ljudi koji svoje web stranice naručuju od studija za web razvoj često naivno vjeruju da se vrijedi fokusirati samo na funkcionalnost i to će biti prava odluka. Ali to je istina u vrlo, vrlo rijetkim slučajevima, obično za start-up projekte u fazi beta testiranja. Što se ostalog tiče, grafički dizajn i korisničko sučelje jednostavno moraju biti zgodni, ali ne zaboravite na budućnost stranice s obzirom na to.

Prvi kamen temeljac sa kojim se suočava dizajner interfejsa, ili dizajner, je širina izgleda sajta. Na kraju krajeva, to zahtijeva interfejse za renderovanje. Čisto intuitivno, pojavljuju se dva pristupa - ili napravite odvojene izglede za svaku popularnu rezoluciju ekrana ili napravite jednu verziju stranice za sve ekrane. I obje opcije će biti pogrešne, ali prije svega.

Standardna širina web stranice u pikselima za Runet

Prije razvoja responsive layouta, razvoj web stranice širine hiljadu piksela bio je ogroman fenomen. Ovaj broj je odabran iz jednog jednostavnog razloga - tako da stranica stane na bilo koji ekran. I ovo ima svoju logiku, ali pretpostavimo da osoba još uvijek ima barem HD monitor na desktopu. U ovom slučaju, vaš raspored će izgledati kao sićušna traka na sredini ekrana, gde je sve popločano zajedno, a sa strane je ogroman neiskorišćen prostor. Sada, pretpostavimo da je osoba posjetila vašu web stranicu sa tableta sa širokim ekranom od 800px, sa potvrdnim okvirom "Prikaži punu verziju web stranice" odabranim u postavkama. U tom slučaju, vaša stranica će se također prikazati pogrešno, jer jednostavno neće stati na ekran.

Iz ovih razmatranja možemo zaključiti da nam fiksna širina za raspored definitivno nije prikladna i da moramo potražiti drugi način. Hajde da analiziramo ideju zasebnog izgleda za svaku širinu ekrana.

Rasporedi za sve prilike

Ako ste kao strategiju odabrali kreiranje izgleda za sve veličine ekrana na tržištu, tada će vaša stranica postati najjedinstvenija na cijelom Internetu. Uostalom, danas je jednostavno nemoguće pokriti čitav niz uređaja, pokušavajući napraviti precizna podešavanja za svaku opciju. Ali ako se fokusirate na najpopularnije rezolucije monitora i ekrana uređaja, onda ideja nije loša. Jedini nedostatak su finansijski troškovi. Na kraju krajeva, kada su dizajner interfejsa, dizajner i dizajner izgleda primorani da rade isti posao 5 ili 6 puta, projekat će koštati neproporcionalno više od cene koja je prvobitno određena u budžetu.

Stoga se samo stranice na jednoj stranici, čija je svrha prodati jedan proizvod i biti sigurni da to rade dobro, mogu pohvaliti obiljem verzija za različite ekrane. Pa, ako nemate jednu od ovih odredišnih stranica, već web-lokaciju sa više stranica, onda je vrijedno razmisliti dalje.

Najpopularnije veličine web stranica

Kompromis između ova dva ekstrema je prikazivanje izgleda za tri ili četiri. Među njima, jedan mora nužno biti izgled za mobilne uređaje. Ostalo bi trebalo prilagoditi malim, srednjim i velikim desktop ekranima. Kako odabrati širinu stranice? U nastavku se nalazi statistika HotLog servisa za maj 2017. koja nam pokazuje distribuciju popularnosti različitih rezolucija ekrana uređaja, kao i dinamiku promjena ovog indikatora.

Iz tabele možete saznati kako odrediti veličinu stranice za korištenje. Osim toga, možemo zaključiti da je danas najčešći format ekran od 1366 x 768 piksela. Takvi su ekrani ugrađeni u jeftine laptope, pa je njihova popularnost prirodna. Sljedeći najpopularniji je Full HD monitor, koji je zlatni standard za video zapise, igre, a samim tim i izgled web stranica. Dalje u tabeli vidimo rezoluciju mobilnih uređaja 360 x 640 piksela, kao i razne opcije za desktop i mobilne ekrane nakon nje.

Dizajniramo raspored

Dakle, nakon analize statistike, možemo zaključiti da optimalna širina stranice ima 4 varijacije:

1. Verzija za laptop sa širinom od 1366 piksela.
2. Full HD verzija.
3. Raspored širine 800 piksela za prikaz na malim desktop monitorima.
4. Mobilna verzija stranice je široka 360 piksela.

Recimo da smo odlučili koju veličinu koristiti za generirani izvor za web lokaciju. Ali takav projekat će i dalje biti skup. Pogledajmo još neke opcije, ovaj put bez korištenja fiksne širine.

Učiniti izgled fleksibilnim

Postoji alternativni pristup, kada se isplati prilagoditi samo minimalnoj veličini ekrana, a same veličine stranice će biti postavljene u procentima. U isto vrijeme, kao što su meniji, dugmad i logotip mogu se postaviti u apsolutnim vrijednostima, fokusirajući se na minimalnu veličinu širine ekrana u pikselima. Blokovi sadržaja, s druge strane, će se protezati prema navedenom procentu širine površine ekrana. Ovaj pristup vam omogućava da prestanete da percipirate veličinu sajtova kao ograničenje za dizajnera i da se talentovano igrate sa ovom nijansom.

Šta je zlatni omjer i kako ga primijeniti na izgled vaše web stranice?

Još u doba renesanse, mnogi arhitekti i umjetnici pokušavali su svojim kreacijama dati savršen oblik i proporcije. Za odgovore na pitanja o vrijednostima takve proporcije, obratili su se kraljici svih nauka - matematici.

Od antike je izmišljena proporcija koju naše oko percipira kao najprirodniju i najgracioznije, jer je u prirodi sveprisutna. Otkrivač formule za takav omjer bio je talentirani starogrčki arhitekt po imenu Phidias. Izračunao je da ako je veći dio omjera povezan s manjim, kao što je cjelina povezana s većim, onda će ta proporcija izgledati najbolje. Ali ovo je ako želite asimetrično podijeliti objekt. Taj je omjer kasnije nazvan zlatnim omjerom, što još uvijek ne precjenjuje njegovu važnost za svjetsku istoriju kulture.

Nazad na web dizajn

Vrlo je jednostavno - pomoću zlatnog omjera možete dizajnirati stranice koje su što ugodnije ljudskom oku. Izračunavši prema definiciji formule zlatnog omjera, dobijamo iracionalan broj 1,6180339887 ..., ali za praktičnost možete koristiti zaokruženu vrijednost od 1,62. To će značiti da bi blokovi naše stranice trebali biti 62% i 38% cijele, bez obzira na veličinu generiranog izvora za stranicu koju koristite. Primjer možete vidjeti na sljedećem dijagramu:

Koristite nove tehnologije

Moderne tehnologije za izgled web stranice omogućavaju prenošenje ideje dizajnera i dizajnera što je preciznije moguće, tako da si sada možete priuštiti implementaciju odvažnijih ideja nego u zoru internetskih tehnologija. Više ne morate previše razmišljati o veličini stranice. Sa pojavom stvari kao što su blok responzivni izgled, dinamičko učitavanje sadržaja i fontova, razvoj web stranice postao je mnogo ugodniji. Uostalom, takve tehnologije imaju manje ograničenja, iako još uvijek postoje. Ali, kao što znate, ne bi bilo umjetnosti bez ograničenja. Pozivamo vas da koristite jedan istinski kreativan pristup dizajnu - zlatni omjer. Pomoću njega možete efikasno i lijepo ispuniti bilo koju veličinu web stranice koju odredite u svojim predlošcima.

Kako povećati radni prostor stranice

Šanse su da nećete imati dovoljno prostora da stavite sve elemente interfejsa u mali raspored. U ovom slučaju, morat ćete početi razmišljati kreativno ili čak kreativnije nego što ste to činili prije.

Možete osloboditi prostor na stranici što je više moguće skrivanjem navigacije u iskačućem meniju. Ovaj pristup je logično koristiti ne samo na mobilnim uređajima, već i na desktopima. Na kraju krajeva, korisnik ne mora stalno da gleda koje su kategorije na vašem sajtu – došao je po sadržaj. I želje korisnika se moraju poštovati.

Primjer dobrog načina za sakrivanje menija je sljedeći izgled (fotografija ispod).

U gornjem uglu crvenog područja možete vidjeti križić, klikom na koji će se meni sakriti u malu ikonu, ostavljajući korisnika nasamo sa sadržajem web stranice.

Međutim, ovo je opciono, možete ostaviti navigaciju koja će vam uvijek biti na vidiku. Ali možete ga učiniti lijepim elementom dizajna, a ne samo listom popularnih linkova na stranici. Koristite intuitivne ikone kao dodatak tekstualnim vezama ili čak umjesto njih. Takođe će omogućiti vašoj web stranici da efikasnije koristi prostor na ekranu na uređaju korisnika.

Najbolja stranica - responzivna

Ako ne znate koji izgled odabrati za svoju stranicu, onda je sve jednostavno za vas. Da biste uštedjeli na troškovima razvoja i još uvijek ne izgubili svoju publiku zbog lošeg izgleda za neki uređaj, koristite responsive dizajn.

Responzivni dizajn je dizajn koji izgleda podjednako dobro na različitim uređajima. Ovaj pristup će omogućiti da vaša stranica bude razumljiva i praktična čak i na laptopu, čak i na tabletu ili čak na pametnom telefonu. Ovaj efekat se postiže automatskim promjenom širine radne površine ekrana. Koristeći responzivne tablice stilova web stranice, donosite najbolju moguću odluku.

Kako se responzivni dizajn razlikuje od različitih verzija web stranice?

Responzivni dizajn razlikuje se od mobilne verzije stranice po tome što u potonjem slučaju korisnik dobija html kod koji se razlikuje od desktopa. Ovo je nedostatak u smislu optimizacije performansi servera, kao i optimizacije pretraživača. Osim toga, postaje teže izračunati statistiku za različite verzije stranice. Adaptivni pristup je oslobođen takvih nedostataka.

Prilagodljivost za različite uređaje postiže se rasporedom sa postotnim podešavanjem širine, bilo prijenosom blokova na raspoloživi prostor (u vertikalnoj ravni na pametnom telefonu umjesto u horizontalnoj na desktopu), bilo kreiranjem pojedinačnih izgleda za različite ekrani.

Možete saznati više o responzivnom dizajnu i razvoju iz tutorijala.

Danas na investicionom tržištu postoji ogroman broj proizvoda iz različitih oblasti. Smatrali smo da je vrijedno skrenuti vašu pažnju na brzo rastuće tržište mobilnih uređaja. Ne, ovdje neće biti recenzija, želimo ovo tržište razmotriti kroz prizmu karakteristika ekrana. Mobilni telefon, tablet, laptop su već čvrsto ukorijenjeni u naš život, zapravo, provodimo više vremena sa njima nego sa živim ljudima oko nas.

Šta kaže statistika

Dugo smo proučavali statističke izvještaje različitih metrika sa partnerskih stranica. Pogledali smo tehničke karakteristike najpopularnijih mobilnih uređaja. Situacija je takva da su veliki mobilni telefoni počeli da dominiraju tržištem među svim mobilnim uređajima čija dijagonala počinje od 5,5 "a završava se na 6,2". Dodajmo ovdje Appleovu želju da do kraja godine na tržište izbaci proizvod od 6,5 inča. I naš mozak počinje s mukom da probavlja potrebu za takvom tehnologijom. Ovo više ne možete staviti u džep, a ne svaku torbu Međutim, ako pogledate načine korišćenja telefona modernog pametnog telefona.onda postaje jasno zašto.Ovo je čudna činjenica: čini se da je telefon izmišljen za glasovnu komunikaciju i koristi se sve češće kao uredjaj za surfovanje internetom. Jednostavnije rečeno, moderan trend je dobar kvalitetan mobilni telefon sa odličnim ekranom, kamerom i internetom. Ovo je zgodan "harvester", samo ga treba jednom napuniti dan.

Sada o dozvolama. Najpopularnije rezolucije su ostale 1366 * 738 i 1920 * 1080, ovo nisu mobilne rezolucije. Ali najpopularnija mobilna rezolucija je 360 ​​* 640. Zapravo, ovo su prva tri.

Kompletna tabela sa tržišnim informacijama je kako slijedi:

Zaključak

Tržište mobilnih uređaja ne miruje. Danas moramo tražiti opcije za ulaganje na ovom tržištu.

Na osnovu materijala sa web stranice Deviceatlas

Znajući koje su rezolucije ekrana pametnih telefona danas najpopularnije pomoći će vam da optimizirate svoju web stranicu za razlike između različitih uređaja. DeviceAtlas je prikupio najnovije statistike o korištenju uređaja u vezi s ovim problemom.

Nove rezolucije ekrana na tržištu

Poslednjih godina, svi vodeći Android OS uređaji imali su Full HD (1080x1920) i QHD (1440x2560) rezolucije. U 2017. godini na tržištu se pojavilo nekoliko uređaja sa nestandardnim rezolucijama – uglavnom zbog novog trenda za ekrane od ruba do ivice (puna širina uređaja). Uključujući:

• Samsung Galaxy Note 8: 1440 x 2960 piksela
• Samsung Galaxy S8: 1440 x 2960 piksela
• LG V30: 1440 x 2880 piksela
• LG G6: 1440 x 2880 piksela
• Sony Xperia XZ Premium: 3840 x 2160 piksela
• iPhone X: 1125 x 2436 piksela (samo najavljeno)

Naravno, ove nestandardne rezolucije još nisu uključene u našu statistiku. Ali, na ovaj ili onaj način, možemo očekivati ​​da S8 standard može postati jedan od najpopularnijih na listi zbog ogromne popularnosti Galaxy S porodice: na primjer, prethodni vodeći model, S7, postao je najčešći Android uređaja u svijetu.

Najčešća rezolucija ekrana pametnog telefona je 720x1280

Prema statistici saobraćaja za jul-avgust 2017., najpopularnija rezolucija ekrana na pametnim telefonima je 720 × 1280 piksela, što se koristi na većini uređaja srednjeg i nižeg ranga. To je najčešće korištena rezolucija u 11 zemalja od 20 analiziranih, uključujući Indiju, Italiju i Španiju. Usko prati omjer 750x1334, koji se koristi u modelima iPhonea popularnim u SAD-u, Velikoj Britaniji i Australiji. U Francuskoj i Njemačkoj, pak, najčešća rezolucija je postala Full HD u pametnim telefonima srednje i budžetske klase.

Tabela prikazuje najčešće rezolucije ekrana pametnih telefona u svih 20 zemalja koje su ispitane.

Donji grafikoni pokazuju udio prometa koji je pao na pametne telefone sa rezolucijom ekrana 720x1280 u periodu jul-avgust 2017. u zemljama učesnicama studije.

Full HD osvaja tržište, usvajanje QHD-a se usporava

Također smo analizirali koliko je brzo rasla upotreba nekoliko popularnih rezolucija tokom godine - od Q4 2016. do Q3 2017. Uprkos snažnom rastu u prošlosti, širenje QHD (1440 × 2560) rezolucije sada je usporilo.

U Francuskoj, Indiji, Nigeriji i SAD-u QHD uređaji su čak izgubili tržišni udio (-4% u ovoj drugoj zemlji). U posljednja 4 kvartala, FHD (1080x1920) uređaji su rasli brže, dodajući 5-10% u Brazilu, Francuskoj, Japanu, Poljskoj, Španiji i Sjedinjenim Državama.

Udio prometa Full HD uređaja (1080x1920) za posljednja 4 kvartala:

Udio prometa QHD uređaja (1440x2560) za posljednja 4 kvartala:

Prvo, malo o teoriji. Rezolucija ekrana varira u zavisnosti od uređaja koji koristite. Neki korisnici pogrešno misle da su veličina ekrana i rezolucija ekrana iste. Na primjer, veličina ekrana i njegova maksimalna rezolucija je 1600 x 1200, a korisnik može podesiti rezoluciju, na primjer, 800 x 600. Naravno, slika na ekranu će se formirati po principu koji je postavio korisnik. sebe. Kao rezultat toga, ispostavilo se da su veličina ekrana i rezolucija ekrana malo drugačiji koncepti. Da biste postigli savršenu sliku, potrebno je da podesite maksimalnu rezoluciju koju vaš monitor podržava i tada će slika biti najvišeg kvaliteta.

Koje rezolucije ekrana postoje?

Danas postoji ogroman broj monitora i isti broj rezolucija. Treba napomenuti da svi ovi uređaji imaju različite omjere stranica, na primjer: 4: 3, 5: 4, 16: 9, 16:10 i mnoge druge. Široki ekrani sa omjerom 21:9 su veoma traženi. Takve uređaje danas jednostavno nije razumno koristiti, jer su najprikladniji za gledanje filmova snimljenih po standardu CinemaScope. To je direktno povezano s činjenicom da ako na takvom monitoru postavite drugačiju rezoluciju, na primjer, FullHD (1920 x 1080p), tada će široke crne trake ostati na rubovima monitora.

Što se tiče rezolucije samih monitora, oni su međusobno podijeljeni, kao što možete pretpostaviti, po omjeru stranica. Ističu se sljedeće: Za omjer širine i visine 4: 3 -1024x768, 1280x1024, 1600x1200, 1920x1440, 2048x1536. Za omjer 16:9: 1366x768, 1600x900, 1920x1080, 2048x1152, 2560x1440, 3840x2160. Za omjer širine i visine slike 16:10: 1280x800, 1440x900, 1600x1024, 1680x1050, 1920x1200, 2560x1600, 3840x2400. Najpopularnije rezolucije danas su 1920x1080, 1280x1024, 1366x768.

Vrijedi napomenuti da što je veća rezolucija ekrana, to će i sama slika biti bolja, ali u isto vrijeme može biti vrlo mala i neki vlasnici ovakvih uređaja morat će je promijeniti u manju kako bi vidjeli barem nešto na monitoru. Kao rezultat toga, naravno, svako može direktno prije kupovine uređaja u trgovini pogledati koja će slika biti na njemu i da li mu odgovara.