Skip to content

Der Teufel steckt im Detail

Vor einigen Tagen hatte ich berichtet, wie sich mithilfe der <details>- und <summary>-Elemente von HTML 5 ganz leicht “ausklappbare” Erläuterungen - nur mit HTML und ggf. CSS, ohne Javascript - erzeugen lassen. Danach ist mir aufgefallen, dass wir - also vor allem vermutlich yellowled - das in Serendipity auch schon nutzen: im 2k11-Theme wird damit im Blog die einblendbare “Vorschau” der Trackback realisiert, und im Backend findet derselbe Mechanismus bei der Einblendung weiterer Informationen in den Plugin-Boxen Anwendung.

In einem Kommentar zu meinen Blogeintrag hatte Beat dann vorgeschlagen, statt der Screenshots doch lieber ein Live-Beispiel im Blog zu zeigen. Das wollte ich dann “mal eben schnell” nachholen - und natürlich ging das dann nicht “mal eben”, und nicht richtig schnell, so dass ich daran dann länger geknobelt habe. Mittlerweile tut es aber.

"Der Teufel steckt im Detail" vollständig lesen

Details - ganz einfach

Meistens ist es so: Ich habe eine Idee, die ich gerne auf einer meiner Webseiten umsetzen würde - sei es, dass ich das irgendwo anders gesehen habe und diese Funktion auch gerne hätte, sei es, dass mir ein eigener Gedanke gekommen ist. Dann recherchiere ich und stelle fest: das ist alles ziemlich kompliziert. Klar, wenn man HTML einigermaßen, CSS oberflächlich und JS gar nicht beherrscht, ist man zumeist auf copy&paste oder viel Ausprobieren angewiesen, und der Teufel steckt ohnehin immer im Detail.

Manchmal aber ist es auch umgekehrt: ich mache mich auf, um nach Lösungen zur Umsetzung einer Idee zu suchen - und finde heraus, dass eigentlich gar nichts mehr umzusetzen ist, weil alles schon fertig ist. So ging es mir bei einer meiner letzten Ideen, als ich eine Möglichkeit suchte, weitergehende Erläuterungen in einem längeren Text erst auf Wunsch einzublenden.

"Details - ganz einfach" vollständig lesen

Goodbye, JUHMAIL

Ich bin nicht besonders gut darin, Dinge aufzugeben - aber immerhin habe ich 2019 damit begonnen, einige alte Projekte, die sich lange überlebt haben, zu beenden. Im September war das KRG-online, die Ehemaligen-Seiten meiner alten Schule (deutlich älter als Stayfriends und Konsorten), zum Jahreswechsel ist es mein wohl ältestes Projekt: die 1997 gestartete JUH-Mailingliste JUHMAIL und die zugehörigen Webseiten.

Das war fast zwei Jahrzehnte lang das Design der JUHMAIL-Webseiten.
"Goodbye, JUHMAIL" vollständig lesen

Man muss auch loslassen können

Meine spärliche Freizeit teile ich schon lange, vielleicht zu lange auf viele, vielleicht zu viele Hobbys und Projekte auf; und demzufolge gibt es immer etwas, was ich eigentlich schon lange, lange einmal angegangen sein wollte. Und trotz aller Erfolge wächst die Projektliste eher als sie schrumpft.

Außerdem fällt es mir manchmal schwer, zu der Erkenntnis zu gelangen, dass manche Dinge sich einfach überlebt haben und ich sie loslassen sollte - insbesondere dann, wenn ich sowieso keine Zeit dazu finde. Und so habe ich dieser Tage eine meiner ältesten Websites (neben meiner Homepage, natürlich) endlich aufgegeben.

"Man muss auch loslassen können" vollständig lesen

Shariff - sichere Sharing-Buttons

Im Zeitalter sozialer Netzwerke lebt auch das Web vom “Teilen” von Seiten - dem Veröffentlichen von Links zu Webseiten, Blogbeiträgen und anderen Ressourcen in diesen Netzwerken, bei Twitter, Facebook und Co. Das Open Graph Protocol und Twitter Cards, die ich vor ungefähr zwei Jahren vorgestellt habe, ermöglichen es dabei dem Seitenbetreiber, das Aussehen solcher Links - insbesondere ihren Titel, die textuelle Beschreibung und ein hinzugefügtes Bild - zu steuern; und weil Mobilgeräte zwar regelmäßig aus jeder App heraus (und somit auch aus dem Webbrowser) das “Teilen” von Seiten ermöglichen, der auf Desktops und Laptops verwendete Browser aber oft nicht, baut man als Seitenbetreiber gerne Buttons ein, mit denen die Seite “geteilt” werden kann.

