Webkultur: Rasterbasierte Layoutdesigns

Das semantische Web hat eine neue Generation der Internettechnologie hervorgebracht. Da Designer und Entwickler zusammenarbeiten, um die Regeln des Webs neu zu definieren, wächst die Zahl der Open-Source-Projekte und APIs von Drittanbietern weiter.

Die Meinungen von Web-Wissenschaftlern gehen hinsichtlich der Verwendung von auseinander Gittersysteme. Viele argumentieren, dass das Festlegen von Rasterpunkten die Kreativität von Designern einschränkt. Andere behaupten, dass ein Raster eine wissenschaftliche Grundlage für die Perfektionierung eines Designs bietet.

Beide Seiten liefern interessante Argumente. Diese Ideen sind Teil einer einzigartigen Webkultur geworden, die von einflussreichen Designregeln und Open-Source-Projekten geprägt ist.

Das Raster ist kein Generalschlüssel für perfektes Design. Allerdings hat die Mathematik bewiesen, dass bestimmte Designspezifikationen die besten Verhältnisse für Seitenelemente und Layouts bieten. Wenn Sie davon schon einmal gehört haben, sind Sie vielleicht mit den vielen Optionen vertraut, die rasterbasierte Layouts Designern bieten.

Ein Vergleich zum klassischen Web

Ältere Generationen nutzten Design als Kontrollmechanismus. Ihre Entwürfe präsentierten Informationen präzise und leicht zu handhaben. Das gilt auch heute noch, doch diese veralteten Gestaltungsprinzipien werden entwurzelt.

In ihrem Kielwasser entsteht eine neue Webkultur. Eine Kultur offener Standards und Protokolle, frei gemeinsamer Quellcodes und leistungsstarker Plattformen, die von Programmierern auf der ganzen Welt betrieben werden.

Ein Grund für diese Entwicklung ist die deutlich gestiegene Zahl der Menschen, die im Semantic Web arbeiten. Die zugrunde liegende Ursache liegt im menschlichen Drang, zu etwas mehr als uns selbst beizutragen.

Für einen Zahltag zu arbeiten ist befriedigend, aber kein Grund zur Leidenschaft. Entwickler, denen neue Standards wirklich am Herzen liegen, wollen ihre Spuren hinterlassen.

Wo sich Gitter entwickelt haben

Es gab keine größere Studie zum Vergleich von Webdesign-Techniken vor und nach den Standards. Wir können jedoch verfolgen, wie Grids im Laufe der Zeit immer beliebter wurden.

Das Rastersystem basiert auf aktuellen technologischen Trends und Fortschritten. Dazu gehören Statistiken über die Anzahl der Personen, die zu einem bestimmten Zeitpunkt auf das Internet zugreifen, die Geräte, mit denen sie auf das Internet zugreifen, sowie die Bildschirmauflösungen und Betriebssysteme ihrer Geräte. Rastersysteme sorgen für ein strukturelles Gleichgewicht bei Website-Layouts. Sie liefern konsistente Messungen und ermöglichen Flexibilität zwischen Frameworks.

In den späten 1990er Jahren liefen nicht viele Haushaltsgeräte mit einer höheren Auflösung als 800 x 600 und noch weniger über 1024 x 768. In den letzten 20 Jahren wurden komplizierte und komplexe Betriebssysteme entwickelt, um viel höhere Auflösungen anzuzeigen. 1024 x 768 ist heutzutage eine gängige Einstellung.

Die Monitorauflösungen nehmen exponentiell zu und dieser Trend scheint sich nicht zu verlangsamen. Schauen Sie sich die Datentabelle an Webstatistiken und Trends; Es werden die Messungen der Bildschirmauflösung über W3Schools detailliert beschrieben.

Visuelle Rasterdesigns

Alle Webseiten basieren auf Rastern, unabhängig davon, ob der Designer sich dessen bewusst ist oder nicht. Digitale Arbeiten bestehen aus Pixeln und entsprechen daher einer festgelegten Breite und Höhe, wodurch auch visuell künstlerische Effekte mit Abständen und Abständen zwischen Punkten erzielt werden.

