Esiteks natuke teooriast. Ekraani eraldusvõime võib olenevalt kasutatavast seadmest erineda. Mõned kasutajad usuvad ekslikult, et ekraani suurus ja monitori ekraani eraldusvõime on samad. Näiteks ekraani suurus ja selle maksimaalne eraldusvõime on 1600 x 1200 ning kasutaja saab määrata eraldusvõime näiteks 800 x 600. Ekraanil olev pilt moodustatakse loomulikult vastavalt kasutaja poolt määratud põhimõttele. ise. Selle tulemusena selgub, et ekraani suurus ja eraldusvõime on veidi erinevad mõisted. Ideaalse pildi saavutamiseks tuleb määrata maksimaalne eraldusvõime, mida monitor toetab ja siis on pilt kõrgeima kvaliteediga.

Millised ekraani eraldusvõimed on olemas?

Tänapäeval on tohutul hulgal monitore ja sama palju eraldusvõimeid. Tuleb märkida, et kõigil neil seadmetel on erinevad kuvasuhted, näiteks: 4:3, 5:4, 16:9, 16:10 ja paljud teised. Laiekraaniga seadmed, mille kuvasuhe on 21:9, on väga nõutud. Selliseid seadmeid pole tänapäeval lihtsalt otstarbekas kasutada, kuna need sobivad kõige paremini CinemaScope'i standardiga filmitud filmide vaatamiseks. See on otseselt seotud tõsiasjaga, et kui määrata sellisele monitorile erinev eraldusvõime, näiteks FullHD (1920 x 1080p), siis jäävad monitori servadesse laiad mustad ribad.

Mis puudutab monitoride eraldusvõimet, siis need jagunevad üksteise vahel, nagu võite arvata, kuvasuhte järgi. Esile on tõstetud järgmised: kuvasuhte 4:3 puhul –1024x768, 1280x1024, 1600x1200, 1920x1440, 2048x1536. 16:9 kuvasuhte jaoks: 1366 x 768, 1600 x 900, 1920 x 1080, 2048 x 1152, 2560 x 1440, 3840 x 2160. Kuvasuhe 16:10: 1280x800, 1440x900, 1600x1024, 1680x1050, 1920x1200, 2560x1600, 3840x2400. Tänapäeval on populaarseimad eraldusvõimed: 1920x1080, 1280x1024, 1366x768.

Tasub teada, et mida kõrgem on ekraani eraldusvõime, seda parem on pilt ise, kuid see võib olla väga väike ja nii mõnigi selliste seadmete omanik peab selle väiksemaks muutma, et monitoril midagi näha. Tänu sellele on loomulikult igaühel vahetult enne poest seadme ostmist näha, milline pilt peale tuleb ja kas see talle sobib.

Väga mitmetahuline protsess. Kuid sellegipoolest saab kõik selle etapid jagada kaheks põhikomponendiks - funktsionaalsus ja väliskest. Või nagu veebihalduritel kombeks, vastavalt taga- ja esiotsa. Inimesed, kes tellivad oma veebisaite veebiarendusstuudiotest, usuvad sageli naiivselt, et ainult funktsionaalsusele keskendumine on õige otsus. Kuid see kehtib väga-väga harvadel juhtudel, tavaliselt beetatestimise etapis käivitusprojektide puhul. Muidu peavad graafiline disain ja kasutajaliides lihtsalt mugavad olema, kuid seda arvestades ei tohiks unustada ka saidi tulevikku.

Esiotsa kujundaja või kujundaja esimene nurgakivi on saidi paigutuse laius. Selle jaoks on ju vaja liidesed joonistada. Puhtalt intuitiivselt tekib kaks lähenemisviisi – kas teha iga populaarse ekraani eraldusvõime jaoks eraldi paigutus või luua saidi üks versioon kõigi kuvarite jaoks. Ja mõlemad valikud on valed, kuid kõigepealt.

Veebisaidi standardlaius pikslites RuNeti jaoks

Enne adaptiivse paigutuse väljatöötamist oli tuhande piksli laiusega veebilehe arendamine laialt levinud nähtus. See kujund valiti ühel lihtsal põhjusel – et sait mahuks igale ekraanile. Ja sellel on oma loogika, kuid oletame, et inimesel on töölaual siiski vähemalt HD-ekraan. Sel juhul ilmub teie paigutus pisikese ribana ekraani keskele, kus kõik on ühte hunnikusse kokku kleebitud ja külgedel on tohutu kasutamata ruum. Oletame nüüd, et inimene on külastanud Sinu veebilehte 800 piksli laiuse ekraaniga tahvelarvutist ning seadetes on linnuke "Näita veebilehe täisversiooni". Sel juhul kuvatakse ka teie saiti valesti, kuna see lihtsalt ei mahu ekraanile.

