Netz - Rettung - Recht

HTML 5 und CSS 3.0

Die neuen “Webstandards” HTML 5 und CSS 3.0 haben etliche alte Zöpfe abgeschnitten und dafür eine Vielzahl neuer Möglichkeiten hinzugefügt. HTML-Elemente zur optischen Seitengestaltung sind endgültig verschwunden (oder bekamen in manchen Fällen neue Bedeutungen), neben das nahezu omnipräsente <div>-Element sind weitere Elemente zur semantischen Strukturierung der Seite getreten, und dazu kommen u.a. noch Erweiterungen für Formulare und zur Einbindung von Multimedia-Elementen. Auch CSS 3.0 enthält eine Vielzahl neuer Funktionen, so zum Beispiel Media Queries, die eine Anpassung des Layouts je nach Bildschirmgröße ermöglichen, und Eigenschaften wie transition, transform oder animation, mit denen früher Javascript vorbehaltene Funktionalitäten in CSS realisiert werden können. Die Gestaltung übersichtlicher, standardkonformer Webseiten ist heute leichter als jemals zuvor.

Am wichtigsten dürften wohl die Stichworte “responsive design” oder “mobile first” sein - beide bezeichnen Prinzipien zur Gestaltung einer Seite, die sowohl auf großen Full-HD-Bildschirmen als auch auf kleinen Smartphone-Displays brauchbar aussehen. Ein verbreiteter Weg ist dabei die Gestaltung eines Designs zunächst für das kleinste unterstützte Gerät (“mobile first”), das sich mit zunehmender Größe des Browserfensters (Stichwort “Media Queries”) ausdehnt.

Ich weiß, das klingt alles toll - und sehr, sehr kompliziert. Was es aller Voraussicht nach auch ist, wenn man von Null anfängt und sich alles selbst zusammenbaut.

Frameworks für HTML, CSS und Javascript

Das schöne ist: das muss man gar nicht.

Es gibt nämlich fertige Frameworks, sozusagen Baukästen, die in der einfachsten Version das Grundgerüst einer HTML-Datei mit CSS und Javascript bieten, die für “responsive design” vorbereitet ist und mit eigenen Elementen ergänzt werden kann. Darüber hinaus gibt es dann auch “Luxusversionen” wie bspw. Bootstrap (vormals Twitter Bootstrap), ein Framework, das neben einem Grid, also einer Layout-Grundstruktur zur mehrspaltigen Gestaltung einer Webseite, eine große Menge vorbereiteter, aufeinander abgestimmter CSS-Definitionen, HTML-Bausteine und Javascript-Schnipsel mitbringt, mit denen man - durch schlichtes Kopieren und Anpassen der Beispiele - seine Website oder seine Web-Applikation erheblich aufpeppen kann.

Ergänzend gibt es eine Vielzahl fertiger Designs (“Templates”), von denen man sich für die optische Gestaltung der eigenen Seite inspirieren lassen kann, wenn sie nicht wie hundert andere Seiten aussehen soll, die mit demselben Framework gestaltet wurden - in etwa so, wie man auch sein Blog mit “Templates” oder “Themes” individualisieren kann. Alle CSS-Definitionen lassen sich dabei nach dem persönlichen Geschmack übersteuern, um der eigenen Website eine noch persönlichere Note zu verleihen. In jedem Fall sehen die selbst gestalteten Seiten dann in fast allen (einigermaßen modernen) Browsern ähnlich oder jedenfalls vertretbar aus und passen sich den verschiedenen Bildschirmgrößen vom Smartphone über das Tablet und den Laptop bis hin zum Großbildschirm an.

Webfonts und Iconfonts

Auch hinsichtlich der verwendeten Schriftart(en) sind die Zeiten der Auswahl zwischen “Serifen” und “serifenloser Schrift” vorbei. Vorbei auch das Problem, dass die angegebene Schriftart auf dem Rechner des Besuchers installiert sein muss (was innerhalb eines “Ökosystems” wie Windows recht gut funktioniert, plattformübergreifend hingegen nicht so gut), wenn nicht ein “Fallback” auf Standardschriften erfolgen soll.

Es gibt nämlich die Möglichkeit, einen Webfont einzubinden, den der Browser des Besuchers dann nachlädt. Diese Schriften - bzw. entsprechende Lizenzen - kann (und muss) man teilweise kaufen; es gibt aber auch kostenloses Angebote, wie zum Beispiel Google Fonts, wo über 670 Schriften in verschiedenen Schriftstärken und Varianten zur Auswahl stehen. Wer die Wahl hat, hat dort auch die Qual…

Die Navigation auf einer Seite lässt sich oft elegant unter Verwendung von Symbolen gestalten. Wer kennt sie nicht, die Icons der sozialen Netzwerke, von Facebook über Twitter bis zu Google+ und weiter? Wer kennt nicht die allgemein verbreiteten Symbole für Mailadressen, Up-/Downloads oder Einstellungen? Diese Symbole stehen auf einfache Weise in Form von Iconfonts zur Verfügung, Schriftarten, die keine Buchstaben, sondern Symbole enthalten. Teilweise sind solche Iconfonts Bestandteile von Frameworks (so sind bei Bootstrap die Halflings von GLYPHICONS inbegriffen), teilweise sind sie frei verfügbar, teilweise kosten sie Lizenzgebühren.