Anstatt sozusagen im Dunkeln zu malen, können Sie mithilfe von Rastern Licht auf das Projekt werfen. Raster wurden erstmals mit dem Aufkommen von Adobe Photoshop populär de facto Tool für Webdesigner. Tutorials im Internet bieten Möglichkeiten zur Anzeige und Implementierung von Gitterlinien beim Erstellen von Modellen, Logos, Grafiken, Symbolen und anderen digitalen Kunstwerken.

Im Laufe der Zeit haben Entwickler dies aufgegriffen und begonnen, Systeme in ihre eigene Arbeit zu implementieren. Das Entwerfen eines Rasterlayouts in Photoshop unterscheidet sich stark vom Erstellen desselben Layouts in HTML und CSS.

Die für jeden Pfad erforderliche Arbeit ist sehr unterschiedlich, dennoch ist das Rastersystem selbst universell. Mit der Einführung offener Standards geht die aktuelle Designkultur in Richtung gitterbasierter Strukturen.

Grundlegende HTML- und CSS-Regeln

Raster nutzen einige der häufigsten Eigenschaften von HTML-Webseiten. HTML-Rasterlayouts generieren jedes Mal die gleiche Gesamtvorlage.

Die Struktur beginnt mit einem umschließenden Wrapper, der gerade breit genug ist, um alle Spalten aufzunehmen. Innerhalb der Wrapper-Abteilung sollte es eine Sammlung von Unterteilungen geben. Die Anzahl der Unterteilungen sollte mit der Anzahl der benötigten Spalten übereinstimmen.

Für ein zweispaltiges Layout können Sie zwei Unterteilungen haben, die als .left und .right klassifiziert sind. Die CSS-Float-Eigenschaft aller Ihrer internen Spalten sollte auf links oder rechts gesetzt sein, während der Wrapper ein enthalten sollte Clearfix-Klasse.

Um ein Gefühl für HTML-Code zu bekommen, können Sie einen dynamischen Rasterlayout-Generator ausprobieren. Der populäre Lösung aus Seitenspalte bietet eine tolle Struktur und unterstützt mehrspaltige Layouts. Alle HTML- und CSS-Dateien werden sofort generiert und bestehen die Tests zur Einhaltung von Standards.

Mit Polsterung ausbrechen

Polster und Dachrinnen sind integraler Bestandteil jedes Gittersystems. Nebeneinander formatierte Inhalte erfordern Platz zwischen ihnen, was dazu führen kann, dass sich das Layout unnatürlich ausdehnt und Seiten kaputt gehen.

Erstellen Sie Definitionen in gepolsterten Bereichen, indem Sie ein Layout mit Dummy-Inhalten erstellen. Platzieren Sie Ihre Spalten auf einer Seite und versehen Sie sie mit 1-Pixel-Umrissen in verschiedenen Farben. Dies bietet eine genaue Darstellung Ihres Entwurfs und umreißt den Inhalt jedes Bereichs.

Diese Technik funktioniert sowohl mit festen als auch mit flüssigen Layouts und erleichtert so die Integration in aktuelle Grid-Frameworks erheblich.

Auch Dachrinnen müssen keinem festgelegten Rahmen folgen. Möglicherweise sind Sie bereit, den Inhaltsbereich zu opfern, um den Abstand zwischen einer zweispaltigen Aufteilung zu vergrößern. Open-Source-Frameworks sind formbar und ermöglichen es Ihnen, Stile direkt zu bearbeiten oder sogar eigene zu implementieren, um Regeln zu überschreiben und Eigenschaften zu definieren.

Lesen:  So erstellen Sie eine Bekleidungs-Website: Eine Kurzanleitung, die Einzelhändlern beim Aufbau einer Online-Präsenz hilft

CSS-Eigenschaft „Layoutraster“.

Die Eigenschaft „layout-grid“ ist eine ältere CSS-Spezifikation, die von Microsoft übernommen wurde. Es ist in Kurzschrift geschrieben, um eine Vielzahl von Rastereigenschaften festzulegen. Insbesondere verweisen sie auf „layout-grid-mode“, „layout-grid-type“, „layout-grid-line“, „layout-grid-char“ und „layout-grid-char-spacing“.

Jedes davon kann als eigene Eigenschaft definiert und ohne das übergreifende Layout-Raster geschrieben werden. Hier ist eine kurze Liste, die jedes erklärt:

  • Layout-Raster-Modus
    Steuert, welcher Typ oder Modus des Layoutrasters verwendet wird. Zu den möglichen Werten gehören „none“ für „kein Raster“, „line“ für Inline-Rasterelemente, „char“ für Zeichen und Blockzeilenelemente sowie beide für umfassende Unterstützung.
  • Layout-Gittertyp
    Steuert, welches Raster zum Rendern von Seitentypografie und internen Textelementen verwendet wird. Wertepaare sind „locker“, was für chinesischen und koreanischen Text verwendet wird, „strikt“, was für japanische Zeichen verwendet wird, und „fest“, was Monospacing verwendet, um unabhängig von der Sprache den gleichen Abstand zwischen den Zeichen anzuwenden.
  • Layout-Gitterlinie
    Steuert die Granularität der Rasterlänge, wenn der Layout-Grid-Modus auf „Linie“ oder beides eingestellt ist. Diese Eigenschaft verhält sich ähnlich wie die Zeilenhöhe und kann numerische Werte in cm, px, pt, em oder Prozentsätzen empfangen.
  • Layout-Grid-Char
    Steuert die Größe des Zeichenrasters für den Textinhalt eines Elements, wenn der Layout-Grid-Modus auf „Linie“ oder beides eingestellt ist. Die von dieser Eigenschaft akzeptierten Werte sind die gleichen wie oben und wirken sich direkt auf die Zeilenhöhe der Seite aus. Der Unterschied besteht darin, dass sich „layout-grid-line“ auf das Seitenraster auswirkt, während „layout-grid-char“ Auswirkungen auf das Text- und Zeichenabstandsraster hat.
  • Layout-Raster-Zeichenabstand
    Steuert den Zeichenabstand, wenn „layout-grid-mode“ auf „char“ oder beides und die Eigenschaft „layout-grid-type“ auf „lose“ eingestellt ist. Diese Eigenschaft verhält sich wie die Zeilenhöhe und sollte für Textbereiche auf Blockebene verwendet werden.

Der Zweck der Erstellung dieser Eigenschaften besteht darin, Rasterlayouts für asiatisch codierte Seiten anzupassen. Die Zeichen in asiatischen Sprachen erfordern häufig benutzerdefinierte Seitenlayouts.

Bei der Betrachtung in anderen Ländern könnten sich diese Zeichen seltsam verhalten und Ihre Rasterberechnungen beeinträchtigen. Diese einzigartigen Eigenschaften ermöglichen eine bessere visuelle Formatierung durch die Verwendung eines ein- oder zweidimensionalen Rastersystems.

Vertikaler Seitenrhythmus

Viele Grafiker beschönigen die Bedeutung der vertikalen Abstände bei der Rastergestaltung. Rasterlinien unterstützen die horizontale Layoutgestaltung und richten vertikale Seitenelemente und Typografie aus. Vier wichtige Eigenschaften beeinflussen den vertikalen Abstand: Schriftgröße, Zeilenhöhe, oberer und unterer Rand und Abstand.

Die Zeilenhöhe ist der größte Faktor für den vertikalen Abstand. Der Seitentext wird danach skaliert, wie groß die einzelnen Buchstaben erscheinen und wie viel Platz die Zeilen dazwischen benötigen. Normalerweise wird die Zeilenhöhe in Pixeln oder Ems angegeben, je nachdem, wie flexibel das Layout ist. Ems sorgt für typografische Konsistenz über alle Auflösungen und Browser hinweg. Der beste Ansatz besteht darin, Schriftstile auf alle wichtigen HTML-Elemente anzuwenden, einschließlich Überschriften, Anführungszeichen und Absätze.

Der vertikale Rhythmus kann retuschiert werden, sobald ein Raster erstellt wurde, was die Skalierung für verschiedene Umgebungen vereinfacht. Desktop-Benutzer werden ein ganz anderes Erlebnis haben als Laptop- und Mobilbenutzer, die mit viel kleineren Auflösungen zu tun haben.

Sie können die vertikale Ausrichtung nicht mit exakter Präzision planen, aber in den meisten Fällen führt eine fundierte Vermutung zu qualitativ hochwertigen Ergebnissen.

Die Drittelregel

Teilen Sie ein Design in drei horizontale und vertikale Räume auf. Dadurch entsteht ein Gitter aus neun Rechtecken, eingebettet in neu gebildete Taschen. Es ist viel einfacher, mit Designs zu arbeiten, die in Blockbereiche mit endlichen Punkten unterteilt sind.

Die Wissenschaft hinter diesem Trend beruht auf der „göttlichen Proportion“, auch bekannt als „göttliches Verhältnis“. Das Verhältnis 1,618, das göttliche Verhältnis, ist eine mathematische Konstante. Wenn wir ein beliebiges Layout mit fester Größe durch diesen Wert unterteilen, können wir die genaueste Unterteilung für eine zweispaltige Struktur berechnen.

Nehmen Sie als Beispiel ein 960-Pixel-Layout. Wenn wir 960 durch 1,618 dividieren, erhalten wir ungefähr 593. Nach dem Goldenen Verhältnis sollten wir dann unsere primäre Spaltenlänge auf 593 Pixel festlegen. Diese Methode geht auf Künstler vor Jahrhunderten zurück. Glücklicherweise wurde mit der Verbreitung von Open-Source-Frameworks der Großteil der Mathematik bereits berechnet.

Ein goldenes Rechteck bauen

Diese Theorie zur Erstellung schöner gitterbasierter rechteckiger Layouts basiert auf der Drittelregel. Geteilte Rechtecke sind im Vergleich zum Goldenen Schnitt geometrisch einwandfrei. Numerische Werte für die Breite und Höhe des Rechtecks ​​richten sich nach der Goldenen Regel.

Diese Art von Rechtecken wird als „goldene Rechtecke“ bezeichnet. Die kürzere und längere Seite sollten jeweils die Werte der Variablen a und b enthalten.

Diese Rechtecke sind nützlich zum Erstellen von Seitenlayouts: Sie messen, wie groß Blockelemente sein sollten. Sie sind äußerst einfach zu berechnen und die Tools für viele gängige Grid-Frameworks sind integriert.

Diese Elemente sind für Webdesigner, die mathematische Raster verwenden, von großem Nutzen. Stellen Sie sich die verschiedenen Szenarien vor, in denen ein sorgfältig strukturiertes goldenes Rechteck die Ästhetik einer Seite verbessern würde. Dazu können Seiten-Widgets, E-Commerce-Produktbilder und sogar inhaltsreiche Tabellen gehören.

Beginnend mit 960 g

Da all diese Informationen der Öffentlichkeit zugänglich sind, haben Webdesigner begonnen, ihre eigenen Standards zu definieren.

Von allen Frameworks ist das 960 Rastersystem (960 g) ist wahrscheinlich das bekannteste. Das soll nicht heißen, dass es das beste ist – kein Rastersystem erfüllt alle Kriterien perfekt –, aber es ist einfach zu handhaben. 960gs ist anpassungsfähig und funktioniert gut mit fast jeder Website. Und es wird auf den meisten Browsern und Geräten gut gerendert

Die Berechnung umfasst 12 Spalten mit jeweils 60 Pixeln sowie einen Rand von 10 Pixeln auf jeder Seite, wodurch ein Zwischenraum von 20 Pixeln entsteht. Die meisten Grid-Frameworks basieren auf Spalten mit 12 bis 24 Pixeln. Natürlich wird von Ihnen nicht erwartet, dass Sie 12 Spalten in Ihr Layout integrieren.

Schließlich kombinieren Sie die Säulen und Dachrinnen zu einer einzigen Gittereinheit. Das Veröffentlichen von Inhalten ist viel einfacher, wenn Sie spezifische Details für Bilder, Widgets, Videos und andere Seitenelemente entwerfen können.

