Ensimmäinen asia, jonka useimmat suunnittelijat harkitsevat verkkosivunsa rakentamisessa, on mitä resoluutio suunnitella. Mitä tämä todella tarkoittaa, on päättää, kuinka leveä suunnittelusi tulisi olla. Tavallista verkkosivuston leveyttä ei ole enää olemassa.
Miksi harkita päätöslauselmaa
Vuonna 1995 tavalliset 640 x 480 pikselin näytöt olivat suurimmat ja parhaat käytettävissä olevat näytöt. Tämä tarkoitti sitä, että verkkosuunnittelijat keskittyivät tekemään verkkosivuilla hyvältä näyttäviä sivuja maksimoiduna 12 - 14 tuuman näytöllä tällä resoluutiolla.
Nykyään 640 x 480 -resoluutio muodostaa alle prosentin suurimmasta osasta verkkosivustoliikennettä. Ihmiset käyttävät tietokoneita, joiden tarkkuus on paljon suurempi, mukaan lukien 1366 x 768, 1600 x 900 ja 5120 x 2880. Monissa tapauksissa suunnittelu 1366 x 768 -resoluutionäytölle toimii.
Todya, useimmilla ihmisillä on suuret laajakuvanäytöt, eivätkä ne maksimoi selainikkunaansa. Joten jos päätät suunnitella sivun, jonka leveys on enintään 1366 pikseliä, sivu näyttää todennäköisesti hyvältä useimmissa selainikkunoissa, jopa suurissa, korkeamman resoluution näytöissä.
Selaimen leveys
Yksi usein unohdettu ongelma, kun päätetään verkkosivun leveydestä, on se, kuinka suuri asiakkaasi pitää selaimensa. Maksimoivatko he erityisesti selaimensa koko ruudun koossa vai pitävätkö ne pienempiä kuin koko näyttö?
Kun olet tilannut asiakkaita, jotka maksimoivat tai eivät, ajattele selaimen rajoja. Jokainen selain käyttää vierityspalkkia ja reunustaa sivut, jotka kutistavat käytettävissä olevan tilan 800: sta noin 740 pikseliä tai vähemmän 800 x 600 resoluutiolla ja noin 980 pikseliä maksimoiduissa ikkunoissa 1024 x 768 päätöslauselmia. Tätä kutsutaan selaimeksi kromi ja se voi viedä sivusi suunnittelussa käytettävissä olevan tilan.
Kiinteät tai nestemäiset sivut
Todellinen numeerinen leveys ei ole ainoa asia, joka sinun on ajateltava suunniteltaessasi verkkosivustosi leveyttä. Sinun on myös päätettävä, onko sinulla kiinteä tai nesteen leveys. Toisin sanoen, aiotko asettaa leveyden tiettyyn lukuun (kiinteä) vai prosenttiin (neste)?
Kiinteä leveys
Kiinteän leveyden sivut ovat aivan kuin kuulostavat. Leveys on kiinteä tietylle numerolle, eikä se muutu riippumatta siitä, kuinka suuri tai pieni selain on. Tämä lähestymistapa voi olla hyvä, jos tarvitset suunnittelusi näyttämään täsmälleen samalta riippumatta siitä, kuinka leveä tai kapea lukijasi selain on, mutta tämä menetelmä ei ota huomioon lukijaasi. Suunnittelua kapeamman selaimen omaavien on vieritettävä vaakasuunnassa, ja ihmisillä, joilla on laaja selain, ruudulla on paljon tyhjää tilaa.
Luo kiinteän leveyden sivuja käyttämällä tiettyjä pikselilukuja sivujakaumiesi leveyksiin.
Nesteen leveys
Nestemäiset sivut (joskus kutsutaan joustavan leveyden sivut) vaihtelevat leveyden mukaan selainikkunan leveydestä riippuen. Tämä strategia tuo malleja, jotka keskittyvät enemmän asiakkaisiin. Nestemäisten sivujen ongelmana on, että niitä voi olla vaikea lukea. Jos skannauksen pituus tekstirivin pituus on yli 10-12 sanaa tai lyhyempi kuin 4-5 sanaa, sitä voi olla vaikea lukea. Tämä tarkoittaa, että lukijoilla, joilla on suuret tai pienet selainikkunat, on ongelmia.
Jos haluat luoda joustavan leveyden sivuja, käytä prosenttiosuuksia tai ems sivujakaumiesi leveyksiin. Tutustu CSS: ään max-leveys omaisuus. Tämän ominaisuuden avulla voit asettaa leveyden prosentteina, mutta sitten rajoittaa sitä niin, että se ei tule niin suuri, että ihmiset eivät voi lukea sitä.
CSS-mediakyselyt
Paras ratkaisu näinä päivinä on käyttää CSS-mediakyselyjä ja reagoivaa suunnittelua sivun luomiseksi, joka sopeutuu sitä katselevan selaimen leveydelle. Reagoiva verkkosuunnittelu käyttää samaa sisältöä sellaisen verkkosivun luomiseen, joka toimii riippumatta siitä, katsotko sen 5120 pikselin vai 320 pikselin leveydellä. Erikokoiset sivut näyttävät erilaisilta, mutta ne sisältävät saman sisällön. CSS3: ssa olevan mediakyselyn avulla kukin vastaanottava laite vastaa kyselyyn kooltaan ja tyylitaulukko sopeutuu kyseiseen kokoon.