Daneben gibt es eine unübersehbare Vielzahl von Grafikbibliotheken, bei denen Symbole und Zeichnungen unter freier Lizenz oder auch solche zusammengestellt sind, an denen sich die Rechte für kleines Geld erwerben lassen. Auch bieten Bilderdienste eine Unzahl von Fotos an, an denen sich - zumindest für den nicht-kommerziellen Bereich - die Rechte für überschaubare Geldbeträge im einstelligen Eurobereich erwerben lassen, wenn der passende “Hingucker” noch fehlt.

LESS, SASS und Co.

Mit den vorstehend geschilderten Möglichkeiten lässt sich bereits eine Menge anfangen; doch damit nicht genug. So wie sich Webseiten - also HTML-Dateien - “dynamisch” aus Scriptsprachen heraus generieren lassen, so ist es auch möglich, CSS-Dateien dynamisch aus einem Quellcode heraus zu erzeugen, der besser verständlich ist und/oder den Einsatz von Variablen u.ä. ermöglicht. LESS und SASS sind Beispiele dafür.

So liefert das Framework Bootstrap zwar “fertige” CSS-Dateien mit, die man sich - wenn man will - auch durch einen Generator nach den eigenen Vorstellungen erzeugen lassen kann. Flexibler ist aber die Erstellung der CSS-Datei aus einzelnen LESS-Schnipseln heraus. Das ermöglicht es bspw., eine Farbe oder die Schriftgröße zentral an einer Stelle zu ändern und dann eine neue CSS-Datei zu erzeugen, in der sich alle Elemente der entsprechenden Farbe geändert haben oder die Schriftgrößen aller Elemente nunmehr proportional angepasst wurden.

Markdown, Textile, AsciiDoc …

Auch seine Texte muss man zwar noch selbst verfassen, aber nicht zwingend in HTML. Wie ich in diesem Blog schon mehrfach berichtete, ist Markdown eine gut verwendbare Alternative. Ähnlich, aber jeweils auf ihre Weise anders, sind bspw. Textile und AsciiDoc.

Templates und Template Engines

Besteht eine Website nur aus einer oder wenigen Seiten, kann man Struktur und Navigation durch “copy & paste” für jede neue Seite übernehmen … um dann freilich auch jede Änderung für jede einzelne Seite nachzuvollziehen. Das macht schon sehr bald keinen Spaß mehr - und auch keinen Sinn.

Die Lösung dafür ist der “Zusammenbau” der Webseiten aus einem oder mehreren Templates, bestehend aus dem Grunddesign der Seite und Navigationselementen sowie den darin eingefügten “eigentlichen” Inhalten. Die meisten Templatesysteme unterstützen dabei das zusätzliche Einbinden von ausführbarem Code, entweder eine spezielle “Template-Sprache” oder PHP, Perl, Ruby und ähnliches. Andere, wie bspw. HAML, gehen darüber hinaus und ersetzen auch HTML durch eine vereinfachte, besser lesbare Template-Sprache.

static site generators, CMS und Web Application Frameworks

Will man diese weiteren Schritte gehen und seine Website (bzw. deren HTML-Dateien) aus Templates zusammenbauen, das CSS kompilieren und die Inhalte aus Markdown-Dateien liefern, geht das nicht von selbst; man benötigt dafür entsprechende Software.

Das kann ein (mehr oder weniger) gewichtiges Content Management System (kurz CMS) sein, mit dem man Seiten online in einem Editor erstellen kann und dass sie dann beim Aufruf aus ihren Bestandteilen erzeugt (und ggf. cached). Für diese Zwecke kann man auch ein Blogsystem oder ein Wiki einsetzen, wobei manche Blogsysteme (man denke an Wordpress) bereits eine Zwitterstellung zwischen Blog und CMS einnehmen.

Gestaltet man keine Website, sondern mehr eine Anwendung, bietet sich ein Web Application Framework an, das seine Inhalte üblicherweise aus Templates, Code und Datenbanken zusammenbaut.

Ist man weder auf die Funktionalität eines CMS angewiesen, weil man seine Webseiten auch selbst in einem Editor erstellen kann oder will, noch auf interaktive Funktionen wie Kommentare, Bestellseiten oder ähnliches, kann man die Website auch mit einem static site generator (offline) erstellen und die daraus erzeugen Dateien dann hochladen. Über diese Möglichkeit habe ich bereits an anderer Stelle berichtet.

Versionsverwaltung, Automatisierung und weitere Möglichkeiten

Auch für die Gestaltung seiner Website kann man natürlich auf all die anderen Tools zurückgreifen, die uns heutzutage zur Verfügung stehen. Verwaltung des Sourcecodes in git, automatischer Neubau der Seite bei Änderungen im Repository oder neuen Daten in einem RSS-Feed, Erstellung neuer Webprojekte aus Vorlagen heraus, wie Mattias Mees es in seinem Beitrag “Vom Build-Tool zur Projektvorlage” umreißt - und vielerlei mehr.

Von einfach bis komplex ist fast alles möglich.

Vertiefende Lektüre

Zur Vertiefung der einzelnen, in diesem Übersichtsartikel nur angerissenen Themengebiete folgt eine Reihe ergänzender Beiträge zum Thema “Webdesign anno 2015” in Form einer kurzen Reihe, bestehend aus:

• HTML 5 und CSS 3.0
• Frameworks für HTML, CSS und Javascript
• Webfonts und Iconfonts
• LESS, SASS und Co.
• Templates und Template Engines
• Webseiten und Webapplikationen erstellen und pflegen

[Dieser Eintrag wurde nachträglich im Februar 2015 veröffentlicht.]