Lesen:  Top 15 der besten KissAnime-Alternativen 2024 Anime-Seiten wie Kissanime

960gs hat so viel Aufmerksamkeit erregt, weil es sich gut an das Internet anpasst. Die meisten Bildschirmauflösungen können eine 960-Pixel-Website ohne horizontale Bildlaufleiste anzeigen. Layouts passen zunehmend in dieses Verhältnis, was darauf hindeutet, dass dies die Zukunft des Webs ist. Die zusätzliche Breite beeinträchtigt das Design nicht und eine Erweiterung oder Verkleinerung einer Vorlage ist durchaus möglich.

Ein vollständiges 960-Layout verstehen

Nur eine begrenzte Anzahl von Spalten kann sinnvoll in ein Design passen. Ein Raster soll Sie nicht in einer einschränkenden Denkweise festhalten. Raster sind Orientierungshilfen, denen man folgen sollte: Sie verbessern die Benutzerinteraktivität und die Platzierung von Seitenelementen.

Das größte Raster, das Sie erstellen können, ist ein 940-Pixel-Inhaltsbereich mit 20-Pixel-Stegstegen. Es ist eine alberne Verwendung des Rasters, aber es ist gut, die Möglichkeiten zu verstehen. Zweispaltige Layouts sind recht einfach und bieten viel Platz für Inhalte. Häufige Beispiele sind:

  • 780 x 140,
  • 700 x 220,
  • 620 x 300.

Beachten Sie, dass sich diese Summe auf 920 summiert. Der 40-Pixel-Verlust lässt sich durch Zwischenräume in jedem „Block“ des Layouts erklären. Diese Räume halten die Konzentration der Benutzer aufrecht und ermöglichen eine reibungslose Aufgliederung des Inhalts. Bei geteilten Inhaltselementen haben wir auf der anderen Seite und zwischen den Blöcken Zwischenräume, die jeweils 10 der 40 Pixel ausmachen.

Diese Räume vergrößern sich, wenn Sie dem Layout neue Blöcke hinzufügen. Ein dreispaltiges Design bietet etwas weniger Platz für Inhalte als ein zweispaltiges Design.

Wenn dieses Konzept immer noch verwirrend ist, sehen Sie sich das Bild oben an. Der einfachste Weg, mit Rastern zu arbeiten, besteht darin, ein Referenzblatt ähnlich der obigen Grafik zu entwerfen, mit allen möglichen Unterbrechungen für Inhaltsblöcke. Anhand dieser Informationen können Sie Stile kombinieren und anpassen, um die Art von Design zu bestimmen, die am besten zu Ihrem Projekt passt.

Angenommen, wir möchten ein Modell mit drei Spalten und einem möglichst großen Inhaltsbereich entwerfen. Mit dem Diagramm oben können wir unseren Inhaltsbereich in zwei Teile unterteilen: einen voller Inhalt, der jedoch in zwei Hälften geteilt ist, um zwei Spalten zu enthalten. Dies würde einen 450-Pixel-Inhaltsblock und zwei 210-Pixel-Spalten erfordern.

Auch hier gilt: Diese Raster sollen die Kreativität nicht unterdrücken. Sie ermöglichen Flexibilität, sorgen aber für die Sicherheit Ihrer Back-End-Struktur. Die meisten Designer denken nicht über die Wissenschaft hinter all dem nach. Die Zeitersparnis, die diese Open-Source-Systeme einem Projekt ersparen, ist außergewöhnlich. Es lohnt sich, die Dokumentation zu überfliegen und Ihr eigenes Layout zu implementieren.

Fluid-Grid-Layouts

Es kommt nicht häufig vor, dass Raster an flüssige Layouts angeheftet werden. Pixel sind die genaueste Maßeinheit für eine Website. Der Einstieg in eine Messung wie Prozentsätze oder Ems erfordert sorgfältige Überlegungen. Solche Layouts sind mit ein paar Änderungen und zusätzlichen CSS-Selektoren möglich.

