Fixed Width Layouts Versus Liquid Layouts

click fraud protection

Websides layout følger en af ​​to forskellige tilgange:

  • Layout med fast bredde: Dette er layout, hvor bredden af ​​hele siden er indstillet med en bestemt numerisk værdi.
  • Flydende layout: Dette er layout, hvor bredden på hele siden er fleksibel afhængigt af hvor bred seerens browser er.

Der er gode grunde til at bruge begge layoutmetoder, men uden at forstå begge den relative fordele og mangler ved hver metode, kan du ikke træffe en god beslutning om, hvilken du skal bruge til dit web side.

Layout med fast bredde

Faste layouts er layouts, der starter med en bestemt størrelse som angivet af webdesigneren. De forbliver i denne bredde, uanset størrelsen på browservinduet, der ser siden. Layout med fast bredde giver en designer mere direkte kontrol over, hvordan siden vil se ud i de fleste situationer. De foretrækkes ofte af designere med baggrundsprint, da de gør det muligt for designeren at foretage små justeringer af layoutet og få dem til at forblive konsistente på tværs af browsere og computere.

instagram viewer

Flydende layout

Flydende layout er layout, der er baseret på procentdele af det aktuelle browservindus størrelse. De bøjer sig med vinduets størrelse, selvom den aktuelle seer ændrer sin browserstørrelse, når han ser på siden. Layouts med flydende bredde muliggør en effektiv udnyttelse af den plads, der gives af et hvilket som helst givent browservindue eller skærmopløsning. De foretrækkes ofte af designere, der har meget information n til at komme igennem på så lidt plads som muligt, da de forbliver ensartede i størrelse og relative sidevægte, uanset hvem der ser på side.

Hvad er der på spil?

Dit webstedsdesign påvirker din webstedets lydhørhed og tilpasningsevne. Afhængigt af hvilket du vælger, kan dine læseres evne til at scanne din tekst, finde det, de leder efter eller nogle gange endda bruge dit websted, blive hjulpet eller forhindret. Dit websteds samlede brandidentitet kan også være i fare, især hvis dine brandstandarder følger en print-første logikmodel.

Fordele ved layout med fast bredde

Et layout med fast bredde er nyttigt under visse omstændigheder.

  • Et layout med fast bredde giver designeren mulighed for at opbygge sider, der ser ens ud, uanset hvem der ser på dem.
  • Elementer med fast bredde, såsom billeder, overvælder ikke tekst på mindre skærme, fordi bredden på hele siden inkluderer disse elementer.
  • Scanningslængden påvirkes ikke af store tekstsegmenter, uanset hvor bred browseren er.

Fordele ved flydende layout

Et flydende layout fungerer bedst under andre omstændigheder.

  • Et layout med væskebredde udvides og trækker sig sammen for at udfylde den tilgængelige plads.
  • Al tilgængelig fast ejendom bruges, så designeren kan vise mere indhold på større skærme, men stadig være levedygtig på mindre skærme.
  • Flydende layout giver konsistens i relative bredder, så en side kan reagere mere dynamisk på kundepåførte begrænsninger som større skriftstørrelser.

Ulemper ved faste bredde-layout

Et fast format er dog ikke uden omkostninger.

  • Layout med fast bredde tvinger vandret rulning i mindre browservinduer. De fleste mennesker kan ikke lide at rulle vandret.
  • De efterlader store hvide områder i større skærme, hvilket resulterer i en masse ubrugt plads og mere rulning lodret, end der ellers kunne være nødvendigt.
  • Layout med fast bredde håndterer ikke kundernes ændringer af skriftstørrelser meget godt. Ved små stigninger i skriftstørrelsen kan de være okay, men ved større stigninger kan layoutet blive kompromitteret.

Ulemper ved flydende layout

Flydende layout er også ikke uden deres ulemper.

  • Flydende layout muliggør meget lidt præcis kontrol over bredden af ​​de forskellige sider på siden.
  • De kan resultere i tekstkolonner, der enten er for brede til at scanne komfortabelt eller i mindre browsere for små til, at ordene kan vises tydeligt.
  • Fejl i flydende layout, når et fast breddeelement, såsom et billede, placeres inde i en væskesøjle. Hvis kolonnen gengives uden plads nok til billedet, vil nogle browsere øge kolonnebredden, ignorerer designerens instruktioner, mens andre browsere tvinger overlapninger i tekst og billeder for at opnå det korrekte procenter.

Layoutpræference og blandede tilgange

Nogle designere foretrækker at blande disse koncepter. De kan ikke lide at bruge flydende layout til store tekstblokke, da denne struktur gør teksten enten ulæselige på en lille skærm eller ikke kan scannes på en stor. Så de har tendens til at gøre hovedkolonnerne på sider til en fast bredde, men lave sidehoveder, sidefødder og side søjler mere fleksible til at optage den resterende fast ejendom og ikke miste kapaciteten på større browsere.

Nogle websteder bruger scripts til at bestemme størrelsen på din browservindue og derefter ændre skærmelementerne i overensstemmelse hermed. For eksempel, hvis du åbner et sådant sted i et meget bredt vindue, kan du få en ekstra kolonne med links på venstre side, som besøgende med mindre skærme muligvis ikke ser. Tekstindpakning omkring reklame afhænger også af, hvor bredt dit browservindue er. Hvis det er bredt nok, vil webstedet vikle tekst omkring det, ellers vil det vise artikleteksten under annoncen. Mens de fleste websteder ikke har brug for dette kompleksitetsniveau, viser det en måde at drage fordel af større skærme uden at påvirke skærmen på mindre skærme.

instagram story viewer