Die verschiedenen sozialen Netzwerke bieten dafür in der Regel Codeschnippsel an, die aber den Nachteil haben, bereits beim Aufruf Daten des Nutzers an den jeweiligen Netzwerkanbieter zu übermitteln - nicht nur in Zeiten der Datenschutzgrundverordnung (DSGVO) ein No-Go. Hier hilft das Shariff-Projekt der c’t weiter, das Sharing-Buttons ohne Datenübermittlung an die sozialen Netzwerke anbietet.

"Shariff - sichere Sharing-Buttons" vollständig lesen

Workflow für die Erstellung und Pflege von Webseiten

Ich stelle die von mir betriebenen Webseiten, die nicht auf interaktive Funktionen angewiesen sind, Stück für Stück auf statisch generierte Seiten um, zuletzt meine Homepage. Dabei setze ich auf einen Workflow, der nanoc als static site generator und git als Versionsverwaltungssystem umfasst und dafür sorgt, dass Änderungen der Seiten automatisch eingespielt werden.

"Workflow für die Erstellung und Pflege von Webseiten" vollständig lesen

Markup mit HAML

Websites bestehen - hoffentlich - in der Regel aus (wenigen) Templates, die dann mit (vielen verschiedenen) Inhalten gefüllt werden. So arbeiten Blogs und CMS, so arbeitet auch ein static site generator. Die Templates können dabei HTML-Dateien sein - müssen es aber nicht, wie ich schon anno 2015 beschrieb.

"Markup mit HAML" vollständig lesen

Markup-Formate konvertieren

In meiner Reihe “Webdesign anno 2015” habe ich versucht, einen Überblick über Techniken und Tools zu geben, die letztlich jedermann die Gestaltung moderner, gut aussehender Webseiten ermöglichen. Das hatte natürlich einen konkreten Anlass: ich bin dabei, allmählich und sehr langsam - im Rahmen der mir bleibenden zeitlichen Möglichkeiten - verschiedene ältere Webpräsenzen zu überarbeiten und inhaltlich wie optisch und technisch auf den heutigen Stand zu bringen.

Eine große Erleichterung ist dabei die automatische Konvertierung von “klassischem” HTML in HAML und/oder Markdown. Ein machtvolles Werkzeug für solche Konvertierungsaufgaben ist pandoc; es geht aber oft auch eine Nummer kleiner, ganz simpel per cut & paste online:

Wenn nur eine Handvoll Seiten - oder Teile einer Seite - zu konvertieren sind, reicht (mir) das vollständig aus.

Webseiten und Webapplikationen erstellen und pflegen

Viele der in den vergangenen vier Wochen dargestellten Möglichkeiten rund um die Gestaltung von Webangeboten lassen sich ohne größeren technischen Aufwand umsetzen. Will man jedoch Templates einsetzen, andere (vereinfachte) Auszeichnungssprachen wie Markdown in HTML konvertieren oder CSS-Präprozessoren wie LESS oder SASS einsetzen, bedarf es dazu entsprechender Software.

Content Management Systeme (CMS)

In Betracht kommen insoweit - wie schon in meinem einleitenden Übersichtsbeitrag dargestellt - zunächst Content Management Systeme (CMS), die üblicherweise einerseits die Bearbeitung von Vorlagen und Inhalten direkt über das Web ermöglichen und die fertigen Webseiten “dynamisch” beim Aufruf erzeugen. Stattdessen lassen sich auch Blogsysteme oder Wikis verwenden, zumal sich diese teilweise in ihren Funktionen durchaus an CMS annähern.

Beispiele für CMS sind

Eine umfangreiche Übersicht, die allerdings auch Wikis und Blogs enthält, findet sich bspw. in der englischsprachigen Wikipedia.

Static Site Generators