Fluid 960-Gittersystem ist bekannt, obwohl der größte Teil des Codes für ältere Versionen des Internet Explorers nicht zugänglich ist. Durch interaktives Prototyping und Arbeiten an unzähligen Bildschirmauflösungen können Sie ein 960-Pixel-Design auf viele Bildschirmauflösungen skalieren. Dieses offene Framework ist keine exakte Kopie von 960gs und wird mit neuer Dokumentation geliefert. Wenn Sie interessiert sind, schauen Sie sich die an GitHub-Repository für aktive Forumsdiskussionen und archivierte Frage-und-Antwort-Sitzungen.

Wie der Rest der Webdesign-Community sehnen Sie sich wahrscheinlich nach etwas Stabilerem. Ein paar flüssige Frameworks, die erstaunliche Layouts erzeugen.

YAML-Rasterlayouts

Yet Another Multicolumn Layout (YAML) ist eines der beliebtesten CSS-Frameworks. Es enthält eine große Codebasis zur Bearbeitung flexibler XHTML- und CSS-Layouts. Es wird ständig von aktiven Community-Entwicklern aktualisiert.

Das Framework ist äußerst vielseitig und bietet zahlreiche praktische Beispiele mit Code. Das kleinste Layout mit fester Breite entspricht 740 Pixeln und passt zu Bildschirmauflösungen von 800 x 600. Die Auflösungen mit maximaler Breite sind auf 80 em eingestellt und bieten Skalierbarkeit zwischen mobilem und Desktop-Browsing.

Mit Standard-Webschriftarten entsprechen etwa 75 % der Layouts einem Maximum von 960 Pixeln, obwohl dies überschrieben werden kann.

Viele der in älteren Browsern gefundenen Fehler wurden behoben. YAML unterstützt Google Chrome, Mozilla Firefox, Safari und alle Versionen von Internet Explorer 5+. Siehe die Überblick und Funktionen des Frameworks für detailliertere Informationen.

Yahoo! Benutzeroberflächenbibliothek

YUI ist eine Reihe von JavaScript- und CSS-Bibliotheken, die von Yahoo bereitgestellt werden. Die meisten Projektcodes und Fehlerbehebungen wurden von professionellen Entwicklern aus der YUI-Community geschrieben. Die aktuellste Revision ist jedoch YUI2 YUI3-API-Dokumente wurden auf Version 3.1.1 veröffentlicht.

Der YUI2-Homepage verfügt über Links zu den beliebtesten Projekten. Unten sind unter „YUI2 CSS Tools“ vier einflussreiche Frameworks aufgeführt: CSS Reset, Base, Fonts und Grids. Dieser Artikel befasst sich mit CSS-Grids, obwohl auf viele dieser anderen Frameworks verwiesen wurde.

Die Download-Datei ist nur 4 KB groß und bietet über 1000 einzigartige Webseiten-Layouts. Integrierte Einstellungen ermöglichen sowohl flüssige als auch feste Breitengrößen. Spalten sind selbstlöschend. Unabhängig davon, ob Sie zwei oder vier Spalten aufteilen, bleibt der Inhalt der Fußzeile immer unter dem Hauptinhalt. Für flexible benutzerspezifische Anpassungen werden typografische Eigenschaften miteinander verknüpft. Für viele Kernfunktionen wurde gesorgt, was das Arbeiten in YUI2 so angenehm macht.

Das CSS Grids-Framework bietet eine kleine Anzahl mobiler Layouts. Diese werden nur in Browsern mit einer relativ neuen Version der Webkit-Engine ordnungsgemäß gerendert. Dazu gehören Smartphones wie Android-Geräte, das iPhone, BlackBerry und viele Windows Mobile-Geräte.

Die Integration ist nett, aber dieses neue Medium wurde nicht gründlich getestet und wird auf einigen Mobilgeräten möglicherweise immer noch nicht richtig angezeigt. Aber am Ende des Tages lohnt sich der Aufwand, denn die Mehrheit der mobilen Besucher, die bereit sind, die Inhalte Ihrer Website zu lesen, besitzen wahrscheinlich ein Smartphone.

