Ennen kuin vietät liian kauan suunnittelun tarkkojen näyttöresoluutioiden huomioon ottamisen yhteydessä, muista, että kaikki modernit verkkosuunnittelut ovat reagoivia, eli se on suunniteltu mukautumaan erilaisiin näytön tarkkuudet. Yhden muotoilun avulla sinun on tuettava kaikkea pienimmistä mobiilinäytöistä Ultra HD -työpöydän näyttöihin.
Kanssa reagoiva web-suunnittelu, määrität yleisemmät mobiili-, tabletti- ja työpöytäasettelut. Milloin ja miten kukin sivuelementti siirtyy paikoilleen näille asetteluille, määräytyvät omiin katkoviivoihisi CSS. Nämä katkaisupisteet määritetään tietyillä yleisillä näytön tarkkuuksilla.
Vaikka et kohdista tiettyjä resoluutioita tai aseta kiinteää kokoa malleillesi, harkitset näyttöä tarkkuutta määritettäessä katkaisupisteitä ja luomalla sujuvia siirtymiä, jotta sivustosi näyttää hyvältä kaikilla laitteilla ja näytön koko.
Yleiset työpöydän tarkkuudet
- 1280x720 Vakio HD - Saatat tuntea tämän paremmin kuin 720p. Se oli tavallinen HD-tarkkuus, kun HD oli ensimmäistä kertaa yleinen. Et todennäköisesti löydä monia uusia näyttöjä, jotka käyttävät tätä tarkkuutta, mutta niitä on vielä paljon luonnossa siitä lähtien, kun ne olivat suosittuja.
- 1366x768 - Se on jotain epätavallista resoluutiota, mutta se on erittäin suosittu pienemmissä kannettavissa tietokoneissa ja joissakin tableteissa. Jos olet tekemisissä alemman tason kanssa Chromebookit, on hyvät mahdollisuudet, että tämä on tarkkuus, johon kohdistat.
- 1920x1080 Yleisin - Kun ajattelet työpöytiä, olet todennäköisesti tekemisissä 1920x1080: n, joka tunnetaan paremmin nimellä 1080p. Tämä päätöslauselma on ehdottomasti kaikkialla. Suurin osa työpöydän näytöistä on edelleen 1080p, ja myös monet täysikokoiset kannettavat tietokoneet. Löydät myös kunnollisen osuuden 1080p: n tableteista maisemasta.
- 2560x1440 - 1440p on toinen outo keskitie näytön tarkkuuskuvassa. Se on korkeampi kuin mitä pidät 2k, mutta se ei ole aivan 4k. Se sanoi, että se on yleinen resoluutio pelimonitorimarkkinoilla, ja se on edullinen vaihtoehto täyden 4k: n siirtymiselle. Sivustostasi riippuen 1440p: n tukeminen voi olla tai ei kannata.
- 3840x2160 Lähitulevaisuus - Tämä on täysi 4k tai Ultra HD. Vaikka 4k on nyt varattu yleensä huippuluokan tietokoneille, hinnat laskevat, grafiikkatekniikka paranee ja 4k: n kysyntää ohjaa televisiomarkkinat, joilla se on paljon yleisempää. On turvallista olettaa, että seuraavien vuosien aikana 4k ohittaa helposti 1080p: n tosiasiallisena standardina, joten on ehdottomasti syytä laskea 4k nyt.
Yleiset tabletti- / vaakasuunnittelutarkkuudet
Tabletit eivät välttämättä ole yhtä suosittuja kuin aiemmin, ja kasvavat puhelinkoot, jotka on yhdistetty muunnettaviin kannettaviin tietokoneisiin, näyttävät vähentäneen merkittävästi niiden markkinaosuutta. Silti tablet-laitteiden tarkkuuksien kirjanpito päällekkäin merkittävästi pöytätietokoneiden ja kannettavien tietokoneiden kanssa. Saatat pystyä käyttämään taulutietopisteitä luomaan katkaisupisteitä tietyille ongelmallisille elementeille, jotka eivät sovi oikein tietyissä resoluutioissa.
- Tablet-resoluutiot on ehdottomasti otettava huomioon myös pystysuunnassa pidettävissä laitteissa. Kaikki eivät selaa taulutietokonetta vaakasuorassa, joten sinun on lisättävä vähintään yksi katkaisupiste tavalliselle tabletille, jota pidetään pystysuunnassa.
- 1280x800 Aikaisemmin yleinen resoluutio - Vanhemmilla tableteilla, alemman tason tableteilla ja pienemmillä tableteilla kaikilla on yleensä joitakin Amazonin Fire-tableteista myös 1280x800. Tämä on yksi viimeisistä tablet-laitteiden todella mobiiliresoluutioista.
- 1920x1200 Yhteinen 7 "ja 8" tabletilla - Maisemassa voit useimmiten luottaa samoihin katkaisupisteisiin kuin 1080p. Kuitenkin, kun näet yhden näistä maisemassa, tilanne on paljon erilainen. Tämä päätöslauselma on yleinen runsaasti 7 ja 8 tuuman tabletteja, mukaan lukien Amazon Fire.
- 2048x1536 Apple-tabletit -Tämä on Applen yleisin tablettitarkkuus. Se on tarpeeksi samanlainen kuin 1440p, jotta sillä olisi vain vähän eroa, mutta taas muotokuva on epätavallinen. Joka tapauksessa on hyvä testata sivustosi tällä tarkkuudella varmistaaksesi, että iPadissa ei tapahdu mitään outoa.
Korkeamman resoluution tabletit alkavat päästä työpöydän alueelle. Suurimman osan ajasta sinun ei tarvitse edes ottaa niitä huomioon, koska tarkkuus putoaa alueelle, jonka olet jo ottanut huomioon. On kuitenkin hyvä idea testata, ollaksesi kuitenkin varma.
Yleiset mobiiliresoluutiot
Matkapuhelimet ovat helposti monimutkaisimpia käsitellä. Laitteita on niin monenlaisia, mukaan lukien vanhemmat, jotka ovat edelleen käytössä. Niiden kaikkien peittäminen ei ole helppoa. Siksi mobiilisuunnittelu on niin suosittua. Filosofia on yksinkertainen. Aloita ensin yksinkertaisimmasta mobiilisuunnittelusta ja rakenna sitä suuremmille ja suuremmille näytöille. Näin jopa vanhimmat ja pienimmät laitteet toimivat, mutta vähemmän sisältöä ja vähemmän ominaisuuksia. Sivusto ei ole tukossa, se näyttää vain tärkeimmät ja yleisimmin käytetyt tiedot ensin.
Tässä on mielenkiintoinen temppu puhelimien käsittelyyn; käännä työpöydän päätöslauselmat heidän puolellaan. Toki on epätavallisia poikkeamia, mutta useimmat nykyiset puhelimet noudattavat tätä mallia.
- 720x1280 yleinen vanhemmissa laitteissa - Useiden vuosien ajan kyljelleen käännetty 720p oli yleisin mobiililaitteen standardi. Siinä tapauksessa sinun ei tarvitse huolehtia vaakatilasta, koska se on sama kuin työpöydän 720p. Peitä muotokuvan tarkkuus vain 720 pikselin leveydellä.
- 1080x1920 keskitie - 1080p on ollut vakiona pitkään. Se on edelleen hyvin yleistä keskitason laitteissa. Jos aiot tukea vain yhtä matkapuhelintarkkuutta, tämä on se.
- 1440x2560 nykyinen huippuluokka - Mobiililaitteet kasvavat jatkuvasti ja näytöt yhä suuremmalla tarkkuudella. 1440p on mielenkiintoinen standardi, koska on olemassa useita näytön leveyksiä - tässä tapauksessa pituuksia - jotka kuuluvat tähän alueeseen. Sekä pöytätietokoneissa että mobiililaitteissa yleisin on 1440x2560. Tämä antaa näytölle yhteisen 16: 9-kuvasuhteen. Matkapuhelimella sillä on vähän vähemmän merkitystä kuin työasemilla, koska laitteen pituus ei vaikuta suunnitteluusi paljon.
Ennen kuin tuet mielelläsi vain kolmea mobiiliresoluutiota, sinun on myös ymmärrettävä, että jotkut ihmiset käyttävät naurettavan vanhoja puhelimia pienillä näytöillä. Sinun tulisi aina rakentaa pohjan pienin tarkkuus varmistaaksesi, että sivustosi näyttää hyvältä myös puhelimelle, joka käyttää useita vuosia sitten.
Yksinkertaisia vinkkejä pitää mielessä
On helppo ottaa joukko faktoja näytön tarkkuuksista, valumisesta ja aloittaa mallien pilkkaaminen, ja juuri silloin joutut vaikeuksiin. On muutama keskeinen idea, joka on pidettävä mielessä, kun suunnittelet verkkosivustoa, ja ne pitävät paikkansa useimmissa, ellei kaikissa tilanteissa.
- Reagoiva muotoilu on sujuvaa - Saatat tuntea taipumusta rakentaa massiivinen joukko katkaisukohtia CSS: äänsi, jotta voit ottaa huomioon kaikki mahdolliset ruudun koot ja tilanteet. Se on hieno tapa ajaa itsesi hulluksi. Reagoivan web-suunnittelun on tarkoitus olla riittävän joustava täyttämään aukkoja ja epäsäännöllisyyksiä. Jos huomaat, että määrität liian monta staattista numeroa, olivatpa ne mediakyselyjä tai itse elementtejä, olet todennäköisesti menossa väärälle tielle.
- Ihmiset eivät aina suurenna selainta - Tällainen menee käsi kädessä edellisen kohdan kanssa. Sinä pystyt suunnittelu näytön kooille, mutta kun joku ei maksimoi selainikkunaansa, kaikki tämä menee savuksi. Pitämällä asiat suunnittelunesteessäsi voit välttää selainikkunan erikokoisia ongelmia.
- Testaa kaikki - Yritä rikkoa sivustosi. Se on ainoa tapa, jolla löydät kaikki virheet ja epäjohdonmukaisuudet, jotka pilaavat kävijän kokemuksen. Chromessa on sisäänrakennettuja työkaluja, joiden avulla voidaan testata laiteresoluutioita täydellä luettelolla suosittuja laitteita, joiden kanssa työskennellä. Sinulla on aina mahdollisuus vetää selainikkunasi erikokoisiksi, jotta näet sekä sivuston ulkoasun että sen mukautumisen ja hajoamisen.
- Älä odota käyttäjiltäsi uusinta ja suurinta - Tämä palaa edelliseen kohtaan vanhemmista puhelimista ja pienistä resoluutioista. Et voi odottaa ihmisten olevan uusia laitteita. Tämä koskee sekä näytön tarkkuutta että prosessointitehoa. Sivuston lataaminen, jossa on liian paljon grafiikkaa ja liikaa JavaScript on hyvä tapa saada ihmiset, joilla on hidas laite, lähtemään eivätkä koskaan tule takaisin.