Über den Rahmen des Designers in Webdesign und -produktion

„Framework“ ist heutzutage ein hübsches Schlagwort in der Webentwicklung. Beispielsweise haben die JavaScript-Frameworks YUI, JQuery und Prototype große Aufmerksamkeit erregt, und die Webanwendungs-Frameworks Rails und Dojo haben noch mehr Aufmerksamkeit erregt. Es scheint, dass jeder irgendeine Art von Framework verwendet, um seine eigenen Websites zu entwickeln. Aber was genau ist ein Framework? Sind Frameworks nur für Programmierer nützlich?

Was ist ein Framework?

Um die Kommunikation zu erleichtern, geben wir (zumindest in diesem Artikel) eine einheitliche Definition von „Framework“ an: eine Reihe von Tools, Funktionsbibliotheken, Konventionen und allgemeinen Modulen, die versuchen, allgemeine Aufgaben zu abstrahieren und die Wiederverwendung ermöglichen und Entwickler können sich auf Aspekte konzentrieren, die für das Aufgabenprojekt einzigartig sind, und Doppelentwicklungen vermeiden. Im Allgemeinen handelt es sich bei Frameworks um die oben genannten JavaScript-Frameworks und Webanwendungs-Frameworks.

Es ist wichtig zu betonen, dass wir nicht über Konstruktion, Verpackung und Vertrieb sprechen müssen, sondern dass ein Framework nur von Ihnen oder Ihrem Team verwendet werden kann.

CSS-Framework

Manchmal kommen Sie vielleicht in den Genuss der Vorteile von abstraktem und ähnlichem CSS-Code, was am offensichtlichsten bei Designern ist, die mehrere ähnliche Websites gleichzeitig entwerfen. Darüber hinaus haben die Designer im Team stark vom Ansatz des Frameworks profitiert. Ich arbeite zum Beispiel für eine Zeitung und alle über 20 Websites haben viele Gemeinsamkeiten. Aufgrund der Eigenschaften von Nachrichten-Websites sind sie eher ähnlich als unterschiedlich. Aber selbst ein einzelner Designer, der an einem Projekt arbeitet, das auf den ersten Blick ganz anders aussieht, kann einige gemeinsame kleine Teile für das CSS-Framework abstrahieren.

Bei Lawrence Journal-World, wo ich arbeite, haben wir kürzlich ein CSS-Framework entwickelt und festgestellt, dass es einen enormen Effizienzmultiplikator darstellt. Natürlich haben wir Tage gebraucht, um selbst ein CSS-Framework zu erstellen, aber als das Framework fertig war, ging die Entwicklung hochwertiger Webseiten extrem schnell. Und da jetzt jeder Designer im Team dieses Framework verwendet, muss ein Designer, wenn er die Webseite eines anderen Teammitglieds ändert, nicht mehr 20 Minuten damit verbringen, die Bauideen anderer Leute zu verstehen, und kann sofort loslegen.

Gibt es welche, die ignoriert werden können?

Wenn Sie in ein sehr ganzheitliches CSS-Framework investieren, sollten Sie nach gemeinsamem Code suchen, der in jedem Projekt immer wieder wiederholt wird. Das Ziel besteht darin, die Kernposition dieser Codes zu festigen und dem Grundsatz „Wiederholen Sie sich nicht“ zu folgen. t Repeat Yourself)“-Kodierungsmethode. Dies erleichtert die Wartung erheblich und spart Bandbreitenkosten für Ihre Besucher.

In fast jedem Projekt, an dem ich arbeite, gibt es ein paar CSS-Probleme, die ich erklären muss:

„Umfangreiches Zurücksetzen“ des Standardstils des Browsers, z. B. Setzen des Rands und Abstands aller Elemente auf 0, Entfernen der Ränder von Framesets und Bildern usw.