Nendest kaalutlustest võime järeldada, et paigutuse fikseeritud laius meile kindlasti ei sobi ja me peame otsima teist meetodit. Uurime iga ekraanilaiuse jaoks eraldi paigutuse ideed.

Paigutused igaks juhuks

Kui valite strateegiana kõigi turul olevate ekraanisuuruste paigutuste loomise, muutub teie sait kogu Internetis kõige ainulaadsemaks. Lõppude lõpuks on tänapäeval lihtsalt võimatu katta kogu seadmete valikut, püüdes iga võimalust täpselt häälestada. Kui aga keskenduda kõige populaarsematele monitoride ja seadmete ekraanide eraldusvõimetele, siis pole idee paha. Selle ainus puudus on rahalised kulud. Lõppude lõpuks, kui liidese kujundaja, kujundaja ja küljendaja on sunnitud tegema sama tööd 5 või 6 korda, läheb projekt maksma ebaproportsionaalselt rohkem kui algselt kavandatud hind.

Seetõttu saavad erinevatele ekraanidele mõeldud versioonide rohkusega kiidelda vaid ühelehelised saidid, mille eesmärk on müüa ühte toodet ja teha seda kindlasti hästi. Noh, kui teil pole ühtki neist sihtlehtedest, vaid mitmeleheline sait, siis tasub seda edasi arutada.

Kõige populaarsemad veebisaidi suurused

Kompromiss kahe äärmuse vahel on paigutus kolmele või neljale. Üks neist peab olema mobiilseadmete paigutus. Ülejäänud tuleks kohandada väikeste, keskmiste ja suurte töölauaekraanide jaoks. Kuidas valida saidi laiust? Allpool esitame HotLog-teenuse statistika 2017. aasta mai kohta, mis näitab meile erinevate seadmete ekraanieraldusvõimete populaarsuse jaotust ning ka selle indikaatori muutuste dünaamikat.

Tabelist saate teada, kuidas määrata kasutatava saidi suurust. Lisaks võime järeldada, et tänapäeval on kõige levinum formaat 1366 x 768 piksline ekraan. Sellised ekraanid on paigaldatud eelarvelistesse sülearvutitesse, seega on nende populaarsus loomulik. Populaarsuselt järgmine on Full HD monitor, mis on videote, mängude ja seega ka veebilehe paigutuste loomise kuldstandard. Edasi tabelis näeme mobiilseadmete eraldusvõimet 360 x 640 pikslit, aga ka erinevaid võimalusi laua- ja mobiiliekraanide jaoks.

Paigutuse kujundamine

Seega võime pärast statistika analüüsimist järeldada, et veebisaidi optimaalsel laiusel on 4 variatsiooni:

1. Sülearvuti versioon laiusega 1366 pikslit.
2. Full HD versioon.
3. Paigutus on 800 pikslit lai kuvamiseks väikestel lauaarvuti monitoridel.
4. Saidi mobiiliversioon on 360 pikslit lai.

Oletame, et oleme otsustanud, millist suurust saidi allika loomiseks kasutada. Kuid selline projekt läheb ikkagi kalliks. Nii et vaatame veel mõningaid võimalusi, seekord ilma kindlat laiust kasutamata.

Paigutuse muutmine paindlikuks

On olemas alternatiivne lähenemine, kui peate kohanema ainult minimaalse ekraanisuurusega ja saidi suurused määratakse protsentides. Samal ajal saab näiteks menüüsid, nuppe ja logosid määrata absoluutväärtustes, keskendudes ekraani laiuse minimaalsele suurusele pikslites. Sisuga plokid, vastupidi, venitatakse vastavalt ekraaniala laiuse määratud protsendile. Selline lähenemine võimaldab lõpetada veebisaitide suuruse tajumise disaineri jaoks piiranguna ja selle nüansiga osavalt mängida.

Mis on kuldlõige ja kuidas seda veebilehe paigutusele rakendada?

Isegi renessansiajal püüdsid paljud arhitektid ja kunstnikud anda oma loomingule ideaalse kuju ja proportsiooni. Selle proportsiooni tähendust puudutavatele küsimustele vastuste saamiseks pöördusid nad kõigi teaduste kuninganna - matemaatika - poole.

Alates iidsetest aegadest on leiutatud proportsioon, mida meie silm tajub kõige loomulikuma ja graatsilisemana, sest seda leidub looduses kõikjal. Sellise suhte valemi avastajaks oli andekas Vana-Kreeka arhitekt nimega Phidias. Ta arvutas, et kui suurem osa proportsioonist on seotud väiksemaga, kuna tervik on suuremaga, siis see proportsioon näeb kõige parem välja. Kuid see on nii, kui soovite objekti asümmeetriliselt jagada. Seda osakaalu hakati hiljem nimetama kuldseks lõikeks, mis ei hinda siiani üle selle tähtsust maailma kultuuriloo jaoks.

Tuleme tagasi veebidisaini juurde

See on väga lihtne – kuldlõike abil saate kujundada lehti, mis on inimsilmale võimalikult meeldivad. Olles arvutanud kuldse lõike valemi definitsiooni järgi, saame irratsionaalarvu 1,6180339887..., kuid mugavuse huvides võite kasutada ümardatud väärtust 1,62. See tähendab, et meie leheplokid peaksid moodustama 62% ja 38% tervikust, olenemata kasutatava saidi allika suurusest. Näidet näete järgmisel diagrammil:

Kasutage uusi tehnoloogiaid

Kaasaegsed veebisaidi paigutustehnoloogiad võimaldavad disaineri ideed võimalikult täpselt edasi anda, nii et nüüd saate endale lubada julgemate ideede elluviimist kui Interneti-tehnoloogiate koidikul. Te ei pea enam pead murdma selle üle, millise suurusega sait peaks olema. Selliste asjade nagu plokipõhine adaptiivne paigutus, sisu ja fontide dünaamiline laadimine, tulekuga on veebisaitide arendamine muutunud palju nauditavamaks. Lõppude lõpuks on sellistel tehnoloogiatel vähem piiranguid, kuigi need on endiselt olemas. Aga nagu me teame, poleks piiranguteta kunsti. Soovitame teil kasutada disainimisel üht tõeliselt loomingulist lähenemist – kuldset suhet. Selle abiga saate tõhusalt ja kaunilt täita mis tahes saidi suurused, mille oma mallides määrate.

Kuidas saidi tööpinda suurendada

On suur võimalus, et teil ei ole piisavalt ruumi kõigi kasutajaliidese elementide väikesele paigutusele mahutamiseks. Sel juhul peate hakkama mõtlema loovalt või isegi loovamalt kui varem.

Saate vabastada oma veebisaidil võimalikult palju ruumi, kui peidate navigeerimise hüpikmenüüsse. Seda lähenemist on loogiline kasutada mitte ainult mobiilseadmetes, vaid ka lauaarvutites. Lõppude lõpuks ei pea kasutaja pidevalt vaatama, millised kategooriad teie saidil on - ta tuli sisu pärast. Ja kasutaja soove tuleb austada.

Hea võimalus menüü peitmiseks on näiteks järgmine paigutus (foto allpool).

Punase ala ülanurgas on rist, millele vajutades peidab menüü väikeseks ikooniks, jättes kasutaja kodulehe sisuga rahule.

Kuid see pole vajalik, võite navigeerimisest lahkuda, mis on alati nähtav. Kuid saate teha sellest ilusa kujunduselemendi, mitte ainult saidi populaarsete linkide loendi. Kasutage intuitiivseid ikoone lisaks tekstilinkidele või isegi nende asemel. See võimaldab teie saidil ka kasutaja seadme ekraaniruumi tõhusamalt kasutada.

Parim veebisait on tundlik

Kui te ei tea, millist kujundust oma veebisaidi jaoks valida, on kõik teie jaoks lihtne. Et säästa arenduskulusid, kaotamata vaatajaskonda konkreetse seadme kehva paigutuse tõttu, kasutage tundliku disaini.

Adaptiivne disain on disain, mis näeb erinevates seadmetes ühtviisi hea välja. See lähenemisviis võimaldab teie saidil olla arusaadav ja mugav isegi sülearvutis, isegi tahvelarvutis, isegi nutitelefonis. See efekt saavutatakse ekraani tööala laiuse automaatse muutmisega. Kui kasutate oma veebisaidil kohanduvaid stiililehti, teete parima võimaliku otsuse.

Mis vahe on adaptiivse disaini ja veebisaidi erinevate versioonide vahel?

