Gummi css skabelon. Anvendelse af positionering i gummidesign

Da de skulle udlægge det næste projekt (eller blot designe et layoutgitter), stod mange over for et dilemma - at bruge en fast layoutbredde eller et "gummi"-gitter, der tilpasser sig størrelsen af ​​browservinduet.

Hver af disse løsninger har sine egne fordele og ulemper. Jeg vil fokusere på minusserne, da det normalt er netop ved at afspejle minusserne ved disse beslutninger, at man skal vælge mellem to onder.

Fast layout gitterbredde

Layoutet er drevet ind i en vandret dimension på 960-980 pixels (så alt passer på de fleste enheder i de fleste opløsninger), hvilket i det store hele vandrette dimensioner vinduet ser på en eller anden måde køligt - tyndt ud lodret stribe nyttigt sideindhold og enorme ubrugelige felter med ubrugt plads på siderne.

"Gummi" layout gitter langs vinduets bredde

Igen, med store vandrette vinduesstørrelser er der et andet problem: tekstlinjerne bliver meget lange, og det bliver slet ikke så behageligt at læse dem, som vi gerne ville.
Et andet almindeligt problem med denne løsning er sidemargener med store vandrette dimensioner er vinduerne ikke længere visuelt i overensstemmelse med elementernes vandrette dimensioner, hvilket heller ikke giver komfort, når man ser på layoutet.

Jeg vil gerne foreslå en simpel løsning - begræns den mindste vandrette størrelse til en fast værdi i pixels, og gør den maksimale relativ som en procentdel af vinduesbredden. Dette er en meget triviel løsning med simple midler 2 flere versioner af CSS-specifikationen.

Opdatering: Jeg vil gerne tage forbehold for, at vi ikke taler om den klassiske gummieffekt og tilpasning til absolut alle opløsninger, men derimod kun om et vist rimeligt udvalg af opløsninger, som layoutet er designet til. I eksemplerne nedenfor er dette det klassiske skrivebordsopløsningsområde med en vandret opløsning på 1024 pixels.

Lad mig understrege igen: Indlægget taler ikke om en løsning til alle typer enheder og alle opløsningsområder. Dette problem kan i princippet ikke løses inden for rammerne af ét layout., for at løse det på en eller anden måde vil det kræve flere layouts. Fluer for sig, koteletter for sig.

Opret en layoutcontainer:
...
Vi dekorerer det med en simpel stilkode:
div.page-container (min-bredde: 960px; max-bredde: 75%; margin: 0 auto; polstring: 0; )
Denne løsning kan dog for nogle virke utilstrækkelig, da der ved meget store vandrette vinduesstørrelser igen opstår problemer med linjelængder. Dette kan løses med en lige så enkel yderligere teknik: at skabe en ekstra ydre beholder inde i den allerede beskrevne og begrænse dens maksimale bredde til en fast værdi (subjektivt forekommer det mig, at værdier i området 1400-1600 pixels er bedst egnet). Igen bruger vi kun CSS værktøjer 2.0. Denne løsning vil, i stedet for blot at tilføje bredden som en procentdel for den originale beholder som foreslået i den første kommentar, også fungere i IE, som op til version 9 ikke forstår samtidig indikation af værdier.

Tilføjelse af HTML:
...

