Rezoluţia ecranului - durerea de cap a oricărui web-programator | Muzeul din inima mea

vineri, 3 octombrie 2014

Rezoluţia ecranului - durerea de cap a oricărui web-programator

Afişarea conţinutului unui site de obicei începe de la un parametru esenţial - lăţimea paginii, şi respectiv a celor două sau trei coloane în care se împarte aceasta. Cel mai important factor în determinarea lățimii potrivite pentru un site este scopul acestuia. În cazul în care site-ul necesită o lățime fixă, ​​atunci este obligatoriu a fi luate în consideraţie câteva aspecte. 

Dacă site-ul urmează să afişeze imagini și se doreşte ca acestea să fie de minim 1024px pe orizontală, atunci logic site-ul trebuie să fie de cel puțin 1024px în lăţime. Deci, pentru cea mai mare parte a site-urilor web, lățimea urmează a fi =>1024px. În privinţa > există însă opinii diferite, care ţin tot mai greu faţă progresului mărimii pixelului, deoarece din ce în ce mai multe persoane optează pentru site-uri web mai largi. La momentul scrierii acestui articol, cea mai populară rezoluție a ecranului este 1366 × 768. Însă trebuie luat în considerare faptul că cu ceva ani în urma aceasta a fost de 1024 × 768, iar nu toţi încă au făcut saltul tehnologic. Pe de altă parte un procent în creştere de utilizatori de Internet sunt la zi la acest capitol, utilizând rezoluții mai mari, gen K, 2K sau 4K. O şi mai mare încurcătură în această privinţă o aduc dispozitivele mobile, la care rezoluţia ecranului e o chestiune foarte volatilă de la an la an. Să luăm în această privinţă, drept exemplu, datele vizitatorilor site-ului muzeului pentru ultimele 30 de zile.

Desktop Users % Mobile Users % Tablet Users %
1366x768 1351 35,05 360x640 113 17,85 768x1024 116 47,35
1280x1024 450 11,67 320x568 103 16,27 1280x800 22 8,98
1920x1080 428 11,10 320x480 81 12,80 1024x552 17 6,94
1440x900 272 7,06 480x800 52 8,21 1280x752 17 6,94
1280x800 264 6,85 720x1280 32 5,06 600x912 17 6,94
1600x900 241 6,25 320x534 29 4,58 962x553 8 3,27
1024x768 193 5,01 540x960 24 3,79 800x1280 6 2,45
1680x1050 191 4,95 360x592 22 3,48 601x906 5 2,04
1360x768 125 3,24 330x549 14 2,21 960x552 5 2,04
1024x600 59 1,53 480x854 12 1,90 962x601 5 2,04
1280x768 46 1,19 300x405 8 1,26 1024x600 4 1,63
1152x864 33 0,86 601x914 8 1,26 601x914 4 1,63
1280x960 30 0,78 1080x1920 7 1,11 600x1024 3 1,22
1280x720 29 0,75 1280x752 6 0,95 600x976 3 1,22
1920x1200 25 0,65 640x297 6 0,95 800x1232 3 1,22
1138x640 11 0,29 640x360 6 0,95 1024x720 2 0,82
1344x840 6 0,16 386x643 5 0,79 1366x768 2 0,82
2560x1440 6 0,16 1024x600 4 0,63 1200x1920 1 0,41
800x600 6 0,16 384x592 4 0,63 1280x720 1 0,41
1093x614 5 0,13 768x1024 4 0,63 1536x2048 1 0,41
1152x720 5 0,13 800x480 4 0,63 1920x1128 1 0,41
1024x819 4 0,10 1024x552 3 0,47 357x595 1 0,41
1461x913 4 0,10 1351x1693 3 0,47 383x638 1 0,41
1536x864 4 0,10 320x218 3 0,47


1024x576 3 0,08 320x522 3 0,47


1120x700 3 0,08 534x320 3 0,47


1600x1200 3 0,08 768x976 3 0,47


2048x1152 3 0,08 1024x768 2 0,32


1040x768 2 0,05 1351x1542 2 0,32


1133x640 2 0,05 1351x1769 2 0,32


1229x768 2 0,05 1351x1908 2 0,32


1301x731 2 0,05 1351x2156 2 0,32


1309x818 2 0,05 290x305 2 0,32


1400x1050 2 0,05 320x455 2 0,32


176x202 2 0,05 320x570 2 0,32


20x20 2 0,05 768x1184 2 0,32


360x593 2 0,05 960x552 2 0,32


480x800 2 0,05 122x133 1 0,16


853x683 2 0,05 1280x800 1 0,16


1032x645 1 0,03 128x130 1 0,16


1051x591 1 0,03 128x133 1 0,16


1058x595 1 0,03 1301x731 1 0,16


1067x600 1 0,03 1351x1786 1 0,16


1088x614 1 0,03 1351x1790 1 0,16


1219x731 1 0,03 1351x1883 1 0,16


1243x925 1 0,03 1351x2145 1 0,16


1293x970 1 0,03 1351x620 1 0,16


1295x731 1 0,03 1351x830 1 0,16


1311x737 1 0,03 1351x909 1 0,16


1333x750 1 0,03 1366x768 1 0,16


1350x1080 1 0,03 1536x864 1 0,16


1358x848 1 0,03 170x190 1 0,16


1364x768 1 0,03 218x261 1 0,16


1368x768 1 0,03 234x274 1 0,16


1382x864 1 0,03 234x282 1 0,16


1402x877 1 0,03 234x300 1 0,16


1429x1143 1 0,03 234x320 1 0,16


1438x808 1 0,03 240x257 1 0,16


1440x960 1 0,03 240x276 1 0,16


1536x960 1 0,03 240x278 1 0,16


1600x1024 1 0,03 240x320 1 0,16


1613x1008 1 0,03 300x360 1 0,16


1787x1005 1 0,03 300x371 1 0,16


1821x1024 1 0,03 300x375 1 0,16


1829x1029 1 0,03 314x184 1 0,16


1995x1122 1 0,03 314x200 1 0,16


2560x1600 1 0,03 314x220 1 0,16


686x429 1 0,03 317x401 1 0,16


720x1280 1 0,03 338x563 1 0,16


819x614 1 0,03 342x487 1 0,16


853x533 1 0,03 342x529 1 0,16


890x522 1 0,03 347x347 1 0,16





356x593 1 0,16





360x503 1 0,16





371x619 1 0,16





383x638 1 0,16





400x222 1 0,16





400x592 1 0,16





480x360 1 0,16





480x762 1 0,16





528x320 1 0,16





601x911 1 0,16





615x240 1 0,16





720x1184 1 0,16





768x968 1 0,16





800x1003 1 0,16





800x1065 1 0,16





800x1270 1 0,16


Total 3855 81,45
633 13,37
245 5,18

Dacă lăsăm la o parte porţiunea mobilă, vom constata că doar puţin peste 38% vizualizează site-ul nostru (Slavă Domnului că nu l-au înregistrat pe Usatâi, că deja trebuia să caut sinonime la acest pronume) absolut perfect, adică au lăţimea ecranului între 1350-1382px. Ceilalţi deja trebuie să meargă la compromis, fie au porţiuni de conţinut neafişat, fie porţiuni mari de spaţiu gol afişat. Dar, după cum spune vorba populară, pe loc născocită, mai bine un salariu peste capacitatea portmoneului, decât unul care să nu-l regăseşti în portmoneu.  În acest sens, numărul celora care pot vizualiza în întregime pagina este de circa 70%, încă 30% având nevoie fie să-şi cumpere un mouse cu două rotiţe, fie să-şi seteze scroll orizontal la touchpad.