Entwicklung & Design

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.

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.

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.

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.

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.

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

2 Kommentare
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!

Hey du! Schön, dass du hier bist. 😊

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

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

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung