Verwenden des 960-Rastersystems als Design-Framework

() translation by (you can also view the original English article)

Das 960-Rastersystem gibt es schon eine Weile ... aber es wurde hauptsächlich auf der Codierungsseite von Projekten als HTML / CSS-Framework verwendet. Heute werden wir zu Beginn eines Projekts die Vorteile der Verwendung von Rastersystemen wie 960GS diskutieren, noch bevor Sie Photoshop oder Fireworks öffnen. Wenn Sie noch kein Framework verwendet haben oder einfach nur eine gute Auffrischung wünschen, ist dies ein großartiger Ort, um zu beginnen!

Ein bisschen Kontext: Unsere Schwestersite Nettuts hat eine Reihe großartiger Artikel über die Verwendung von CSS-Frameworks als Codierungswerkzeug veröffentlicht. Sie sind alle für diese Diskussion relevant. Gehen Sie sie also durch, wenn Sie eine Chance haben. In diesem Artikel werden jedoch die Vorteile der Verwendung eines Frameworks speziell für Web Designers beschrieben. Wir werden nicht zu tief in die Codierung eintauchen, sondern diskutieren, wie die Verwendung eines Frameworks in der Entwurfsphase ein mächtiges Werkzeug sein kann, noch bevor die Codierung beginnt. Okay, lass uns eintauchen!

Eintauchen in Frameworks

Die Chancen stehen gut, dass Sie bereits von einem CSS-Framework gehört haben oder bereits verwendet haben ... aber für den Fall, lassen Sie uns die wichtigsten Vorteile eines CSS-Frameworks (auch als Grid-System bezeichnet) in einem Webprojekt betrachten:

Bietet ein "Framework", das auf allen Monitoren gut aussieht.
Vereinfacht den Entwurfsprozess, indem genaue Messungen definiert werden.
Reduziert die Entwicklungszeit durch Bereitstellung von vorcodiertem HTML / CSS.
In einer perfekten Welt hilft es Designern und Entwicklern dabei, besser zu kommunizieren - und den Übergang vom Design zum Coding zu vereinfachen.

Letztendlich sollte ein CSS-Framework dabei helfen, einige grundlegende Richtlinien für Inhaltsspalten festzulegen, während Designer dennoch die volle Kontrolle über ihre Designs haben.

In diesem Artikel: Ich werde erklären, was ein CSS-Framework ist und warum ich 960 gewählt habe. Dann werde ich die Grundlagen der Anwendung des 960-Grids durchgehen. Zum Abschluss unserer Diskussion zeige ich Ihnen einige Websites, die das 960-Raster verwenden und wie diese strukturiert sind.

CSS-Frameworks: Ein kurzer Überblick

Ein CSS-Framework besteht aus einer Reihe von Stylesheets, die das Leben eines Webentwicklers erleichtern sollen. Sie berücksichtigen die verschiedenen Macken von Browsern, sind leicht anpassbar und wenden grundlegende Gestaltungsprinzipien an (z. B. visuell ansprechende Randbereiche zwischen Elementen).

In diesen Frameworks finden Sie häufig auch Typografie-Stylesheets, die sich hervorragend als Ausgangspunkt für die Arbeit an der Typografie Ihrer Website eignen (weitere Informationen zur Typografie finden Sie in diesem Artikel).

Momentan gibt es zwei große CSS-Frameworks: Blueprint und 960. Beide sind perfekt fähige Frameworks mit großartigen Funktionen und Benutzerfreundlichkeit. Es kommt einfach darauf an, welches Framework Ihnen am besten gefällt.

Bevor Sie mit der Entwurfsphase eines Projekts beginnen, müssen Sie die Auswahl eines Frameworks mit der Person besprechen, die die Site codiert. Entwickler haben oft Vorzüge gegenüber einem bestimmten CSS-Framework. Als Hauptgrund für die Verwendung von Frameworks in der Entwurfsphase ist es, den Übergang vom Design zum Coding zu vereinfachen. Dies ist eine wichtige Entscheidung. Wenn Sie das Projekt selbst programmieren, stellen Sie sicher, dass Sie mit dem Raster-Framework, das Sie auswählen, vertraut sind. Es gibt nichts Schlimmeres, als eine gesamte Site basierend auf einem Framework zu entwerfen, das Sie nicht mögen.

960 GS: Die kiesigen Details

