Væske, fast og elastisk Web Design, Explained

Når du bruker CSS til å style en nettside er det tre primære layout typer tilgjengelig for webdesignere. Denne veiledningen tar sikte på å utstyre deg med den informasjonen du trenger å vite for å gjøre et mer informert beslutning når du velger hvordan du skal designe din webside prosjekter.

Alternativer

De tre viktigste layout stiler for å bestemme bredden på nettsteder -. Fluid, fast og elastisk Alle har sine egne meritter. Det er også ulemper med disse utforme mønstre, så det er viktig å vite best situasjon der å bruke hver type layout.

Fluid Layout

Også omtalt som en flytende layout, er populær attraksjon til denne stilen av layout i full bruk av skjermen eiendomsmegling slik at du kan få mye av innholdet på websiden din. Den flytende layout gjør designere til å ikke angi en wrapper bredde. I stedet innholdet på nettstedet ditt bestemmes av visning bredden på brukerens nettleser, noe som betyr at du ikke trenger å bekymre deg for minimum og maksimum dimensjonering av informasjon. Nettsteder som benytter en væske layout design inkluderer Amazon og Play .

Den flytende layout kan forårsake problemer for nettlesere som IE som ikke støtter egenskaper du kanskje ønsker å bruke til å angi maksimalt bredder av innhold. Dette kombinert med det faktum at å fylle nettsider med innhold som kan være dårlig fra et usability perspektiv setter ofte folk bort vedta oppsettet format.

Fast Layout

Som navnet antyder fast oppsett stopper nettleseren fra å ha frihet til å formatere tekst slik den finner hensiktsmessig, er dette en av de mest populære teknikkene på nettet, med nettsteder som facebook og BBC bruk av design. Dette betyr i utgangspunktet at bredden innholdet befinner seg på og forblir fast uansett hva, dette er vanligvis oppnås ved hjelp av noe som kalles en wrapper, eller container, som inneholder alt innholdet i den. Den faste bredde design kan settes til venstre, midtre eller høyre på en side, veldig enkelt.

Den virkelige bonus av å jobbe med en fast bredde design er at du kan sette bilder og design rundt betraktning at din bredde vil alltid være den samme. Dette er en reell positiv hvis du ønsker en banner image, for eksempel behov som å være 900px, vil du ikke ha problemer når endre størrelse, saker som du ville møte med en væske design.

Ulempen med en fast design er imidlertid Dead Space som du sitter igjen med hvor ditt design ikke fylle siden. Et fast bredde design kan også tvinge designere å prioritere. Som et nettsted vokser og innhold konkurrerer for topp plassering, må det framleis passe innenfor en bestemt bredde.

Elastisk Layout

Den endelige utformingen er kjent som elastisk. Ofte forvekslet med væske oppsett, elastiske oppsett aktivere en nettside for å proporsjonalt passe skjermen det vises på. Dette kan oppnås enten ved hjelp av EMS eller%. Når en bruker utvider tekststørrelsen av deres nettleser resten av nettsiden vil utvide så vel fordi målingene er basert på variabler i motsetning til å sette størrelser. Hotmail har nylig utviklet sitt nettsted å bruke en elastisk design. Hvis du ser på skriftstørrelser, vil du merke de er satt i prosenter for å få mest mulig ut av brukerne setup.

Av de tre designstiler dette er den minst populære fordi det er minst gunstig for brukerne opplever. Den variable naturen kan gjøre det problematisk for en brukeropplevelse. Kombinert med mangel av nettleseren støtte på plattformer som IE6, gjør denne utformingen upopulære med designere som ønsker å styre klar av nettleseren uforlikelighet problemer.

Roundup

Det er styrkene og svakhetene til alle design patterns jeg har nevnt. Ved å veie opp fordeler og ulemper kan du gjøre en utdannet beslutning før du tar fatt på neste web prosjekt. Du vet at problemer og løsninger på problemer før du støter på dem.