Statistika korištenja rezolucije zaslona. Kako vratiti izgubljeni promet ili kako je korisna statistika razlučivosti zaslona

Možda niste ni svjesni činjenice da se vaša stranica ne prikazuje ispravno na ekranu rezolucije 320 × 480 i svi čitatelji s takvim pametnim telefonom napuštaju vaš blog bez da su proučili informacije na njemu.

Neka bude super zanimljiva informacija(za blog), najviše niska cijena za proizvod (za online trgovinu), super koristan tečaj, ali ako je stranica kriva, gumbi se ne vide, redovi teksta se preklapaju, onda nećete vidjeti prodajne stranice s takvim prikazom.

Stoga je potrebno statistički analizirati i identificirati dozvole iz kojih posjetitelji odlaze te poduzeti mjere za ispravljanje grešaka.

Statistika rezolucije zaslona

Tamo je sve jasno, unesite URL stranice:

Sada možete birati razne opcije. Štoviše, kao standardne dozvole pametni telefoni (kartica 3):

I proizvoljno birajte rezoluciju u brojevima (5 kartica):

Pokazao sam vam kako koristiti alat, a sada improvizirajte za svoje stranice.

Kako ispraviti greške

Zaključno, postavlja se pitanje: "Zašto mi sve ovo treba, da proučavam preglednike, dopuštenja i tako dalje?"

Odgovor je jednostavan – povećati promet i prodaju.

U mom slučaju gubici su minimalni, manje od 2% posjetitelja godišnje odlazi jer se moj blog nije dobro prikazivao na njihovom uređaju s kojeg su pristupali stranici. To su mali brojevi, možete ih imati veće ili niže, ali morate razumjeti da takvi tokovi ukupno mogu rezultirati velikim tokovima gubitaka.

Autor stranice može misliti da ima loš dizajn, upotrebljivost, da ne zna pravilno pisati članke ili da ima loš proizvod, visoka cijena ali stvarni razlog može biti drugačiji. Ako to znate, onda se problem može riješiti, zapamtite ovo.

Ako vaša web stranica ima mnogo problema s rješavanjem, predložak najvjerojatnije ne reagira ili Niska kvaliteta i potrebno ga je zamijeniti. Imajte na umu da mobilni prometće se s godinama samo povećavati, pa otprilike odgovarajući predložak(ili o mobilnoj verziji stranice) potrebno je razmišljati što je prije moguće.

Ovdje sam detaljno govorio o ovoj temi:

Želio bih čuti rezultate analize vaše stranice, koje rezolucije zaslona imaju najviše odskakanja?

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

Bilješke

Vrlo svestran proces. Ali ipak, sve njegove faze mogu se podijeliti u dvije glavne komponente - funkcionalnu i vanjsku ljusku. Ili, kao što je uobičajeno među webmasterima, back-end i front-end. Ljudi koji svoje web stranice naručuju od web development studija često naivno vjeruju da se isplati fokusirati samo na funkcionalnost, a to će ispravno rješenje. Ali to vrijedi u vrlo, vrlo rijetkim slučajevima, obično za startup projekte u fazi beta testiranja. Što se ostalog tiče Grafički dizajn i korisničko sučelje jednostavno mora biti praktično, ali ne zaboravite na budućnost stranice, s obzirom na njenu .

Prvi kamen temeljac s kojim se dizajner sučelja, ili dizajner, suočava je širina izgleda stranice. Uostalom, za to je potrebno nacrtati sučelja. Čisto intuitivno, pojavljuju se dva pristupa - ili napravite zasebne izglede za svaku popularnu razlučivost zaslona ili izradite jednu verziju stranice za sve zaslone. I obje će opcije biti pogrešne, ali prvo stvari.

Standardna širina stranice u pikselima za RuNet

Prije razvoja adaptivnog izgleda, izrada stranice širine tisuću piksela bila je masovna pojava. Ova brojka je odabrana iz jednog jednostavnog razloga - kako bi stranica stala u bilo koji ekran. I to ima svoju logiku, ali pretpostavimo da čovjek ipak ima barem HD monitor na desktopu. U ovom slučaju, vaš izgled će izgledati kao sićušna traka u sredini ekrana, gdje je sve zalijepljeno u jednu hrpu, a sa strane postoji ogroman neiskorišten prostor. Pretpostavimo sada da osoba pristupa vašoj web stranici s tableta sa zaslonom širine 800 piksela, au postavkama postoji kvačica "Prikaži Puna verzija web-mjesto". U tom će slučaju i vaše web-mjesto biti prikazano netočno jer jednostavno ne stane na zaslon.

Iz ovih razmatranja možemo zaključiti da fiksna širina definitivno nam ne odgovara za raspored i moramo tražiti drugi način. Analizirajmo ideju zasebnog izgleda za svaku širinu zaslona.

Modeli za sve prilike

Ako ste kao strategiju odabrali izradu izgleda za sve veličine zaslona na tržištu, tada će vaša stranica postati najunikatnija na cijelom Internetu. Uostalom, danas je jednostavno nemoguće pokriti cijeli niz uređaja, pokušavajući napraviti fino podešavanje za svaku opciju. Ali ako se fokusirate na najpopularnije rezolucije monitora i zaslona uređaja, onda ideja nije loša. Njegov jedini nedostatak su financijski troškovi. Uostalom, kada su dizajner sučelja, dizajner i dizajner izgleda prisiljeni raditi isti posao 5 ili 6 puta, projekt će koštati nesrazmjerno više od cijene koja je izvorno predviđena proračunom.

Stoga, da se pohvali obiljem verzija pod različite ekrane možda samo one-page stranice, čija je svrha prodati jedan proizvod i biti siguran da to učiniti dobro. Pa, ako nemate jedno od ovih odredišta, već web mjesto s više stranica, trebali biste razmisliti dalje.

Najpopularnije veličine stranica

Kompromis između dvije krajnosti je nacrtati raspored za tri ili četiri. Od njih, jedan mora biti raspored za Mobilni uredaji. Ostatak treba prilagoditi za male, srednje i velike zaslone stolnih računala. Kako odabrati širinu stranice? U nastavku donosimo statistiku servisa HotLog za svibanj 2017. koja nam pokazuje distribuciju popularnosti razne rezolucije zaslone uređaja, kao i dinamiku ovog pokazatelja.

Iz tablice možete naučiti kako odrediti veličinu stranice koju želite koristiti. Osim toga, možemo zaključiti da je danas najčešći format zaslon od 1366 x 768 piksela. Ovi zasloni su ugrađeni u proračunska prijenosna računala pa je njihova popularnost prirodna. Sljedeći najpopularniji je Full HD monitor, što je zlatni standard za videozapise, igre, a time i izglede web stranica. Dalje u tablici vidimo rezoluciju mobilnih uređaja 360 x 640 piksela, kao i razne opcije za desktop i mobilni ekrani nakon njega.

Dizajniramo izgled

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

1. Verzija za prijenosno računalo širine 1366 px.
2. Full HD verzija.
3. Raspored širine 800 piksela za prikaz na malim stolnim monitorima.
4. Mobilna verzija stranice je široka 360 piksela.

Recimo da smo odlučili koju ćemo veličinu koristiti generirani izvor za mjesto. Ali takav bi projekt i dalje bio skup. Dakle, pogledajmo više opcija, ovaj put bez korištenja fiksne širine.

Izrada fleksibilnog izgleda

Postoji alternativni pristup, kada se isplati prilagoditi samo minimalnoj veličini zaslona, ​​a same veličine web mjesta bit će postavljene postocima. U ovom slučaju, kao što su izbornici, gumbi i logotip, možete postaviti apsolutne vrijednosti, na temelju minimalne širine zaslona u pikselima. Blokovi sa sadržajem, naprotiv, bit će rastegnuti prema navedenom postotku širine površine zaslona. Ovaj pristup omogućuje vam da prestanete shvaćati veličinu web mjesta kao ograničenje za dizajnera i vješto pobijediti ovu nijansu.