Adaptiivne disain erineb saidi mobiiliversioonist selle poolest, et viimasel juhul saab kasutaja html-koodi, mis erineb töölaua omast. See on puuduseks nii serveri jõudluse optimeerimise kui ka otsingumootori optimeerimise seisukohast. Lisaks muutub saidi erinevate versioonide statistika arvutamine keerulisemaks. Adaptiivsel lähenemisel selliseid puudusi pole.

Kohanemisvõime erinevate seadmete jaoks saavutatakse laiuse protsendimääraga paigutusega, kas liigutades plokke vabasse ruumi (nutitelefonis vertikaaltasapinnal horisontaalse asemel töölaual) või luues erinevatele ekraanidele individuaalseid paigutusi.

Responsiivse disaini ja selle arendamise kohta saate lisateavet õpikutest.

Põhineb Deviceatlase veebisaidi materjalidel

Teades, millised nutitelefoni ekraani eraldusvõimed on tänapäeval kõige populaarsemad, aitab teil oma veebisaiti optimeerida, et võtta arvesse erinevate seadmete erinevusi. DeviceAtlas kogutud selle probleemiga seotud uusim seadme kasutamise statistika.

Turul uued ekraani eraldusvõimed

Viimastel aastatel on kõigil Android OS-i lipulaevadel Full HD (1080x1920) ja QHD (1440x2560) eraldusvõime. 2017. aastal ilmus turule mitu mittestandardse resolutsiooniga seadet, mis on peamiselt tingitud uuest trendist servast servani ekraanidele (kogu seadme laius). Sealhulgas:

• Samsung Galaxy Note 8: 1440 x 2960 pikslit
• Samsung Galaxy S8: 1440 x 2960 pikslit
• LG V30: 1440 x 2880 pikslit
• LG G6: 1440 x 2880 pikslit
• Sony Xperia XZ Premium: 3840 x 2160 pikslit
• iPhone X: 1125 x 2436 pikslit (äsja avalikustati)

Loomulikult ei ole need ebastandardsed eraldusvõimed veel meie statistikasse kaasatud. Kuid ühel või teisel viisil võime eeldada, et S8 standard võib Galaxy S perekonna tohutu populaarsuse tõttu muutuda loendis üheks populaarsemaks: näiteks eelmisest lipulaevast - S7 - sai kõige levinum Android-seade. maailmas.

Enimkasutatav nutitelefoni ekraani eraldusvõime on 720x1280

2017. aasta juuli-augusti liiklusstatistika järgi on nutitelefonide populaarseimaks ekraani eraldusvõimeks saanud suhe 720x1280 pikslit, mida kasutatakse enamikes kesk- ja eelarveklassi seadmetes. See on enimkasutatud resolutsioon 11 riigis 20 analüüsitud riigist, sealhulgas Indias, Itaalias ja Hispaanias. Sellele järgneb täpselt 750x1334 suhe, mida kasutatakse populaarsetes iPhone'i mudelites USA-s, Ühendkuningriigis ja Austraalias. Prantsusmaal ja Saksamaal on omakorda levinuimaks resolutsiooniks saanud kesk- ja eelarveklassi nutitelefonides Full HD.

Tabelis on kõige populaarsemad nutitelefonide ekraani eraldusvõimed kõigis 20 uuringus osalenud riigis.

Allolevad graafikud näitavad 720x1280 ekraani eraldusvõimega nutitelefonidelt pärit liikluse osakaalu 2017. aasta juulis-augustis uuringus osalenud riikides.

Full HD võtab turgu üle, QHD kasutuselevõtt aeglustub

Samuti analüüsisime, kui kiiresti kasvas mitme populaarse resolutsiooni kasutamine aasta jooksul – 2016. aasta IV kvartalist 2017. aasta kolmanda kvartalini. Vaatamata varasemale aktiivsele kasvule on QHD eraldusvõime (1440×2560) levik nüüdseks aeglustunud.

Prantsusmaal, Indias, Nigeerias ja USA-s kaotasid QHD-seadmed isegi turuosa (viimases riigis –4%). Viimase nelja kvartali jooksul on FHD (1080 x 1920) seadmed kasvanud kiiremini, lisades Brasiilias, Prantsusmaal, Jaapanis, Poolas, Hispaanias ja USA-s 5–10%.

Full HD seadmete (1080 x 1920) liikluse osakaal viimase 4 kvartali jooksul:

QHD-seadmete (1440 x 2560) liikluse osakaal viimase 4 kvartali jooksul:

