Share
Haben Sie sich jemals gefragt, wie all diese glatten "Magazin" -Themen für WordPress und andere Plattformen erstellt wurden? Viele, wenn nicht alle, wurden mit einem CSS-Grid-Framework entworfen - zumindest im Wesentlichen, wenn auch nicht in der Tat. Das heißt, Sie können ein vorhandenes CSS-Framework verwenden oder ein eigenes Framework erstellen. Es ist zwar möglich, komplexe Webseitenlayouts ohne Rahmen zu entwerfen, es ist jedoch ein Akt des Masochismus. In diesem Artikel erhalten Sie einen Überblick über den aktuellen Batch von Frameworks und die Verwendung, die Sie verwenden sollten.
Layoutraster wurden schon lange vor dem Web im Print-Publishing verwendet. Sie sind eine unsichtbare Grundlage, um visuellen Zusammenhalt im Design und Layout von Zeitschriften- und Zeitungsseiten zu erreichen. Sie stellen im Wesentlichen ein Gitter dar, das horizontalen und vertikalen Raum in konsistente Einheiten unterteilt, in die Text, Überschriften, Bilder und Werbung platziert werden können.
Dasselbe Konzept wurde aus dem gleichen Grund für das Design von Webseiten angepasst, indem HTML-Elemente mit CSS-Code (Cascading StyleSheets) positioniert werden. Tatsächlich wenden viele redaktionelle Websites, die von großen Printmedienherstellern betrieben werden, Raster an, um auf ihren Websites ein Aussehen zu erzielen, das dem Druckinhalt ähnelt.
Beachten Sie, dass die vertikale Achse in CSS-Rastersystemen nicht so gut unterstützt wird, da die Höhe einer Webseite nicht so sehr ein Problem darstellt wie eine gedruckte Seite. (Dies ist jedoch ein untergeordnetes Problem beim Design von Webseiten, es sei denn, Sie erwarten dieselben Funktionen wie bei Desktop Publishing - auch als DTP - Systeme bezeichnet -, die ohne PostScript-ähnliche Sprache nur schwer von Browsern zu implementieren und zu unterstützen sind.)
Nicht alle Designer unterstützen die Verwendung von Raster-Frameworks für Tabellen oder sogar überhaupt. Aber lassen Sie uns es sehen; Es gibt Layouts, die Sie mit HTML-Tabellen einfach nicht ohne großen Aufwand erledigen können - und viele Schachteln, die schwer zu entziffern sind, sollten Änderungen vornehmen müssen.
Sicherlich, wenn Sie Grids verwenden, müssen Sie Ihrem Inhalt einige erforderliche HTML-Tags hinzufügen, um die Dateigröße der Seiten zu erhöhen. Dies bedeutet auch, dass Markup und Stil nicht wirklich voneinander getrennt sind - ein Grundsatz, an den sich viele Webdesigner halten möchten. (Einige Leute glauben, zu Recht oder zu Unrecht, dass Neinsager von CSS-Frameworks Designer sind, die besorgt sind, dass der Bedarf an ihren Diensten sinken wird. Obwohl Codierer mit dieser Logik ebenfalls in Schwierigkeiten geraten, insbesondere mit der Zunahme von browserübergreifendem Code Bibliotheken wie jQuery.)
Tatsache ist, dass ein Browser mit einem CSS-Grid-Framework die CSS-Datei (en) nur einmal lädt und "auf der Clientseite" im Cache speichert. Außerdem ist das zusätzliche HTML-Markup, das zur Anwendung des "unsichtbaren" CSS-Frameworks erforderlich ist, selten so bedeutend, dass Bandbreitenprobleme für Leser ein Problem sein sollten. (Interessanterweise scheinen die meisten Neinsager über Yahoo UI Grids zu reden, weniger über Blueprint.)
In den meisten Beispielen, mit denen ich gearbeitet habe, und in allen Magazinthemen, in denen von mir untersuchte Raster verwendet wurden, spricht man von relativ kleinen Dateigrößen - vor allem im Vergleich zum verwendeten Code der Blog-Plattform. Ein einzelnes großes Bild nimmt wahrscheinlich mehr Platz in Anspruch. Mit schnelleren Internetverbindungen ist das wirklich keine große Sache.
Design & ästhetische Vorteile
Unabhängig davon, ob Sie CSS-Raster für Prototyping- oder Produktionssysteme verwenden, gibt es mehrere ästhetische und gestalterische Vorteile:
Hier eine kurze Liste einiger der beliebtesten Frameworks:
Es gibt andere CSS-Grid-Frameworks, die Sie im Google-Code finden können, aber von den drei oder vier weiteren, die ich mir angesehen habe, waren die meisten in Bezug auf die Dokumentation oder sogar Projektdateien unvollständig. Daher habe ich sie weggelassen. Wenn Sie von einem nicht aufgeführten Framework wissen, teilen Sie uns dies bitte in den Kommentaren mit!
Ich möchte darauf hinweisen, dass dies kein umfassender Vergleich von CSS-Frameworks ist. Tatsächlich habe ich nichts anderes als Blueprint verwendet, obwohl ich Dokumente für alle oben aufgeführten Frameworks gescannt und mit YAML und Grid Designer ein wenig gespielt habe. Blueprint, YUI-Grids und YAML sind wohl die "großen Drei" im CSS-Framework, und 960 scheint eine solide vierte Wahl zu sein.
Bei der Auswahl eines Frameworks habe ich berücksichtigt, dass ich kein ausgebildeter Designer bin - über das hinaus, was ich seit Jahren alleine gelernt habe. Ich mache mich gerne an das Design, wenn auch in sehr minimalistischer Form. Weil ich einige Jahre damit verbracht habe, entweder mein eigenes Printmagazin zu veröffentlichen oder an einem anderen zu arbeiten, habe ich ein ziemlich schlechtes Seitenlayout nach den Prinzipien des Grid-Designs mit Adobe PageMaker erstellt. Daher finde ich es sehr natürlich, mit CSS-Grids für das Webdesign zu arbeiten. Es scheint, dass angesichts der Anzahl der WordPress-Themes - siehe Liste am Ende dieses Artikels -, die auf einem Raster-Framework (meistens Blueprint) basieren, Designer mit Grids auch ziemlich vertraut sind.
Trotzdem brauche ich mit immer begrenzter Zeit etwas, das leicht zu erlernen und anzuwenden ist, aber dennoch robust ist. Ich habe festgestellt, dass Blueprint CSS Grid meinen Bedürfnissen entspricht. Es lässt sich gut in verschiedene JavaScript-Bibliotheken integrieren - einschließlich jQuery, was zu verdammt sexy Weboberflächen führen kann. Es wird in den meisten Browsern gut (wenn auch nicht 100% perfekt) dargestellt - obwohl Sie den IE-Browser auf den großen Dorn im Auge der Webdesigner prüfen müssen.
Basierend auf meinen letzten Recherchen zu CSS-Grids im letzten Jahr scheint Blueprint das robusteste Framework zu sein, das am wenigsten restriktive, das am stärksten unterstützte - was die Verbreitung betrifft - das kleinste und das Framework mit den meisten Tools . Tatsächlich besteht der Vorteil von Blueprint darin, dass Sie den CSS-Code mit Tools wie dem Blueprint Grid CSS Generator von Kematzy sehr schnell für ein benutzerdefiniertes Framework erstellen können. Obwohl Sie dies mit dem Grid Designer tun können, deutet ein schneller Vergleich darauf hin, dass es nicht so robust ist wie Blueprint.
Auf der anderen Seite können Sie die Dokumentation für Yahoo! Das CSS-Framework der UI-Grids lässt vermuten, dass Sie, wenn Sie einfach nur ein einfaches Webseiten-Layout erstellen möchten und einige Voreinstellungen zum Spielen benötigen, diese Option prüfen möchten. Allerdings finde ich, dass es für meinen Geschmack etwas zu restriktiv ist. (Möglicherweise möchten Sie das Blueprint-CSS-Framework von Foo Hack gegen YUI-Grids lesen.)
Wenn es darum geht, etwas Neues online zu lernen - beispielsweise eine Programmiersprache und eine Codebibliothek / ein Framework -, wende ich immer die "Schultern der Giganten" an. Ich nehme zunächst die Optionen in die engere Auswahl, die zu dem passen, was ich brauche, und wähle danach, wie viel darüber geschrieben wurde. Für neuere Optionen mag das nicht fair erscheinen, aber der Prozess ist nicht beliebiger als die Anzahl der zu verwendenden Webanwendungen. Es gibt zu viel, um den Überblick zu behalten, und eine bestehende unterstützende Community macht einen großen Unterschied.
Ich werde in allen meinen Tutorials bei NETTUTS das Blueprint CSS Grid Framework verwenden (wenn es relevant ist). Anstatt die Funktionsliste aus den Dokumenten von Google Code zu kopieren, möchte ich mich darauf konzentrieren, warum ich sie persönlich ausgewählt habe. Einige dieser Punkte überschneiden sich mit dem, was ich oben gesagt habe:
Wie oben erwähnt, stoße ich auf IE-Probleme - aber dann nicht alle? Einige WP-Themen, die Blueprint verwenden, haben Probleme mit dem IE-Browser gelöst. Ich bin also der Meinung, dass sie meistens gelöst werden können.
Zum gegenwärtigen Zeitpunkt unterstützt Blueprint keine flüssigen Layouts - etwas, von dem ich sowieso kein großer Fan bin. Es scheint jedoch, dass eine solche Unterstützung ansteht, falls Sie sich dazu neigen.
Nun, das ist eine Frage der Wahl, nicht wahr? Einige CSS-Grids werden mit einer grid.png- oder sogar einer .psd-Datei geliefert, die Sie im transparenten Modus in Photoshop, Fireworks, GIMP usw. verwenden können, während Sie Ihre Gestaltungselemente festlegen. Ich bin schon etwas älter und gestalte meine Layouts immer auf Papier:
Sie werden feststellen, dass in diesem Prozess nirgendwo Grafiksoftware für das Layout-Modell verwendet wird. Das liegt daran, dass ich kein Designer bin und einen sehr minimalistischen Ansatz für das, was ich entwerfe, benutze (nur für mich). Wenn Sie jedoch vorhaben, Fireworks für Ihr Modell zu verwenden, würden Sie dies zwischen den Schritten 3 und 4 tun.
Ich habe versucht, bei der Suche nach CSS-Raster-Frameworks umfassend zu sein und über 120 Artikel nach Leads zu durchsuchen. Es ist jedoch möglich, dass ich einige Optionen verpasst habe. Sie können also andere anbieten.
Unabhängig davon, welches CSS-Framework Sie verwenden, sollten Sie dies tun, da es am besten Ihren allgemeinen Bedürfnissen entspricht. Wenn für die von Ihnen gestalteten Seiten / Vorlagen Werbung vorgesehen ist, überlegen Sie sich, welche Art von Anzeigen Sie verwenden. Als ich früh Designs für meine Websites auswählte, entschied ich mich für AdSense-Anzeigen (welche sind IAB-konform). In jüngerer Zeit habe ich für Blöcke von 125 x 125 Anzeigen entschieden, die ich den meisten AdSense-Blöcken vorziehen.
Bei Interesse gibt es einen W3C-Entwurf mit der Bezeichnung CSS Grid Positioning Module Level 3 (geschrieben von zwei Microsoft-Mitarbeitern), in dem die Integration eines gitterbasierten Layouts in CSS behandelt wird. Die in diesem Entwurf behandelten Merkmale könnten im IE 8 sein.
Hier sind Links zu einigen der vielen großartigen Artikel über CSS-Grids.
Wenn Sie der Meinung sind, dass Sie noch nicht bereit sind, Raster und Themendesigns in Angriff zu nehmen, aber ein Raster-basiertes Thema benötigen, finden Sie hier eine der umfassendsten Listen, die Sie finden können. (Es gibt tatsächlich mehr als 46, wenn Sie Variationen hinzufügen.) Dazu gehören Magazin, magazinähnliche Galerie, Spezialität und verschiedene Premium-Themen, die beide verwenden explizit oder implizit CSS-Grids. (Es ist möglich, dass ein oder zwei keine Raster verwenden, obwohl sie auf den ersten Blick scheinen.)
Einige dieser Themen sind kostenlos oder haben eine kostenlose Version. Die meisten sind für die WordPress-Plattform. Diese Liste enthält nur Themen, die für die breite Öffentlichkeit verfügbar sind, nicht unbedingt benutzerdefinierte Rasterthemen, die von verschiedenen Bloggern verwendet werden. (Die ausgewählten Links in der vorherigen Liste, einschließlich Web Designer Wall und Smashing Magazine, enthalten Schnappschüsse solcher Websites. Siehe auch Khoi Vinh 'Subtraktion' als Beispiel für eine visuell wirkungsvolle, netzbasierte Site.)
Warnung: Einige dieser Themen funktionieren möglicherweise nicht in WP 2.5x+
Die obige Liste der Magazinthemen wird aus den folgenden Referenzen sowie aus Google.com zusammengestellt.
Accentsconagua