Headlines
(coming soon)
Zitate
Altes Zitat-Design (am besten nicht mehr nutzen): <blockquote>
Each pattern describes a problem that occurs over and over again in our environment and the describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.
Neues, grafisch ansprechendes Pullquote auf weiß:
<blockquote class="pullquote"> Hier steht ein Zitat <span class="author">— Hier steht der Autor</span> </blockquote>
Each pattern describes a problem that occurs over and over again in our environment and the describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.
Pullquote auf grau:
<blockquote class="pullquote pullquote-grey">
Each pattern describes a problem that occurs over and over again in our environment and the describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.
Hinweisbox
Jede Variante der Pullquotes kann auch als Hinweisbox benutzt werden, wenn der Inhalt kein Zitat ist. Dazu einfach die Klasse “info” inzufügen:
<blockquote class="pullquote pullquote-grey info">
Ein Design Pattern ist die Lösung zu einem wiederholt auftretendem Problem. Als Element eines digitalen Produkts tritt es in unterschiedlichen Kontexten und/oder mit unterschiedlichen Inhalten auf.
Twitterbare Zitate
Die Wahrscheinlichkeit, dass jemand den Artikel auf Twitter teilt, kann massiv gesteigert werden, wenn man knackige Zitate aus dem Text direkt zum Twittern anbietet. Dies geht über den Tweetthis-Shortcode
“Hier
“Hier
Textmarker
Einzelne Passagen lassen sich farblich hervorheben. Toll!
<span class="marker">
Navigation für Artikelserien
Einfach eine unsortierte Liste erzeugen, die Titel durch fett-setzen von den Untertiteln trennen und die Klassen “seriesNav”, “actual” und ggf. “nolink” vergeben.
<ul class="seriesNav"> <li><a href="index.html"><strong>Titel</strong> Untertitel</a></li> <li class="actual"><a href="index.html"><strong>Titel aktueller Artikel</strong> Untertitel</a></li> <li class="nolink"><strong>Titel noch nicht erschienener Artikel</strong> Untertitel</li> </ul>
- Teil 1: Warum braucht man eine Pattern Library Welche Probleme hat man bla bla
- Teil 2: Auf der Suche nach der perfekten Pattern Library Welche Probleme hat man bla bla
- Teil 3: Patterns identifizieren und strukturieren Welche Probleme hat man bla bla
- Teil 4: Patterns benennen und strukturieren Welche Probleme hat man bla bla
- Teil 5: Die OTTO Pattern Library Welche Probleme hat man bla bla
- Teil 6: Der Blick unter die Haube Welche Technik haucht der OTTO Pattern Library Leben ein
- Teil 7: Organisation und Prinzipien Welche Probleme hat man bla bla
- Teil 8: Beispiele, Ressourcen und Anknüpfungspunkte Alles, was man wissen muss!
- Teil 9: Der Teil den es nicht gibt Erscheint am 13. April 2018
Redaktionshinweis
<p class="redinfo">
Diese Artikelserie ist ursprünglich 2014 unter dem Titel „Bauanleitung für eine Pattern Library“ erschienen und leider nach dem vierten Teil eingeschlafen. Da die Artikel der Serie zu den beliebtesten Beiträgen auf produktbezogen gehören und das Thema immer noch hoch relevant ist, habe ich den 5. Geburtstag der OTTO-Pattern-Library zum Anlass genommen, die Serie grundlegend zu überarbeiten, neu zu publizieren und mit weiteren Artikeln zu ergänzen.