Im Gegensatz zu CMS erzeugen Static Site Generators “statische” HTML-Dateien, die nur bei einer Veränderung neu erzeugt werden müssen. Das ermöglicht natürlich keine Reaktionen auf Benutzereingaben; oft ist solche Interaktion für eine Website aber jenseits eines Kontakt- oder auch Kommentarformulars gar nicht notwendig. Die Belastung für den Webserver ist bei der Auslieferung statischer Seiten natürlich geringer; auch besteht keine Gefahr durch die Ausführung möglicherweise unsicheren Codes. Zudem ist Webspace ohne Scriptsprachen und Datenanbindung oft günstiger zu haben …

Beispiele für Static Site Generators sind

Eine umfangreiche Liste mit fast 400 Static Site Generators, die zudem nach Kriterien wie Lizenz oder Programmiersprache sortiert werden kann, bietet reichliche Auswahl. Alternativ dazu kann man sich eine Aufstellung der beliebtesten Open-Source Static Site Generators zeigen lassen.

Web Application Frameworks

Wo Webseiten vor allem Texte (und Bilder) enthalten, bieten Webapplikationen mehr (oder primär) Interaktion - im Prinzip handelt es sich um Software, die nicht lokal, sondern über das Web läuft. Gekennzeichnet sind sie durch Reaktionen auf Nutzereingaben, die Anbindung von Datenbanken und ihre Dynamik - also das genaue Gegenteil “statischer” Seiten. CMS, Wikis, Blogs und Co. sind Beispiele für Webapplikationen.

Auch und gerade hier gilt natürlich, dass nicht nur Struktur (HTML) und optische Repräsentation (CSS), sondern auch Ausgabe bzw. Darstellung (Template) und die dahinterstehende Programmlogik strikt voneinander getrennt werden sollten: Model–view–controller (MVC) ist das Stichwort. Das Äquivalent zu CMS und Static Site Generators für Webapplikationen wären Web Application Frameworks, die in der Regel Templates (“Views”) mit Daten(bank)modellen (“Models”) und der entsprechenden Ablaufsteuerung (“Controllers”), also der eigentlichen Programmlogik, verbinden.

Gerne würde ich mich auch damit näher beschäftigen - bisher fehlte mir aber die Zeit und Gelegenheit, in dieser Richtung mehr zu unternehmen als mich zu belesen. Interessant klingen insoweit im Bereich der PHP-basierten Frameworks bspw.

Abschließend daher nun die Frage: Kennt sich jemand unter den Lesern mit einem dieser Frameworks (oder überhaupt mit Frameworks auf PHP-Basis) aus, kann Erfahrungen teilen oder Empfehlungen geben? Ich würde mich freuen!

Dieser Beitrag gehört zur Reihe “Webdesign anno 2015”.

Templates und Template Engines

HTML und CSS, Frameworks wie Bootstrap, Web- und Iconfonts, LESS oder SASS bieten viele Möglichkeiten zur Gestaltung standardkonformer, gut lesbarer und auf verschiedenen Endgeräten nett anzusehender Webseiten. Eine größere Webpräsenz komplett “von Hand” zu pflegen macht allerdings wenig Spaß - und ist auch alles andere als professionell oder eine gute Idee.

Denn regelmäßig ist eine Website oder auch eine Webapplikation gekennzeichnet durch ein “Grundkorsett”, das mit wechselnden Inhalten gefüllt wird. So wird sich meist ein einheitliches Gestaltungskonzept mit Kopf- und/oder Fußzeile, mit einer oder mehreren Spalten und einer Navigation auf allen Seiten wiederfinden. Dieses Grundgerüst der ganzen Webpräsenz sollte sich dann nicht per copy & paste auf jeder Einzelseite wiederholen, sondern vielmehr in Form einer Vorlage, eines Templates, vorliegen, um dann jeweils mit spezifischen Inhalten gefüllt zu werden. Auch ist es - gerade bei Webapplikationen - sinnvoll, die “Technik” von der “Darstellung” zu trennen, damit Änderungen am Design nicht zwingend Änderungen an der Programmierung erfordern und umgekehrt. (Und, natürlich, damit verschiedene Teams an der optischen Darstellung der Seiten und der dahinterstehenden Programmlogik arbeiten können).

Auf diese Art und Weise arbeiten bspw. Blogsysteme wie Wordpress (mit eigenen Template-Funktionen) oder Serendipity (wo das Template-System Smarty genutzt wird) und natürlich auch Content Management Systeme (CMS) oder static site generators.

Das Prinzip ist immer gleich: ein Grundgerüst und mögliche Inhalte werden getrennt definiert, wobei das Grundgerüst oft aus einer HTML-Datei besteht. In dieser (HTML-) Datei können Platzhalter (Variablen) durch passenden Text ersetzt und andere Dateien eingebunden werden, Codefragmente (in einer Programmiersprache wie Perl, PHP, Python oder Ruby und/oder in einer speziellen Template-Sprache) eingebaut und/oder sogar statt HTML andere Auszeichnungssprachen verwendet werden. Das kann “dynamisch” bei jedem Aufruf der Seite erfolgen, ggf. mit Caching, oder die Webseiten können einmal aus ihren Quelltexten generiert werden und dann “statisch” online gestellt - und nur bei Änderungen aktualisiert - werden.

"Templates und Template Engines" vollständig lesen

LESS, SASS und Co.

LESS? SASS? Hä?

LESS und SASS (Syntactically Awesome Stylesheets) sind CSS-Präprozessoren; man könnte sie vielleicht auch als CSS-Compiler bezeichnen. Sie erzeugen aus einer CSS-ähnlichen, aber mächtigeren Sprache gültige CSS-Dateien, konzeptionell entfernt ähnlich der Art und Weise, in der bspw. PHP und andere in der Webentwicklung verwendete Scriptsprachen HTML erzeugen.

Wenn man ein einheitliches Design für seine Webseiten erstellen möchte, ist es oft wichtig, dass die einzelnen Elemente aufeinander abgestimmt sind. So sollten sich bspw. Schriftgrößen von Text und Überschriften miteinander harmonieren, vielleicht finden sich auch bestimmte charakteristische Farbelemente, die das Seitendesign prägen. Wäre es nicht schön, wenn man mit wenig Aufwand Änderungen an allen notwendigen Stellen vornehmen könnte, also bspw. die bisher verwendete Farbe x überall durch die Farbe y ersetzen? Oder die Schriftgröße des Fließtextes erhöhnen und dabei die Schriftgröße von Überschriften und anderen, besonderen Elementen proportional ändern? Das und mehr geht mit LESS und SASS.

Sowohl LESS als auch SASS sind notwendiger oder ergänzender Bestandteil der von mir bereits vorgestellten Frontend-Frameworks und für diejenigen, die damit umgehen können, fraglos ein wichtiger Bestandteil zeitgemäßer Webentwicklung.

(Ich zähle mich allerdings nur sehr bedingt zu diesem Personenkreis, weshalb dieser Überblicksartikel ein gewisses Wagnis darstellt - ich erzähle hier mehr oder weniger als Blinder von der Farbe).

LESS

LESS bietet die Möglichkeit, Variablen zu definieren - bspw. eine bestimmte Farbe - und diese Variablen dann in CSS-Definitionen zu verwenden. Ändert man die Variable, ändern sich - nach der Neucompilierung - alle damit verbundenen Definitionen.

Mixins heben dieses Konzept auf eine neue Ebene: sie ermöglichen es, ganze CSS-Definitionen in andere Definitionen zu importieren und dabei ggf. noch Parameter zu übergeben. Auch hier gilt natürlich wieder: ändert man das Mixin, ändern sich alle Defitionen, die es importieren.

Darüber hinaus erlaubt LESS den Einsatz von Funktionen und Operatoren. So kann bspw. eine bestimmte Schriftgröße für den Fließtext vorgegeben und dann definiert werden, dass die Überschriftenebene <h6> genau so groß, aber fettgedruckt sein soll, die Überschriftenebene <h5> aber 1.1x so groß und die Ebene <h1> 2x so groß. Farben können als “10% heller” (oder dunkler, oder satter, oder …) als eine andere Farbe definiert werden, ohne dasss dies jeweils manuell in Farbwerten berechnet werden müsste - und ändert man die zur Grundlage genommene Farbe, ändern sich auch die anderen, daraus “berechneten” Farben automatisch mit!

Schließlich bietet LESS die Möglichkeit, CSS-Definitionen ineinander zu verschachteln, also bspw. zunächst grundsätzliche Eigenschaften einer Klasse und dann bestimmter Elemente dieser Klasse zu definieren.

Wem das alles zu trocken klingt, der findet auf LESScss.de eine Erläuterung mit Beispielen, die vollständige Dokumentation, Downloadmöglichkeiten und mehr in deutscher Sprache.

SASS

Für SASS … gilt im Prinzip dasselbe, was ich zuvor bereits gesagt habe; nur habe ich SASS bisher nicht selbst ausprobiert. :-)

Mehr zu SASS gibt es (in englischer Sprache) auf SASS-lang.com, einen Vergleich der beiden Sprachen (Stand 2012) bspw. bei CSS-Tricks.

Würde ich mehr davon verstehen, könnte ich sicherlich auch die bestehenden Unterschiede, Vorteile und Nachteile der beiden Sprachen darstellen; insoweit muss ich leider passen und freue mich auf die Ergänzungen und Richtigstellungen in den Kommentaren.

Dieser Beitrag gehört zur Reihe “Webdesign anno 2015”.

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

Webfonts und Iconfonts

Webseiten vermitteln in der Regel Informationen und bestehen daher auch - im Regelfall sogar: weit überwiegend - aus Text. Text, der möglichst angenehm zu lesen sein soll, und dabei am besten noch gut aussehen. Zu bedenken sind daher die Auswahl einer geeigneten Schriftgröße, ein passender Zeilenabstand und eine lesefreundliche Zeilenlänge - aber auch eine gut lesbare und “schöne” Schriftart. Die Zeiten von “Serifenschrift, alternativ serifenloser Schrift auf weißem Hintergrund” sollten im Jahr 2015 eigentlich vorbei sein, gibt es doch genügend Auswahl.

Allerdings: es genügt - wie immer - nicht, einfach eine hübsche Schrift auszuwählen und dann auf dem eigenen Rechner zu testen, wie die Seite damit aussieht, denn der Browser greift bei der Schriftdarstellung auf die Schriften zurück, die ihm das System zur Verfügung stellen kann. Ist eine Schrift lokal nicht verfügbar, wird stattdessen eine - hoffentlich angegebene - (generischere) Alternative verwendet:

 font-family: Verdana, Arial, Helvetica, sans-serif;

Das kann dann immer noch ungefähr so aussehen, wie man sich das vorstellt … oder eben auch nicht.

Webfonts

Eine alternative Vorgehensweise bieten “Webfonts” - seit CSS 2 kann nämlich eine Schriftart via @font-face (Erläuterung) eingebunden bzw. nachgeladen werden. Das hat den Nachteil eines (zumeist nur leicht) verzögerten Aufbaus der Seite und - gerade bei langsamen, ggf. mobilen Verbindungen - eines (merklich) größeren Donwload-Volumens, aber den Vorteil, dass eine große Auswahl tatsächlich überall verfügbarer Schriften bereitsteht.

Als Quelle bietet sich zunächst Google Fonts an, wo Google über 600 Schriftarten in allen Variationen zur freien Verfügung bereitstellt. Wem das nicht genügt, der kann auf kostenlose Alternativen wie Fontsquirrel oder kostenpflichtige Angebote zurückgreifen, bspw. von Typekit aus dem Hause Adobe, von fonts.com aus dem Hause Monotype oder von MyFonts.

In jedem Fall sollte man nicht übersehen, dass zumeist verschiedene Schriftschnitte benötigt werden, also unterschiedliche Schriftstärken (mager, normal, halbfett, fett), Schriftlagen (normal, kursiv) oder auch Schriftbreiten (schmal, normal, weit). Daher muss man bei kostenlosen Anbietern wie Google Fonts das Einbinden aller benötigten Schriftschnitte bedenken und vor allem bei kostenpflichtigen Anbietern prüfen, ob der angegebene Preis auch alle erwünschten oder erforderlichen Schriftschnitte umfasst.

"Webfonts und Iconfonts" vollständig lesen

Frameworks für HTML, CSS und Javascript

Vergangene Woche hatte ich einen Überblick über die vielfältigen Möglichkeiten gegeben, die in HTML 5 und CSS 3.0 enthalten sind - ohne dabei Javascript überhaupt anzusprechen. Heute möchte ich zeigen, wie man sich diese neuen Möglichkeiten zunutze machen kann, ohne zuvor monatelang Bücher zu studieren und auszuprobieren. :-) Kluge Leute haben nämlich bereits Frameworks zusammengestellt, eine Art Baukasten, aus dem man sich bedienen kann.

Im einfachsten Fall enthält dieser Baukasten CSS und Javascript, um Webseiten einigermaßen elegant und responsive zu gestalten, einschließlich der notwendigen Tricks für die Kompatibilität zu älteren Browsern. Meistens gehört dazu dann auch irgendeine Art von Grid, also einer Aufteilung, um mehrspaltige Seiten zu gestalten, deren Aufbau sich auf kleineren Bildschirmen anpasst - bspw. indem Spalten nicht nebeneinander, sondern übereinander dargestellt werden.

Umfangreichere Frameworks enthalten zusätzlich CSS-Formatierungen für Standard-Elemente wie eine Navigationsleiste, Tabellen mit wechselndem Hintergrund pro Zeile oder auch andere Gestaltungselemente.

Dazu kommen dann noch Templates oder Themes, die im einfachsten Fall Beispiele oder besser Vorlagen dafür darstellen, wie der Baukasten, das Framework, zur Anwendung gebracht werden kann. Oft enthalten sie auch weitere CSS-Definitionen über den Grundbestand des Frameworks hinaus.

Boilerplates und CSS-Frameworks

Ein “einfaches” Framework - hinter dem dennoch viel Arbeit und Erfahrung steht - ist bspw. HTML 5 Boilerplate. Es enthält - wie üblich - ein normalize.css, um die in Browsern enthaltenen Standard-CSS-Definitionen zu vereinheitlichen, Basis-Formatierungen und eine schlanke HTML-Beispielseite, dazu Modernizr, eine Javascript-Bibliothek, die austestet, welche Funktionalität der Browser unterstützt, und jQuery, quasi die Javascript-Standard-Bibliothek. Initializr ergänzt HTML 5 Boilerplate um einen Template-Generator, der eine Vorlage für ein neues Web-Projekt in drei verschiedenen Varianten erzeugen kann.

Bereits etwas umfangreicher (und aus deutschen Landen) kommt dann das “altehrwürdige” - 2005 begonnene - YAML-CSS-Framework in Version 4 daher. Sein Schwerpunkt liegt auf der Gestaltung flexibler Layouts (Stichwort responsive design), die es umfangreich unterstützt; dazu kommen - natürlich neben einer abgestimmten Typographie - Formular-Elemente und Buttons sowie Navigationselemente. Die CSS-Stylesheets werden dabei dynamisch via SASS erzeugt; YAML enthält aber auch eine fertig kompilierte, “statische” Version, die unmittelbar eingesetzt werden kann, ohne dass SASS als CSS-Präprozessor zum Einsatz gebracht werden müsste.

Ein anderer Ansatz, ein weiteres Framework ist Sassaparilla, ein massiv auf SASS und Compass aufsetzendes System, das allerdings an Dokumentation - soweit ich sehe - eher sparsam ist.

Große Frontend-Frameworks

Vertreter der Gattung sehr umfangreicher Baukästen sind bspw. (Twitter) Bootstrap, das mit Version 3 in sein fünftes Jahr geht, und das nur ein Jahr jüngere ZURB Foundation (aktuell in Version 5). Beide bieten eine weit über die “Grundzutaten” hinausgehende Auswahl an fertigen Bausteinen für Navigationselemente, Menüs mit verschiedenen Buttons und Dropdowns, farbige Hinweise und Einblendungen (sog. Modals), Fortschrittsbalken und so weiter, und so fort.

Ausgangspunkt ist natürlich auch hier ein flexibles Grid, mit dem die Webseiten responsive gestaltet werden können. Zudem ist aber auch eine reiche Auswahl an CSS-Formatierungen und Javascript enthalten, um eine Vielzahl von Gestaltungselementen einbauen zu können, die in der umfangreichen Dokumentation anhand von Beispielen dargestellt werden. Alle diese Beispiele können sofort per copy & paste in das eigene Webprojekt übernommen und angepasst werden-

Die Verwendung von CSS-Compilern wie LESS oder SASS ist nicht zwingend, weil auch Bootstrap eine fertig kompilierte CSS-Datei enthält; sie bietet aber noch umfangreichere Möglichkeiten, durch Änderungen an zentralen Variablen das ganze “look and feel” einheitlich für die gesamte Website anzupassen. Für den, der diese Compiler nicht verwenden kann oder will, bietet Bootstrap überdies einen Mittelweg: mittels Customizing kann mit allen vorhandenen Variablen experimentiert und dann eine entsprechend angepasste, statische CSS-Version erzeugt und heruntergeladen werden.

"Frameworks für HTML, CSS und Javascript" vollständig lesen

HTML 5 und CSS 3.0

Aktuelle Browser setzen zunehmend die neuen Möglichkeiten von HTML 5 und CSS 3.0 um, die ich in meinem Artikel “Webdesign anno 2015” bereits angerissen hatte. Doch was ist daran alles neu?

HTML 5

Der aktuelle HTML-Standard macht endgültig Schluss mit den schon lange verpönten “Design”-Elementen zur optischen Gestaltung und erweitert HTML um neue Möglichkeiten, insbesondere im Zusammenhang mit Javascript.

  • Rein optische Gestaltungselemente wie Frames oder <font>, <bgcolor>, <align> oder <big> gibt es nicht mehr. Ein standardkonformes HTML-5-Dokument darf solche Elemente nicht enthalten. HTML dient der semantischen Auszeichnung von Elementen, also der Beschreibung, was ein Element ist und nicht wie es aussehen soll.

  • Bestehende, bisher rein gestalterische Elemente wurden neu definiert und mit einer semantischen Bedeutung versehen.
    So ist <big> für die Kennzeichnung einer größeren Schrift entfallen, <small> aber geblieben; nur bezeichnet es keine kleinere Schriftgröße mehr, sondern quasi das “Kleingedruckte”, also weniger wichtige Ergänzungen. Auch <b> und <i>, früher für Fett- und Kursivschrift zuständig, bleiben erhalten. Sie bezeichnen jetzt optisch hervorgehobenen Text, der aber keine besondere Wichtigkeit hat; dafür gibt es die bestehenden semantischen Elemente <strong> und <em>.
    Soll also ein Begriff als wichtig oder bedeutsam hervorgehoben werden, greift man zu <em> oder <strong>. Sollen bspw. Marken- oder Personennamen, Fachbegriffe o.ä. gekennzeichnet werden, ohne dass damit aber eine besondere Betonung verbunden ist, sind <b> und <i> angebracht, auch wenn möglicherweise beide Varianten optisch identisch dargestellt werden. “HTML 5 ist ein neuer Standard” wäre mithin ein Fall für <i>, “Sie sollten sich damit auf jeden Fall auseinandersetzen!” wäre ein Fall für <em>.

  • Es gibt eine Reihe neuer Elemente wie bspw. <time>, vor allem aber neue Gliederungselemente.
    Wo bisher allüberall <div> verwendet wurde, um den Seiteninhalt zu strukturieren, treten nun Elemente wie <header>, <footer>, <nav> oder <aside> auf, die wie <div> verwendet werden können, aber eine zusätzliche semantische Bedeutung haben: als Kopf- oder Fußzeile, als Navigation oder zusätzliche Erläuterung. Der Hauptteil wird durch <section> und <article> gegliedert.

  • Hinzu kommen neue, einheitliche Attribute, die bspw. in Form von data-* auch die einfachere Anbindung von Javascript ermöglichen oder wie role oder aria-* eine möglichst barrierefreie Nutzung ermöglichen. Besonders gilt das für Formulare, bei denen sich ganz neue Möglichkeiten der Eingabevalidierung direkt durch den Browser (ohne Javascript) ergeben, weil ein Datumsfeld eben nur valide Daten oder ein E-Mail-Feld nur syntaktisch korrekte E-Mail-Adressen akzeptieren muss.

  • Außerdem kommen neue Möglichkeiten der Einbindung von Objekten, bspw. via <svg> oder <math>, hinzu, sowie vielfältige APIs für Javascript (Stichwort <canvas>, File-API oder Geolocation-API). Mit diesen Features habe ich mich aber noch nicht näher beschäftigt.

CSS 3.0

HTML wird ergänzt durch CSS. HMTL definiert, was ein Element ist: eine Überschrift, ein Absatz, eine Liste, eine Tabelle. CSS definiert, wie etwas aussehen soll: groß, klein, fettgedruckt, bunt, …

Die wichtigste Neuerung in CSS 3.0 sind sicherlich die Media Queries, die es ermöglichen, je nach Größe des Bildschirmfensters unterschiedliche Formatierungen anzuwenden. Wird die Webseite auf einem Smartphone aufgerufen, werden die Stilangaben für kleine Bildschirme verwendet; schaut man sie sich auf einem großen Bildschirm eines Desktoprechners an, kann sie ganz anders aussehen. Und verkleinert man auf dem Desktoprechner das Browserfenster, passt sich die Webseite wieder den neuen Dimensionen an.

Das ermöglicht responsive design - eine Website, die auf allen Geräten möglichst gleichermaßen gut aussieht. Auf dem Smartphone versteckt sich die Navigation hinter einem Button, die Inhaltsübersicht der aktuellen Seite wird ausgeblendet, die Seitenspalte mit ergänzenden Hinweisen steht vor oder nach dem Haupttext. Auf dem Tablet erscheint die Navigation; auf dem Desktop kommt auch die Seitenspalte zu ihrem Recht und wandert an die Seite, und die Inhaltsübersicht erscheint.

Selektoren und Pseudoklassen ermöglichen es, ganz zielgenau nur bestimmte Elemente zu formatieren: nicht jeden Absatz, sondern nur den Absatz direkt hinter einer Überschrift, oder nicht jedes Element einer Liste, sondern nur das erste oder letzte. Pseudoelemente ermöglichen es, vor oder hinter Elementen “etwas” einzufügen oder den ersten Buchstaben oder die erste Zeile gesondert zu behandeln. Beispiele dafür habe ich bereits im Beitrag “Kennzeichnung von Links in HTML-Dokumenten” gebracht.

Listen können in vielfältiger Weise formatiert werden; in Verbindung mit Pseudoelementen und Countern können sie bspw. (wie auch Überschriften) automatisch durchnummeriert werden.

Ganz neue Gestaltungsmöglichkeiten ermöglichen Farbverläufe und Schatten sowie Animationen mit transform und transition - ganz ohne Javascript, nur in CSS.

Die Möglichkeiten sind geradezu grenzenlos. :-)

Literaturempfehlungen

Neben einer Unzahl von Quellen im Web gibt es zu diesem Themenkomplex auch Bücher auf gedrucktem Papier, bspw.

  • HTML5 & CSS3 Webentwicklung mit den Standards von morgen von Brian P Hogan
    O’Reilly, 1. Auflage 2011, 272 Seiten, ISBN 978-3-89721-316-6
    Eine kurze, aber umfassende Vorstellung der Features und Veränderungen für den schnellen Einstieg in die Praxis.

  • HTML5 Webseiten innovativ und zukunftssicher von Peter Kröner
    Open Source Press, 2. Auflage 2011, 592 Seiten, ISBN 978-3-941841-34-5
    Das Buch beschreibt (nur) HTML 5, seine Anwendung, Umsetzung und Neuerungen in größerer Breite.

  • Flexible Boxes Eine Einführung in moderne Websites von Peter Müller
    Galileo Press, 1. Auflage 2013, 448 Seiten, ISBN 978-3-8362-2519-9
    In diesem Buch stehen nicht HTML, CSS oder seine Möglichkeiten, sondern die Gestaltung moderner Webseiten im Mittelpunkt: ausgehend von der semantischen Struktur des Inhalts (HTML) über dessen Gestaltung (CSS) bis zum Zusammenspiel dieser einzelnen Elemente, orientiert an praktischen Beispielen.

Ich wünsche fröhliches Gestalten und freue mich über Kommentare, Ergänzungen und eigene Erfahrungen!

Dieser Beitrag gehört zur Reihe “Webdesign anno 2015”.

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

tweetbackcheck