Anzeige
Anzeige
UX & Design
Artikel merken

Layout-Frameworks für Webentwickler: CSS- und Grid-Frameworks erleichtern professionelle Webentwicklung

Die Erwartungshaltung an professionelle Websites ist hoch. Neben einem guten Design sind gute Zugänglichkeit und Bedienbarkeit ebenso selbstverständlich wie hohe Performance. Die Seiten sollen schnell sein, ohne lange Wartezeiten. Der Aufgabenbereich für Webentwickler ist vielseitig und nicht selten zeitintensiv. Dieser Artikel erläutert, welche Vorteile Layout-Frameworks bieten und wie Entwickler sie effektiv in ihren Workflow einbinden.

10 Min. Lesezeit
Anzeige
Anzeige

Der Zeitaufwand für den Entwurf eines Layouts hängt von der Vorgehensweise des Webdesigners ab. Der schnellste Weg ist sicherlich der Einsatz eines Fertig-Templates. Ob kostenpflichtig oder frei verfügbar – man kann sofort loslegen und die Website mit Inhalten befüllen oder das Layout im Content Management System der Wahl umsetzen. Der zeitliche Aufwand für die Erstellung geht gegen Null, dafür lebt man mit den Vorgaben der Gestaltung und der Codequalität des Fertiglayouts.

Links ohne, rechts mit Layout-Raster (16-spaltig). Grid-Frameworks geben ein Gestaltungsraster vor und erleichtern so die Arbeit.

Links ohne, rechts mit Layout-Raster (16-spaltig). Grid-Frameworks geben ein Gestaltungsraster vor und erleichtern so die Arbeit.

Anzeige
Anzeige

Im Gegensatz dazu steht das vollständig von Hand kodierte Layout. Hier kommt das klassische Bottom-Up-Prinzip zum Tragen, denn die Arbeit beginnt mit dem Anlegen von Ordnerstrukturen und Dateien und dem Erstellen des Markups, gefolgt von der Gestaltung per CSS. Bugfixing und Optimierung des Codes schließen diesen Prozess dann ab. Die vollständige Handkodierung stellt somit den zeitintensivsten Weg der Layouterstellung dar, bietet dafür aber den größtmöglichen Einfluss und die Möglichkeit, individuellen und perfekt auf die Layoutaufgabe zugeschnittenen HTML- und CSS-Code zu entwickeln.

Bis vor wenigen Jahren war die Entscheidung für einen der beiden Wege mangels Alternativen relativ leicht zu treffen, denn nur in den seltensten Fällen erfüllte ein Fertiglayout exakt die Anforderungen und Erwartungen des Kunden. Als Entwickler war man gezwungen, sich entweder in den fremden Code einzuarbeiten, ohne genau zu wissen, was einen an Codequalität erwartet, oder den sicheren Weg zu gehen und das Projekt selbst zu entwickeln. Natürlich startet man hierbei nicht wirklich bei Null, denn mit jedem neuen Projekt gibt es wiederkehrende Aufgaben, für die jeder Webentwickler entsprechende Lösungsansätze parat hat. Auch die Projektstruktur, mit der man arbeitet, wird mit jedem neuen Auftrag in ein mehr oder weniger festes Schema übergehen, das effizientes Arbeiten erlaubt und Projekte ermöglicht, die man auch nach Monaten oder Jahren noch pflegen kann. Der Teufel steckt jedoch im Detail, so auch bei diesem Thema.

Anzeige
Anzeige

Jeder Webentwickler hat seine eigene Arbeitsweise, individuelle CSS-Kenntnisse und ebenso individuelle Ansprüche an die Codequalität. Agenturmitarbeiter wissen nur allzu gut, was es heißt, sich tagtäglich in fremden Code eindenken zu müssen. Bei den Webbrowsern zeigt sich ein ähnliches Bild: Auch wenn die aktuellen Generationen mit Standardkonformität glänzen, in der Regel müssen zwei bis drei Generationen unterstützt werden – bei den älteren Semestern, speziell beim Internet Explorer, lauern viele Fallstricke und Inkompatibilitäten, denn die Unterstützung und Umsetzungsqualität des CSS-Standards ist versionsabhängig.

Anzeige
Anzeige

