Înainte de a petrece prea mult timp luând în considerare rezoluțiile exacte ale monitorului pentru proiectarea dvs., ar trebui să vă amintiți că toate design-urile web moderne sunt receptive, ceea ce înseamnă că este conceput pentru a se adapta la diverse rezoluțiile ecranului. Cu un singur design, trebuie să acceptați totul, de la cele mai mici ecrane mobile până la monitoare desktop ultra HD.
Cu design web receptiv, stabiliți dispozitive mai generale pentru dispozitive mobile, tablete și desktop. Când și cum fiecare element de pagină se schimbă în loc pentru aceste aspecte este determinat de puncte de întrerupere speciale scrise în dvs. CSS. Aceste puncte de întrerupere sunt determinate de anumite rezoluții comune ale ecranului.
Deși nu vizați rezoluții specifice sau nu configurați o dimensiune fixă pentru desenele dvs., veți lua în considerare ecranul rezoluții în stabilirea punctelor de întrerupere și crearea de tranziții ușoare, astfel încât site-ul dvs. să arate bine pe fiecare dispozitiv și marimea ecranului.
Rezoluții comune pentru desktop
- 1280x720 HD standard - Poate îl cunoașteți mai bine ca 720p. A fost rezoluția HD standard când HD devenea obișnuit. Probabil că nu veți găsi multe monitoare noi folosind această rezoluție, dar există o mulțime de ele încă în sălbăticie de când erau mai populare.
- 1366x768 - Este o rezoluție neobișnuită, dar este foarte populară pe laptopurile mai mici și unele tablete. Dacă aveți de-a face cu o gamă inferioară Chromebookuri, există șanse mari să fie rezoluția pe care o vizați.
- 1920x1080 Cel mai frecvent - Când vă gândiți la desktop-uri, probabil aveți de-a face cu 1920x1080, mai cunoscut sub numele de 1080p. Această rezoluție este absolut peste tot. Majoritatea monitoarelor desktop sunt încă 1080p și o mulțime de laptopuri de dimensiuni mari. De asemenea, veți găsi o parte decentă de tablete în 1080p și în peisaj.
- 2560x1440 - 1440p este un alt punct de mijloc ciudat în imaginea rezoluției monitorului. Este mai mare decât ceea ce ați considera 2k, dar nu este chiar 4k. Acestea fiind spuse, este o rezoluție obișnuită pe piața monitorului de jocuri și este o alternativă accesibilă pentru a merge complet la 4k. În funcție de site-ul dvs., poate fi sau nu în valoare de sprijin 1440p.
- 3840x2160 Viitorul apropiat - Acesta este complet 4K sau Ultra HD. În timp ce 4k este de obicei rezervat pentru computerele de ultimă generație, prețurile scad, tehnologia grafică se îmbunătățește, iar cererea pentru 4k este condusă de piața TV, unde este mult mai frecventă. Este sigur să presupunem că în următorii câțiva ani, 4k va depăși cu ușurință 1080p ca standard de facto, deci merită cu siguranță să contabilizezi 4k acum.
Rezoluții comune pentru tablete / peisaj
Este posibil ca tabletele să nu fie la fel de populare ca odinioară și creșterea dimensiunilor telefoanelor asociate cu laptopurile convertibile pare să se fi redus semnificativ în cota lor de piață. Chiar și așa, contabilitatea rezoluțiilor tabletelor se suprapune semnificativ cu desktopurile și laptopurile. Este posibil să puteți utiliza puncte de întrerupere pentru tabletă pentru a crea puncte de întrerupere pentru anumite elemente supărătoare care nu se potrivesc corect la anumite rezoluții.
- De asemenea, trebuie să țineți cont de rezoluțiile tabletelor pentru dispozitivele deținute în modul portret. Nu toată lumea va naviga pe tableta lor ținută în peisaj, deci ar trebui să adăugați cel puțin un punct de întrerupere pentru o tabletă obișnuită ținută în portret.
- 1280x800 O rezoluție obișnuită - Tabletele mai vechi, tabletele inferioare și tabletele mai mici au, de obicei, unele dintre tabletele Amazon de la Fire, de asemenea, încă mai folosesc 1280x800. Aceasta este una dintre ultimele rezoluții cu adevărat mobile pe tablete.
- 1920x1200 Comun pe tablete de 7 "și 8" - În peisaj, vă puteți baza pe aceleași puncte de întrerupere ca 1080p, de cele mai multe ori. Cu toate acestea, când vedeți una dintre acestea în peisaj, situația este mult diferită. Această rezoluție este obișnuită printre o mulțime de tablete de 7 și 8 inci, inclusiv Amazon Fire.
- 2048x1536 Tablete Apple -Aceasta este cea mai comună rezoluție a tabletei Apple. Este suficient de similar cu 1440p pentru a face foarte puține diferențe, dar din nou, portretul este neobișnuit. În orice caz, este o idee bună să vă testați site-ul la această rezoluție pentru a vă asigura că nu se întâmplă nimic ciudat pe iPad-uri.
Tabletele cu rezoluție mai mare încep să intre pe teritoriul desktopului. De cele mai multe ori, nici măcar nu trebuie să le țineți cont pentru că rezoluția se încadrează într-un interval pe care l-ați luat deja în calcul. Totuși, este întotdeauna o idee bună să testați, pentru a fi absolut sigur.
Rezoluții mobile comune
Dispozitivele mobile sunt cu ușurință cele mai complicate de manipulat. Există o gamă atât de diversă de dispozitive, inclusiv cele mai vechi încă în uz, nu este ușor să le acoperiți pe toate. De aceea, designul pentru primul dispozitiv mobil este atât de popular. Filozofia este simplă. Începeți mai întâi cu cel mai simplu design mobil și construiți pe el pentru ecrane din ce în ce mai mari. În acest fel, chiar și cele mai vechi și mai mici dispozitive funcționează, dar cu mai puțin conținut și mai puține caracteristici. Site-ul nu este blocat, el afișează pur și simplu doar cele mai importante informații accesate în mod obișnuit.
Iată un truc interesant pentru a face față telefoanelor; întoarceți rezoluțiile desktopului pe partea lor. Sigur, există valori neobișnuite, dar majoritatea telefoanelor actuale urmează acest model.
- 720x1280 obișnuit pe dispozitive mai vechi - timp de câțiva ani, 720p întoarsă lateral a fost cel mai comun standard pentru un dispozitiv mobil. În acest caz, nu trebuie să vă faceți griji cu privire la modul peisaj, deoarece este la fel ca desktopul 720p. Acoperiți doar rezoluția portretului cu o lățime de 720 pixeli.
- 1080x1920 terenul de mijloc - 1080p a fost standardul de foarte mult timp. Este încă foarte frecvent pe dispozitivele de nivel mediu. Dacă veți accepta o singură rezoluție mobilă, aceasta este.
- 1440x2560 top-end curent - Dispozitivele mobile continuă să crească, iar ecranele continuă să aibă rezoluții mai mari. 1440p este un standard interesant, deoarece există o varietate de lățimi ale ecranului - lungimi în acest caz - care se încadrează în acel interval. Atât pe desktop, cât și pe mobil, cel mai comun este 1440x2560. Aceasta oferă ecranului raportul de aspect comun 16: 9. Pe mobil, contează puțin mai puțin decât desktop-urile, deoarece lungimea dispozitivului nu are un impact prea mare asupra design-urilor.
Înainte de a accepta cu bucurie doar trei rezoluții mobile, ar trebui să vă dați seama, de asemenea, că unele persoane folosesc telefoane vechi ridicol cu ecrane minuscule. Ar trebui să construiți întotdeauna o rezoluție minimă pentru a vă asigura că site-ul dvs. arată bine chiar și pentru cineva care folosește un telefon de câțiva ani în urmă.
Sfaturi simple de reținut
Este ușor să luați o grămadă de fapte despre rezoluțiile ecranului, scurgerile și să începeți să batjocoriți design-uri, și tocmai atunci aveți probleme. Există câteva idei cheie de care trebuie să ții cont de fiecare dată când proiectezi un site web și sunt valabile în majoritatea situațiilor, dacă nu chiar în toate.
- Designul receptiv este fluid - Este posibil să simțiți înclinația de a construi o gamă masivă de puncte de întrerupere în CSS pentru a ține cont de fiecare dimensiune și situație posibilă a ecranului. Acesta este un mod minunat de a te înnebuni. Proiectarea web receptivă este menită să fie suficient de flexibilă pentru a completa lacune și nereguli. Dacă vă regăsiți să definiți prea multe numere statice, indiferent dacă sunt în interogări media sau pentru elementele în sine, probabil că vă îndreptați pe o cale greșită.
- Oamenii nu își măresc întotdeauna browserul - Acest fel merge mână în mână cu punctul anterior. Poti design pentru dimensiunile ecranului, dar atunci când cineva nu își maximizează fereastra browserului, tot ce se fumează. Păstrând lucrurile în designul dvs. fluid, puteți evita problemele cu diferite dimensiuni ale ferestrelor browserului.
- Testează totul - Încercați să vă rupeți site-ul. Acesta este singurul mod în care veți găsi toate erorile și neconcordanțele care vor distruge experiența unui vizitator. Chrome are instrumente încorporate pentru a testa rezoluțiile dispozitivelor cu o listă completă de dispozitive populare cu care să lucrați. Aveți întotdeauna opțiunea de a trage singur fereastra browserului în diferite dimensiuni pentru a vedea atât aspectul site-ului la diferite dimensiuni, cât și modul în care se adaptează și se rupe.
- Nu vă așteptați ca utilizatorii dvs. să aibă cele mai recente și mai mari - Acest lucru revine la punctul anterior despre telefoanele mai vechi și rezoluțiile mici. Nu vă puteți aștepta ca oamenii să aibă dispozitive noi. Acest lucru se aplică atât rezoluției ecranului, cât și puterii de procesare. Încărcarea unui site cu prea multe elemente grafice și prea mult JavaScript este o modalitate bună de a determina oamenii cu un dispozitiv lent să plece și să nu se mai întoarcă niciodată.