An der Grundlinie ausrichten. Dazu gehört beispielsweise das Festlegen von Rändern für Elemente auf Blockebene wie Absätze, Überschriften und Listen auf die gleiche (oder mehrere) Grundlinienhöhen.

Erstellen Sie den Grundstil des Formulars.

Erstellen Sie mehrere häufig verwendete CSS-Klassen, zum Beispiel .hide (Anzeige auf „Keine“ setzen, d. h. Element ausblenden), .mute (auf kleinere Schriftart und hellere Farbe einstellen).

Und was noch lustiger ist: Viele Website-Designer verwenden immer wieder dieselbe Grundstruktur. Warum also nicht sie sich zu eigen machen, und zwar auf eine Weise, die sehr flexibel ist und auf mehreren Websites verwendet werden kann? Yahoo hat dies getan YUI. Als wir das CSS-Framework für die Lawrence Journal-World-Website erstellten, schaute ich mir zunächst an, wie Yahoo das gemacht hat. Wir sind uns ziemlich sicher, dass das nicht das ist, was wir wollen, aber es dient als gutes Beispiel und gibt uns viele Ideen zum Nachdenken und zum Aufbau unseres eigenen Frameworks. Wir entschieden uns für ein 16-Zellen-Problem, das flexibel genug war, um an jedem unserer Standorte zu funktionieren, auch wenn jeder Standort ein wenig anders aussah als der andere. Darüber hinaus teilen die meisten Websites Widgets wie Dropdown-Menüs, Navigationsmenüs, Schaltflächen usw. Dies sind auch die Hauptobjekte, die abstrahiert werden müssen. Darüber hinaus verfügen Sie möglicherweise über allgemeine Inhaltsnamen, z. B. Miniaturansichten für Bildlisten. Sie können die CSS-Benennung standardisieren, z. B. „thumbnail-list“, sodass alle Miniaturansichten, die Miniaturansichten anzeigen, diese CSS-Klasse verwenden.

Eine andere Möglichkeit besteht darin, Hacks zu extrahieren (z. B. Kompatibilität mit diesen alten Browsern) und Ihr eigenes erweitertes Stilmodul hinzuzufügen. Ich habe es selbst versucht, aber festgestellt, dass der Hack zu proprietär war, um ihn in ein allgemeines Framework zu extrahieren.

Was sind die wirklichen Vorteile?

Der eigentliche Vorteil des Frameworks besteht darin, dass es schnell mit der Arbeit beginnen kann. Sie können eine neue (X)HMTL-Datei erstellen und Ihr Framework einführen. Sie müssen sich nicht mehr um das Zurücksetzen von Abständen und Rändern kümmern. Gültige Widgets usw. Natürlich müssen Sie das Erscheinungsbild jeder Website individuell anpassen. Um dies zu erreichen, müssen Sie lediglich den Standardstil überschreiben und bei Bedarf ergänzen.

Obwohl Sie das Erscheinungsbild jeder Website anpassen müssen, müssen Sie dazu lediglich ein paar Codezeilen zu den Standardstilen hinzufügen. Wenn Sie beispielsweise einen grundlegenden horizontalen Navigationsstil für alle UL-Tags mit dem Klassenattribut „Tabs“ in Ihrem Frame festlegen und einen grauen Rahmen haben, benötigen Sie nur ein paar Zeilen CSS-Code, um das Erscheinungsbild anzupassen Website entspricht.

Die Liste schwebt nach links und die Links werden in Form von Blöcken in der Liste platziert, und die Schriftart wird zentriert. Das Framework hilft Ihnen dabei, diese Aufgaben wie lästige Werbung auf Ihrer Website zu erledigen Konzentrieren Sie sich bei der Designarbeit einfach auf die spezifischen, interessanten Details Ihrer Website, anstatt CSS-Code zu schreiben, der schon millionenfach geschrieben wurde.

Wie erstellt man ein CSS-Framework?