Ich persönlich fand das 960-Grid besser für meine Bedürfnisse, also habe ich es angenommen und das werden wir in diesem Artikel besprechen. Die übergreifenden Prinzipien, die wir diskutieren werden, gelten jedoch für jedes Framework, einschließlich Blueprint.

960.gs basiert darauf, alle Elemente Ihrer Site in einen 960px breiten Container (cleveres Mädchen) zu platzieren und diesen Container in 12, 16 oder 24 gleich große Spalten zu unterteilen. Sie bieten ein Werkzeug zur Verwendung alternativer Breiten, aber 960 ist das, wofür das gesamte System entwickelt wurde, und es sieht ziemlich scharf aus.

Der CSS Generator bei 960GS

Warum 960px? Weil 960px eine Breite ist, die für die große Anzahl von Plattformen geeignet ist, auf denen wir im Internet surfen. Es ermöglicht im Wesentlichen einen 1024px breiten Monitor, der die Site genau und ohne horizontales Scrollen anzeigt, was die Breite des Browser-Chrome, die Scrollbars und ein wenig Abstand zur besseren Lesbarkeit berücksichtigt. Rechts und links von der Hauptspalte befindet sich immer ein Rand von 10 Pixeln. Dies bedeutet, dass kleinere Browser immer den am weitesten links liegenden Inhalt lesen können, ohne den Text zu stoßen, sondern gegen das Browserfenster.

Darüber hinaus sind alle Zahlen in der 960GS ganze Zahlen, die auf dem Goldenen Schnitt basieren. Es gibt keine Dezimalpunkte oder funky Abstände. Wenn Sie unseren Artikel zu Mathematik und Webdesign gelesen haben, wissen Sie, wie wichtig es ist, diese Zahlen richtig zu machen.

Eine der eklatantesten Auslassungen oder schönen Funktionen, je nachdem, wie Sie es betrachten, ist die Art und Weise, wie der 960 mit der Typografie umgeht (oder nicht). Es gibt eine text.css-Datei, die jedoch vor allem sicherstellen soll, dass zumindest etwas vorhanden ist, sodass beim Rapid Prototyping allgemeine Elemente wie Überschriften, Absätze und Listen grundlegend gestaltet werden.

Wie unterscheidet sich Blueprint?

Ich werde hier nicht zu viel vertiefen, aber lassen Sie uns kurz die wichtigsten Unterschiede zwischen 960.gs und Blueprint diskutieren. Erstens ist Blueprint ein auf 950px basierendes CSS-Framework - es ähnelt 960 in der Art und Weise, wie es das grundlegende Layout erledigt (BP verwendet 24 Spalten mit ähnlichen Ansätzen für Auffüllen und Verhältnisse).

Blaupause erlaubt formularbezogenes Styling und Benachrichtigungen, etwas, was ich gerne von 960 implementieren würde.

Blueprint ist ein viel komplexeres, robusteres und umfassenderes Rahmensystem. Es wurde als volles Stylesheet für so ziemlich jedes Element erstellt, das Sie sich vorstellen können (Optionsfelder, Tabellen usw.). Es gibt Dinge, die ich an Blueprint mag, am bemerkenswertesten ist die Gestaltung von Formularelementen und eingebauten Benachrichtigungsklassen. Darüber hinaus enthält es eine vollständige Reihe von Stilen für:

Typografie - BP stellt für alle Elemente die Standardgröße für Typografie und Abstand bereit.
Formularelementstil - Stil für Formulare und einige Klassen, die zum Hinzufügen von Formularen verwendet werden können (z. B. erforderliche Felder).
Druckstile - Druckt Stylesheets, wenn Surfer die Drucktaste drücken.
Benutzeroberfläche für Plugins - Vorgefertigtes CSS (und manchmal Bilder) für Schaltflächen, Registerkarten und Sprites.

Das Problem, das ich mit Blueprint hatte, ist, dass es einfach zu komplex ist, um es in der Entwurfsphase zu verwenden. Wenn Sie ein Design von Grund auf neu erstellen, müssen Sie alles neu formatieren, was es bietet, und es ist oft schwierig, mit der umfassenden Vollständigkeit von BP Schritt zu halten. Im Gegensatz dazu bietet 960.gs nur ein Layout - perfekt, damit ein Designer innerhalb realistischer Grenzen kreativ werden kann.

Verwenden des 960-Rastersystems

Das 960-Grid ist fast erschreckend einfach zu bedienen (Sie fragen sich vielleicht sogar: "Warum habe ich das nicht früher verwendet?"), Mit nur ein paar einfachen Regeln, die Sie einhalten müssen.

Laden Sie das 960-Raster aus 960.gs herunter

Nachdem Sie es heruntergeladen haben, werfen Sie einen Blick in das Verzeichnis, das Sie gerade entpackt haben. Ich möchte Ihre Aufmerksamkeit auf zwei Ordner lenken: "sketch_sheets" und "template". Der Ordner "Skizzenblätter" enthält ein PDF der verschiedenen Rastergrößen in einem Browserfenster, und der Ordner "Vorlage" enthält Vorlagen für fast jedes Grafikprogramm unter der Sonne (wie GIMP, Fireworks und Photoshop).

Skizzenblätter: Ihr Leben einfacher machen ...

Der Zweck eines CSS-Frameworks ist es, Ihnen das Leben zu erleichtern, und Sie sollten immer nach Möglichkeiten suchen, wie Sie die Zeit reduzieren können, die für die Erstellung eines Designs erforderlich ist. Verwenden Sie diese Vorlagen, wenn Sie ein Design in Photoshop erstellen, und drucken Sie Kopien der "Skizzenblätter" aus, wenn Sie die Details eines Projekts mit einem Kunden besprechen (und stellen Sie sicher, dass Sie sich das unbedingt ansehen, bevor Sie gehen!).

Beispiel eines ausgedruckten Skizzenblatts ... mit einigen Skizzen.

Tatsächlich würde ich empfehlen, diese Skizzenblätter bei jedem Start eines Projekts zu verwenden: Mit ihnen können Sie frei experimentieren, bevor Sie sich auf ein beliebiges Layout festlegen. Es dauert nur 5 Minuten Skizzieren, um zu realisieren, ob ein Design funktionieren wird oder nicht, im Gegensatz zu mehr als 50 Minuten, wenn Sie es entworfen und codiert haben.

Entwerfen mit den 960-Vorlagen

Wenn Sie zu dem grundsätzlichen Einverständnis über das skizzierte Konzept der Site gekommen sind, sollten Sie die Vorlagendateien aufbrechen. Dies ist wahrscheinlich der Hauptgrund, warum ich das 960-System mag. Es wird mit Vorlagen für nahezu jedes Programm geliefert, das Sie sich vorstellen können. Ich verwende Photoshop. Hier ist ein Screenshot der bereitgestellten Vorlage:

Der Hauptvorteil hier ist einfach: Die Vorlage enthält vorgefertigte Leitfäden für alle Hauptinhaltsspalten, die direkt auf der Codierseite dem CSS-Framework entsprechen. Es ist einfach, schnell die wichtigsten Inhaltsspalten zu zeichnen und alles in Ihrem Design sauber und übersichtlich zu halten.

Erfahrene Designer mögen dies als "Design mit Laufrädern an" betrachten, aber ehrlich gesagt, ist es nicht falsch, ein einfaches Overlay-System zu haben, das den Rahmen für ein Webdesign leitet.

Sie müssen natürlich immer noch alles auf der Website entwerfen, aber wenn Sie Ihr Design mit den Leitfäden in Einklang bringen, wird dies die Entwicklungsseite erheblich vereinfachen. Als zusätzlicher Vorteil ist ein einheitlicher Ansatz für das Auffüllen zwischen Inhaltszellen eine großartige Möglichkeit, Ihr Design professioneller aussehen zu lassen. Lesen Sie hier mehr darüber, warum "Pixel Perfect Comps".

Einrichten

Nachdem Sie nun ein Design festgelegt haben, sprechen wir jetzt über die 960-Raster-Syntax. Wie ich bereits beim Intro erwähnte, können Sie bei Nettuts viel mehr Informationen zur Verwendung und zum Prototyping von CSS-Frameworks finden.

Ich werde hier nur die Grundlagen behandeln.Zunächst müssen Sie die entsprechenden CSS-Dateien in Ihrem Design referenzieren: reset.css (die Reset-Datei, die Browser-Macken berücksichtigt), text.css (das integrierte Typografie-Stylesheet) und 960.css (oder 960_24_col). css, wenn Sie ein Raster mit 24 Spalten verwenden). Normalerweise platziere ich mein gesamtes Site-spezifisches Styling in einer separaten Datei (normalerweise als style.css bezeichnet), um sicherzustellen, dass nichts im Framework beschädigt wird.

