Webkultur: Grid-Based Layout Designs
Semantic webben har tagit fram en ny generation av Internet-teknik. Eftersom designers och utvecklare arbetar tillsammans för att omdefiniera reglerna på webben, fortsätter antalet öppna källprojekt och API från tredje part att växa.
Webbforskarnas åsikter skiljer sig från användningen av nätsystem . Många hävdar att inställningsnätpunkter begränsar designers kreativitet. Andra hävdar att ett nät ger en vetenskaplig grund för att en design ska bli perfekt.
Båda sidorna ger intressanta argument. Dessa idéer har blivit en del av en unik webbkultur som präglas av inflytelserika designregler och öppen källkodsprojekt.
Nätet är inte en huvudnyckel till perfekt design. Matematiken har dock visat att vissa designspecifikationer ger de bästa förhållandena för sidelement och layouter. Om du har hört talas om något av detta tidigare , kanske du är bekant med de många alternativen som nätbaserade layouter erbjuder designers.
En jämförelse med den klassiska webben
Äldre generationer använde design som en kontrollmekanism. Deras mönster presenterade information exakt och på ett sätt som var lätt att hantera. Detta gäller fortfarande idag, men dessa vanliga designprinciper avlivas.
I deras köl rörs en ny webbkultur. En kultur med öppna standarder och protokoll, fritt delad källkod och kraftfulla plattformar som drivs av programmerare över hela världen.
En orsak till denna utveckling är den betydande ökningen av antalet personer som arbetar på semantiska webben. Den bakomliggande orsaken härrör från den mänskliga drivningen för att bidra till något mer än oss själva.
Att arbeta för en lönadag är tillfredsställande, men inte något att vara passionerad för. Utvecklare som verkligen bryr sig om nya standarder vill lämna sitt varumärke.
Där galler har utvecklats
Det har inte varit en stor studie som jämför pre-standard och post-standard webbdesigntekniker. Vi kan dock spåra hur nät har blivit mer populära över tiden.
Gridsystemet är baserat på nuvarande tekniska trender och framsteg. Detta inkluderar statistik över antalet personer som når Internet på en viss tid, de enheter som de använder för att komma åt Internet och skärmupplösningar och operativsystem för sina enheter. Grid-system ger en strukturell balans till webbsidor. De ger konsekventa mätningar och möjliggör flexibilitet mellan ramar.
I slutet av 1990-talet körde inte många hushållsmaskiner en upplösning högre än 800 × 600, och ännu färre över 1024 × 768. Under de senaste 20 åren har invecklade och komplexa operativsystem utvecklats för att visa mycket högre upplösningar. 1024 × 768 är en vanlig inställning dessa dagar.
Övervakningsupplösningarna växer exponentiellt, och denna trend verkar inte sakta. Kolla in datatabellen från Webstatistik och trender ; Det beskriver skärmupplösningsmätningar via W3Schools.
Visual Grid Designs
Alla webbsidor är baserade på nät, oavsett om designern är medveten om detta eller inte. Digitalt arbete består av pixlar och som sådan kommer att överensstämma med en uppsättning bredd och höjd, vilket också producerar konstnärliga effekter visuellt med avstånd och avstånd mellan punkter.
I stället för att måla i mörkret, så att säga, kan du använda rutnät för att lysa på projektet. Grids blev först populär med framväxten av Adobe Photoshop som de facto- verktyget för webbdesigners. Tutorials på webben presentera sätt att visa och implementera rutlinjer när man skapar mockups, logotyper, grafik, ikoner och annan digital konst.
Med tiden samlade utvecklare på detta och började implementera system i eget arbete. Att utforma en galler layout i Photoshop är mycket annorlunda än att skapa samma layout i HTML och CSS.
Arbetet som krävs för varje väg är väldigt annorlunda, men nätverket är i sig universellt. När öppna standarder faller på plats flyttar nuvarande designkultur mot gridbaserade strukturer.
Grundläggande HTML- och CSS-regler
Grids använder några av de vanligaste egenskaperna hos HTML webbsidor. HTML-gridlayouter genererar samma övergripande mall varje gång.
Strukturen börjar med en innehållande omslag som är tillräckligt bred för att innehålla alla kolumnerna. Inom wrappningsavdelningen borde det finnas en samling av indelningar. Antalet underavdelningar ska vara detsamma som antalet kolumner du behöver.
För en layout med två kolumner kan du ha två divisioner, klassade som .left och .right . Alla dina interna kolumner ska ha sin CSS float-egenskap inställd till vänster eller höger, medan omslaget ska innehålla a clearfix-klassen .
För att få en känsla för HTML-kod kan du kolla in en dynamisk rutnätlayoutgenerator. Den populära lösning från sidkolumn erbjuder en bra struktur och stödjer layouter med flera kolonner. Alla HTML och CSS genereras omedelbart och överensstämmer med test av standarder.
Bryta ut med padding
Padding och takrännor är integrerade delar av något nätsystem. Innehåll av innehåll som formateras bredvid varandra kräver utrymme mellan dem, vilket kan få layouten att expandera onaturligt, vilket resulterar i brutna sidor.
Skapa definition i vadderade områden genom att skapa en layout fylld med dummyinnehåll. Placera dina kolumner på en sida och ge dem 1-pixel konturer med olika färger. Detta ger en korrekt representation av hur din design kommer att se ut, och beskriver varje områdes del av innehållet.
Denna teknik fungerar med både fasta och flytande layouter, vilket gör integrationen till nuvarande rutnätverk mycket enklare.
Gutters behöver inte heller följa en uppsättning ramar. Du kan vara villig att offra innehållsområdet för att öka utrymmet mellan en splittring med två kolumner. Open-source-ramar kan formas och låter dig redigera stilar direkt eller ens implementera dina egna för att skriva över regler och definiera egenskaper.
Layout Grid CSS Property
De layout-grid egendom är en äldre CSS-specifikation antagen av Microsoft. Det är skrivet i stenografi för att ställa in en mängd nätegenskaper. Speciellt refererar de layout-grid-mode , layout-grid-type , layout-grid-line , layout-grid-char och layout-grid-char-spacing .
Var och en av dessa kan definieras som egen egendom och kan skrivas utan övergripande layout-grid . Här är en kort lista som förklarar var och en:
layout-grid-mode
Kontrollerar vilken typ eller läge av layoutnätet som används. Möjliga värden inkluderarnoneför inget rutnät,lineför inline gridelement,charför tecken och block-line-element, ochbothför allround support.layout-grid-type
Kontrollerar vilket rutnät som används för att göra sidtypografi och interna textelement. Värdet par ärloose, som används för kinesisk och koreansk text,strict, som används för japanska tecken, ochfixed, som använder monospacing för att tillämpa lika avstånd mellan tecken, oavsett språk.layout-grid-line
Kontrollerar gridlängdgranularitet närlayout-grid-modeär satt tilllineellerboth. Denna egenskap beter sig somline-heightoch kan ta emot numeriska värden som anges i cm, px, pt, em eller procentsatser.layout-grid-char
Kontrollerar storleken på teckenfönstret för ett elements textinnehåll närlayout-grid-modeär satt tilllineellerboth. De värden som den här egenskapen accepterar är densamma som ovan och direkt påverkar sidans linjehöjd. Skillnaden är detlayout-grid-linepåverkar sidnätet, medanlayout-grid-charpåverkar text- och teckenavståndet.layout-grid-char-spacing
Kontrollerar teckenavstånd närlayout-grid-modeär satt tillcharellerbothoch denlayout-grid-typefastigheten är inställd påloose. Den här egenskapen beter sig somline-heightoch bör användas för blocknivå textområden.
Syftet med att skapa dessa egenskaper är att anpassa gallerinställningar för asiatiska kodade sidor. Tecken på asiatiska språk kräver ofta anpassade sidlayouter.
När de ses i andra länder kan dessa karaktärer uppträda konstigt och bryta dina rutnätberäkningar. Dessa unika egenskaper möjliggör bättre visuell formatering genom att använda ett ett- eller tvådimensionellt rutsystem.
Vertikal Sidrytm
Många grafiska artister kommer att glansa betydelsen av vertikalt avstånd i gallerdesignen. Gridlines stödjer horisontell layoutdesign och anpassar vertikala sidelement och typografi. Fyra viktiga egenskaper manipulerar vertikalt avstånd: teckensnittstorlek, linjens höjd, topp- och bottenmarginaler och vaddering.
Linjens höjd är den största faktorn i vertikalavstånd. Sidtexten skalas av hur stora enskilda bokstäver som visas och hur mycket utrymme linjerna däremellan kräver. Vanligtvis är linjens höjd definierad i pixlar eller ems, beroende på hur flexibel layouten är. Ems behåller typografisk konsistens över alla upplösningar och webbläsare. Det bästa sättet är att använda teckensnittstyp för alla större HTML-element, inklusive rubriker, block citat och stycken.
Vertikal rytm kan retuscheras när en rutnät har ställts in, vilket gör skalning för olika miljöer enkelt. Skrivbordsbrukare kommer att ha en mycket annorlunda upplevelse än bärbara och mobila användare, som hanterar mycket mindre upplösningar.
Du kan inte planera den vertikala anpassningen med exakt precision, men i de flesta fall kommer en utbildad gissning att ge kvalitetsresultat.
Tredje regeln
Dela upp en design i tre horisontella och vertikala utrymmen. Detta skapar ett rutnät med nio rektanglar inbäddat i nyformade fickor. Det är mycket lättare att arbeta med mönster som är uppdelade i blockområden med ändliga punkter.
Vetenskapen bakom denna trend kommer från den gudomliga andelen, även känd som "gudomliga förhållandet". Förhållandet 1,618, vilket är den gudomliga andelen, är en matematisk konstant. När vi delar upp en storlek med fast storlek i detta värde kan vi beräkna den mest exakta divisionen för en struktur med två kolumner.
Ta till exempel en 960-pixel layout. Om vi delar 960 med 1.618 får vi cirka 593. Enligt den gyllene andelen bör vi sätta vår primära kolonnlängd till 593 pixlar. Denna metod går tillbaka till artister för århundraden sedan. Lyckligtvis, med spridningen av open-source-ramar, har det mesta av matematiken redan beräknats.
Bygg en gyllene rektangel
Denna teori för att skapa vackra rutnätbaserade rektangulära layouter baseras på Tredje regeln. Split rektanglar är geometriskt ljud jämfört med det gyllene förhållandet. Numeriska värden för rektangelns bredd och höjd står i proportion till den gyllene regeln.
Dessa typer av rektanglar är kända som "gyllene rektanglar". Den kortare och längre sidan bör hålla värdena för variablerna a respektive b.
Dessa rektanglar är användbara för att skapa sidlayouter: de mäter hur stora blockelement ska vara. De är extremt lätta att beräkna, och verktygen för många populära gallerramar är inbyggda.
Dessa element är mycket fördelaktiga för webbdesigners som använder matematiska nät. Föreställ dig de flera scenarierna där en noggrant strukturerad gyllene rektangel skulle förbättra en sidas estetik. Detta kan innehålla sid widgets, e-handels produktbilder och till och med innehållsrika tabeller.
Börjar med 960gs
Med all denna information tillgänglig för allmänheten har webbdesigners börjat definiera sina egna standarder.
Av alla ramar, den 960 Grid System (960gs) är förmodligen den mest kända. Det här är inte att säga att det är det bästa nätverket som passar alla kriterier perfekt, men det är lätt att arbeta med. 960gs är anpassningsbar och fungerar bra med nästan vilken som helst webbplats. Och det går bra på de flesta webbläsare och enheter
Matematiken innehåller 12 kolumner med 60 pixlar vardera, tillsammans med en 10-pixelmarginal på varje sida, vilket ger en 20-pixel rännan. De flesta rutnätverk baseras på 12 till 24 pixlar kolumner. Naturligtvis förväntas inte du infoga 12 kolumner i din layout.
Så småningom kommer du att kombinera kolumnerna och takrännorna till en enda nätenhet. Publicering av innehåll är mycket lättare när du kan utarbeta specifika detaljer för bilder, widgets, videor och andra sidelement.
960gs har fått så mycket publicitet eftersom det anpassar sig bra till webben. De flesta skärmupplösningar kan visa en 960-pixels webbplats utan en horisontell rullningsfält. I allt större utsträckning passar layouterna i detta förhållande, vilket indikerar att detta är webens framtid. Den extra bredden tar inte bort motivet och expanderar eller kontraherar en mall är helt möjligt.
Förstå en fullständig 960 Layout
Bara så många kolumner kan rationellt passa in i en design. Ett nät är inte avsett att låsa dig i en begränsande inställning. Grids är guider att följa: de förbättrar användarinteraktivitet och placering av sidelement.
Det största rutnätet du kan skapa är ett innehållsområde på 940 pixlar med 20-pixel rännor. Det är en goofy användning av gallret, men det är bra att förstå möjligheterna. To-kolumnlayouter är ganska enkla och ger gott om plats för innehåll. Vanliga exempel är:
- 780 x 140,
- 700 x 220,
- 620 x 300.
Observera att dessa alla lägger till 920. 40-pixelförlusten kan redovisas av rännor på varje "block" i layouten. Dessa utrymmen håller användarna inriktade och tillåter innehållet att splittra sig smidigt. Med delade innehållsdelar har vi rännor på andra sidan och mellan blocken, var och en står för 10 av de 40 pixlarna.
Dessa mellanslag ökar när du lägger till nya block i layouten. En design med tre kolonner har något mindre utrymme för innehåll än en design med två kolonner.
Om detta koncept fortfarande är förvirrande, se bilden ovan. Det enklaste sättet att arbeta med nät är att utforma ett referensblad som liknar bilden ovan, med alla möjliga raster för innehållsblock. Med denna information, mixa och matcha stilar för att bestämma vilken typ av design som bäst passar ditt projekt.
Till exempel, säg att vi vill designa en mock-up med tre kolumner och det största möjliga innehållsområdet. Med diagrammet ovan kan vi bryta ner vårt innehållsområde i två delar: en full av innehåll, men dela ihop för att innehålla två kolumner. Detta skulle kräva ett innehållsblock med 450 pixlar och två 210 pixlar kolumner.
Återigen är dessa nät inte avsedda att kväva kreativitet. De möjliggör flexibilitet men håller din back-end struktur säker. De flesta designers kommer inte att övervaka vetenskapen om allt detta. Den tid som dessa öppen källkodssystem räddar ett projekt är extraordinärt, det är enkelt att skumma igenom dokumentationen och implementera din egen layout.
Fluid Grid Layouts
Det är inte vanligt att se galler som är fastsatta i vätskeformat. Pixlar är den mest exakta mätenheten för en webbplats. Att flytta in i en mätning som procentandelar eller ems skulle kräva noggrann övervägning. Sådana layouter är möjliga med några ändringar och ytterligare CSS-valörer.
Fluid 960 Grid System är välkänt, även om de flesta av koden inte är tillgängliga för äldre versioner av Internet Explorer. Genom interaktiva prototyper och arbeta på otaliga skärmupplösningar kan du skala en 960-pixel design över många skärmupplösningar. Denna öppna ram är inte en exakt kopia av 960gs, och den kommer med ny dokumentation. Om du är intresserad, kolla in GitHub repository för aktiva forumdiskussioner och arkiverade Q & A-sessioner.
Liksom resten av webbdesignsgemenskapen är du noga kliar för något mer stabilt. Några flytande ramar som genererar fantastiska layouter.
YAML Grid Layouts
Ännu en multikolumnlayout (YAML) är en av de mest populära CSS-ramarna. Den innehåller en stor kodbas för att manipulera flexibla XHTML- och CSS-layouter. Den uppdateras kontinuerligt av aktiva utvecklare av samhället.
Ramverket är extremt mångsidigt och erbjuder många praktiska exempel med kod. Den minsta layouten med fast bredd överensstämmer med 740 pixlar och passar 800 × 600 skärmupplösningar. Maximal breddupplösning är inställd på 80 em, vilket ger skalbarhet mellan mobil och skrivbordsbläddring.
Inställd med vanliga webbsidor kommer cirka 75% av layouterna att överensstämma med ett maximum på 960 pixlar, även om detta kan skrivas över.
Många av de fel som finns i äldre webbläsare har blivit patchade. YAML stöder Google Chrome, Mozilla Firefox, Safari och alla versioner av Internet Explorer 5+. Se ramverkets överblick och funktioner för mer djupgående information.
Yahoo! User Interface Library
YUI är en uppsättning av JavaScript och CSS-bibliotek utgivna av Yahoo. De flesta av projektkoden och buggfixarna har skrivits av professionella utvecklare från YUI-samhället. Den senaste versionen är dock YUI2 YUI3 API-dokument har släppts till v3.1.1.
De YUI2 hemsida har länkar som leder till de mest populära projekten. Mot botten, listade under "YUI2 CSS Tools", finns fyra inflytelserika ramar: CSS Reset, Base, Fonts and Grids. Denna artikel handlar om CSS Grids, även om många av dessa andra ramverk har hänvisats till.
Hämtningsfilen är bara 4 KB och erbjuder över 1000 unika webbsidor. Inbyggda inställningar möjliggör både breddstorleken för vätska och fast layout. Kolumnerna är självklarande, så om du kör två- eller fyrvägssplitsar, fortsätter innehållet i sidfot alltid under det primära innehållet. Typografiska egenskaper är bundna ihop för flexibla användarspecifika justeringar. Många kärnfunktioner tas hand om, vilket gör arbetet i YUI2 så trevligt.
CSS Grids Framework erbjuder ett litet antal mobilbaserade layouter. Dessa visas korrekt endast på webbläsare med en relativt ny version av Webkit-motorn. Detta inkluderar smartphones som Android-enheter, iPhone, BlackBerry och många Windows Mobile-enheter.
Integrationen är trevlig, men det här nya mediet har inte testats noggrant och kan fortfarande visas felaktigt på vissa mobila enheter. Men i slutet av dagen är det värt besväret, eftersom de flesta mobil besökare som är villiga att läsa innehållet på din webbplats antagligen äger en smartphone.
Utvecklingen av webbkultur
Webbdesigners har blivit ganska eftertänksamt om öppna system och regler. Den tidiga webben var inte mycket av ett samhälle alls. Det fanns HTML- och CSS-standarder, men mentaliteten bakom de flesta layouterna var "vad som helst". Efter betydande utveckling inom webbteknik har Internet blivit det bästa mediet för publikation över hela världen.
Webbdesigners och utvecklare syftar till att förenkla processen att skapa webbplatser utan att ta bort kvaliteten eller erfarenheten av en webbplats. Grids är ett harmoniskt instrument genom att de ger mönster en ordning och struktur. Chaos och slumpmässig skapning ger vanligtvis inte resultat.
Det är därför griddesignerna är så tillgängliga. Webben har reformerats till ett smidigt utvecklingssystem. Gridbaserade layouter producerar stabila webbplatser: det är ingen överraskning att gemenskapen har antagit ramar som vanlig praxis.
Istället för att förlita sig på äldre opålitliga metoder kan den genomsnittliga webbdesignern idag fokusera på att skapa webbplatser som är tilltalande för användarna, snarare än att samordna pixel-perfekta skapelser.
Idag är designers mycket yngre och har större passion för design än någonsin tidigare. Detta, i kombination med den öppna banans rörelse, innebär att en ström av ny webbkod kontinuerligt släpps ut till allmänheten. GitHub repositories erbjuder nätverksmöjligheter med andra CSS-utvecklare.
Anpassad Grid Framework Development
Designers har kritiserat många öppna ramar som för uppblåst. Många är märkta som förvirrande, med för många klasser och regler att arbeta med. Detta kan vara sant för vissa, och jag diskuterar verkligen inte dessa kommentarer.
I slutändan är ju mer flexibel en design, desto bättre. Konstnärer letar efter verktyg som gör jobbet enklare. Ramar är inte lämpliga för alla mönster. Att utveckla ramar över mindre webbprojekt kommer att spara tid på lång sikt. Tänk dock på CSS-systemen som mer av ett inlärningsverktyg än en produktionsmiljö.
Grids kan vara förvirrande först, utan tvekan om det. Att ha en referensram och dokumentation för att kontrollera över hela processen kommer att hjälpa nybörjare att integrera snabbt och med mindre stress.
Med tillräcklig övning blir det enkelt att utveckla en anpassad CSS-ram. Fördelarna med detta överstiger fördelarna med att arbeta med någon annans källa. Du kan strukturera alla layoutformat på en plats och definiera egenskaper som typsnittstorlek, linjehöjd och blockelement. Ingen har någonsin skrivit perfekt CSS-kod, så håll fast vid det som fungerar bäst för dig.
Vanliga CSS-ramverk
Nedan följer några av de mer populära CSS-ramarna. Även om inte alla dessa ramar fokuserar enbart på nätdesign, erbjuder de användbara biblioteken att studera och implementera i webbdesigner. Projektkällkoden är gratis i varje fall och levereras vanligtvis med dokumentation.
1KB rutnät
1KB rutnät är ett bra CSS-ramverk som främst betonar hastighet. Nedladdningsfilerna är mindre än 1 KB totalt och innehar de flesta CSS-väljare du behöver för att skapa en vacker webbplatslayout. CSS-koden är anpassningsbar innan den laddas ned, vilket är en stor fördel för alla webbdesigners. Du kan välja mellan hur många kolumner som ska ingå och hur breda kolumnerna och takrännorna ska visas. Detta nät är extremt vänligt för nykomlingar och ett bra sätt att bryta sig in.
Baslinje CSS
Baseline är en annan standard CSS-mall tillgänglig gratis för nedladdning. Det här paketet innehåller inte bara kod för nät, men det strukturerar också sidtypografi och blockelement. All kod är kompatibel med CSS3 och HTML5-element, vilket ger utvecklare kontroll över hur man strukturerar sidflöde. Baslinje CSS erbjuder lösningar för vertikal rymdmanipulation genom att integrera sidtypografi i ett flexibelt nät.
1140px CSS Grid System
CSSGrid.net är hem för en nyare flytande ram för nätbaserade webbplatser. Med 1140 pixlar och en 12-kolonn splittras strukturen ordentligt på alla enheter, från de största övervakningsupplösningarna till handdatorer. Ramverket använder mediafrågor för att kontrollera när en viss layout ska visas och hur man sprider sidinnehållet. Författare Andy Taylor uppdaterar ofta projektet, och du kan ladda ner senaste 1,6 släpp här .
YAML
YAML ger den mest flexibla ramen för att utveckla layouter. Dokumentationen erbjuder en komplett lösning för alla fasta, elastiska och flytande layouter. Kärnfiler har testats utförligt på små och stora webbplatser. Om du letar efter en stabil CSS-ram är YAML en bra lösning.
Blueprint CSS
Plan innehåller många av fördelarna med baslinjen. Fördelen med denna ram är dess välkända varumärke. Många aktiva utvecklare har uppdaterat projektet med nya klasser. Grids består av en stor del av ramverket, men många modeller används för att bilda typografi, mobil- och skrivskärmar med mera!
CSS Boilerplate
De CSS Boilerplate Projektet startades av en av utvecklarna av Blueprint. Koden är en mer raffinerad, avvecklad version av Blueprint-ramen, optimerad för snabb och enkel läsbarhet. Även om projektet inte har uppdaterats nyligen ger det möjlighet för nybörjare att utesluta egna CSS-projektdefinitioner.
YUI 2: Grids CSS
YUI2-galler är en mycket populär ram som läggs ut av Yahoo under dess YUI2-rad. Koden är perfekt för både fasta och flytande layouter, enligt regler som anges i CSS2 och CSS3. Ramverket är väl dokumenterat under Yahoo User Interface Library och anses vara en av de bättre ramarna för nybörjare.
Detta inlägg skrevs uteslutande för Webdesigner Depot av Jake Rocheleau , en passionerad webbdesigner och social media entusiast. Jake älskar att läsa och skriva om de senaste digitala Internettrenderna och nätverkandet inom designgemenskapen. Kolla in honom på Twitter @jakerocheleau för mer om hans arbete.
Använder du ett nätbaserat ramverk för dina mönster? Dela dina åsikter med oss!