Die eerste ding wat die meeste ontwerpers oorweeg wanneer hulle hul webblad bou, is watter resolusie om te ontwerp. Wat dit regtig behels, is om te besluit hoe breed jou ontwerp moet wees. Daar is nie meer so iets soos 'n standaard webwerfwydte nie.
Hoekom Oorweeg Resolusie
In 1995 was die standaard 640x480 resolusie monitors die grootste en beste monitors beskikbaar. Dit het beteken dat webontwerpers gefokus het op die maak van bladsye wat goed lyk in webblaaiers wat op 'n 12-inch tot 14-duim-monitor gemaksimeer is.
Tans is die resolusie van 640x480 minder as 1 persent van die meeste webwerfverkeer. Mense gebruik rekenaars met baie hoër resolusies, insluitend 1366x768, 1600x900 en 5120x2880. In baie gevalle, ontwerp vir 'n 1366x768 resolusie skerm werk.
Ons is op 'n punt in die geskiedenis van webontwerp waar ons nie baie oor die besluit hoef te bekommer nie. Die meeste mense het groot wye skerm monitors en hulle maksimeer nie hul blaaier venster nie. So as jy besluit om 'n bladsy te ontwerp wat nie meer as 1366 pixels wyd is nie, sal jou bladsy waarskynlik goed lyk in die meeste blaaier vensters selfs op groot skerms met hoër resolusies.
Browser Breedte
Voordat jy gaan dink "oke, sal ek my bladsye 1366 pixels wyd maak," daar is meer aan hierdie storie. 'N Oorsaak wat dikwels oor die hoof gesien word wanneer die wydte van 'n webblad bepaal word, is hoe groot jou kliënte hul blaaiers behou. Spesifiek, maksimeer hulle hul blaaiers op 'n volle skerm grootte of hou hulle hulle kleiner as die volle skerm?
In een informele opname van mede-werkers wat almal 'n maatskappy-standaard 1024x768-resolusie-skootrekenaar gebruik het, het twee al hul aansoeke gemaksimeer. Die res het verskillende groottes vir verskillende redes oopgemaak. Dit illustreer dat indien u die intranet van hierdie maatskappy teen 1024 pixels breed ontwerp, 85 persent van die gebruikers moet skuif om die hele bladsy te sien.
Nadat jy rekening gehou het met kliënte wat maksimeer of nie, dink aan die blaaiergrense. Elke webblaaier het 'n skuifbalk en grense aan die kante wat die beskikbare spasie van 800 tot ongeveer 740 pixels of minder op 800x600 resolusies en ongeveer 980 pixels op gemaksimeerde vensters verminder teen 1024x768 resolusies. Dit staan bekend as blaaier "chrome" en dit kan wegneem van die bruikbare spasie vir jou bladsyontwerp.
Vaste of vloeibare breedte bladsye
Die werklike numeriese wydte is nie die enigste ding wat jy moet oorweeg wanneer jy die breedte van jou webwerf ontwerp nie. Jy moet ook besluit of jy 'n vaste wydte of vloeistofwydte sal hê. Met ander woorde, gaan jy die breedte spesifiseer tot 'n spesifieke getal (vas) of tot 'n persentasie (vloeistof)?
Vaste Breedte
Vaste wydte bladsye is presies soos hulle klink. Die breedte is vasgestel op 'n spesifieke nommer en verander nie, maak nie saak hoe groot of klein die blaaier is nie. Dit kan goed wees as jy jou ontwerp nodig het om presies dieselfde te lyk, ongeag hoe breed of smal jou lesers se blaaiers is, maar hierdie metode hou nie jou lesers in ag nie. Mense met blaaiers smaller as jou ontwerp sal horisontaal moet skuif, en mense met wye blaaiers sal groot hoeveelhede leë spasie op die skerm hê.
Om bladsye met vaste breedte te maak, gebruik net spesifieke pixel nommers vir die breedte van jou bladsy afdelings.
Liquid Width
Vloeistofwydte bladsye (soms genoem buigbare breedte bladsye) wissel in breedte, afhangende van hoe breed die blaaier is. Hierdeur kan u bladsye ontwerp wat meer op u kliënte fokus. Die probleem met vloeibare breedte bladsye is dat dit moeilik kan wees om te lees. As die skandeer lengte van 'n reël teks langer as 10 tot 12 woorde of korter as 4 tot 5 woorde is, kan dit moeilik wees om te lees. Dit beteken dat lesers met groot of klein blaaier vensters probleme het.
Om buigbare bladsye te skep, gebruik persentasies of ems vir die breedte van jou bladsyafdelings. U moet u ook vertroud maak met die CSS-breedte-eiendom. Met hierdie eienskap kan u 'n wydte in persentasies stel, maar beperk dit dan sodat dit nie so groot word dat mense dit nie kan lees nie.
En die Wenner Is: CSS Media Navrae
Die beste oplossing hierdie dae is om CSS-media navrae en reageer ontwerp te gebruik om 'n bladsy te skep wat pas by die wydte van die leser wat dit sien. 'N Reageerbare webontwerp gebruik dieselfde inhoud om 'n webblad te skep wat werk of jy dit sien op 5120 pixels wyd of 320 pixels wyd. Die verskillende grootte bladsye lyk anders, maar hulle bevat dieselfde inhoud. Met die media navraag in CSS3, beantwoord elke ontvangende toestel die soektog met sy grootte, en die stylvel pas by die betrokke grootte aan.