Willkommen in der

Pattern Library (PaLi) von OTTO

Willkommen in der

Pattern Library (PaLi) von OTTO

Die Pattern Library ist die zentrale, vollständige Dokumentation aller globalen und lokalen Pattern, mit dem Ziel

  • eine strukturierte Übersicht über alle Pattern zu geben,
  • Einsatzmöglichkeiten und -grenzen von Pattern aufzuzeigen,
  • Hilfestellung bei der Verwendung zu geben.

Pattern-Changelog

03.08.2017

  • neue Icons im Icon-Font

05.07.2017

14.06.2017

  • Neue Option für das Eingabefeld-Pattern zur Anzeige eines X zum Leeren des Feldes.

12.06.2017

  • Neue Tooltip-Variante "als Hinweiskommunikation"

12.06.2017

  • Neue Tooltip-Variante "mit Klick auch auf Non-Touch-Devices"

30.05.2017

  • Überarbeitung des Symbol-Buttons 5. Ordnung.

18.05.2017

  • Neue Icons in der Iconfont für Löschen () und Ausschneiden (c).

28.07.2016

  • Neue Icons in der Iconfont für das Bewerten von Lieferungen und Zahlungen

25.05.2016

  • Entfernen der deprecated Pattern p_copy350, p_copy250, p_copy225, p_copy200, p_copy175, p_copy150, p_copy125, p_copy50, p_expander--text und js_hasTooltip

12.05.2016

  • Entfernen aller alter, nicht-responsiver Pattern ("c_")

02.05.2016

  • Überarbeitung des Layer-Pattern: Keine absolute Positionierung und kein Scrolling mehr innerhalb des Layers

14.04.2016

  • Änderung der Loader-Position innerhalb des DropButton-Patterns

22.03.2016

  • Neues Icon in der Iconfont für Editieren

21.03.2016

  • Neues Pattern für Notizen

09.03.2016

  • Austausch der Icons in der Iconfont für Sharing, Preisalarm und Testurteil

02.03.2016

  • Neue Größenvariante für das Kundenbewertungs-Pattern: rating200
  • Neue Variante für das Tabellen-Pattern: table100 ohne responsive Umsortierung
  • Neue Option für das Tabellen-Pattern, mit der eine horizontale "Trennlinie" unter einer Zeile angezeigt werden kann

03.02.2016

  • Neue Icons in der Iconfont für Sharing, Preisalarm und Testurteil
  • Änderung des z-index des DropButton-Inhalts

09.12.2015

  • Entfernen des Nach-oben Button aus der PaLi
  • Neues Icon "Sprechblase" in der Iconfont

27.11.2015

  • Begrenzung der Maximalbreite des Dropbutton-Inhalts im Fehlerfall auf 260px

20.11.2015

  • Neues Tooltip-Attribut "data-tooltip-ref-clone", mit dem in der ID-Referenz-Variante das Referenzelement bei Aufruf des Tooltip nicht gelöscht wird

17.11.2015

  • Änderung der Schriftfarbe von deaktivierten Eingabfeldern

Was ist ein Pattern?

Pattern sind wiederkehrende Bausteine und Komponenten im Frontend, die zentral mit dem Ziel bereitgestellt werden

  • Konsistenz in Visualität,
  • Konsistenz in Funktionalität und
  • minimale Code-Komplexität

des Frontends von otto.de (und sekundär auch von Drittanwendungen) zu gewährleisten.

Dabei sollen vor allem auch die strategischen Fähigkeiten von otto.de bestmöglich unterstützt werden, insbesondere

  • die Umsetzungsgeschwindigkeit durch die Wiederverwendbarkeit von Bausteinen,
  • die Flexibilität und Agilität durch zentrale Pflegbarkeit von Änderungen,
  • die Lade-Performance und damit maßgeblich auch die Multi-Device-Fähigkeit durch weniger komplexen Frontend-Code sowie
  • die Plattform- und Produktqualität und insbesondere die Usability durch visuelle und funktionale Konsistenz.

Worin unterscheiden sich globale und lokale Pattern?

Die Bereitstellung eines Pattern kann auf unterschiedlichen Ebenen erfolgen:

  • lokale Pattern werden in einem Funktionalen Team entwickelt und bereitgestellt
  • globale Pattern werden vom Team Assets entwickelt und für alle Teams bereitgestellt

Wofür stehen die Pattern-Nummern?

Jedes Pattern besitzt einen numerischen Suffix, das für die jeweilige Größen- bzw. Intensitätsvariante steht (z.B. "button100"). "100" ist dabei stets die Standardgröße. Eine höhere Zahl steht dann für eine größere, eine niedrigere für eine kleinere Variante. Der genaue Wert steht dabei aber nicht im direkten Zusammenhang zur Größe. So ist z.B der "button200" nicht zwangsläufig doppelt so hoch wie der "button100".

Der Vorteil dieser Skala im Vergleich zu anderen Skalen wie beispielsweise den T- Shirt-Größen (S, M, L, XL) ist, dass sich immer problemlos Zwischenstufen hinzufügen lassen. So kann z.B zwischen den Größen 50 und 100 die Größe 75 eingeführt werden.

Was bedeuten die Ordnungen der Pattern?

Manche Pattern besitzen neben der Nummer einen weiteren Suffix, der die Ordnung einer Patternvariante wiedergibt. Hierbei wird stets von der 1. Ordnung (1st) aus abwärts gezählt (2nd, 3rd, 4th, ...). Diese Ordnungszahlen geben die visuelle Rangfolge von Pattern-Varianten innerhalb eines Pattern wieder. Die Variante mit der höchsten Ordnungszahl ist die visuell prägnanteste, die niedrigerer Ordnung ordnen sich entsprechend unter.

Hinweis für externe Dienstleister

Um ein Pattern zu verwenden, müssen unbedingt alle entsprechenden Inhalte kopiert und nicht direkt auf otto.de referenziert werden. Das betrifft insbesondere die CSS- und JavaScript-Bibliotheken sowie die Webfonts, da wir nicht dafür garantieren, dass die angegebenen Sourcen dauerhaft unter den aktuellen URLs bestehen bleiben. Bei Bedarf können einzelne Dateien aus dem Shop heruntergeladen und selbst gehostet werden.

Bei der Verwendung einzelner Pattern reicht aber oft das Kopieren der entsprechenden Codebestandteile direkt aus der PaLi. Das bedeutet:

  • Ein Pattern aussuchen und den blauen "Code"-Button anklicken
  • Den HTML-Code an die entsprechende Stelle der externen Seite kopieren
  • Das CSS und ggf. das JavaScript aus den Tabs in die CSS-/JavaScript-Files der externen Seite kopieren

Das responsive Grid-System

Das Grid- und Breakpoint-System von otto.de besteht aus den folgenden Werten (alle Pixelangaben verstehen sich als CSS-Pixel und nicht als Device-Pixel):

  • Minimum von 320px: Unterhalb dieser Grenze muss die Seite nicht mehr funktionieren
  • Maximum von 1152px: Oberhalb von dieser Grenze hört das Grid auf, sich proportional anzupassen. Stattdessen wird links und rechts der Rand vergrößert
  • Major Breakpoint bei 768px: An diesem Punkt ändert sich das Grid von 6 Spalten auf 12 Spalten, ebenso können grundlegendere Änderungen am Verhalten der Seite vorgenommen werden
  • Zwei Minor Breakpoints bei 448px und 992px: Das Grid bleibt hier unverändert, aber das Layout kann an dieser Stelle angepasst werden (z.B. Wechsel von zweispaltig auf dreispaltig)

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!