Die Entwicklung der Webkultur

Webdesigner legen großen Wert auf offene Systeme und Regeln. Das frühe Web war überhaupt keine große Community. Es gab HTML- und CSS-Standards, aber die Mentalität hinter den meisten Layouts war „was auch immer funktioniert“. Nach bedeutenden Entwicklungen in der Webtechnologie hat sich das Internet zum weltweit besten Medium für Veröffentlichungen entwickelt.

Lesen:  Top 15 der besten Battlefy-Alternativen im Jahr 2024

Ziel von Webdesignern und -entwicklern ist es, den Prozess der Erstellung von Websites zu vereinfachen, ohne die Qualität oder das Erlebnis einer Website zu beeinträchtigen. Raster sind ein harmonisches Instrument, denn sie verleihen Designs Ordnung und Struktur. Chaos und zufällige Schöpfung führen normalerweise nicht zu Ergebnissen.

Aus diesem Grund sind Rasterdesigns so zugänglich. Das Web wurde zu einem agilen Entwicklungssystem umgestaltet. Rasterbasierte Layouts führen zu stabilen Websites: Es ist keine Überraschung, dass die Community Frameworks als gängige Praxis übernommen hat.

Anstatt sich auf ältere, unzuverlässige Methoden zu verlassen, kann sich der durchschnittliche Webdesigner heute auf die Erstellung von Websites konzentrieren, die den Benutzern gefallen, anstatt pixelgenaue Kreationen zu koordinieren.

Heute sind Designer viel jünger und haben eine größere Leidenschaft für Design als je zuvor. In Verbindung mit der Open-Web-Bewegung bedeutet dies, dass ständig ein Strom neuer Webcodes für die Öffentlichkeit freigegeben wird. GitHub-Repositorys bietet Networking-Möglichkeiten mit anderen CSS-Entwicklern.

Entwicklung eines benutzerdefinierten Grid-Frameworks

Designer haben viele offene Frameworks als zu aufgebläht kritisiert. Viele werden als verwirrend bezeichnet, da es zu viele Klassen und Regeln gibt, mit denen man arbeiten kann. Das mag auf einige zutreffen, und ich diskreditiere diese Bemerkungen auf keinen Fall.

Letztlich gilt: Je flexibler ein Design, desto besser. Künstler suchen nach Werkzeugen, die ihre Arbeit erleichtern. Frameworks sind nicht für alle Designs geeignet. Die Entwicklung von Frameworks im Rahmen kleinerer Webprojekte wird auf lange Sicht Zeit sparen. Betrachten Sie die CSS-Systeme jedoch eher als Lernwerkzeug denn als Produktionsumgebung.

Raster können auf den ersten Blick verwirrend sein, daran besteht kein Zweifel. Ein Bezugsrahmen und eine Dokumentation zur Überprüfung während des gesamten Prozesses helfen Neulingen dabei, sich schnell und mit weniger Stress zu integrieren.

Mit genügend Übung wird die Entwicklung eines benutzerdefinierten CSS-Frameworks einfach sein. Die Vorteile davon überwiegen bei weitem die Vorteile der Zusammenarbeit mit der Quelle einer anderen Person. Sie können alle Layoutformate an einer Stelle strukturieren und Eigenschaften wie Schriftgröße, Zeilenhöhe und Blockelemente definieren. Niemand hat jemals perfekten CSS-Code geschrieben, also bleiben Sie bei dem, was für Sie am besten funktioniert.

Gängige CSS-Grid-Frameworks

Nachfolgend finden Sie einige der beliebtesten CSS-Frameworks. Obwohl sich nicht alle dieser Frameworks ausschließlich auf Grid-Design konzentrieren, bieten sie nützliche Bibliotheken zum Studieren und Implementieren in Webdesigns. Der Quellcode des Projekts ist jeweils kostenlos und wird in der Regel mit einer Dokumentation geliefert.

1-KB-Raster