Og ændre CSS lidt:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; ) div.page-container-inner (min-width: 960px; max-width: 1600px; margin : 0 auto; polstring: 0;
Som du kan se, er løsningen ekstremt enkel og ret universel, den kan bruges til alle blokelementer.

Hvilket layout (ved hjælp af Cascading Style Sheets, CSS) kan betragtes som det bedste? Hver af dem har sine egne hacks (quirks) og sine egne unikke fordele og ulemper. Vil en af ​​dem være mere brugervenlig end alle de andre? Hvor let vil det være at bruge? Hvilke problemer har hver af dem, og hvordan kan man omgå dem? Er en af ​​dem nemmere at skrive end alle de andre? Er der nogen blandt dem, der er defekte, fuldstændig uegnede? Mest sandsynligt vil mange helt sikkert svare på disse spørgsmål, men jeg vil ikke have så travlt.

Jeg kan godt lide hver af disse layouts, og hver kan bruges på den ene eller anden måde, så længe du gør det klogt og omhyggeligt kontrollerer for brugervenlighed og lige tilgængelighed for alle kategorier af brugere. Disse er alle en del af præsentationslaget for et websted, så de fleste tilgængelighedsproblemer opstår fra korrekt brug af semantik og generelle regler layouts. Dernæst vil jeg beskrive mine synspunkter om stive faste, adaptive væsker og udvidelige elastiske layouts.

Layouts med fast bredde

Et webstedslayout med fast bredde har et hovedindholdsområde (indpakning), hvis bredde er indstillet til en konstant værdi, uanset brugeragentens skærmopløsning. Den mest almindelige og rimelige bredde anses for at være 760 pixels - en størrelse, hvor brugere af skærme med en opløsning på 800;600 vil se webstedets hovedindhold i næsten hele skærmens bredde uden at ty til yderligere vandret rulning .

Fordelene ved dette layout

• Beholderen til webstedets hovedindhold er stift fast, der er ingen grund til at indstille en maksimum- eller minimumsbredde for den (som faktisk ikke har cross-browser-understøttelse i øjeblikket);
• I nogle tilfælde er det lettere at bruge layouts med fast bredde til at skabe bestemte effekter eller designbeslutninger (f.eks. placering af en rullemenu eller værktøjstip på formularfelter). Nogle designlayouts er klogt lagt ud ved kun at bruge en fast bredde af hovedbeholderen;
• Et layout baseret på bredden af ​​hovedfeltet angivet ovenfor - 760 pixels - som er en typisk bredde for denne slags layouts, er efter min mening optimalt for maksimal tekstlæsbarhed (jeg er delvist enig med artiklens forfatter, i denne sag kan yderligere 200 pixels allokeres til sidebjælke, og webstedet vil blive placeret ved 1024;768 i bredden, men så vil bredden af ​​hovedfeltet snarere være 1000 pixels).

Dens ulemper

• Den erklærede "optimal for maksimal tekstlæsbarhed"-bredde kan ikke i tilstrækkelig grad opfylde sin rolle, hvis teksten på webstedet er blevet væsentligt forstørret, mens forholdet mellem tekstlinjehøjden og dens størrelse forbliver uændret (i I dette tilfælde det viser sig, at teksten er "sjælden" og er meget svær at opfatte). Det er dog værd at bemærke, at hvis der er godt design dette problem opstår kun, når teksten er meget forstørret;
• Brugere med små skærme (640; 480 pixels, glem heller ikke mobile enheder) vil have en vandret rullepanel på webstedet 760 pixels bred. Selvom dette er et meget sjældent problem;
• En hjemmeside med en bredde på 760 pixels kan se ret uskøn (for smal) ud på skærme med høj opløsning skærm;
• Den lille bredde af hovedbeholderen kan begrænse det rimelige antal kolonner i layoutet, men dette kan også være et plus, fordi det tvinger dig til at oprette et websted under hensyntagen til sådanne strenge grænser (dvs. en masse dikkedarer og designteknikker) kan ikke anvendes, fordi det er de pålagte restriktioner).

Tips til layout med fast bredde:

• Placer hovedindholdet på webstedets sider til venstre, så brugere med 640;480 skærme ikke behøver at rulle webstedet vandret for normal læsning;
• Forsyn webstedet med små style sheets til at understøtte bærbare små (håndholdte) enheder. Det ville være fantastisk, hvis du også kunne lave style sheets til at understøtte projektorer og tv'er.

Eksempel på blok med fast bredde

Gummi mockups

Et flydende layout opnås, hvis du slet ikke indstiller bredden af ​​hovedbeholderen (standard vil være 100%) eller indstiller bredden som en procentdel. Med andre ord, uden at tage højde for grænser og polstring, vil et websted med en bredde på 100% optage hele synlig del skærm uden at oprette vandret stribe rulle.

Et eksempel på et sådant layout er GrayBit.com. Den reduceres i bredden til 755 pixels, før den vandrette rullebjælke vises, men det er ikke nødvendigt at se hovedindholdet på siderne. Faktisk ser siden flot ud op til en bredde på 560 pixels, hvorefter designelementer begynder at overlappe, forsvinde eller falde ned. De fleste gummilayouts har sådanne begrænsninger og opfører sig, som jeg har set, ikke korrekt på mobile enheder, så længe stilarter ikke er deaktiveret helt, eller der anvendes et særligt typografiark til mobile enheder.
Fordele ved gummilayout

• Med korrekt layout giver et gummilayout dig mulighed for at opnå stor alsidighed i displayet, uanset vinduets bredde tilpasset klient. I praksis er dette ret sjældent, men teoretisk set, hvis alt er gjort korrekt, så er dette muligt;
• Det flydende layout matcher browserens standardlayout, hvilket betyder, at det kan betragtes som "ideologisk korrekt." Men kan udviklerens ønske om at lave en "ideologisk korrekt" hjemmeside betragtes som et plus i forhold til brugervenligheden? Jeg tror, ​​det er muligt;
• Sidens flydende layout giver dig mulighed for at bruge den tilgængelige skærmopløsning maksimalt. Det meste af sidens indhold vil være "over skillelinjen" (det vil sige synligt uden yderligere at rulle ned på siden). Imidlertid…

Lad os se på ulemperne ved dette layout

• For meget læsbar tekst på en side og dens stærke ønske om at fylde al tilgængelig plads kan være skadelig for brugeroplevelsen. For meget tekst kan overvælde brugeren og få siden til at virke overbelastet eller kaotisk. Der er et udtryk: "White space sells", jeg kender ikke den russiske ækvivalent til dette udtryk, det betyder, at der er brug for tom plads for at øge vægten på indhold), og det gælder også i forhold til hjemmesider;
• Hvis du bruger egenskaben max-width CSS (som ikke understøttes) til at begrænse layoutets bredde Internet Explorer(IE) versioner 6 og tidligere er kort sagt generelt (dårligt) understøttet), og at være blot en layout-guru kan, som et resultat af stræben efter den "korrekte ideologi", i bedste fald resultere i et websted, der vil være svært at bruge. Forestil dig at skulle læse en linje, der er mere end 1000 pixels lang, og du indser problemet.