Što je zlatni rez i kako ga primijeniti na izgled web stranice?

Čak iu renesansi, mnogi arhitekti i umjetnici pokušali su dati svoje kreacije savršen oblik i proporcija. Za odgovore na pitanja o vrijednostima takvog omjera obratili su se kraljici svih znanosti - matematici.

Još od antike izmišljena je proporcija koju naše oko percipira kao najprirodniju i najelegantniju, jer je u prirodi sveprisutna. Pronalazač formule za ovaj omjer bio je talentirani starogrčki arhitekt po imenu Phidias. Izračunao je da ako se veći dio omjera odnosi prema manjem kao što se cjelina odnosi prema većem, onda će takav omjer izgledati najbolje. Ali to je slučaj ako želite podijeliti objekt asimetrično. Taj je omjer kasnije nazvan zlatnim rezom, što i danas ne precjenjuje njegovu važnost za svjetsku povijest kulture.

Povratak na web dizajn

Vrlo je jednostavno - pomoću zlatnog reza možete dizajnirati stranice koje će biti što ugodnije ljudskom oku. Računajući prema definiciji formule zlatnog presjeka, dobivamo iracionalni broj 1,6180339887..., ali radi praktičnosti možete koristiti zaokruženu vrijednost od 1,62. To će značiti da bi blokovi naše stranice trebali biti 62% i 38% cjeline, bez obzira na veličinu koju koristite za izradu izvora za web mjesto. Možete vidjeti primjer na sljedećem dijagramu:

Koristite nove tehnologije

Moderne tehnologije izgleda web stranice omogućuju što točnije prenošenje ideje dizajnera i dizajnera, tako da si sada možete priuštiti implementaciju hrabrijih ideja nego u zoru internetskih tehnologija. Ne morate više razmišljati o veličini stranice. S pojavom stvari poput bloka Adaptivni izgled, dinamičko učitavanje sadržaja i fontova, razvoj web stranica postao je mnogo ugodniji. Uostalom, takve tehnologije imaju manje ograničenja, iako još uvijek postoje. Ali kao što znate, bez ograničenja ne bi bilo umjetnosti. Predlažemo da upotrijebite jedan doista kreativan pristup dizajnu - zlatni rez. Pomoću njega možete učinkovito i lijepo ispuniti sve veličine web stranica koje postavite u svojim predlošcima.

Kako povećati radni prostor stranice

Postoji velika vjerojatnost da nećete imati dovoljno prostora za stajanje svih elemenata korisničkog sučelja u izgledu. mala veličina. U tom slučaju morat ćete početi razmišljati kreativno ili čak kreativnije nego prije.

Možete osloboditi prostor na web mjestu što je više moguće skrivanjem navigacije u skočnom izborniku. Logično je koristiti ovaj pristup ne samo na mobilnim uređajima, već i na stolnim računalima. Uostalom, korisnik ne mora cijelo vrijeme gledati koji su naslovi na vašoj stranici - došao je po sadržaj. I želje korisnika moraju se poštovati.

Primjer dobar način sakrij izbornik je sljedeći izgled (fotografija ispod).

U gornji kut U crvenom području možete vidjeti križić, klikom na koji će se izbornik sakriti u malu ikonu, ostavljajući korisnika samog sa sadržajem web stranice.

Međutim, to nije obavezno, možete ostaviti navigaciju koja će uvijek biti na vidiku. Ali to možete učiniti prekrasnim elementom dizajna, a ne samo popisom popularnih veza na web mjestu. Koristite intuitivne ikone uz tekstualne veze ili čak umjesto njih. Ovo će također omogućiti vašoj web-lokaciji da učinkovitije koristi prostor na zaslonu na uređaju korisnika.

Najbolja web stranica je responzivna

