Webkultur: Grid-Based Layout Designs
Den semantiske web har bragt på en ny generation af internet teknologi. Da designere og udviklere arbejder sammen om at omdefinere reglerne på internettet, vokser antallet af open source-projekter og tredjeparts-API'er fortsat.
Udtalelserne fra webforskere adskiller sig fra brugen af gittersystemer . Mange hævder, at indstilling af gitterpunkter begrænser designernes kreativitet. Andre hævder, at et gitter giver et videnskabeligt grundlag for et design, der skal udføres.
Begge sider giver interessante argumenter. Disse ideer er blevet en del af en unik webkultur præget af indflydelsesrige designregler og open source-projekter.
Gitteret er ikke en hovednøgle til perfekt design. Mat har imidlertid bevist, at visse designspecifikationer giver de bedste forhold for sideelementer og layouter. Hvis du har hørt om noget af dette før , kan du være bekendt med de mange muligheder, som netbaserede layouter tilbyder designere.
En sammenligning med Classic Web
Ældre generationer brugte design som kontrolmekanisme. Deres designs præsenterede information præcist og på en måde, der var let at håndtere. Dette gælder stadig i dag, men disse forældede designprincipper bliver fjernet.
I deres kølvande rører en ny webkultur. En kultur med åbne standarder og protokoller, frit delt kildekode og kraftfulde platforme, der drives af programmører over hele verden.
En grund til denne udvikling er den betydelige stigning i antallet af medarbejdere på det semantiske web. Den underliggende årsag stammer fra menneskets drev for at bidrage til noget mere end os selv.
At arbejde for en betalingsdag er tilfredsstillende, men ikke noget at være passioneret om. Udviklere, der virkelig bekymrer sig om nye standarder, ønsker at forlade deres mærke.
Hvor grids har udviklet sig
Der har ikke været en stor undersøgelse, der sammenligner webdesignteknikker forud for standarder og standarder. Vi er imidlertid i stand til at spore, hvordan netværket er blevet mere populært over tid.
Gittersystemet er baseret på aktuelle teknologiske trends og fremskridt. Dette omfatter statistikker over antallet af personer, der har adgang til internettet på et givet tidspunkt, de enheder, de bruger til at få adgang til internettet og skærmopløsningerne og operativsystemerne på deres enheder. Gittersystemer giver en strukturel balance til website layouts. De giver konsekvente målinger og giver mulighed for fleksibilitet mellem rammer.
I slutningen af 1990'erne løb ikke mange husholdningsapparater en opløsning højere end 800 × 600, og endnu færre over 1024 × 768. I de sidste 20 år er indviklede og komplekse OS'er blevet udviklet til at vise meget højere opløsninger. 1024 × 768 er en fælles indstilling i disse dage.
Monitor resolutioner vokser eksponentielt, og denne tendens ser ikke ud til at bremse. Tjek datatabellen fra Web Statistik og Trends ; Det beskriver skærmopløsningsmålinger via W3Schools.
Visual Grid Designs
Alle websider er baseret på net, om designeren er bevidst om dette eller ej. Digitalt arbejde består af pixels og som sådan vil være i overensstemmelse med en indstillet bredde og højde, der også producerer kunstneriske effekter visuelt med afstand og afstand mellem punkter.
I stedet for at male i mørket, så kan man sige, at man kan bruge grids til at skinne et lys på projektet. Gitter blev først populære med fremkomsten af Adobe Photoshop som de facto værktøj til webdesignere. Tutorials rundt på internettet præsenterer måder at vise og implementere grid linjer, når du opretter mockups, logoer, grafik, ikoner og anden digital kunst.
Over tid tog udviklere op på dette og begyndte at implementere systemer i deres eget arbejde. Design af et gitterlayout i Photoshop er meget anderledes end at skabe det samme layout i HTML og CSS.
Arbejdet, der kræves for hver sti, er meget forskelligt, men selve rutenettet er universelt. Når åbne standarder falder på plads, bevæger den nuværende designkultur sig mod gitterbaserede strukturer.
Grundlæggende HTML- og CSS-regler
Gitter bruger nogle af de mest almindelige egenskaber ved HTML-websider. HTML-gitterlayouter genererer den samme overordnede skabelon hver gang.
Strukturen starter med en indpakning, der kun er bred nok til at indeholde alle søjlerne. Inde i wrapper divisionen bør der være en samling af underopdelinger. Antallet af underopdelinger skal være det samme som antallet af kolonner, du har brug for.
For et to-kolonne layout kan du have to divisioner, klassificeret som .left og .right . Alle dine interne kolonner skal have deres CSS float-egenskab indstillet til venstre eller højre, mens indpakningen skal indeholde a clearfix klasse .
For at få en fornemmelse for HTML-kode, kan du tjekke en dynamisk grid layout generator. Den populære løsning fra sidekolonne tilbyder en fantastisk struktur og understøtter layouter med flere søjler. Alle HTML og CSS genereres øjeblikkeligt og overholder standarder-overensstemmelsestest.
Breaking Out med Padding
Padding og tagrender er integrerede dele af ethvert gittersystem. Stykker af indhold, der formateres ved siden af hinanden, kræver plads mellem dem, hvilket kan medføre, at layoutet udvides unaturligt, hvilket resulterer i brudte sider.
Opret definition i polstret områder ved at lave et layout fyldt med dummyindhold. Placer dine kolonner på en side og giv dem 1-pixel konturer med forskellige farver. Dette giver en nøjagtig gengivelse af, hvad dit design vil se ud, og beskriver hvert områdes del af indholdet.
Denne teknik virker med både faste og flydende layouter, hvilket gør integrationen til de nuværende gitterrammer meget lettere.
Gutters behøver heller ikke at følge en fast ramme. Du kan være villig til at ofre indholdsområdet for at øge mellemrummet mellem en to-kolonne split. Open-source rammer er formbar og giver dig mulighed for at redigere stilarter direkte eller endda implementere dine egne for at overskrive regler og definere egenskaber.
Layout Grid CSS Property
Det layout-grid ejendom er en ældre CSS-specifikation vedtaget af Microsoft. Det er skrevet i stenografi for at indstille et væld af gitteregenskaber. Nærmere bestemt henviser de layout-grid-mode , layout-grid-type , layout-grid-line , layout-grid-char og layout-grid-char-spacing .
Hver af disse kan defineres som egen ejendom og kan skrives uden det overordnede layout-grid . Her er en kort liste, der forklarer hver:
layout-grid-mode
Styrer hvilken type eller tilstand af layoutgitteret der anvendes. Mulige værdier inkluderernonefor intet gitter,linefor inline gitterelementer,charfor tegn og bloklinjeelementer, ogbothtil allround support.layout-grid-type
Styrer hvilket net der bruges til at gøre sidetypografi og interne tekstelementer. Værdipar erloose, som bruges til kinesisk og koreansk tekst,strict, som bruges til japanske tegn, ogfixed, som bruger monospacing til at anvende lige afstand mellem tegn, uanset sprog.layout-grid-line
Styrer gridlængdegrorularitet nårlayout-grid-modeer indstillet tillineellerboth. Denne ejendom opfører sig lignerline-heightog kan modtage numeriske værdier indstillet i cm, px, pt, em eller procentsatser.layout-grid-char
Styrer størrelsen på tegngitteret for et elements tekstindhold, nårlayout-grid-modeer indstillet tillineellerboth. De værdier, som denne ejendom accepterer, er de samme som ovenfor og har direkte indflydelse på sidens linjens højde. Forskellen er detlayout-grid-linepåvirker sidegitteret, menslayout-grid-charpåvirker tekst- og tegnafstandsgitteret.layout-grid-char-spacing
Kontrollerer tegnafstand nårlayout-grid-modeer indstillet tilcharellerbothoglayout-grid-typeEjendommen er indstillet tilloose. Denne ejendom opfører sig somline-heightog bør bruges til tekstområder på blokniveau.
Formålet med at oprette disse egenskaber er at tilpasse gitterlayouter til asiatiske kodede sider. Tegnene på asiatiske sprog kræver ofte brugerdefinerede sidelayouter.
Når de ses i andre lande, kan disse tegn opføre sig mærkeligt og bryde dine netopgørelser. Disse unikke egenskaber muliggør bedre visuel formatering ved at anvende et et- eller todimensionelt gittersystem.
Lodret siderytme
Mange grafiske kunstnere vil glatte over betydningen af lodret afstand i gitterdesign. Rutenettet understøtter horisontalt layoutdesign og justerer lodrette sideelementer og typografi. Fire vigtige egenskaber manipulerer lodret mellemrum: skriftstørrelse, linjens højde, top- og bundmargener og polstring.
Linjens højde er den største faktor i lodret afstand. Sidetekst skaleres efter, hvor store individuelle bogstaver der vises, og hvor meget plads linjerne imellem kræver. Normalt defineres linjens højde i pixels eller ems afhængigt af, hvor fleksibelt layoutet er. Ems opretholder typografisk konsistens på tværs af alle opløsninger og browsere. Den bedste fremgangsmåde er at anvende skrifttypestile til alle vigtige HTML-elementer, herunder overskrifter, blok citater og afsnit.
Lodret rytme kan retoucheres, når et gitter er sat på plads, hvilket gør skalering til forskellige miljøer enkel. Desktop-brugere vil have en meget anden oplevelse end bærbare og mobile brugere, der har at gøre med meget mindre opløsninger.
Du kan ikke planlægge den lodrette justering med nøjagtig præcision, men i de fleste tilfælde vil et uddannet gæt give kvalitetsresultater.
Tredje regel
Opdel et design i tre vandrette og lodrette rum. Dette vil skabe et gitter med ni rektangler beliggende i nyformede lommer. Det er meget nemmere at arbejde med design, der er opdelt i blokarealer med endelige punkter.
Videnskaben bag denne tendens stammer fra den "guddommelige andel", også kendt som "guddommeligt forhold." Forholdet mellem 1.618, som er den guddommelige andel, er en matematisk konstant. Når vi deler et fast størrelse layout i denne værdi, kan vi beregne den mest præcise division for en to-kolonne struktur.
Tag som eksempel et 960-pixel layout. Hvis vi deler 960 med 1.618, får vi ca. 593. Ifølge den gyldne andel skal vi så sætte vores primære søjlelængde til 593 pixel. Denne metode går tilbage til kunstnere for århundreder siden. Heldigvis, med spredningen af open source-rammer, er det meste af matematikken allerede beregnet.
Opbygning af et gyldent rektangel
Denne teori for at skabe smukke gitterbaserede rektangulære layouter er baseret på Tredje Regel. Split rektangler er geometrisk lyd i forhold til det gyldne forhold. Numeriske værdier for rektangelets bredde og højde står i forhold til den gyldne regel.
Disse typer af rektangler er kendt som "gyldne rektangler." Den kortere og længere side skal holde værdierne af variabler a og b, henholdsvis.
Disse rektangler er nyttige til at opbygge sidelayouter: de måler, hvordan store blokelementer skal være. De er meget nemme at beregne, og værktøjerne til mange populære netrammer er indbygget.
Disse elementer er meget gavnlige for webdesignere, der bruger matematiske net. Forestil dig de mange scenarier, hvor et omhyggeligt struktureret gyldent rektangel vil forbedre en sides æstetik. Dette kan omfatte side widgets, e-handels produkt billeder og endda indholdsrige tabeller.
Begyndende med 960gs
Med al denne information tilgængelig for offentligheden er webdesignere begyndt at definere deres egne standarder.
Af alle de rammer, den 960 Gitter System (960gs) er nok den mest kendte. Dette er ikke at sige, at det er det bedste, ingen gittersystem passer perfekt til alle kriterier - men det er nemt at arbejde med. 960gs kan tilpasses og fungerer godt med næsten ethvert websted. Og det virker godt på de fleste browsere og enheder
Matematikken indeholder 12 kolonner på 60 pixels hver, sammen med en 10 pixel margin på hver side, der producerer en 20 pixel rende. De fleste gitter rammer er baseret på 12 til 24 pixel kolonner. Selvfølgelig forventes det ikke at indarbejde 12 kolonner i dit layout.
Til sidst vil du kombinere kolonnerne og tagrenderne i en enkelt netværksenhed. Udgivelse af indhold er meget lettere, når du kan udarbejde specifikke detaljer for billeder, widgets, videoer og andre sideelementer.
960gs har fået så meget reklame, fordi det tilpasser sig godt til internettet. De fleste skærmopløsninger kan vise en 960-pixel website uden en vandret rullepanel. I stigende grad passer layouterne ind i dette forhold, hvilket indikerer, at dette er fremtiden for internettet. Den ekstra bredde tager ikke afstand fra designet og udvidelse eller kontrahering af en skabelon er fuldstændig mulig.
Forstå en komplet 960 Layout
Kun så mange kolonner kan rationelt passe ind i et design. Et gitter er ikke beregnet til at låse dig i en begrænsende tankegang. Rutenettet er vejledninger til at følge: de forbedrer brugerinteraktivitet og sideelementplacering.
Det største net, du kan oprette, er et 940-pixel indholdsområde med 20 pixel rennere. Det er en tåbelig brug af gitteret, men det er godt at forstå mulighederne. To-kolonne layout er ret enkle og giver masser af plads til indhold. Fælles eksempler omfatter:
- 780 x 140,
- 700 x 220,
- 620 x 300.
Bemærk at disse alle tilføjer op til 920. Tapet på 40 pixel kan tegnes af rynker på hver "blok" af layoutet. Disse mellemrum holder brugerne opmærksomme og tillader indholdet at bryde sammen jævnt. Med delte indholdselementer har vi tagrender på den fjerne side og mellem blokkene, der hver især tegner sig for 10 af de 40 pixel.
Disse mellemrum øges, når du tilføjer nye blokke til layoutet. Et tre-kolonne design har lidt mindre plads til indhold end et to-kolonne design.
Hvis dette koncept stadig er forvirrende, henvises til billedet ovenfor. Den enkleste måde at arbejde med grids på er at designe et referencelinje svarende til ovenstående grafik, med alle mulige pauser for indholdsblokke. Med disse oplysninger blandes og matches stilarter for at bestemme hvilken type design der passer bedst til dit projekt.
For eksempel, siger vi, at vi ønsker at designe en mock-up ved hjælp af tre kolonner og det største mulige indholdsområde. Med ovenstående oversigt kan vi nedbryde vores indholdsområde i to dele: en fuld af indhold, men opdelt i halv for at indeholde to kolonner. Dette ville kræve en 450-pixel indholdsblok og to 210 pixel kolonner.
Igen er disse net ikke beregnet til at kvæle kreativitet. De giver mulighed for fleksibilitet, men holder din back-end struktur sikker. De fleste designere vil ikke overveje videnskaben om alt dette. Hvor lang tid disse open source-systemer gemmer et projekt er ekstraordinært, det er nemt at scanne gennem dokumentationen og implementere dit eget layout.
Fluid Grid Layouts
Det er ikke almindeligt at se gitter, der er fastgjort til væskeformater. Pixler er den mest præcise måleenhed for en hjemmeside. At flytte ind i en måling som procentdele eller ems ville kræve nøje overvejelse. Sådanne layouter er mulige med få ændringer og yderligere CSS-selektorer.
Fluid 960 Gitter System er velkendt, selvom det meste af koden ikke er tilgængelig for ældre versioner af Internet Explorer. Gennem interaktive prototyper og arbejde på utallige skærmopløsninger kan du skala et 960-pixel-design på tværs af mange skærmopløsninger. Denne åbne ramme er ikke en eksakt kopi af 960gs, og den kommer med ny dokumentation. Hvis du er interesseret, tjek den GitHub repository til aktive forumdiscussioner og arkiverede Q & A-sessioner.
Ligesom resten af webdesign-samfundet er du sikkert kløen for noget mere stabilt. Et par flydende rammer, der genererer fantastiske layouter.
YAML Grid Layouts
Endnu en anden Multicolumn Layout (YAML) er et af de mest populære CSS-rammer. Den indeholder en stor kodebase til manipulation af fleksible XHTML- og CSS-layouter. Den opdateres løbende af aktive fællesskabsprojekter.
Rammen er ekstremt alsidig og tilbyder mange praktiske eksempler med kode. Det mindste layout med fast bredde svarer til 740 pixel og passer til 800 × 600 skærmopløsninger. Maksimal breddeopløsning er sat til 80 em, hvilket giver skalerbarhed mellem mobil og desktop browsing.
Sæt med standard web skrifttyper, vil omkring 75% af layoutene være i overensstemmelse med et maksimum på 960 pixel, selv om dette kan overskrives.
Mange af de fejl, der findes i ældre browsere, er blevet patched. YAML understøtter Google Chrome, Mozilla Firefox, Safari og alle versioner af Internet Explorer 5+. Se rammens overblik og funktioner for mere dybdegående information.
Yahoo! Brugergrænsefladebibliotek
YUI er et sæt af JavaScript og CSS biblioteker udgivet af Yahoo. De fleste af projektkode og fejlrettelser er skrevet af professionelle udviklere fra YUI-samfundet. Den seneste revision er dog YUI2 YUI3 API-dokumenter er blevet frigivet til v3.1.1.
Det YUI2 startside har links, der fører til de mest populære projekter. På bunden, der er anført under "YUI2 CSS Tools", er fire indflydelsesrige rammer: CSS Reset, Base, Fonts og Grids. Denne artikel omhandler CSS Grids, selv om mange af disse andre rammer er blevet omtalt.
Downloadfilen er kun 4 KB og tilbyder over 1000 unikke webside layouts. Indbyggede indstillinger giver mulighed for både størrelser i størrelsen af væske og fast layout. Kolonner er selvrensende, så hvad enten du kører to- eller fire-vejs splittelser, forbliver footerindholdet altid under det primære indhold. Typografiske egenskaber er bundet sammen for fleksible brugerspecifikke tilpasninger. Mange kerneegenskaber er taget hånd om, hvilket gør arbejdet i YUI2 så dejligt.
CSS Grids Framework tilbyder et lille antal mobilbaserede layouter. Disse gengives korrekt kun på browsere med en relativt ny version af Webkit-motoren. Dette omfatter smartphones som Android-enheder, iPhone, BlackBerry og mange Windows Mobile-enheder.
Integrationen er god, men disse nye medier er ikke blevet testet grundigt og kan stadig vise sig forkert på nogle mobile enheder. Men i slutningen af dagen er det umagen værd, fordi de fleste mobile besøgende, der er villige til at læse indholdet på din hjemmeside, sandsynligvis ejer en smartphone.
Udviklingen af webkultur
Webdesignere er blevet helt eftertragtede om åbne systemer og regler. Den tidlige web var ikke meget af et fællesskab overhovedet. Der var HTML og CSS standarder, men mentaliteten bag de fleste layouts var "uanset hvad der fungerer." Efter en betydelig udvikling inden for webteknologi er internettet blevet det bedste medium til publikation over hele verden.
Webdesignere og udviklere har til formål at forenkle processen med at skabe websites uden at tage væk fra kvaliteten eller oplevelsen af et websted. Gitter er et harmonisk instrument, idet de giver design en ordre og struktur. Chaos og tilfældig oprettelse giver normalt ikke resultater.
Derfor er netdesigner så tilgængelige. Internettet er blevet reformeret til et fleksibelt udviklingssystem. Gitterbaserede layouter producerer stabile hjemmesider: det er ingen overraskelse, at samfundet har vedtaget rammer som almindelig praksis.
I stedet for at stole på ældre upålidelige metoder kan den gennemsnitlige webdesigner i dag fokusere på at skabe hjemmesider, der er behagelige for brugerne, snarere end at koordinere pixel-perfekte kreationer.
Designere er i dag meget yngre og har større passion for design end nogensinde før. Dette kombineret med den åbne webbevægelse betyder, at en strøm af ny webkode løbende bliver udgivet til offentligheden. GitHub repositories tilbyder netværksmuligheder med andre CSS-udviklere.
Custom Grid Framework Development
Designere har kritiseret mange åbne rammer som værende for opustet. Mange er mærket som forvirrende, med for mange klasser og regler at arbejde med. Dette kan være sandt for nogle, og jeg fraråder bestemt ikke disse bemærkninger.
I sidste ende jo mere fleksibelt et design, desto bedre. Kunstnere søger værktøjer, der gør deres arbejde lettere. Rammer er ikke egnede til alle design. Udvikling af rammer over mindre webprojekter vil spare tid på lang sigt. Men overvej CSS-systemer som mere af et læringsværktøj end et produktionsmiljø.
Gitter kan være forvirrende i starten, uden tvivl om det. At have en referenceramme og dokumentation til at kontrollere imod hele processen vil hjælpe nybegyndere med at integrere hurtigt og med mindre stress.
Med tilstrækkelig praksis vil det være nemt at udvikle en brugerdefineret CSS-ramme. Fordelene ved dette langt opvejer fordelene ved at arbejde med andres kilde. Du kan strukturere alle layoutformater på ét sted og definere egenskaber som skrifttype, linjens højde og blokelementer. Ingen har nogensinde skrevet perfekt CSS kode, så hold dig til det, der virker bedst for dig.
Fælles CSS Grid Rammer
Nedenfor er nogle af de mere populære CSS-rammer. Selv om ikke alle disse rammer fokuserer udelukkende på netdesign, tilbyder de nyttige biblioteker til at studere og implementere i webdesign. Projektkilden er gratis, og leveres normalt med dokumentation.
1KB Gitter
1KB Gitter er en stor CSS ramme, der hovedsageligt fremhæver hastighed. Downloadfilerne er mindre end 1 KB i alt, og de fleste CSS-selektorer behøver du at oprette et smukt webstedslayout. CSS-koden kan tilpasses før download, hvilket er en stor fordel for alle webdesignere. Du kan vælge mellem, hvor mange kolonner der skal inkluderes, og hvor bredt kolonnerne og tagrenderne skal vises. Dette net er yderst venligt for nykommere og en god måde at bryde dig ind i.
Baseline CSS
Baseline er en anden standard CSS-skabelon tilgængelig gratis til download. Denne pakke indeholder ikke kun kode til grids, men det strukturerer også sidetypografi og blokelementer. Alle kode er kompatible med CSS3 og HTML5 elementer, hvilket giver udviklere kontrol over, hvordan man strukturerer sidestrøm. Baseline CSS tilbyder løsninger til vertikal rummanipulation ved at integrere sidetypografi i et fleksibelt net.
1140px CSS Grid System
CSSGrid.net er hjemsted for en nyere væskeramme for netbaserede hjemmesider. Med 1140 pixels og en 12-kolonne split, strukturerer strukturen ordentligt på alle enheder, fra de største monitoropløsninger til håndholdte. Rammen bruger medieforespørgsler til at kontrollere, hvornår der skal vises et bestemt layout, og hvordan man spredes sidens indhold. Forfatter Andy Taylor opdaterer ofte projektet, og du kan downloade seneste 1.6 udgivelse her .
YAML
YAML giver den mest fleksible ramme til udvikling af layouter. Dokumentationen giver en komplet løsning til alle faste, elastiske og flydende layouter. Kernefiler er blevet testet udførligt på små og store websteder. Hvis du leder efter en stabil CSS-ramme, er YAML en fantastisk løsning.
Blueprint CSS
Blueprint indeholder mange af fordelene ved baseline. Fordelen ved denne ramme er dens velkendte mærke. Mange aktive udviklere har opdateret projektet med nye klasser. Gitter omfatter en stor del af rammen, men mange modeller bruges til at danne typografi, mobil- og printskærme og meget mere!
CSS Boilerplate
Det CSS Boilerplate Projektet blev startet af en af udviklerne af Blueprint. Koden er en mere raffineret, fjernet version af Blueprint-rammerne, optimeret til hastighed og let læsbarhed. Selv om projektet ikke er blevet opdateret for nylig, giver det mulighed for begyndere at udelukke deres egne CSS-projektdefinitioner.
YUI 2: Grids CSS
YUI2 Gitter er en meget populær ramme udgivet af Yahoo under sin YUI2 linje. Koden er perfekt til både faste og flydende layouter, efter regler i CSS2 og CSS3. Rammen er veldokumenteret under Yahoo User Interface Library og betragtes som en af de bedre rammer for begyndere.
Dette indlæg blev udelukkende skrevet til Webdesigner Depot af Jake Rocheleau , en passioneret webdesigner og social media entusiast. Jake elsker at læse og skrive om de nyeste digitale internettendenser og netværk inden for designsamfundet. Tjek ham ud på Twitter @jakerocheleau for mere om hans arbejde.
Bruger du en gitterbaseret ramme til dine designs? Del dine synspunkter med os!