Es gibt mehrere Möglichkeiten, ein Framework zu erstellen, aber die gebräuchlichste und wohl nützlichste besteht darin, allgemeines CSS in eine eigenständige Stylesheet-Datei zu abstrahieren, die nur einen bestimmten Teil des Ganzen enthält. Beispielsweise könnten Sie einen Stil mit dem Handle „Typografie“ und einen anderen mit einem Massen-Reset versehen. Mit dieser guten Methode können Sie die benötigten Stile selektiv einführen. Ihr Framework enthält möglicherweise sechs oder sieben verschiedene Stildateien, Sie benötigen jedoch nicht eine oder zwei davon, solange sie nicht importiert werden. Das von unserem Team erstellte Framework besteht aus 5 Stildateien:

reset.css – behandelt das Zurücksetzen

type.css – kümmert sich um Typografie

grid.css – kümmert sich um das Layout

widgets.css – verwaltet Widgets wie Tab-Menüs, Dropdown-Menüs und „Mehr“-Schaltflächen

base.css – Enthält alle anderen Stylesheet-Dateien, sodass wir nur auf base.css in (X)HTML verweisen müssen, um das gesamte CSS-Framework zu verwenden. Anschließend speichern wir das Framework an einem separaten Ort, damit jede Site diesen Frame importiert. Natürlich benötigt jede Website auch ein einzigartiges Stylesheet, und der einzigartige Stil macht notwendige Ergänzungen zum Framework erforderlich.

Beratung

Diese Methode ist gut, bringt aber auch neue Probleme mit sich: Sie erhöht die Anzahl der http-Links für jede Seite. Wenn bei Websites mit großem und mittlerem Datenverkehr mehr als 5 HTTP-Verbindungen zu jeder Seite hinzugefügt werden, kann der Systemadministrator in große Schwierigkeiten geraten. Zwei mögliche Lösungen:

Fassen Sie alle Stile in einer Datei zusammen, anstatt sie in mehrere Module aufzuteilen. Das Problem dabei ist, dass die Flexibilität des Frameworks, nur bestimmte Dateien einzubeziehen, verloren geht und die Wartung umständlich wird.
Es gibt ein serverseitiges Programm, das mehrere einzelne Dateien dynamisch zu einer Antwort verarbeitet. Ich habe das noch nicht gesehen, aber es sollte sehr effizient sein, wenn es gut gemacht wird. Am Beispiel meines obigen Frameworks wird dieser dynamische Verarbeitungsprozess ausgelöst, wenn base.css angefordert wird, nicht wenn type.css, grids.css usw. angefordert werden. Auf diese Weise bleiben einzelne Dateien weiterhin verfügbar und das gesamte Framework ist auf der Plattformversion gültig.
Zusammenfassend ist festzuhalten, dass unser Ziel nicht darin besteht, so abstrakt wie möglich zu sein. Das Ziel besteht vielmehr darin, einen schnellen Einstieg und einen effizienteren Designprozess zu ermöglichen, der definitiv jemals möglich ist. Wenn Sie zu abstrakt vorgehen, können die Dinge verwirrend werden und zu viele HTTP-Links können die Leistung Ihrer Website beeinträchtigen. Denken Sie daran: Bei einem guten Framework geht es nicht darum, die Dinge schwieriger und komplizierter zu machen, sondern darum, bei Null anzufangen.

Zusammenfassen

Wir Webdesigner neigen dazu, uns ständig zu wiederholen, und wie meine Freunde in der Programmierwelt setzen wir die Browser-Standardstile, Design-Layouts und Navigationsmenüs immer wieder zurück – bei fast jedem Projekt. Wenn Sie ein wenig Zeit damit verbringen, das CSS-Framework zu verstehen, können Sie jedes Website-Projekt schnell starten, die Website einfacher pflegen und anderen Designern im Team helfen, Ihre Arbeit zu verstehen. Es ist zu beachten, dass diese Vorteile erzielt werden müssen, ohne die Leistung der Website zu beeinträchtigen.