Enne kui veedate liiga kaua aega disaini täpsete monitoride eraldusvõimete kaalumisel, peaksite meeles pidama, et kogu kaasaegne veebidisain on reageeriv, see tähendab, et see on loodud kohanema erinevates ekraani eraldusvõimed. Ühe kujundusega peate toetama kõike alates kõige väiksematest mobiiliekraanidest kuni ultra HD töölauamonitorideni.
Koos tundlik veebidisain, saate luua üldisemad mobiilseadmete, tahvelarvutite ja töölauade paigutused. Millal ja kuidas iga lehe element nende paigutuste jaoks paigale nihkub, määratakse teie sisse kirjutatud spetsiaalsete murdepunktidega CSS. Need murdepunktid määratakse teatud ühiste ekraaniresolutsioonidega.
Kuigi te ei sihi konkreetseid eraldusvõimalusi ega määra oma kujunduse jaoks fikseeritud suurust, kaalute ekraani eralduspunktide loomisel ja sujuvate üleminekute loomisel, nii et teie sait näeb hea välja igas seadmes ja ekraani suurus.
Ühised töölaua eraldusvõimed
- 1280x720 Standard HD - Võib-olla tunnete seda paremini kui 720p. See oli tavaline HD-eraldusvõime, kui HD muutus esmakordselt tavaliseks. Tõenäoliselt ei leia seda eraldusvõimet kasutavaid palju uusi kuvareid, kuid neid on endiselt looduses populaarsemast ajast saati.
- 1366x768 - See on midagi ebatavalist eraldusvõimet, kuid on väga populaarne väiksemates sülearvutites ja mõnes tahvelarvutis. Kui teil on tegemist madalama otsaga Chromebookid, on hea võimalus, et see on teie sihitud resolutsioon.
- 1920x1080 kõige tavalisem - Kui mõtlete lauaarvutitele, tegelete tõenäoliselt 1920x1080, paremini tuntud kui 1080p. See resolutsioon on absoluutselt kõikjal. Enamik lauaarvuti kuvareid on endiselt 1080p ja ka palju täissuuruses sülearvuteid. Samuti leiate maastikult korraliku osa tahvelarvuteid 1080p-s.
- 2560x1440 - 1440p on monitori eraldusvõimega pildil veel üks kummaline kesktee. See on kõrgem kui see, mida võiksite pidada 2k-ks, kuid see pole päris 4k. See tähendab, et see on mängude kuvamise turul levinud resolutsioon ja see on taskukohane alternatiiv 4k täisekraanile jõudmiseks. Sõltuvalt teie saidist tasub 1440p-d toetada või mitte.
- 3840x2160 Lähitulevik - See on täis 4k või Ultra HD. Kui praegu on 4k reserveeritud tavaliselt kõrgema klassi arvutitele, siis hinnad langevad, graafikatehnoloogia paraneb ja nõudlust 4k järele ajab teleturg, kus see on palju tavalisem. Võib kindlalt eeldada, et järgmise paari aasta jooksul ületab 4k de facto standardina hõlpsasti 1080p, seega tasub kindlasti nüüd 4k arvestada.
Tavalised tahvelarvuti / maastiku eraldusvõimed
Tahvelarvutid ei pruugi olla nii populaarsed kui kunagi varem, ja näib, et kasvavad telefonimõõdud koos konverteeritavate sülearvutitega on nende turuosa oluliselt vähendanud. Isegi sellegipoolest kattub tahvelarvutite eraldusvõimete arvestamine märkimisväärselt laua- ja sülearvutitega. Võimalik, et saate tahvelarvutite katkestuspunkte luua murdepunktide jaoks teatud tülikate elementide jaoks, mis ei sobi teatud eraldusvõimega õigesti.
- Portreerežiimis hoitavate seadmete puhul peaksite kindlasti arvestama ka tahvelarvutite eraldusvõimega. Mitte igaüks ei sirvita oma tahvelarvutis horisontaalselt, nii et peaksite lisama vähemalt ühe murdepunkti ühise tahvelarvuti jaoks, mida hoitakse püsti.
- 1280x800 eraldusvõime, mis varem oli tavaline - Vanemates tablettides, madalama klassi tablettides ja väiksemates tahvelarvutites on tavaliselt mõned Amazon'i Fire tabletid ka 1280x800. See on tahvelarvutites üks viimaseid tõeliselt mobiilseid resolutsioone.
- 1920x1200 tavaline 7 "ja 8" tahvelarvutil - Maastikus saate enamasti loota samadele murdepunktidele kui 1080p. Kui aga ühte sellist maastikul näete, on olukord palju erinev. See eraldusvõime on levinud paljude 7- ja 8-tolliste tahvelarvutite hulgas, sealhulgas Amazon Fire.
- 2048x1536 Apple'i tabletid -See on Apple'i kõige tavalisem tahvelarvutite eraldusvõime. See on piisavalt sarnane 1440p-ga, et muuta väga vähe erinevusi, kuid jällegi on portree ebatavaline. Igal juhul on mõistlik oma saiti selle eraldusvõimega testida, tagamaks, et iPadides midagi imelikku ei juhtuks.
Kõrgema eraldusvõimega tahvelarvutid hakkavad jõudma töölaua territooriumile. Enamasti ei pea te neid isegi arvestama, sest eraldusvõime langeb vahemikku, mille olete juba arvestanud. Alati on hea mõte siiski proovida, et selles täiesti kindel olla.
Levinud mobiilsed eraldusvõimed
Mobiilseadmete käsitsemine on hõlpsasti kõige keerulisem. Seadmeid on nii mitmekesine, sealhulgas ka vanemaid seadmeid, mida pole veel lihtne katta. Sellepärast on mobiiltelefoni esimene disain nii populaarne. Filosoofia on lihtne. Alustage kõigepealt kõige lihtsamast mobiilikujundusest ja kasutage seda suuremate ja suuremate ekraanide jaoks. Nii töötavad ka kõige vanemad ja väiksemad seadmed, kuid vähem sisu ja vähemate funktsioonidega. Sait ei ole takistatud, vaid lihtsalt kuvatakse kõigepealt ainult kõige olulisem ja sagedamini juurdepääsetav teave.
Siin on huvitav nipp telefonidega tegelemiseks; keerake töölaua eraldusvõimed nende poolele. Muidugi on ebatavalisi kõrvalekaldeid, kuid enamik praeguseid telefone järgib seda mustrit.
- 720x1280 levinud vanemates seadmetes - mitu aastat oli küljele pööratud 720p kõige tavalisem mobiilseadme standard. Sel juhul ei pea te muretsema maastikurežiimi pärast, kuna see on sama mis töölaua 720p. Katke lihtsalt portree eraldusvõime laiusega 720 pikslit.
- 1080x1920 kesktee - 1080p on olnud standard juba pikka aega. Keskklassi seadmetes on see endiselt väga levinud. Kui kavatsete toetada ainult ühte mobiilset eraldusvõimet, on see kõik.
- 1440x2560 praegune tipptasemel - Mobiilseadmed muutuvad üha suuremaks ja ekraanid muudavad üha suuremat eraldusvõimet. 1440p on huvitav standard, kuna sellesse vahemikku langevad erinevad ekraanilaiused - antud juhul pikkused. Nii laua- kui ka mobiilseadmetes on kõige tavalisem 1440x2560. See annab ekraanile ühise kuvasuhte 16: 9. Mobiilseadmes on see veidi väiksem kui lauaarvutitel, sest seadme pikkus ei mõjuta teie kujundust eriti.
Enne kui toetate õnnelikult vaid kolme mobiiliresolutsiooni, peaksite ka mõistma, et mõned inimesed kasutavad naeruväärselt vanu pisikeste ekraanidega telefone. Alati peaksite olema madalaima eraldusvõimega, tagamaks, et teie sait näeb hea välja isegi mitme aasta tagust telefoni kasutavale inimesele.
Lihtsad nõuanded, mida meeles pidada
Ekraani eraldusvõimete, äravoolu ja kujunduste mõnitamise kohta on lihtne võtta hunnik fakte ja just siis, kui satute hätta. Veebisaidi kujundamisel tuleb meeles pidada mõnda peamist ideed, ja need peavad paika enamikus, kui mitte kõigis olukordades.
- Reageeriv disain on sujuv - Võimalik, et soovite oma CSS-i luua tohutu hulga katkestuspunkte, et võtta arvesse kõiki võimalikke ekraani suurusi ja olukordi. See on suurepärane viis ennast hulluks ajada. Tundlik veebidisain on mõeldud piisavalt paindlikuks, et täita lünki ja ebakorrapärasusi. Kui leiate, et määratlete liiga palju staatilisi numbreid, olenemata sellest, kas need on meediaküsimustes või elementide enda jaoks, olete tõenäoliselt valel teel.
- Inimesed ei maksimeeri alati oma brauserit - Selline käib eelmise punktiga käsikäes. Sa saad disain ekraani suuruste jaoks, kuid kui keegi ei suurenda oma brauseriakent, maksab kõik see suitsu. Hoides asju disainilahenduses, saate vältida probleeme brauseriakende erineva suurusega.
- Testi kõike - Proovige oma saiti murda. Ainult nii leiate kõik vead ja vastuolud, mis rikuvad külastaja kogemuse. Chrome'is on sisseehitatud tööriistad seadme eraldusvõimete testimiseks koos populaarseimate seadmete täieliku loendiga, millega töötada. Teil on alati võimalus lohistada oma brauseriaken ise erinevatesse suurustesse, et näha nii seda, kuidas sait erinevat suurust näeb, kui ka seda, kuidas see kohaneb ja puruneb.
- Ärge oodake, et teie kasutajatel oleks uusim ja parim - See läheb tagasi eelmisele punktile vanemate telefonide ja väikeste eraldusvõimete kohta. Ei saa eeldada, et inimestel on uued seadmed. See kehtib nii ekraani eraldusvõime kui ka töötlemisvõimsuse kohta. Liiga palju graafikat ja liiga palju saidi laadimine JavaScripti on hea viis aeglase seadmega inimeste lahkumiseks ja enam mitte kunagi naasmiseks.