Tänapäeval on investeerimisturul tohutult palju tooteid erinevatest valdkondadest. Arvasime, et tasub juhtida teie tähelepanu kiiresti kasvavale mobiilseadmete turule. Ei, siin arvustusi ei tule, me tahame seda turgu vaadata läbi ekraani omaduste prisma. Mobiiltelefon, tahvelarvuti, sülearvuti on meie elus juba kindlalt juurdunud. Tegelikult veedame nendega rohkem aega kui meie ümber elavate inimestega.

Mida ütleb statistika

Uurisime pikka aega partnersaitide erinevate mõõdikute statistilisi aruandeid. Vaatasime kõige populaarsemate mobiilseadmete tehnilisi omadusi. Olukord on selline, et turul olevate mobiilsete seadmete seas on domineerima hakanud suured mobiiltelefonid, mille diagonaal algab 5,5" ja lõpeb 6,2". Lisame siia Apple'i soovi tuua aasta lõpuks turule 6,5" diagonaaliga toode. Ja meie ajul hakkab olema raskusi sellise tehnoloogia vajaduse seedimisega. Seda ei saa enam taskusse panna ja Igasse kotti see ei mahu. Kui aga vaadata tänapäeva nutitelefoni kasutusviise, saab selgeks, miks see on kummaline tõsiasi: telefon on justkui kõnesuhtluseks välja mõeldud, aga nii see on üha enam internetis surfamise vahendina. Lihtsamalt öeldes on moodne suund hea ekraani ja kaameraga ning internetiga päev.

Nüüd lubade kohta. Kõige populaarsemad eraldusvõimed jäävad 1366*738 ja 1920*1080. Need ei ole mobiilsed eraldusvõimed. Kuid kõige populaarsemaks mobiili eraldusvõimeks on saanud 360*640. Tegelikult on need esikolmik.

Täielik turuteabe tabel on järgmine:

Järeldus

Mobiilseadmete turg ei seisa paigal. Täna peame otsima võimalusi sellel turul investeerimisel.

Te ei pruugi isegi olla teadlik sellest, et teie saiti ei kuvata 320x480 eraldusvõimega ekraanil õigesti ja kõik lugejad, kellel on selline nutitelefon, lahkuvad teie blogist ilma sellel olevat teavet uurimata.

Olgu super huvitav info (blogi jaoks), toote madalaim hind (e-poe jaoks), superkasulik kursus, aga kui leht on kõver, siis nuppe ei paista, tekstiread kattuvad , siis selle müügilehtede kuvamisega teid ei nähta.

Seetõttu on vaja analüüsida statistikat ja tuvastada load, kust külastajad lahkuvad, ning võtta kasutusele meetmed vigade parandamiseks.

Ekraani eraldusvõime statistika

Seal on kõik selge, sisestage saidi URL:

Nüüd saate valida erinevaid valikuid. Lisaks, nagu nutitelefonide tavaliste eraldusvõimetega (tab 3):

Niisiis, sisestage eraldusvõime juhuslikult numbritega (tab 5):

Näitasin teile, kuidas seda tööriista kasutada, nüüd improviseerige oma saitide jaoks.

Kuidas vigu parandada

Kokkuvõttes tekib küsimus: "Miks mul seda kõike vaja on, uurida brausereid, õigusi jne?"

Vastus on lihtne – liikluse ja müügi suurendamiseks.

Minu puhul on kahjud minimaalsed, alla 2% aasta külastajatest, sest minu ajaveebi kuvati halvasti nende seadmes, kust nad saidile ligi pääsesid. Need on väikesed numbrid, teie omad võivad olla suuremad või väiksemad, kuid peate mõistma, et sellised tilgad võivad kaasa tuua suure kahjumivoo.

Saidi autor võib arvata, et sellel on kehv disain, kasutatavus, ta ei oska õigesti artikleid kirjutada või on tal halb toode, kõrge hind, kuid tegelikult võib põhjus olla erinev. Kui teate seda, siis saab probleemi lahendada, pidage seda meeles.

Kui teie saidil on palju lahendusprobleeme, ei ole mall tõenäoliselt reageeriv või madala kvaliteediga ja see tuleb välja vahetada. Pange tähele, et mobiililiiklus kasvab aastatega ainult, seega peate mõtlema reageeriva malli (või saidi mobiiliversiooni) peale võimalikult varakult.

Ma rääkisin sellest teemast üksikasjalikult siin:

Tahaksin kuulda teie saidi analüüsi tulemustest, millistel ekraanieraldusvõimetel esineb kõige rohkem tõrkeid?

Kui teil on küsimusi, kirjutage kommentaaridesse, aitan kindlasti.

Märkmed