Schnelltipp: Verweisen Sie auf Ihr eigenes Stylesheet, nachdem Sie auf das Framework verweisen, sodass Sie bestimmte Aspekte des Frameworks anpassen können, ohne das Framework selbst zu ändern. Wenn Sie einen Fehler machen, müssen Sie die Dateien des Frameworks nicht erneut herunterladen und überschreiben). Mit diesen 4 Dateien können Sie jetzt mit dem Entwerfen Ihrer Site beginnen.

Hier ist ein kurzer Überblick über die Syntax der Website 960.gs:

<div class="container_12">
    <div class="grid_7 prefix_1">
        <div class="grid_2 alpha">
            ...
        </div>
        <div class="grid_3">
            ...
        </div>

        <div class="grid_2 omega">
            ...
        </div>
    </div>
    <div class="grid_3 suffix_1">
        ...
    </div>
</div>

Das erste div ist Ihr Container, in dem Ihr Inhalt gespeichert wird. Wenn Sie die Klasse als "container_12" definieren, sagen Sie: "Ich möchte, dass dieser Container ein 12-Spalten-Raster hat" (Die gleiche Vorgehensweise gilt bei der Verwendung von 16.) und 24 Spaltengitter).

Nachdem Sie den Container als 12-Spalten-Layout definiert haben, beginnen Sie damit, Ihre Site so zu strukturieren, dass sie in das Layout passt. Wenn Sie sich die nächsten div-Elemente in der Hierarchie ansehen (wie auf den Registerkarten angegeben), sehen Sie die Syntax für ihre Definitionen. "Grid_7" und "grid_3" sind leicht zu verstehen: Sie sagen, dass dieses div-Element eine X-Anzahl von Spalten aufnehmen wird. 7 + 3 = 10 < 12 bedeutet, dass am Ende des Containers 2 leere Spalten angezeigt werden, oder? Nun, hier kommt der Präfix und Suffix der Klassendefinition ins Spiel. Mit einer Klassendefinition von "grid_x suffix_y" sagen Sie: "Ich möchte, dass dieses div X-Spalten aufnimmt und dass Y-Spalten nach ihm leer sind." (Dies gilt auch für das Präfix). Da also "Grid_7" ein Präfix von 1 hat und "Grid_3" ein Suffix von 1, 7 + 3 + 1 + 1 = 12 hat!

Ich weiß, dass Sie sich über die Div-Elemente im "Grid_7" -Div wundern. Nun, Sie können divs verschachteln, die eine bestimmte Anzahl von Spalten in einem anderen div aufnehmen, solange die Größe des übergeordneten Rasters nicht überschritten wird. Außerdem müssen das erste und das letzte Element an ihre Klassendefinition angehängt werden. In unserem Beispielcode: "grid_2 alpha" ist das erste verschachtelte div in "grid_7", das nächste Element "grid_3" befindet sich in der Mitte (und benötigt daher kein "alpha" oder "omega", das daran angehängt wird). und schließlich ist "grid_2_ omega" das letzte verschachtelte div innerhalb von "grid_7". Und da 2 + 3 + 2 = 7, ist die Definition richtig.

Alles zusammen: ein kurzes Beispiel

Um den gesamten Prozess zu veranschaulichen, gehen wir ein kurzes Beispiel für die Verwendung des 960 Framework während der Entwurfsphase eines persönlichen Projekts von mir vor.

Das Design selbst ist ziemlich einfach, aber es ist der perfekte Weg, um Ihnen zu zeigen, wie das Framework während des Designprozesses als Werkzeug dienen kann.

Die Cerberus-Website: Das Beispiel, das wir verwenden werden

Mass Effect 2 ist eines meiner Lieblingsspiele der letzten fünf Jahre, und ich dachte, eine Website für die fiktive Organisation "Cerberus" zu erstellen, wäre eine Herausforderung. Die Hauptaspekte der Organisation sind: Professionalität und technologisches Können, die ich mit einem klaren Design vermitteln wollte, das ihre gesamte Farbgebung verwendete. Zu Beginn habe ich den Entwurf für die Site skizziert (es wäre heuchlerisch, wenn ich anders agiere, oder?).

