Preden predolgo razmišljate o natančnih ločljivostih monitorja za svoj dizajn, ne pozabite, da je vse moderno spletno oblikovanje odzivno, kar pomeni, da je zasnovano tako, da se prilagaja različnim ločljivosti zaslona. Z eno samo zasnovo morate podpirati vse, od najmanjših mobilnih zaslonov do ultra HD namiznih monitorjev.
S odzivno spletno oblikovanje, vzpostavite bolj splošne postavitve za mobilne naprave, tablice in namizja. Kdaj in kako se bo vsak element strani postavil na svoje mesto za te postavitve, določajo posebne mejne vrednosti, zapisane v vašem CSS. Te mejne vrednosti določajo nekatere običajne ločljivosti zaslona.
Čeprav ne boste ciljali na določene ločljivosti ali nastavili fiksne velikosti za svoje zasnove, boste upoštevali zaslon ločljivosti pri določanju mejnih vrednosti in ustvarjanju gladkih prehodov, tako da vaše spletno mesto izgleda dobro v vseh napravah in velikost zaslona.
Skupne ločljivosti namizja
- 1280 x 720 Standard HD - Tega morda poznate bolje kot 720p. To je bila standardna ločljivost HD, ko je HD prvič postajal običajna. Verjetno s to ločljivostjo ne boste našli veliko novih monitorjev, vendar jih je v divjini še vedno veliko, ko so bili bolj priljubljeni.
- 1366 x 768 - To je sicer nenavadna ločljivost, vendar je zelo priljubljena pri manjših prenosnikih in nekaterih tabličnih računalnikih. Če imate opravka z nižjim koncem Chromebookiobstaja velika verjetnost, da je to ločljivost, na katero ciljate.
- 1920x1080 Najpogostejši - Ko razmišljate o namizjih, se verjetno ukvarjate z 1920x1080, bolj znanim kot 1080p. Ta resolucija je popolnoma povsod. Večina namiznih monitorjev je še vedno 1080p, veliko pa je tudi prenosnikov v polni velikosti. V pokrajini boste našli tudi spodoben delež tabličnih računalnikov v ločljivosti 1080p.
- 2560 x 1440 - 1440p je še ena čudna sredina na sliki ločljivosti monitorja. Višji je od tistega, kar bi šteli za 2k, vendar ni čisto 4k. Kljub temu je to običajna ločljivost na trgu igralnih monitorjev in cenovno ugodna alternativa polnemu 4k. Glede na vaše spletno mesto se morda splača podpreti 1440p ali pa tudi ne.
- 3840x2160 Bližnja prihodnost - To je polna 4k ali Ultra HD. Medtem ko so zdaj 4k običajno rezervirani za osebne računalnike višjega razreda, cene padajo, grafična tehnologija se izboljšuje, povpraševanje po 4k pa spodbuja televizijski trg, kjer je to veliko bolj pogosto. Z gotovostjo lahko domnevamo, da bo v naslednjih nekaj letih 4k zlahka prehitel 1080p kot dejanski standard, zato je vsekakor vredno upoštevati 4k zdaj.
Splošne ločljivosti tabličnih računalnikov / ležeče slike
Tablični računalniki morda niso tako priljubljeni kot nekoč, in vse večje velikosti telefonov, povezanih s kabrioletnimi prenosniki, se zdijo bistveno zmanjšale njihov tržni delež. Kljub temu se upoštevanje ločljivosti tabličnih računalnikov bistveno prekriva z namiznimi in prenosnimi računalniki. Morda boste lahko prek mejnih točk tabličnega računalnika ustvarili mejne točke za nekatere moteče elemente, ki se ne ujemajo z določeno ločljivostjo.
- Prav tako morate pri napravah v pokončnem načinu upoštevati ločljivosti tabličnih računalnikov. Ne bodo vsi brskali po tabličnem računalniku v ležečem položaju, zato morate dodati vsaj eno mejno točko za običajni tablični računalnik v pokončnem položaju.
- 1280 x 800 Ločljivost, ki je bila včasih običajna - Starejše tablete, tablete nižjega cenovnega razreda in manjše tablice imajo navadno nekatere tablete Amazon's Fire še vedno 1280x800. To je ena zadnjih resnično mobilnih ločljivosti na tabličnih računalnikih.
- 1920x1200 Pogosto na 7 "in 8" tablicah - V pokrajini se lahko večino časa zanesete na enake mejne vrednosti kot 1080p. Ko pa eno od teh vidite v pokrajini, je situacija precej drugačna. Ta ločljivost je pogosta med številnimi 7 in 8-palčnimi tabličnimi računalniki, vključno z Amazon Fire.
- 2048x1536 tablične računalnike Apple -To je najpogostejša Appleova ločljivost tabličnega računalnika. Dovolj je podoben 1440p, da bi naredil zelo malo razlike, a spet je portret nenavaden. V vsakem primeru je dobro, da svojo spletno stran preizkusite v tej ločljivosti, da se na iPadah ne zgodi nič čudnega.
Tablice z višjo ločljivostjo začnejo priti na namizje. Največkrat vam jih sploh ni treba upoštevati, ker ločljivost pade v obseg, ki ste ga že upoštevali. Vedno je dobro preizkusiti, če želite biti popolnoma prepričani.
Skupne mobilne ločljivosti
Mobilne naprave so enostavno najbolj zapletene za uporabo. Naprava je tako raznolika, vključno s starejšimi, ki so še vedno v uporabi, zato jih ni enostavno zajeti. Zato je dizajn, ki je primeren za mobilne naprave, tako priljubljen. Filozofija je preprosta. Najprej začnite z najpreprostejšim mobilnim dizajnom in ga nadgradite za večje in večje zaslone. Tako delujejo tudi najstarejše in najmanjše naprave, vendar z manj vsebine in manj funkcijami. Spletno mesto ni ovirano, ampak preprosto najprej prikaže le najpomembnejše in najpogosteje dostopne informacije.
Tu je zanimiv trik za obravnavo telefonov; obrnite ločljivosti namizja na svojo stran. Seveda obstajajo nenavadni odmiki, vendar večina trenutnih telefonov sledi temu vzorcu.
- 720x1280 običajno v starejših napravah - vrsto let je bil 720p obrnjen na bok najpogostejši standard za mobilne naprave. V tem primeru vam ni treba skrbeti za ležeči način, saj je enak kot namizni 720p. Preprosto pokrijte ločljivost portreta s širino 720 slikovnih pik.
- 1080x1920 sredina - 1080p je standard že zelo dolgo. Še vedno je zelo pogost pri napravah srednjega razreda. Če boste podpirali samo eno mobilno ločljivost, je to to.
- 1440x2560 trenutni top-end - Mobilne naprave so vedno večje, zasloni pa vedno večje in višje ločljivosti. 1440p je zanimiv standard, saj v to območje spadajo različne širine zaslona - v tem primeru dolžine. Na namiznih in mobilnih napravah je najpogostejši 1440 x 2560. To daje zaslonu skupno razmerje stranic 16: 9. Pri mobilnih napravah je to pomembno malo manj kot pri namiznih računalnikih, saj dolžina naprave ne vpliva veliko na vaše zasnove.
Preden z veseljem podprete samo tri ločljivosti, se morate tudi zavedati, da nekateri uporabljajo smešno stare telefone z majhnimi zasloni. Vedno morate vgraditi minimalno ločljivost, da zagotovite, da bo vaše spletno mesto videti dobro tudi za nekoga, ki uporablja telefon že več let.
Preprosti nasveti, ki jih je treba upoštevati
Preprosto je vzeti kup dejstev o ločljivostih zaslona, odtoku in se začeti norčevati iz modelov, in ravno takrat zaidete v težave. Pri načrtovanju spletnega mesta morate upoštevati nekaj ključnih idej, ki veljajo v večini, če ne celo v vseh situacijah.
- Odziven dizajn je tekoč - Morda čutite naklonjenost, da v svoj CSS vgradite množico mejnih vrednosti, da upoštevate vse možne velikosti zaslona in situacijo. To je odličen način, da se obnorete. Odzivno spletno oblikovanje naj bi bilo dovolj prilagodljivo, da zapolni vrzeli in nepravilnosti. Če ugotovite, da določite preveč statičnih števil, ne glede na to, ali gre za medijske poizvedbe ali za same elemente, ste verjetno usmerjeni po napačni poti.
- Ljudje svojega brskalnika ne povečajo vedno - To nekako gre z roko v roki s prejšnjo točko. Ti lahko oblikovanje za velikosti zaslona, toda ko nekdo okna brskalnika ne poveča, je vse to kar dimno. Če ohranite stvari v svoji tekoči obliki, se lahko izognete težavam z različnimi velikostmi oken brskalnika.
- Preizkusite vse - Poskusite razbiti vaše spletno mesto. Le tako boste našli vse napake in nedoslednosti, ki bodo obiskovalcu uničile izkušnjo. Chrome ima vgrajena orodja za preizkušanje ločljivosti naprav s celotnim seznamom priljubljenih naprav za delo. Vedno lahko sami povlečete okno brskalnika v različne velikosti, da vidite, kako izgleda spletno mesto različnih velikosti in kako se prilagaja in lomi.
- Ne pričakujte, da bodo uporabniki imeli najnovejše in najboljše - To se vrača na prejšnjo točko o starejših telefonih in majhnih ločljivostih. Ne morete pričakovati, da bodo ljudje imeli nove naprave. To velja tako za ločljivost zaslona kot za procesorsko moč. Nalaganje strani s preveč grafike in preveč JavaScript je dober način, da ljudje s počasno napravo odidejo in se nikoli več ne vrnejo.