Ensimmäinen asia, mitä useimmat suunnittelijat pitävät web-sivunsa rakentamisena, on se, minkälainen ratkaisu on suunnitella. Se, mikä tosiasiassa on, on päättää, kuinka laaja sinun suunnittelusi on. Tällä hetkellä ei ole olemassa sellaista asiaa kuin tavallinen verkkosivujen leveys.
Miksi kannattaa harkita päätöslauselmaa
Vuonna 1995 standardin 640x480-tarkkuusmonitorit olivat suurimmat ja parhaat monitorit saatavilla. Tämä tarkoitti sitä, että web-suunnittelijat keskittyivät tekemään sivut, jotka näyttävät hyviltä web-selaimissa, maksimoivat 12 tuuman 14 tuuman näytön tällä resoluutiolla.
Nykyään 640x480-resoluutiolla on vähemmän kuin 1 prosenttia useimmista verkkosivustojen liikenteestä. Ihmiset käyttävät tietokoneita, joissa on paljon suuremmat resoluutiot, kuten 1366x768, 1600x900 ja 5120x2880. Monissa tapauksissa 1366 x 768 -resoluutionäyttö toimii.
Olemme web-suunnittelun historiassa, jossa emme tarvitse huolehtia paljon päätöslauselmasta. Useimmilla ihmisillä on suuret, laajakuvamuodot ja ne eivät maksimoi selainikkunaansa. Joten jos päätät suunnitella sivua, joka ei ole enempää kuin 1366 pikseliä leveä, sivusi näyttää todennäköisesti hyvin useimmilta selaimen ikkunoilta myös suurilla näytöillä, joilla on korkeammat resoluutiot.
Selaimen leveys
Ennen kuin lähdet ajattelemaan "okei, teen sivuni 1366 pikseliä leveäksi", tämä tarina on enemmän. Yksi usein sivuutettu ongelma, kun päätät web-sivun leveydestä, on kuinka suuri asiakkaasi pitävät selaimissaan. Erityisesti he maksimoivat selaimesi koko näytön koolla vai pitävätkö ne pieninä koko näytössä?
Yhdessä epävirallisessa tutkimuksessa, jossa työskentelivät kaikki työntekijät, jotka käyttivät yritystandardin 1024x768 resoluutiolevyllä varustettuja kannettavia tietokoneita, kaksi säilytti kaikki sovelluksensa maksimaalisesti. Loppu oli eri kokoisista ikkunoista avoin monista eri syistä. Tämä osoittaa, että jos suunnittelet tämän yrityksen intranetä 1024 pikselin leveäksi, 85 prosenttia käyttäjistä joutuu selattamaan vaaka-arvoa nähdäksesi koko sivun.
Kun olet ottanut asiakkaita, jotka maksimoivat tai eivät, ajattele selainrajoja. Jokaisella verkkoselaimella on vierityspalkki ja reunat, jotka pienentävät käytettävissä olevaa tilaa 800: sta noin 740 pikseliin tai pienempiin 800x600-tarkkuuksiin ja noin 980 pikseliin maksimaalisissa ikkunoissa 1024 x 768 resoluutiolla. Tätä kutsutaan selaimeksi "kromi" ja se voi ottaa pois sivusi suunnittelun käyttökelpoisesta tilasta.
Kiinteät tai nestemäiset sivut
Todellinen numeerinen leveys ei ole ainoa asia mitä sinun tarvitsee ajatella suunniteltaessa sivustosi leveyttä. Sinun on myös päätettävä, onko sinulla kiinteä leveys tai nesteen leveys . Toisin sanoen aiotko asettaa leveyden tiettyyn numeroon (kiinteä) tai prosenttiseen (nesteeseen)?
Kiinteä leveys
Kiinteät leveys-sivut ovat aivan kuin ne kuulostavat. Leveys on kiinteä tiettyyn numeroon, eikä se muutu riippumatta siitä, kuinka suuri tai pieni selain on. Tämä voi olla hyvä, jos tarvitset suunnittelusi näyttävän täsmälleen samalta riippumatta siitä, kuinka leveä tai kapea lukijan selaimet ovat, mutta tämä menetelmä ei ota huomioon lukijasi. Selaimilla, jotka ovat kapeampia kuin suunnittelusi, täytyy selata vaakasuoraan, ja suurilla selaimilla on runsaasti tyhjää tilaa näytöllä.
Jos haluat luoda kiinteän leveyden sivuja, käytä tiettyjen pikselien numeroita sivusiosioiden leveydelle.
Nestemäinen leveys
Nestemäiset leveyssivut (joskus kutsutaan joustaviksi leveyssivuiksi) vaihtelevat leveydeltään sen mukaan, kuinka leveä selainikkuna on. Näin voit suunnitella sivuja, jotka keskittyvät enemmän asiakkaisiisi. Nesteiden leveyssivujen ongelma on, että niitä voi olla vaikea lukea. Jos tekstin rivin pituus on pitempi kuin 10-12 sanaa tai lyhyempi kuin 4-5 sanaa, voi olla vaikea lukea. Tämä tarkoittaa, että lukijoilla, joilla on suuret tai pienet selainikkunat, on ongelmia.
Jos haluat luoda joustavia leveyssivuja, käytä prosenttiosuuksia tai ems-arvoja sivusiosastojen leveydelle. Perehdy CSS max-width -ominaisuuksiin. Tämän ominaisuuden avulla voit asettaa leveyden prosentteina, mutta rajoittaa sen niin, että se ei ole niin suuri, että ihmiset eivät voi lukea sitä.
Ja voittaja on: CSS Media Queries
Paras ratkaisu näinä päivinä on käyttää CSS-mediakyselyjä ja reagoivaa muotoilua luoda sivulle, joka sopeutuu selaimen leveyteen katsomalla sitä. Reagoiva web-suunnittelu käyttää samaa sisältöä verkkosivun luomiseen, joka toimii, katsotko sitä 5120 pikseliä tai 320 pikseliä leveä. Erikokoiset sivut näyttävät erilaisilta, mutta ne sisältävät saman sisällön. Median kyselyssä CSS3: ssä kukin vastaanottava laite vastaa kyselyyn sen kokoa käyttäen, ja tyyliarkki mukautuu kyseiseen kokoon.