Ako ne znate koji izgled odabrati za web mjesto, onda je sve jednostavno za vas. Kako biste uštedjeli na troškovima razvoja, a istovremeno ne izgubili publiku zbog lošeg izgleda za neki uređaj, koristite responzivni dizajn.

Responzivni dizajn je dizajn koji izgleda različite uređaje jednako dobro. Ovaj pristup omogućit će vašoj web stranici da bude razumljiva i praktična čak i na prijenosnom računalu, čak i na tabletu, čak i na pametnom telefonu. Ovaj učinak se postiže kroz automatske promjeneširina radno područje zaslon. Korištenjem responzivnih stilskih listova za svoju web-lokaciju prihvaćate vrlo prava odluka od mogućeg.

Koja je razlika između responzivnog dizajna i različitih verzija stranice

Responzivni dizajn razlikuje se od mobilna verzija mjesto u tome posljednji slučaj korisnik dobiva html kod koji se razlikuje od desktopa. Ovo je nedostatak iu smislu optimizacije performansi poslužitelja optimizacija pretraživača. Osim toga, postaje teže izračunati statistiku različite verzije mjesto. Adaptivni pristup je lišen takvih nedostataka.

Responzivnost za različite uređaje postiže se rasporedom s postavkom postotne širine ili prijenosom blokova na slobodan prostor(u okomitoj ravnini na pametnom telefonu umjesto u vodoravnoj ravnini na radnoj površini) ili stvaranje pojedinačnih izgleda za različite zaslone.

Nauči više o responzivni dizajn a njegov razvoj moći ćete iz udžbenika.

Danas tržište ulaganja ima veliki iznos proizvoda iz raznih oblasti. Činilo nam se da je vrijedno skrenuti vašu pozornost 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. Mobitel, tablet, laptop već su čvrsto ukorijenjeni u naše živote, dapače, s njima provodimo više vremena nego sa živim ljudima oko nas.

Što kaže statistika

Dugo smo proučavali statistička izvješća različitih metrika s partnerskih stranica. Gledao tehnički podaci najpopularnijih mobilnih uređaja. Situacija je takva da su tržištem među svim mobilnim uređajima počeli dominirati veliki Mobiteli, čija dijagonala počinje na 5,5" i završava na 6,2". Dodajte ovome želju Applea da do kraja godine lansira proizvod s dijagonalom od 6,5" i naš mozak počinje jedva probavljati potrebu za takvom tehnikom. Ne možete ga više staviti u džep, a neće stati u svaku torbu.Međutim, ako pogledate načine korištenja telefona moderan pametni telefon. onda postaje jasno zašto. Ovo je čudna činjenica: telefon kao da je izmišljen za govorna komunikacija, a sve ga češće koristiti i kao uređaj za surfanje internetom. Jednostavno rečeno - moderni trend- kvalitetan je mobitel s izvrsnim zaslonom, kamerom i internetom. Ovo je praktičan "žetelac", samo ga trebate puniti jednom dnevno.

Sada o dopuštenjima. Najpopularnije rezolucije su 1366 * 738 i 1920 * 1080. To nisu mobilne rezolucije. Ali najpopularniji mobilna rezolucija postala 360*640. Zapravo, ovo su prva tri.

Potpuna tablica s podacima o tržištu je sljedeća:

Zaključak

Tržište mobilnih uređaja ne miruje. Danas treba tražiti opcije za ulaganje u ovo tržište.

Prema web stranici Deviceatlas

Znajući koje su razlučivosti zaslona pametnog telefona danas najpopularnije pomoći će vam da optimizirate svoje web mjesto za razliku između razne uređaje. DeviceAtlas prikupljen najnoviju statistiku korištenja uređaja u vezi s ovim problemom.

Nove rezolucije zaslona na tržištu

U posljednjih godina svi vodeći uređaji na Android OS imao Puna rezolucija HD (1080x1920) i QHD (1440x2560). U 2017. godini na tržištu se pojavilo nekoliko uređaja s nestandardnim razlučivostima – uglavnom zbog novog trenda zaslona od ruba do ruba (cijela š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 najavljen)

Naravno ove nestandardne dozvole još nije uključeno u našu statistiku. Ali na ovaj ili onaj način, možemo očekivati ​​da će standard S8 postati jedan od najpopularnijih na popisu zbog ogromne popularnosti obitelji Galaxy S: na primjer, prethodni vodeći model - S7 - postao je najčešći Android uređaj u svijet.

Najčešće korištena rezolucija zaslona pametnog telefona je 720x1280

Prema statistici prometa za srpanj-kolovoz 2017., najpopularnija razlučivost zaslona na pametnim telefonima bila je 720 × 1280 piksela, koja se koristi na većini uređaja srednjeg i niskog ranga. Ovo je najčešće korištena dozvola u 11 zemalja od 20 analiziranih, uključujući Indiju, Italiju i Španjolsku. Usko ga prati omjer od 750x1334, koji je popularan u SAD-u, Velikoj Britaniji i Australiji. iPhone modeli. U Francuskoj i Njemačkoj, pak, Full HD je postao najčešća rezolucija u pametnim telefonima srednje i proračunske klase.

Tablica prikazuje najpopularnije rezolucije zaslona pametnih telefona u svih 20 zemalja koje su sudjelovale u istraživanju.

Grafikoni u nastavku prikazuju udio prometa koji je pao na pametne telefone s rezolucijom ekrana od 720x1280 u razdoblju srpanj-kolovoz 2017. u zemljama koje su sudjelovale u studiji.

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

Također smo analizirali koliko je brzo korištenje nekoliko popularnih dozvola raslo tijekom godine - od Q4 2016. do Q3 2017. Unatoč aktivnom rastu u prošlosti, sada je širenje QHD rezolucije (1440×2560) usporeno.

U Francuskoj, Indiji, Nigeriji i SAD-u QHD uređaji čak su izgubili tržišni udio (-4% u potonjoj zemlji). Tijekom posljednja 4 kvartala, FHD (1080×1920) uređaji rasli su brže, dobivši 5-10% u Brazilu, Francuskoj, Japanu, Poljskoj, Španjolskoj i SAD-u.

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

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

Prvo, malo o teoriji. Razlučivost zaslona može se razlikovati ovisno o uređaju koji koristite. Neki korisnici pogrešno vjeruju da su veličina zaslona i razlučivost zaslona ista stvar. Na primjer, veličina zaslona i maksimalna rezolucija iznosi 1600 x 1200, a korisnik može postaviti rezoluciju, na primjer, 800 x 600. Naravno, slika na ekranu će se formirati prema principu koji je postavio sam korisnik. Kao rezultat toga, ispada da su veličina zaslona i njegova razlučivost malo različiti pojmovi. Kako biste postigli savršenu sliku potrebno je postaviti maksimalnu rezoluciju koju vaš monitor podržava i tada će slika biti najviše kvalitete.

Koje su rezolucije zaslona?

Danas postoji ogroman broj monitora i isto toliko 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. Uređaji širokog zaslona s omjerom slike 21:9 vrlo su traženi. Koristiti sličnih uređaja danas to jednostavno nema smisla, jer su najprikladniji za gledanje filmova snimljenih korištenjem standarda CinemaScope. To je izravno povezano s činjenicom da ako na takvom monitoru postavite drugu rezoluciju, primjerice, FullHD (1920 x 1080p), uz rubove monitora ostat će široke crne trake.

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

Vrijedi napomenuti da što je veća razlučivost zaslona, ​​to će sama slika biti bolja, ali istovremeno može biti vrlo mala i neki vlasnici takvih uređaja morat će je promijeniti u manju kako bi išta vidjeli na monitor. Kao rezultat toga, naravno, svatko može vidjeti neposredno prije kupnje uređaja u trgovini kakva će slika biti na njemu i odgovara li mu.