Nogle tips til at bruge dette layout

• Brug gummimodellen udelukkende til dets tilsigtede formål. Lad ikke dit ønske om at gøre alt "ideologisk korrekt" sejre over sund fornuft. Der må være en god nok grund til at bruge denne type layout. Hvis du beslutter dig for at bruge det, så sørg for, at det flydende layout på dit websted ser godt ud på de fleste mennesker. skærmopløsninger. Ellers lad være, spillet er ikke lyset værd;
• Hvis du har områder med fast bredde, når du bruger et flydende layout, så har du faktisk en hybrid af et flydende og et fast layout, og dets minimumsbredde vil blive bestemt af bredden af ​​de faste blokke eller den største af objekterne (billeder, for eksempel). Vær forsigtig. Hvis du vil lave en hjemmeside gratis med et fleksibelt layout, skal det være det i virkeligheden, og ikke kun i ord;
• Hvis du laver en hybrid af et fleksibelt og fast layout (som f.eks. vist i min CSS guide, sørg for, at det ser godt ud ved 800;600 opløsning.

Og faktisk et eksempel:

Elastisk layout

Ved brug af et elastisk layout sættes størrelsen på hovedbeholderen og andre (vigtige) elementer til em. Em er direkte proportionale med størrelsen af ​​teksten eller skrifttypen. Derfor, når tekststørrelsen på siden øges, vil sektionsstørrelserne angivet i em øges proportionalt.

Et eksempel på et elastisk layout kan ses i mit CSS Zen Garden-indlæg (en begrænset hybrid af elastisk og elastisk layout). Så vidt jeg ved er dette den eneste CSS repræsentation Zen Garden, som er fleksibel og så tilgængelig som muligt med et ikke-redigerbart (oprindeligt defineret) sidelayout. Jeg er meget stolt af dette faktum (faktisk et meget godt eksempel, men i Opera 9.22, med en bredde på mindre end 150 pixels, "kører" blokkene over hinanden, denne effekt er beskrevet ovenfor i ulemperne ved gummilayoutet ).

Fordele ved elastisk layout

• Hvis det gøres korrekt, er dette et meget stabilt layout, fordi alt ændrer størrelse proportionalt. Som et resultat, uanset størrelsesændringen, er alt stadig godt;
• Elastisk layout er en ret kompleks ting, det er utroligt fedt og hver gang er det først og fremmest en udfordring for dig selv. Mit første møde med ham var på Tommy Olssons hjemmeside (som tilsyneladende er godt eksempel hvordan man laver elastiske sider). Han overraskede mig, fik mig til at smile og tænke dybt over, hvor lidt jeg ved (imponerede fanden ud af mig). Det bedste eksempel Det kan være muligt at forstørre teksten på sider med et elastisk layout: bare hold ctrl nede og rul musehjulet... Jeg kan allerede høre dig sige "Wow"

Ulemper ved elastisk layout

• På trods af dets tiltrækningskraft og elegance kender jeg ikke til nogen rigtig gode anvendelser for det, hvilket får mig til at spekulere på, hvorfor det overhovedet er nødvendigt?
• Hvis du ikke begrænser størrelsen af ​​den ydre beholder, så kan dette layout være en virkelig katastrofe for brugeren: det vil strække sig bredere og bredere og bredere - uden nogen synlige fordele.

Nogle tips til elastisk layout

• Hvis du vil layoute ved hjælp af et fleksibelt layout, skal du sørge for, at det fungerer på små skærme. Ellers, hvorfor er det overhovedet nødvendigt?
• Begræns dimensionerne af den elastiske blok ved at definere dimensionerne af den ydre beholder (ved hjælp af en gummi eller fast bredde, dvs. skabe et hybrid layout). For eksempel #wrapper ( width:60em; max-width:98%; ). Tilhængere af den "korrekte ideologi" kan indvende, at dette ikke længere vil være et virkelig elastisk layout, at det er begrænset eller hybridiseret, men som svar spørger jeg: hvilken forskel gør det? Ja, den "korrekte ideologi" er vidunderlig og smuk, men ikke når det kommer til brugeroplevelse (gyldne ord!);
• Husk, at IE 6 og lavere ikke understøtter egenskaben max-width, skal du sørge for, at når du indstiller max-width stor tekst Den vandrette rullepanel vises ikke i IE ved 1024;768 opløsning. I hvert fald kan du se min løsning til CSS Zen Garden. Det næste trin kunne være layout til en opløsning på 800;600 med samme tilstand. Som et eksempel kan du se mit elastiske layout af en hostingside (en begrænset hybrid af et fleksibelt og elastisk layout). Jeg planlægger at revidere det inden for et år, men selv nu fungerer eksemplet ganske godt.

Et eksempel på elastisk layout.

Kære læser, gør dig godt tilpas, og jeg vil introducere dig til principperne for gummi blok layout websted.

Den faste model, vi tidligere betragtede, bliver til en gummimodel blot ved at erstatte pixelbredden på blokken