Als ich die Entwurfsskizze durchblickte, sah ich, wie das Design im 960-Raster funktioniert.

Unten ist das HTML-Skelett für meine Website:


<div id="container" class="container_12">
  <div id="header" class="grid_12">
		<div id="logo" class="grid_2 alpha">Logo</div>
		<div id="subHeader" class="grid_12 omega">
			<div id="tagline" class="grid_4 alpha"><h1>Cerberus: Strength for Humanity</h1></div>
			<div class="grid_8 omega">Navigation</div>
		</div>
	</div>
	<div id="content" class="grid_8">
		Content
	</div>
	<div id="sidebar" class="grid_4">
		<div class="sidebarSection">
			Sidebar
		</div>
		<div class="sidebarSection">
			Sidebar
		</div>
		<div class="sidebarSection">
			Sidebar
		</div>
	</div>
	<div id="footer" class="grid_12">Footer</div>
</div>

Wenn Sie bemerkt haben, dass das Logo nur 2 Spalten enthielt, während der Unterheader alle 12 Leerzeichen beanspruchte. Da der Header div 12 Spalten lang war, können alle Unterelemente bis zu 12 Spalten lang sein. Dieser Trick ermöglichte es mir, den Header zu erstellen, da das Logo 2 Spalten enthielt und der Rest leer blieb (das Bild ist eigentlich das Hintergrundbild für das Header-Div). Und da der Sub-Header 12 Spalten breit war, füllte er die gesamte Breite unter dem Logo aus (da er nicht den gesamten Inhalt in die 10 Leerzeichen nach dem Logo einfügen konnte).

Dies ist eigentlich ein wichtiger Unterschied, und es ist ein weiteres Entwurfswerkzeug, das Sie verwenden sollten (und um sicherzugehen, können Sie "Präfix" oder "Suffix" verwenden, um sicherzustellen, dass ein bestimmter Speicherplatz reserviert wird). Der Rest der Site ist ziemlich einfach und trocken: 8 Spalten für den Hauptinhalt und 4 für die Seitenleiste. Jedes Seitenleistenelement ist ein separates div-Element. Sie stapeln sich übereinander, da sie auf die Breite von 4 Spalten beschränkt sind.

Um die Einrichtung der Site zu veranschaulichen, habe ich einen Screenshot der Site erstellt und die Spalten klar markiert:

Beispiele für das 960-Netz in Aktion

Nun, mein eigenes Beispiel ist vielleicht nicht der beste Weg, um Sie wirklich dazu zu inspirieren, ein paar coole Webdesigner zu kreieren. Hier sind nur einige Beispiele des 960-Systems in Aktion. Mehr finden Sie auf der Website 960.gs.

Die Keynote Wireframe Toolkit-Website, die den Suffix-Aspekt von 960 verwendet, zusammen mit einem Hintergrundbild über CSS, um die kompatiblen Programme aufzulisten.

Das 5by5-Podcasting-Netzwerk verwendet das 960-Raster, um seine neuesten Episoden ansprechend auszurichten.

Mit dem 960 Grid Framework; Hugh Griffith konnte eine clevere Aufzählungsliste von sich selbst und eine detailliertere Erklärung seiner Expertise nebeneinander präsentieren. Darüber hinaus verwendet er die untere Hälfte seiner Website, um die drei ansprechendsten Teile seines Portfolios (jeweils 4 Spalten breit) zu präsentieren.

Schlußbemerkungen

Einer der attraktivsten Aspekte eines CSS-Frameworks ist die Bequemlichkeit, die sie Designern bieten. Wie bei jedem anderen Tool müssen Sie jedoch sicherstellen, dass Sie es sachdienlich und sinnvoll einsetzen. Versuchen Sie nicht, es zu verwenden, wenn es nicht zum Design passt, und beschränken Sie nicht Ihre Kreativität. Für die meisten Projekte (insbesondere für komplexe von Zeitungen oder Blogs inspirierte Layouts) kann ein CSS-Framework ein großartiges Zeitersparnis sein, nicht nur für das schnelle Ausspalten von HTML / CSS, sondern für den gesamten Entwurfsprozess.

Möchten Sie mehr über das Codieren mit CSS-Frameworks erfahren? Schauen Sie sich die Nettuts-Bibliothek mit Artikeln zum Thema an (scrollen Sie nach unten, um erweiterte Tuts zu erhalten).