Klassische Layoutvorlagen wie „Layout Gala“ [1] können bei der Erstellung des Grundlayouts hilfreich sein. Bezogen auf einen Hundertmeterlauf unterstützen sie einen jedoch nur auf den ersten fünf Metern. Über viele Jahre hatte diese Situation mehr oder weniger unverändert Bestand. Die Entwicklung und stetig wachsende Akzeptanz von Layout-Frameworks bringen jetzt wieder Bewegung in diesen konzeptionellen Teil der Webentwicklung. Bevor wir auf die zahlreichen Projekte und die dahinter stehenden Methoden eingehen, gilt es, einige Begriffe zu klären.

Die Layout-Frameworks kommen!

Im Bereich der Softwareentwicklung sind Frameworks wie CakePHP, jQuery und Django weit verbreitet. HTML und CSS sind dagegen keine Programmiersprachen wie PHP, JavaScript oder Python. Aus diesem Grund ergeben sich einige grundsätzliche Unterschiede, was die Beschreibung eines Frameworks zur Gestaltung von Webseiten betrifft. Bei Layout-Frameworks handelt es sich nicht um Software-Bibliotheken mit parametrisierten Funktionen, sondern vielmehr um Sammlungen aufeinander abgestimmter HTML- und CSS-Codebausteine.

Anzeige
Anzeige

Gerade in den letzten beiden Jahren sind zahlreiche spannende Projekte mit unterschiedlichsten Ansätzen entstanden. In der Blogosphäre werden entsprechende Themen unter dem Begriff „CSS-Frameworks“ behandelt, die englischsprachige Wikipedia führt unter dieser Rubrik eine recht vollständige und aktuelle Liste aktiver Projekte [2]. Diese lassen sich jedoch nicht ohne eine grundlegende Klassifizierung miteinander vergleichen.

Es gibt aktuell zwei Methoden, nach denen ein solches Framework aufgebaut sein kann, diese sind jedoch von ihren Zielen und Layoutmethoden grundverschieden. Wir unterscheiden zwischen Grid-Framework und CSS-Framework – der Begriff Layout-Framework dient als übergeordneter Begriff.

Grid-Frameworks

Grid-Layouts haben ihren Ursprung im Gestaltungsraster des Printbereichs, werden jedoch auch im Webdesign immer beliebter. Sie lösen mehr und mehr das klassische Spaltenlayout ab, da sie eine sehr feingliedrige und individuelle Unterteilung des Layouts ermöglichen. Ein solches Raster lässt sich sehr einfach durch ein System von CSS-Klassen beschreiben, das Containerbreiten und Abstände innerhalb des Rasters definiert. Grids sind die Basis der meisten anwendungsorientierten Layout-Frameworks, die im Weiteren vereinfacht als Grid-Frameworks bezeichnet werden.

Anzeige
Anzeige

Der bekannteste Vertreter unter den Grid-Frameworks ist das im August 2007 veröffentlichte Blueprint CSS [3]. Es basiert auf einem 24-Spalten-Grid, ist auf die Erstellung fixer Layouts ausgerichtet und stellt neben der eigentlichen Layoutkomponente noch das Reset-Stylesheet von Eric Meyer [4], typographische Vorlagen für die Inhalte sowie ein einfaches Druckstylesheet zur Verfügung.

Das 960-Grid-System (960.gs) [5], das im März 2008 veröffentlicht wurde, hat sich Minimalismus auf die Fahnen geschrieben und konzentriert sich rein auf die Bereitstellung eines wahlweise 12- oder 16-Spalten-Grids mit einer Gesamtbreite von 960 Pixeln. Daneben werden außer einem Reset-Stylesheet keine weiteren CSS-Bausteine mitgeliefert, dafür jedoch zahlreiche Vorlagen, um in Photoshop, Fireworks oder Visio mit diesen Gridrastern zu arbeiten.

Der dritte Vertreter ist YUI Grids [6]. Der CSS-Ableger von Yahoos umfangreicher JavaScript-Bibliothek YUI wurde bereits im Februar 2006 veröffentlicht. Das System basiert auf insgesamt sechs zweispaltigen Template-Varianten, deren Gesamtbreite auf 750, 950, 974 Pixel oder einen wählbaren Prozentwert festgelegt werden kann. Mit YUI Grids kann man daher sowohl fixe als auch fluide Layouts erstellen. Erst die weitere Unterteilung der beiden Spalten erfolgt durch Grid-Bausteine, die eine Unterteilung in zwei bis vier Teilbereiche erlaubt. Zudem können diese Bausteine ineinander verschachtelt werden, womit auch komplexe Layouts einfach realisiert werden können. Auch YUI Grids beschränkt sich auf die Unterstützung bei der Erstellung des Screenlayouts und stellt darüber hinaus neben einer Reset-Komponente keine weitere Funktionalität (z. B. für die Druckausgabe) bereit.

Anzeige
Anzeige

Darüber hinaus finden sich im Netz zahlreiche Ableger (Clones) von Blueprint CSS und 960.gs. Hierbei handelt es sich mehrheitlich um geringfügig modifizierte Varianten der vorgestellten Frameworks mit weitgehend identischem Funktionsprinzip (z. B. Boilerplate, Typogridphy oder Emastic).

Zusammenfassung: Grid-Frameworks
Sinn und Zweck eines Grid-Frameworks sind schnelle Ergebnisse in
der Anwendung in den Grenzen des Vorgegebenen.

CSS-Frameworks

Der zweite Weg, den Anwender bei der Layouterstellung zu unterstützen, besteht darin, ihm ein funktionales Layoutgerüst zur Verfügung zu stellen, das er unter Einhaltung eines Regelwerks frei gestalten und erweitern kann. Auf diese Weise entsteht eine Entwicklungsumgebung, innerhalb derer sich der Webentwickler gestalterisch frei entfalten kann.

Ein solches Layoutgerüst beinhaltet oft benötigte Seitenelemente (z. B. Header, Footer, Inhaltsbereich, Sidebar). Als Anwender positioniert man Container, definiert Breiten, Höhen und Abstände per CSS und fügt auf diese Weise die einzelnen Bausteine in immer wieder neuen Variationen zusammen. Aufgabe des Frameworks (und zugleich die große Kunst) ist es, dafür ein möglichst vielseitig einsetzbares HTML-Gerüst sowie sinnvolle CSS-Klassen (Float-Clearing, Positionierung usw.) zu dessen Gestaltung bereitzustellen. Die eigentliche Erstellung eines Screenlayouts besteht also in der Anwendung dieses Regelwerks, um das vorhandene HTML-Grundgerüst nach den eigenen Wünschen per CSS zu gestalten.

Anzeige
Anzeige

Und damit ist der entscheidende Unterschied zwischen den beiden Ansätzen benannt. Denn die zuvor besprochenen Grid-Frameworks setzen auf die reine Anwendung des vorgegebenen Rasters zur Layoutgestaltung. Die Raumaufteilung der Seitenelemente wird durch ihre Position im Quelltext und der ihnen zugewiesenen CSS-Klasse bestimmt. Layouterstellung bedeutet also in erster Linie die Erstellung eines HTML-Dokuments, das CSS des Grids bleibt hingegen unberührt. Die Markup-Struktur eines solchen Layouts ist dem zeilen- und spaltenweisen Aufbau eines Tabellenlayouts sehr ähnlich.

Erstmals wurde der gedankliche Ansatz eines CSS-Frameworks im Mai 2005 von Mike Stenhouse in seinem Artikel „A CSS Framework“ [7] beschrieben. Dem Artikel liegt eine beispielhafte Implementierung zu Grunde, die unter der BSD-Lizenz veröffentlicht wurde und auf der Webseite heruntergeladen werden kann. Leider wurde dieses vielversprechende Projekt nicht weiterentwickelt und verharrt daher bis heute mehr oder weniger auf dem Stand eines „proof of concept“.

Das in Deutschland bekannteste CSS-Framework ist YAML (Yet Another Multicolumn Layout) [8], das im Herbst 2005 veröffentlicht wurde und nach über drei Jahren stetiger Weiterentwicklung mittlerweile in der Version 3.1 vorliegt.

Anzeige
Anzeige

