Veebilehe laiuse määratlemine

Esimene asi, mida enamik disainereid oma veebi lehe ehitamisel kaalub, on disainilahenduse lahendus. Mida see tegelikult tähendab, kui otsustada, kui palju peaks teie disain olema. Sellist asja pole enam tavalise veebisaidi laiusena.

Miks kaaluda resolutsiooni

1995. aastal olid suurimad ja parimad monitorid saadaval standardsete 640x480 resolutsioonimonitoridega. See tähendas seda, et veebidisainerid keskendusid veebisirvijatele sobivate lehtede loomisele, mille maksimaalne resolutsioon on 12-tolline kuni 14-tolline monitor.

Nendel päevadel on resolutsioonis 640x480 kujutatud vähem kui 1 protsenti enamiku veebisaidi liiklusest. Inimesed kasutavad palju kõrgema resolutsiooniga arvuteid, sh 1366x768, 1600x900 ja 5120x2880. Paljudel juhtudel töötab 1366x768 eraldusvõimega ekraani kujundamine.

Me oleme veebidisaini ajaloos, kus me ei pea muret resolutsiooni pärast. Enamikul inimestel on suured laiekraanmonitorid ja nad ei maksime oma brauseriakent. Nii et kui soovite kujundada lehte, mille laius ei ületa 1366 pikslit, näeb lehti enamikus brauseri aknades ilmselt ilusalt isegi suurte resolutsioonidega suurte monitoridega.

Brauseri laius

Enne kui lähete mõtlema: "Olgu, ma teen lehtedeks 1366 pikslit," on see lugu rohkem. Veebilehe laiuse üle otsustamisel on sageli tähelepanuta jäänud probleem kui suur on teie klientide brauserite arv. Täpsemalt, kas nad maksimeerivad oma brauserite täisekraanisuuruses või hoiavad nad neid täisekraaniga väiksematena?

Ühes mitteametlikus küsitluses kaastöötajad, kes kõik kasutasid ettevõtte standardile vastavat 1024x768 resolutsiooniga sülearvuti, hoidsid kahte oma rakendusi maksimeerituna. Ülejäänud olid mitmesugustel põhjustel avatud erineva suurusega aknad. See näitab, et kui teete selle ettevõtte sisevõrku 1024-pikslilises laiuses, peaks 85% kasutajatest tervele lehele vaatama horisontaalselt kerima.

Kui olete konto klientidele, kes maksimeerivad või mitte, mõtle brauseri piiridele. Igal veebibrauseris on kerimisriba, mis piirneb külgedega, mis vähendavad 800-st kuni ligikaudu 740 pikslit 800x600 resolutsiooniga ja ligikaudu 980 pikslit maksimaalsete akende puhul resolutsioonidega 1024x768. Seda nimetatakse brauseriks "chrome" ja see võib eemaldada lehe disaini kasutatavast ruumist.

Fikseeritud või vedeliku laiusega lehed

Tegelik numbriline laius pole ainus asi, mida pead oma veebisaidi laiuse kujundamisel mõtlema. Samuti peate otsustama, kas teil on fikseeritud laius või vedeliku laius . Teisisõnu, kas kavatsete määrata laiuse kindla arvu (fikseeritud) või protsendi (vedeliku)?

Fikseeritud laius

Fikseeritud laiusega lehed on täpselt nii nagu nad helistavad. Laius on fikseeritud kindlale numbrile ja ei muutu olenemata sellest, kui suur või väike brauser on. See võib olla hea, kui vajate oma kujundust, et vaadata täpselt sama, olenemata sellest, kui laiad või kitsad on teie lugejate brauserid, kuid see meetod ei võta arvesse teie lugejaid. Inimesed, kellel on teie disainiga kitsamad brauserid, peavad kerima horisontaalselt, ja laiade brauseritega inimestel on ekraanil palju ruumi.

Fikseeritud laiusega lehtede loomiseks kasutage lehe alagarantii laiustes ainult konkreetseid piksliteid.

Vedel laius

Vedelaiuse lehed (mõnikord nimetatakse paindliku laiusega lehtedeks) sõltuvalt brauseriakna laiusest sõltuvad laiusest. See võimaldab teil kujundada lehti, mis keskenduvad rohkem teie klientidele. Probleem vedela laiusega lehtedega on see, et neid on raske lugeda. Kui teksti rea skaneerimispikkus on pikem kui 10 kuni 12 sõna või lühem kui 4 kuni 5 sõna, võib seda lugeda raskeks. See tähendab, et lugejatel, kellel on suurte või väikeste brauseri aknad, on probleeme.

Paindliku laiusega lehtede loomiseks kasutage lihtsalt lehe jagude laiustes protsente või emeid . Samuti peaksite tutvuma CSS max-laiuse omadustega. See omadus võimaldab teil määrata laiuse protsentides, kuid piirata seda nii, et see ei muutuks nii suuriseks, et inimesed ei saaks seda lugeda.

Ja võitja on: CSS Media Queries

Nüüd on parim lahendus kasutada CSS-i meediumipäringuid ja reageerivat disaini, et luua leht, mis kohandub selle brauseri laiusega, kus seda vaadatakse. Vastutustundlik veebidisain kasutab sama sisu, et luua veebileht, mis töötab siis, kui vaatate seda 5120 pikslit laias või 320 pikslit. Erineva suurusega lehed erinevad, kuid need sisaldavad sama sisu. CSS3 meediumipäringuga vastab iga vastuvõttev seade päringu suurusele ja stiilileht kohandatakse selle konkreetse suurusega.