Webkultur: Grid-Based Layout Designs
Den semantiske banen har ført til en ny generasjon Internett-teknologi. Som designere og utviklere jobber sammen for å omdefinere reglene på nettet, fortsetter antall åpne kildeprosjekter og tredjeparts-APIer å vokse.
Meningene fra nettforskere er forskjellige på bruken av rutenettet . Mange hevder at innstilling av gridpunkter begrenser kreativiteten til designere. Andre hevder at et rutenett gir et vitenskapelig grunnlag for et design som skal perfeksjoneres.
Begge sider gir interessante argumenter. Disse ideene har blitt en del av en unik webkultur preget av innflytelsesrike designregler og open source-prosjekter.
Gitteret er ikke en hovednøkkel til perfekt design. Imidlertid har matematikk vist at visse designspesifikasjoner gir de beste forholdene for sideelementer og layouter. Hvis du har hørt om noe av dette før , kan du være kjent med de mange alternativene som nettbaserte layouter tilbyr designere.
En sammenligning med Classic Web
Eldre generasjoner brukte design som en kontrollmekanisme. Deres design presenterte informasjon nøyaktig og på en måte som var lett å administrere. Dette gjelder fortsatt i dag, men disse uaktuelle designprinsippene blir revet opp.
I kjølvannet ringer en ny webkultur. En kultur av åpne standarder og protokoller, fritt delt kildekode og kraftige plattformer som drives av programmerere over hele verden.
En grunn til denne utviklingen er den betydelige økningen i antall personer som arbeider på semantisk web. Den underliggende årsaken stammer fra menneskelig kjøring for å bidra til noe mer enn oss selv.
Å jobbe for en betalingsdag er tilfredsstillende, men ikke noe å være lidenskapelig om. Utviklere som virkelig bryr seg om nye standarder vil legge merke til.
Hvor grids har utviklet seg
Det har ikke vært en stor studie å sammenligne pre-standard og post-standard webdesign teknikker. Vi kan imidlertid spore hvordan nettene har blitt mer populære over tid.
Gittersystemet er basert på dagens teknologiske trender og fremskritt. Dette inkluderer statistikk over antall personer som har tilgang til Internett på et gitt tidspunkt, enhetene de bruker for å få tilgang til Internett og skjermoppløsninger og operativsystemer på enhetene sine. Rutenettsystemer gir en strukturell balanse til nettsideoppsett. De gir konsistente målinger og gir mulighet for fleksibilitet mellom rammene.
På slutten av 1990-tallet kjørte ikke mange husholdningsmaskiner høyere enn 800 × 600, og enda færre over 1024 × 768. I de siste 20 årene har intrikate og komplekse operativsystemer blitt utviklet for å vise mye høyere oppløsninger. 1024 × 768 er en felles innstilling i disse dager.
Skjermoppløsninger vokser eksponentielt, og denne trenden ser ikke ut til å bremse. Sjekk datatabellen fra Webstatistikk og trender ; Det beskriver skjermoppløsningsmålinger via W3Schools.
Visual Grid Designs
Alle nettsider er basert på nett, uansett om designeren er bevisst på dette eller ikke. Digitalt arbeid består av piksler og som sådan vil samsvare med et sett bredde og høyde, og produsere kunstneriske effekter visuelt med avstand og avstand mellom punkter.
I stedet for å male i mørket, så er det i orden å bruke rister for å skinne et lys på prosjektet. Grids ble først populært med fremveksten av Adobe Photoshop som de facto verktøyet for webdesignere. Opplæringsprogrammer på Internett presenterer måter å vise og implementere gridlinjer når du lager mockups, logoer, grafikk, ikoner og annen digital kunst.
Over tid tok utviklere opp på dette og begynte å implementere systemer i eget arbeid. Å designe et gridoppsett i Photoshop er mye annerledes enn å lage samme layout i HTML og CSS.
Arbeidet som kreves for hver bane, er stort forskjellig, men nettlesystemet er i seg selv universelt. Når åpne standarder faller på plass, går den nåværende designkulturen mot gridbaserte strukturer.
Grunnleggende HTML- og CSS-regler
Grids bruker noen av de vanligste egenskapene til HTML websider. HTML-gridoppsett genererer samme generelle mal hver gang.
Strukturen starter med en innpakning som bare er bred nok til å inneholde alle kolonnene. Inne i wrapper divisjonen bør det være en samling av underoppdelinger. Antall underavdelinger skal være det samme som antall kolonner du trenger.
For en to-kolonne layout, kan du ha to divisjoner, klassifisert som .left og .right . Alle dine interne kolonner skal ha sin CSS float-egenskap satt til venstre eller høyre, mens omslaget skal inneholde en clearfix klasse .
For å få en følelse av HTML-kode, kan du sjekke ut en dynamisk grid layout generator. Den populære løsning fra sidekolonne tilbyr en flott struktur og støtter flere kolonneoppsett. Alle HTML og CSS genereres øyeblikkelig og overholder standard-testing.
Breaking Out med Padding
Padding og takrenner er integrerte deler av ethvert rutenett system. Stykker av innhold som er formatert ved siden av hverandre, krever mellomrom mellom dem, noe som kan føre til at layoutet utvides unaturlig, noe som resulterer i ødelagte sider.
Lag definisjon i polstrede områder ved å lage et oppsett fylt med dummy innhold. Plasser kolonnene dine på en side og gi dem 1-pixel konturer med ulike farger. Dette gir en nøyaktig representasjon av hvordan utformingen vil se ut, og beskriver hvert områdes del av innholdet.
Denne teknikken fungerer med både faste og flytende layouter, noe som gjør integrasjonen til nåværende gridrammer mye lettere.
Gutters trenger heller ikke å følge et sett rammeverk. Du kan være villig til å ofre innholdsområdet for å øke mellomrommet mellom en to-kolonne splittelse. Open-source rammer er formbar og lar deg redigere stiler direkte eller til og med implementere dine egne for å overskrive regler og definere egenskaper.
Layout Grid CSS Property
De layout-grid Egenskapen er en eldre CSS-spesifikasjon vedtatt av Microsoft. Det er skrevet i stenografi for å sette en rekke rutenettegenskaper. Spesielt refererer de layout-grid-mode , layout-grid-type , layout-grid-line , layout-grid-char og layout-grid-char-spacing .
Hver av disse kan defineres som egen eiendom og kan skrives uten det overordnede layout-grid . Her er en kort liste som forklarer hver:
layout-grid-mode
Kontrollerer hvilken type eller modus av layoutruten brukes. Mulige verdier inkluderernonefor ikke noe rutenett,linefor inline grid elementer,charfor tegn og blokkeringselementer, ogbothfor all-round støtte.layout-grid-type
Kontrollerer hvilket grid som brukes til å gjengi sidetypografi og interne tekstelementer. Verdipar erloose, som brukes til kinesisk og koreansk tekst,strict, som brukes til japanske tegn, ogfixed, som bruker monospacing til å bruke lik avstand mellom tegn, uavhengig av språk.layout-grid-line
Kontrollerer gridlengdegranularitet nårlayout-grid-modeer satt tillineellerboth. Denne egenskapen oppfører seg liktline-heightog kan motta numeriske verdier angitt i cm, px, pt, em eller prosenter.layout-grid-char
Kontrollerer størrelsen på tegnruten for elementets tekstinnhold nårlayout-grid-modeer satt tillineellerboth. Verdiene som denne eiendommen aksepterer, er de samme som ovenfor og direkte påvirker sidens linjehøyde. Forskjellen er detlayout-grid-linepåvirker sidestøtten, menslayout-grid-charpåvirker tekst- og tegnavstandsrutenettet.layout-grid-char-spacing
Kontrollerer tegnavstand nårlayout-grid-modeer satt tilcharellerbothoglayout-grid-typeeiendommen er satt tilloose. Denne egenskapen oppfører seg somline-heightog bør brukes til tekstnivåområder på blokknivå.
Formålet med å skape disse egenskapene er å tilpasse gridoppsett for asiatisk kodede sider. Tegnene på asiatiske språk krever ofte tilpassede sideoppsett.
Når de vises i andre land, kan disse tegnene oppføre seg underlig og bryte rutenettet beregninger. Disse unike egenskapene muliggjør bedre visuell formatering ved å bruke et en- eller todimensjonalt rutenett.
Vertikal siderytme
Mange grafiske kunstnere vil glatte over betydningen av vertikal avstand i rutenettdesign. Rutenettlinjer støtter horisontal layoutdesign og justerer vertikale sideelementer og typografi. Fire viktige egenskaper manipulerer vertikal avstand: skriftstørrelse, linjehøyde, topp- og bunnmarginer og polstring.
Linjens høyde er den største faktoren i vertikal avstand. Sideteksten skaleres av hvor store individuelle bokstaver du ser, og av hvor mye plass linjene i mellom krever. Vanligvis er linjehøyde definert i piksler eller ems, avhengig av hvor fleksibel utformingen er. Ems opprettholder typografisk konsistens på tvers av alle oppløsninger og nettlesere. Den beste tilnærmingen er å bruke skriftstiler til alle de store HTML-elementene, inkludert overskrifter, blokker og siter.
Vertikal rytme kan retusjeres når et rutenett er satt på plass, noe som gjør skalering for forskjellige miljøer enkelt. Desktop-brukere vil ha en mye annen opplevelse enn bærbare og mobile brukere, som har å gjøre med mye mindre oppløsninger.
Du kan ikke planlegge vertikaljusteringen med presis presisjon, men i de fleste tilfeller vil et utdannet gjetning produsere kvalitetsresultater.
Tredje regelen
Del et design i tre horisontale og vertikale mellomrom. Dette vil skape et rutenett med ni rektangler som ligger i nyformede lommer. Det er mye lettere å jobbe med design som er brutt ned i blokkområder med begrensede poeng.
Vitenskapen bak denne trenden kommer fra den "guddommelige andel", også kjent som "guddommelig forhold". Forholdet på 1.618, som er den guddommelige proporsjonen, er en matematisk konstant. Når vi deler en fast størrelse-layout i denne verdien, kan vi beregne den mest nøyaktige delingen for en to-kolonne struktur.
Ta for eksempel et 960-pikseloppsett. Hvis vi deler 960 med 1.618, får vi ca 593. Ifølge den gyldne proporsjonen, da bør vi sette vår primære kolonnelengde til 593 piksler. Denne metoden går tilbake til kunstnere for århundrer siden. Heldigvis, med spredning av open source-rammer, er det meste av matematikken allerede beregnet.
Bygg en gylden rektangel
Denne teorien for å lage vakre gridbaserte rektangulære layouter er basert på Tredje regelen. Delte rektangler er geometrisk lyd i forhold til det gyldne forholdet. Numeriske verdier for rektangelets bredde og høyde står i forhold til den gylne regelen.
Disse typer rektangler er kjent som "gyldne rektangler." Den kortere og lengre siden skal holde verdiene av variablene a og b, henholdsvis.
Disse rektanglene er nyttige for å bygge sideoppsett: de måler hvor store blokkelementer skal være. De er ekstremt enkle å beregne, og verktøyene for mange populære gridrammer er bygd inn.
Disse elementene er svært gunstige for webdesignere som bruker matematiske nett. Tenk på de flere scenariene der et nøye strukturert gyllent rektangel vil forbedre sidenes estetikk. Dette kan inkludere side widgets, e-handel produktbilder og til og med innholdsrike tabeller.
Begynner med 960gs
Med all denne informasjonen tilgjengelig for allmennheten, har webdesignere begynt å definere sine egne standarder.
Av alle rammene, den 960 Grid System (960gs) er trolig den mest kjente. Dette er ikke å si at det er det beste gridsystemet passer perfekt til alle kriterier - men det er lett å jobbe med. 960gs er tilpasningsdyktig og fungerer bra med nesten hvilken som helst nettside. Og det går bra på de fleste nettlesere og enheter
Matematikken inneholder 12 kolonner med 60 piksler hver, sammen med en 10 pikselmargin på hver side, og produserer en 20 piksler renner. De fleste grid rammer er basert på 12 til 24 piksler kolonner. Selvfølgelig forventes det ikke å inkludere 12 kolonner i oppsettet ditt.
Til slutt vil du kombinere kolonnene og rennene i en enkelt rutenett. Publisering av innhold er mye lettere når du kan utarbeide spesifikke detaljer for bilder, widgets, videoer og andre sideelementer.
960gs har fått så mye publisitet fordi det tilpasser seg godt til nettet. De fleste skjermoppløsninger kan vise en 960-pikslers nettside uten en horisontal rullefelt. I økende grad passer layoutene inn i dette forholdet, noe som indikerer at dette er fremtiden for nettet. Den ekstra bredden tar ikke vekk fra konstruksjonen og utvider eller kontraherer en mal er helt mulig.
Forstå en fullstendig 960-layout
Bare så mange kolonner kan rasjonelt passe inn i et design. Et rutenett er ikke ment å låse deg i en begrensende tankegang. Rutenetter er veiledninger som følger: de forbedrer brukerinteraktivitet og sideelementplacering.
Det største nettverket du kan opprette, er et område på 940 piksler med 20-pixel rennere. Det er en goofy bruk av rutenettet, men det er godt å forstå mulighetene. To-kolonneoppsettene er ganske enkle og gir god plass til innhold. Vanlige eksempler inkluderer:
- 780 x 140,
- 700 x 220,
- 620 x 300.
Legg merke til at disse alle legger opp til 920. Tapet på 40 piksler kan regnes av gutters på hver "blokk" i oppsettet. Disse mellomrommene holder brukerne fokusert og tillater innholdet å bryte fra hverandre jevnt. Med splittede innholdselementer har vi takrenner på langt siden og mellom blokkene, som hver står for 10 av de 40 piksler.
Disse mellomromene øker når du legger til nye blokker i oppsettet. En tre-kolonne design har litt mindre plass for innhold enn en to-kolonne design.
Hvis dette konseptet fortsatt er forvirrende, se bildet ovenfor. Den enkleste måten å jobbe med nett er å designe et referanseliste som ligner på grafikken ovenfor, med alle mulige brudd for innholdsblokker. Med denne informasjonen, bland og match stiler for å finne ut hvilken type design som passer best for prosjektet.
For eksempel, si at vi ønsker å designe en mock-up med tre kolonner og det største mulige innholdsområdet. Med diagrammet ovenfor kan vi bryte ned innholdsområdet vårt i to deler: en full av innhold, men delt i to for å inneholde to kolonner. Dette ville kreve en innholdsblokk på 450 piksler og to 210 piksler.
Igjen, disse nettene er ikke ment å kvele kreativitet. De gir mulighet for fleksibilitet, men sørger for at din back-end-struktur er sikker. De fleste designere vil ikke overveie vitenskapen om alt dette. Hvor lang tid disse open source-systemene lagrer et prosjekt, er ekstraordinært, det er lett å skumre gjennom dokumentasjonen og implementere ditt eget layout.
Fluid Grid Layouts
Det er ikke vanlig å se rister festet til væskeoppsett. Piksler er den mest presise måleenheten for et nettsted. Å gå inn i en måling som prosentandeler eller ems vil kreve nøye vurdering. Slike oppsett er mulige med noen få endringer og flere CSS-selgere.
Fluid 960 Grid System er velkjent, selv om det meste av koden ikke er tilgjengelig for eldre versjoner av Internet Explorer. Gjennom interaktiv prototyping og arbeider med utallige skjermoppløsninger, kan du skalere en 960-pikslers design på tvers av mange skjermoppløsninger. Dette åpne rammeverket er ikke en eksakt kopi av 960gs, og den kommer med ny dokumentasjon. Hvis du er interessert, sjekk ut GitHub repository for aktive forumdiskusjoner og arkiverte spørsmål og svar.
Som resten av webdesign fellesskapet, er du sannsynligvis kløe for noe mer stabilt. Noen få væske rammer som genererer fantastiske layouter.
YAML Grid Layouts
En annen multikolumnlayout (YAML) er en av de mest populære CSS-rammene. Den inneholder en stor kodebase for å manipulere fleksible XHTML- og CSS-oppsett. Det er konsekvent oppdatert av aktive samfunnsutviklere.
Rammen er ekstremt allsidig, og tilbyr mange praktiske eksempler med kode. Den minste fastbreddeoppsettet vil være i overensstemmelse med 740 piksler, som passer til 800 × 600 skjermoppløsninger. Maksimal breddeoppløsning er satt til 80 em, og tilbyr skalerbarhet mellom mobil og desktop surfing.
Sett med standard webfonter, vil rundt 75% av oppsettene være i overensstemmelse med et maksimalt 960-pixel, selv om dette kan skrives over.
Mange av de feilene som finnes i eldre nettlesere, har blitt patched. YAML støtter Google Chrome, Mozilla Firefox, Safari og alle versjoner av Internet Explorer 5+. Se rammeverkets oversikt og funksjoner for mer grundig informasjon.
Yahoo! Brukergrensesnittbibliotek
YUI er et sett med JavaScript og CSS biblioteker lagt ut av Yahoo. De fleste prosjektkodene og feilrettingene er skrevet av profesjonelle utviklere fra YUI-fellesskapet. Den nyeste revisjonen er imidlertid YUI2 YUI3 API-dokumenter har blitt utgitt til v3.1.1.
De YUI2 hjemmeside har lenker som fører til de mest populære prosjektene. Mot bunnen, oppført under "YUI2 CSS Tools," er fire innflytelsesrike rammer: CSS Reset, Base, Fonts and Grids. Denne artikkelen er opptatt av CSS Grids, selv om mange av disse andre rammene er blitt referert til.
Nedlastingsfilen er bare 4 KB og tilbyr over 1000 unike websidelayouter. Innebygde innstillinger gir mulighet for både breddeformatene i størrelsen av fluid og fastformat. Kolonner er selvklarende, så om du kjører to- eller fireveis splitter, vil bunninnholdet alltid forbli under det primære innholdet. Typografiske egenskaper er bundet sammen for fleksible brukerspesifikke justeringer. Mange kjerneegenskaper er tatt vare på, noe som gjør arbeidet i YUI2 så fint.
CSS Grids-rammeverket tilbyr et lite antall mobilbaserte oppsett. Disse gjengis bare på nettlesere med en relativt ny versjon av Webkit-motoren. Dette inkluderer smarttelefoner som Android-enheter, iPhone, BlackBerry og mange Windows Mobile-enheter.
Integrasjonen er fin, men dette nye mediet har ikke blitt testet grundig og kan fortsatt vise feil på noen mobile enheter. Men på slutten av dagen er det verdt bryet, fordi de fleste mobile besøkende som er villige til å lese innholdet på nettstedet ditt, sannsynligvis eier en smarttelefon.
Utviklingen av webkultur
Webdesignere har blitt ganske ettertraktede om åpne systemer og regler. Den tidlige nettsiden var ikke mye av et fellesskap i det hele tatt. Det var HTML- og CSS-standarder, men mentaliteten bak de fleste layoutene var "hva som helst." Etter en betydelig utvikling i webteknologi har Internett blitt det beste mediumet for publikasjon over hele verden.
Webdesignere og utviklere tar sikte på å forenkle prosessen med å lage nettsteder uten å ta bort fra kvaliteten eller opplevelsen av et nettsted. Gitter er et harmonisk instrument ved at de gir design en ordre og struktur. Chaos og tilfeldig oppretting gir vanligvis ikke resultater.
Derfor er rutenettdesignene så tilgjengelige. Internett har blitt reformert til et fleksibelt utviklingssystem. Grid-baserte layouter produserer stabile nettsteder: det er ingen overraskelse at samfunnet har vedtatt rammebetingelser som vanlig praksis.
I stedet for å stole på eldre upålitelige metoder, kan den gjennomsnittlige webdesigneren i dag fokusere på å skape nettsteder som er behagelig for brukere, i stedet for å koordinere pixel-perfekte kreasjoner.
I dag er designere mye yngre og holder større lidenskap for design enn noen gang før. Dette, kombinert med den åpne webbevegelsen, betyr at en strøm av ny webkode kontinuerlig blir utgitt for offentligheten. GitHub repositories tilbyr nettverksmuligheter med andre CSS-utviklere.
Tilpasset Grid Framework Development
Designere har kritisert mange åpne rammer som å være for oppblåst. Mange er merket som forvirrende, med for mange klasser og regler å jobbe med. Dette kan være sant for noen, og jeg beklager ikke disse kommentarene.
Til slutt, jo mer fleksibel et design, jo bedre. Kunstnere ser etter verktøy som gjør jobben enklere. Rammer er ikke egnet for alle design. Utvikling av rammer over mindre webprosjekter vil spare tid på lang sikt. Men vurder CSS-systemene som mer av et læringsverktøy enn et produksjonsmiljø.
Rister kan være forvirrende først, uten tvil om det. Å ha et rammeverk for referanse og dokumentasjon for å kontrollere gjennom hele prosessen, vil hjelpe nybegynnere å integrere raskt og med mindre stress.
Med nok praksis vil det være enkelt å utvikle et tilpasset CSS-rammeverk. Fordelene med dette langt overveier fordelene ved å jobbe med andres kilde. Du kan strukturere alle layoutformater på ett sted og definere egenskaper som skriftstørrelse, linjehøyde og blokkelementer. Ingen har noen gang skrevet perfekt CSS-kode, så hold deg til det som fungerer best for deg.
Vanlige CSS-gridrammer
Nedenfor er noen av de mer populære CSS-rammene. Selv om ikke alle disse rammene fokuserer utelukkende på nettdesign, tilbyr de nyttige biblioteker til å studere og implementere i webdesign. Prosjektkilden er gratis i hvert tilfelle og leveres vanligvis med dokumentasjon.
1KB Grid
1KB Grid er et flott CSS-rammeverk som i hovedsak vektlegger fart. Nedlastingsfilene er mindre enn 1 KB totalt og holder de fleste av CSS-valgene du trenger for å lage et vakkert nettstedslayout. CSS-koden er tilpassbar før nedlasting, noe som er en stor fordel for alle webdesignere. Du kan velge mellom hvor mange kolonner som skal inkluderes og hvor bredt kolonnene og rennene skal vises. Dette rutenett er ekstremt vennlig til nykommere og en fin måte å bryte deg inn i.
Grunnleggende CSS
Grunnlinje er en annen standard CSS-mal tilgjengelig for nedlasting. Ikke bare inkluderer denne pakken kode for grids, men det strukturerer også sidetypografi og blokkelementer. All kode er kompatibel med CSS3 og HTML5 elementer, noe som gir utviklere kontroll over hvordan man strukturerer sidestrøm. Baseline CSS tilbyr løsninger for vertikal rommanipulering ved å integrere sidetypografi i et fleksibelt rutenett.
1140px CSS Grid System
CSSGrid.net er hjem til et nyere fluid rammeverk for nettbaserte nettsteder. Med 1140 piksler og en tolv kolonne splitt, strukturerer skalaen på alle enheter, fra de største skjermoppløsningene til håndholdte. Rammen bruker medieforespørsler for å sjekke når du skal vise en bestemt layout og hvordan du sprer sidens innhold. Forfatter Andy Taylor oppdaterer ofte prosjektet, og du kan laste ned siste 1,6 utgivelsen her .
YAML
YAML gir det mest fleksible rammeverket for å utvikle layouter. Dokumentasjonen gir en komplett løsning for alle faste, elastiske og flytende oppsett. Kjernefiler har blitt testet grundig på små og store nettsteder. Hvis du er ute etter et stabilt CSS-rammeverk, er YAML en flott løsning.
Blueprint CSS
Blåkopi inneholder mange av fordelene ved Baseline. Fordelen med dette rammeverket er det velkjente merkenavnet. Mange aktive utviklere har oppdatert prosjektet med nye klasser. Gitter omfatter en stor del av rammen, men mange modeller brukes til å danne typografi, mobil- og skjermskjermer og mer!
CSS Boilerplate
De CSS Boilerplate Prosjektet ble startet av en av utviklerne av Blueprint. Koden er en mer raffinert, avkortet versjon av Blueprint-rammeverket, optimalisert for rask og enkel lesbarhet. Selv om prosjektet ikke har blitt oppdatert nylig, gir det en mulighet for nybegynnere å utelukke egne CSS-prosjektdefinisjoner.
YUI 2: Grids CSS
YUI2 Grids er et veldig populært rammeverk utgitt av Yahoo under sin YUI2-linje. Koden er perfekt for både faste og flytende layouter, etter regler som er angitt i CSS2 og CSS3. Rammeverket er godt dokumentert under Yahoo User Interface Library og regnes som en av de bedre rammer for nybegynnere.
Dette innlegget ble skrevet utelukkende for Webdesigner Depot by Jake Rocheleau , en lidenskapelig webdesigner og sosial media-entusiast. Jake elsker å lese og skrive om de nyeste digitale Internett-trender og nettverk innenfor designfellesskapet. Sjekk ham ut på Twitter @jakerocheleau for mer om sitt arbeid.
Bruker du et gridbasert rammeverk for designene dine? Del dine synspunkter med oss!