1-KB-Raster ist ein großartiges CSS-Framework, bei dem vor allem die Geschwindigkeit im Vordergrund steht. Die Download-Dateien sind insgesamt weniger als 1 KB groß und enthalten die meisten CSS-Selektoren, die Sie zum Erstellen eines schönen Website-Layouts benötigen. Der CSS-Code kann vor dem Herunterladen angepasst werden, was für alle Webdesigner ein großer Vorteil ist. Sie können wählen, wie viele Spalten einbezogen werden sollen und wie breit die Spalten und Zwischenräume erscheinen sollen. Dieses Raster ist für Neulinge äußerst freundlich und eine großartige Möglichkeit, sich einzuarbeiten.

Basis-CSS

Grundlinie ist eine weitere Standard-CSS-Vorlage, die kostenlos heruntergeladen werden kann. Dieses Paket enthält nicht nur Code für Raster, sondern strukturiert auch Seitentypografie und Blockelemente. Der gesamte Code ist mit CSS3- und HTML5-Elementen kompatibel, sodass Entwickler die Kontrolle über die Strukturierung des Seitenflusses haben. Baseline CSS bietet Lösungen für die vertikale Raummanipulation durch die Integration der Seitentypografie in ein flexibles Raster.

1140px CSS-Rastersystem

CSSGrid.net ist die Heimat eines neueren Fluid-Frameworks für gitterbasierte Websites. Mit 1140 Pixeln und einer 12-Spalten-Aufteilung skaliert die Struktur auf allen Geräten, von den größten Monitorauflösungen bis hin zu Handhelds. Das Framework prüft mithilfe von Medienabfragen, wann ein bestimmtes Layout angezeigt und wie der Seiteninhalt verteilt werden soll. Autor Andy Taylor Aktualisiert das Projekt regelmäßig und Sie können es herunterladen Die neueste Version 1.6 finden Sie hier.

YAML

YAML bietet den flexibelsten Rahmen zur Entwicklung von Layouts. Die Dokumentation bietet eine Komplettlösung für alle festen, elastischen und fließenden Layouts. Kerndateien wurden ausgiebig auf kleinen und großen Websites getestet. Wenn Sie auf der Suche nach einem stabilen CSS-Framework sind, ist YAML eine großartige Lösung.

Blueprint-CSS

Entwurf enthält viele der Vorteile von Baseline. Der Vorteil dieses Frameworks ist sein bekannter Markenname. Viele aktive Entwickler haben das Projekt mit neuen Klassen aktualisiert. Raster machen einen großen Teil des Rahmens aus, aber viele Modelle werden auch zur Gestaltung von Typografie-, Mobil- und Druckbildschirmen und mehr verwendet!

CSS-Boilerplate

Der CSS-Boilerplate Das Projekt wurde von einem der Entwickler von Blueprint gestartet. Der Code ist eine verfeinerte, abgespeckte Version des Blueprint-Frameworks, optimiert für Geschwindigkeit und einfache Lesbarkeit. Obwohl das Projekt in letzter Zeit nicht aktualisiert wurde, bietet es Anfängern die Möglichkeit, ihre eigenen CSS-Projektdefinitionen auszuschließen.

YUI 2: Gitter-CSS

YUI2-Gitter ist ein sehr beliebtes Framework, das Yahoo unter seiner YUI2-Reihe herausbringt. Der Code eignet sich sowohl für feste als auch für flüssige Layouts und folgt den in CSS2 und CSS3 festgelegten Regeln. Das Framework ist in der Yahoo User Interface Library gut dokumentiert und gilt als eines der besseren Frameworks für Anfänger.

Dieser Beitrag wurde exklusiv für Webdesigner Depot geschrieben von Jake Rocheleau, ein leidenschaftlicher Webdesigner und Social-Media-Enthusiast. Jake liebt es, über die neuesten digitalen Internettrends zu lesen und zu schreiben und sich innerhalb der Design-Community zu vernetzen. Schauen Sie sich ihn auf Twitter an @jakerocheleau für mehr über seine Arbeit.

Verwenden Sie für Ihre Designs ein gitterbasiertes Framework? Teilen Sie Ihre Ansichten mit uns!

Aktuelle Artikel:

Empfohlen