28.05.2017

Mobile First BASE: Eine Übersicht

Die Mobile First BASE in Verbindung mit Weblication Version 12 wird von immer mehr Partnern eingesetzt, wovon einige bei Neuprojekten bereits ausschließlich auf die Mobile First setzen. Während es strukturell große Überschneidungen zwischen der Mobile First und der Classic BASE gibt, soll dieser Artikel helfen, einen Überblick über die Neuerungen zu bekommen.

Die Mobile First BASE ist, wie der Name schon sagt, speziell für die mobile Darstellung optimiert. Sie ist also nicht mehr optional, sondern wird primär gestaltet. Neben der mobilen Bedienbarkeit liegt ein Hauptaugenmerk auf der automatischen Generierung von mobil optimierten Bildern, da die bei mobiler Nutzung oft reduzierten Bandbreite noch einige Jahre relevant sein dürfte.

Neuerungen und Optimierungen

XSLT - Allgemein

  • Pro Element, Objekt, Navigation, Liste, globales HTML und Header existiert ein eigenes Template. 
  • Eigene Templates für Strukturelemente im Newsletter.
  • Pflegetags nutzen Dekoratoren, um so Masken über die Oberfläche anpassen zu können.
  • Teils deutlich reduziertes XSLT durch die Nutzung neuer PHP-Framework Funktionen.

CSS - Allgemein

  • Nutzung von Sass für flexiblere und effektivere Gestaltung (auch ohne vorinstallierten Sass-Prozesser)
  • Pro Element, Objekt, Navigation, Liste sowie für globales HTML existiert eine eigene CSS-Datei. 
  • Weitere CSS-Dateien definieren Farben, Schriften, Breakpoints und die Seitenstruktur. 
  • Der CSS-Editor generiert automatisch ein Inhaltsverzeichnis. 
  • Eigene CSS-Pflegemasken sind möglich. 
  • Die IDE unterstützt Icons für die einzelnen CSS-Dateien. 
  • Jede Variante hat genau einen Wurzelslektor.  
  • CSS-Only Angaben können in Standardvarianten vordefiniert sowie in Untervarianten überschrieben werden.
  • Bei CSS-Only Optionen und der Verknüpfung von Untervarianten wird das Schlüsselwort important unterstützt.
  • Varianten lassen sich direkt in der integrierten Variantenverwaltung installieren und kopieren.
  • Automatische Schriftfarben, je nach Hintergrund.
  • SVG-Dateien lassen sich mit angepassten Farben auch ohne einzubetten in CSS einbinden.

JavaScript - Allgemein

  • Mehrere JS-Dateien (design.js, navigation.js, ...)
  • Erweitertes Ereignismodell (z.B.: navpoint_onmouseenter, megadropdown_onopen) 
  • JavaScript wir am Ende der Seite eingebunden, um das Rendern nicht zu blockieren.

Layoutwizard

  • Der Layoutwizard wird im entsprechenden Theme (page.scss) selbst als Maske definiert.

Weblicsverwaltung

  • Ob ein Weblic angepasst wurde, ist in der Weblic-Verwaltung ersichtlich. 
  • Die Installation und das Aktualisieren von Weblics erfolgt deutlich beschleunigt.
  • Eigener Downloadserver nutzbar, um eigene Weblics, Themes, Templates, Skripte und CSS-Only Varianten zur Installation anzubieten.

Seitenstruktur

  • Neben Element- und Objektvarianten kommen nun auch Seitenvarianten zum Einsatz.
  • Pro Seitenvariante lassen sich CSS und Portalstruktur frei definieren.
  • Inhalte sind standardmäßig von einem Inhaltsbereich umschlossen.
  • Auch der Kopfbereich lässt sich um pflegbare Inhalte erweitern.

Objekte

  • Im Objekt-Template lässt sich nun auch die objektspezifische Listendarstellung definieren.
  • Ebenso lässt sich darin auch die Darstellung eingebundener Objekte, wie z.B. Kontakt- oder Standortdaten definieren.

Listen

  • Die Reihenfolge der anzuzeigenden Elementen ist vollständig über CSS definierbar. 
  • HTML-Dekoratoren können über CSS definiert werden, um so z.B. mehrere auszugebende Elemente zu umschließen.
  • Listen lassen sich über das Objekt-Template beliebig erweitern.
  • Umfangreiche Ajax-Funktionen für Blättern und mehr laden durch Klicken und Scrollen.

Navigationen

  • Kein Nachladen der mobilen Navigation per Ajax.
  • Reduzierte HTML-Struktur
  • Der Breakpoint für die mobile Navigation braucht nur noch an einer einzigen Stelle im CSS festgelegt werden und wird dann auch im JavaScript berücksichtigt.

Bilder

  • Automatische Bildbreitenberechnung über Client-Feedback.
  • Einsatz des Picture-Elements für Responsive Images in Elementen, Listen, Bannern und Galerien. 
  • Unterstützung von Art Direction für viewport-abhängige Bildausschnitte.

Überschriften

  • Standardüberschriften und Titel bei Akkordeons lassen sich formatieren.
  • Umbrüche werden im Editor bereits sichtbar.