YAML ist ein umfangreiches CSS-Framework zur Erstellung flexibler Layouts. Das System ist speziell darauf ausgerichtet, dem Anwender einerseits größtmögliche Freiheit in der Gestaltung seines Layouts zu geben und andererseits das Auftreten zahlreicher CSS-Bugs verschiedener Browser zuverlässig abzufangen. Ermöglicht wird diese Eigenschaft durch ein besonders robust angelegtes HTML-Grundgerüst für die Erstellung 2- und 3-spaltiger Layouts mit Kopf- und Fußbereich. Zusätzlich stellt YAML ein flexibles Grid-System zur Verfügung, das mit dem Spaltenkonzept kombiniert wird und somit auch komplexen Layoutaufgaben gewachsen ist.

Ein weiterer Schwerpunkt liegt auf der Barrierefreiheit. Das Framework beinhaltet bereits zahlreiche wichtige Elemente, wie beispielsweise Skiplinks, Formularbausteine und Navigationsbeispiele, die den technischen Anforderungen der Barrierefreiheit entsprechen und in der Praxis eine Erleichterung für Entwickler darstellen.

Zusammenfassung: CSS-Frameworks
Sinn und Zweck eines CSS-Frameworks ist die Bereitstellung einer möglichst leistungsfähigen Entwicklungsumgebung.

Welches ist der bessere Ansatz?

Diese Frage lässt sich nicht sinnvoll beantworten, denn beide Frameworktypen führen zu einer spürbaren Beschleunigung des Entwicklungsprozesses.

Anzeige
Anzeige

Vergleicht man beide Ansätze rein nach dem Zeitaufwand, so beschleunigen CSS-Frameworks die Layouterstellung bereits deutlich im Vergleich zur Handkodierung. Mit Grid-Frameworks geht alles noch ein bisschen schneller, wobei dieser Zugewinn an Geschwindigkeit durch die Einschränkungen auf die Arbeit innerhalb des vorgegebenen Rasters erkauft wird.

Doch auch das ist nicht pauschal als nachteilig zu bewerten, denn die Gestaltungsraster von Blueprint CSS und 960.gs bieten ausreichend Freiraum für die Umsetzung vielfältiger individueller Layoutideen. Die Entscheidung, welche Art von Framework für einen selbst am sinnvollsten ist, richtet sich hauptsächlich nach den eigenen Ansprüchen in Bezug auf die Einarbeitungszeit und die Freiheiten bei der Layoutgestaltung.

Framework-Einsatz kontra Performance?

Layout-Frameworks sind keine Software-Bibliotheken. Eine vollständige Trennung von Framework- und Nutzercode, wie man es bei CakePHP oder jQuery gewohnt ist, ist bei Layout-Frameworks einerseits nur in begrenztem Umfang möglich, andererseits auch gar nicht erwünscht. Layout-Frameworks sind Entwicklerwerkzeuge und als solche meist modular aufgebaut. Das bedeutet, sie stellen verschiedene aufgabenspezifische CSS-Bausteine (Reset-CSS, Layout, Navigationselemente, Druckausgabe usw.) zur Verfügung. Den jeweiligen Anforderungen entsprechend werden die einzelnen CSS-Bausteine ins Layout eingebunden, was den Entwurfsprozess stark beschleunigt, denn dies ermöglicht die Wiederverwendung robuster, erprobter Bausteine, um den Pflege- und Testaufwand auf ein notwendiges Minimum zu reduzieren.

Im Gegensatz dazu verlangt der spätere Produktivbetrieb der Website vorrangig nach Geschwindigkeit. Jeder CSS-Baustein muss einzeln per HTTP-Request beim Server angefordert werden. Jeder Request ist zwangsläufig mit Latenzzeiten verbunden und verlangsamt somit die Darstellung der Webseite. Im Produktivbetrieb ist es daher sinnvoll, die Anzahl der einzelnen Stylesheets durch Zusammenfassen so weit wie möglich zu reduzieren. Ähnliche Vorgehensweisen wendet man bei Grafiken an, Stichwort: CSS-Sprites [9].

Das CSS einer Webseite wird erst im Browser des Nutzers interpretiert und muss zunächst vom Server heruntergeladen werden. Performance im Produktivbetrieb verlangt deshalb nach möglichst kleinen Dateigrößen, um die Ladezeiten möglichst gering zu halten. Erreicht wird dies durch die Komprimierung von CSS-Dateien mit Werkzeugen wie dem YUI Compressor [10] oder dem PHP-Tool minify [11]. Dabei werden Kommentare und unnötige White-Spaces (Leerzeichen, Tabulatoren, Zeilenumbrüche) entfernt, um die Dateigröße zu reduzieren.

Es ist nachvollziehbar, dass es sich in einer solch komprimierten Form nicht effektiv entwickeln lässt. Wer sein Layout von Hand kodiert, wird ebenso darauf achten, sein CSS lesbar und übersichtlich zu gestalten und wird einzelne Passagen kommentieren, um die Wartbarkeit des Codes zu gewährleisten und Designentscheidungen für andere Teammitglieder nachvollziehbar zu dokumentieren. Auch wird man teilweise auf Bausteine aus anderen Projekten zurückgreifen. Somit hat man es auch bei der Handarbeit meist mit mehreren Dateien zu tun.

Bei der Entwicklung eines Layout-Frameworks ist es nicht viel anders. Jedes Layout-Framework ist für den Anwender zunächst eine fremde Codebasis, die verstanden sein will, um Vertrauen in den Code zu gewinnen (bezüglich der fehlerfreien Darstellung) und um effektiv damit zu arbeiten. Aus diesem Grund sind die Bausteine eines Frameworks meist deutlich ausführlicher dokumentiert und die modulare Aufteilung in aufgabenspezifische CSS-Bausteine wird konsequenter verfolgt.

Das Kommentieren von Code, die bedeutungsvolle Benennung von Layoutelementen, Dateien und Ordnern ist eine Grundvoraussetzung für professionelle Webentwicklung und kann somit nicht exklusiv für die Handkodierung oder den Einsatz von Layout-Frameworks gelten. In beiden Fällen unterliegt der Entwicklungsprozess anderen Kriterien als der Livebetrieb einer Website. Das Optimieren des fertigen Layouts hinsichtlich der Performance ist daher kein Argument gegen oder für den einen oder den anderen Weg. Vielmehr entscheidet es darüber, ob wir uns einer professionellen Arbeitsweise stellen oder nicht.

Fazit

Die Zeiten, in denen das Erstellen eines validen, crossbrowsertauglichen CSS-Layouts ein Alleinstellungsmerkmal weniger umworbener Webentwickler war, sind vorbei. Die Qualität der Browserunterstützung von CSS hat einen Stand erreicht, der diese Dinge zu einer Grundvoraussetzung für moderne, professionelle Webseiten macht.

Die Optimierung der Bedienbarkeit (Usability) und die Absicherung der Zugänglichkeit (Accessibility) sind ebenso bedeutsame Aufgaben der Layoutentwicklung, die sich im Gegensatz zur reinen HTML-Erstellung nur sehr begrenzt automatisieren oder durch Hilfsmittel wie Frameworks beschleunigen lassen. Für diese Aufgaben braucht es Erfahrung und Zeit. Und eben diese Zeit lässt sich durch die Arbeit mit Layout-Frameworks gewinnen.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
2 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Vladimir Carrer

I used google translate in order translate this article from German. I sow in the article that my framework Emastic is been called (clone) of Blueprint or 960.gs.

Here is little history:First came YAML but was to difficult to be understand, then Blueprint was based on ljworld.com layout (Frameworks for Designers) then came 960.gs with the same building logic like Blueprint. So everything is clone or copy of Blueprint. Or every framework based on „float“ is copy of Blueprint!?

There are different points of view I will say 960.gs is evolution of Blueprint.

When I build Emastic I wonted to be improvement of the other CSS Frameworks. It is the first lightweight framework(only 4kb) it is the first to implement easy fluid column, it is the first to implement 3 layout system and many other original solutions.

My advice is if you want to understand how one CSS Framework works open the code and try to understand it. If you like the code and the logic of that framework, use it.

Antworten
Dirk Jesse

Hi Vladimir, thank you for your comment. Of course allmost every framework development makes some improvements but that wasn’t the key here. All mentioned grid frameworks are based on the same layout technique. Blueprint CSS and 960.gs seem to be the „big players“ that make CSS-based grid-layouts easy for everyone. Other frameworks like Emastic use the same techniques. Of course also YAML and YUI are using floats (Who doesn’t?) but there layout techniques differ from the the basic „grid“ solution as they provide more flexible column-based layout solutions – and are therefore a little more complex.
I fully agree with your advice. There’s no best or worst framework. Users should test them and use the one, that fits best to their needs and workflow.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige