Prije nego što potrošite predugo razmišljajući o točnim razlučivostima monitora za svoj dizajn, trebate se sjetiti da je sav moderni dizajn web stranica prilagodljiv, što znači da je dizajniran za prilagođavanje raznim razlučivosti zaslona. Jednim dizajnom morate podržati sve, od najmanjih mobilnih zaslona do ultra HD stolnih monitora.
S responzivni web dizajn, uspostavljate općenitiji raspored za mobilne uređaje, tablete i radne površine. Kada i kako će se svaki element stranice postaviti na svoje mjesto za te izglede, određuju se posebne točke prekida upisane u vaš CSS. Te se točke prekida određuju određenim uobičajenim rezolucijama zaslona.
Iako nećete ciljati određene rezolucije ili postaviti fiksnu veličinu za svoje dizajne, razmotrit ćete zaslon rezolucije u uspostavljanju točaka prekida i stvaranju glatkih prijelaza kako bi vaša web lokacija izgledala dobro na svim uređajima i veličina ekrana.
Uobičajene rezolucije radne površine
- 1280x720 standardni HD - Ovu možda znate bolje kao 720p. Bila je to standardna HD razlučivost kad je HD prvi put postajao uobičajen. Vjerojatno nećete pronaći mnogo novih monitora koji koriste ovu rezoluciju, ali ima ih još uvijek u divljini od kada su bili popularniji.
- 1366 x 768 - To je nešto neobične rezolucije, ali vrlo je popularno u manjim prijenosnicima i nekim tabletima. Ako imate posla s nižim krajem Chromebookovi, postoji velika vjerojatnost da je ovo razlučivost koju ciljate.
- 1920x1080 Najčešće - Kad razmišljate o stolnim računalima, vjerojatno imate posla s 1920x1080, poznatijim kao 1080p. Ova je rezolucija apsolutno svugdje. Većina monitora za stolna računala i dalje su 1080p, a ima i puno prijenosnih računala u punoj veličini. Naći ćete i pristojan udio tableta u 1080p u krajoliku.
- 2560 x 1440 - 1440p je još jedna neobična sredina na slici razlučivosti monitora. Viši je od onoga što biste smatrali 2k, ali nije baš 4k. Ipak, to je uobičajena rezolucija na tržištu gaming monitora i pristupačna je alternativa pretvaranju u pune 4k. Ovisno o vašoj web lokaciji, možda vrijedi ili ne mora podržati 1440p.
- 3840x2160 Bliska budućnost - Ovo je puni 4k ili Ultra HD. Iako su 4k obično rezervirani za računala više klase, cijene padaju, grafička tehnologija se poboljšava, a potražnju za 4k potiče tržište televizora, gdje je to puno češće. Sigurno je pretpostaviti da će tijekom sljedećih nekoliko godina 4k lako prestići 1080p kao de-facto standard, tako da sada svakako vrijedi računati 4k.
Uobičajene rezolucije tableta / pejzaža
Tableti možda nisu toliko popularni kao nekada, a čini se da su sve veće veličine telefona uparene s konvertibilnim prijenosnim računalima značajno urasle u njihov tržišni udio. Čak i dalje, računanje razlučivosti tableta značajno se preklapa sa stolnim i prijenosnim računalima. Možda ćete moći koristiti točke prekida za tablete da biste stvorili točke prekida za određene problematične elemente koji se ne uklapaju točno u određene rezolucije.
- Također biste apsolutno trebali uzeti u obzir razlučivost tableta za uređaje koji se drže u portretnom načinu. Neće svi pregledavati na tabletu koji se nalazi u vodoravnom položaju, pa biste trebali dodati barem jednu točku prijeloma za uobičajeni tablet u portretu.
- 1280x800 Rezolucija koja je nekad bila uobičajena - Starije tablete, niže tablete i manje tablete obično imaju neke od Amazonovih tableta Fire također i dalje koriste 1280x800. Ovo je jedna od posljednjih uistinu mobilnih rezolucija na tabletima.
- 1920x1200 Uobičajeno na tabletama od 7 "i 8" - U pejzažu se većinu vremena možete pouzdati u iste točke prekida kao 1080p. Međutim, kad vidite jedno od ovih u krajoliku, situacija je puno drugačija. Ova je razlučivost uobičajena među velikim brojem 7 i 8-inčnih tableta, uključujući Amazon Fire.
- 2048x1536 jabučne tablete -Ovo je najčešća Appleova razlučivost tableta. Dovoljno je sličan 1440p da napravi vrlo malu razliku, ali opet, portret je neobičan. U svakom slučaju, dobra je ideja testirati svoju web lokaciju u ovoj rezoluciji kako biste osigurali da se na iPadima ne dogodi ništa neobično.
Tableti veće rezolucije počinju ulaziti na teritorij radne površine. Većinu vremena ne trebate ih ni uzimati u obzir jer razlučivost spada u raspon koji ste već uzeli u obzir. Uvijek je dobra ideja testirati da biste bili potpuno sigurni.
Uobičajene mobilne razlučivosti
Mobiles uređaji lako su najkompliciraniji za rukovanje. Postoji toliko raznolika paleta uređaja, uključujući starije koji se još uvijek koriste, Nije ih sve jednostavno pokriti. Zato je dizajn s mobilnim uređajima toliko popularan. Filozofija je jednostavna. Prvo započnite s najjednostavnijim dizajnom za mobitele i gradite na njemu za sve veće i veće zaslone. Na taj način rade i najstariji i najmanji uređaji, ali s manje sadržaja i manje značajki. Web stranica nije ometana, ona jednostavno prvo prikazuje samo najvažnije i najčešće pristupane informacije.
Evo zanimljivog trika za bavljenje telefonima; okrenite rezolucije radne površine na svoju stranu. Naravno, postoje neobični outlieri, ali većina trenutnih telefona slijedi ovaj obrazac.
- 720x1280 uobičajeno na starijim uređajima - nekoliko je godina 720p okrenuti na bok bio najčešći standard za mobilni uređaj. U tom slučaju ne trebate brinuti o pejzažnom načinu, jer je isti kao i 720p na radnoj površini. Dovoljno je pokriti portretnu razlučivost širinom od 720 piksela.
- 1080x1920 sredina - 1080p je standard već jako dugo. To je još uvijek vrlo često na uređajima srednje klase. Ako ćete podržavati samo jednu mobilnu rezoluciju, to je to.
- 1440x2560 trenutni vrhunski - Mobilni uređaji postaju sve veći, a zasloni sve veće i veće rezolucije. 1440p je zanimljiv standard jer postoji niz širina zaslona - u ovom slučaju duljina - koje spadaju u taj raspon. Na radnoj površini i mobilnom uređaju najčešći je 1440x2560. To daje zaslonu uobičajeni omjer slike 16: 9. Na mobilnim uređajima to je malo manje od stolnih računala jer duljina uređaja ne utječe puno na vaše dizajne.
Prije nego što sretno podržite samo tri mobilne rezolucije, trebali biste shvatiti i da neki ljudi koriste smiješno stare telefone sa sićušnim zaslonima. Uvijek biste trebali ugraditi minimalnu rezoluciju kako biste osigurali da vaša web lokacija izgleda dobro čak i nekome tko koristi telefon unatrag nekoliko godina.
Jednostavni savjeti koje treba imati na umu
Lako je uzeti hrpu činjenica o razlučivostima zaslona, otjecanju vode i početi se rugati dizajnu, a to je točno kad naiđete na nevolje. Postoji nekoliko ključnih ideja koje morate imati na umu kad god dizajnirate web stranicu, a one vrijede u većini, ako ne i svim situacijama.
- Responzivni dizajn je fluidan - Možda osjećate sklonost da u svoj CSS ugradite masivan niz točaka prekida kako bi se uzele u obzir sve moguće veličine i situacije zaslona. To je sjajan način da izludiš sebe. Prilagodljivi web dizajn trebao bi biti dovoljno fleksibilan da popuni praznine i nepravilnosti. Ako ustanovite da definirate previše statičnih brojeva, bilo da se radi o medijskim upitima ili za same elemente, vjerojatno ste krenuli krivim putem.
- Ljudi uvijek ne povećavaju svoj preglednik - Ova vrsta ide ruku pod ruku s prethodnom točkom. Možeš dizajn za veličine zaslona, ali kad netko ne maksimizira prozor svog preglednika, sve to ode u dim. Držeći stvari u svom dizajnu, možete izbjeći probleme s različitim veličinama prozora preglednika.
- Isprobajte sve - Pokušajte razbiti vaše web mjesto. Samo na taj način ćete pronaći sve greške i nedosljednosti koje će pokvariti iskustvo posjetitelja. Chrome ima ugrađene alate za testiranje razlučivosti uređaja s potpunim popisom popularnih uređaja za rad. Uvijek imate mogućnost povlačenja prozora preglednika u različite veličine kako biste vidjeli kako web stranica izgleda u različitim veličinama, tako i kako se prilagođava i lomi.
- Ne očekujte da će vaši korisnici imati najnovije i najveće - To se vraća na prethodnu točku o starijim telefonima i malim rezolucijama. Ne možete očekivati da će ljudi imati nove uređaje. To se odnosi i na razlučivost zaslona i na procesorsku snagu. Učitavanje web mjesta s previše grafike i previše JavaScript je dobar način da ljudi s sporim uređajem odu i nikad se ne vrate.