Einleitung

Wenn mozaikoo mit der Standard-Ember-Webapp ausgeliefert wird, wird das Routing auf der Domain von der App gesteuert. Man spricht von einer Single-Page-Application (SPA). Das Routing von Ember sorgt dafür, dass die URLs so ausgegeben werden, wie Sie im Backend festgelegt wurden.

Aufgrund des schnellen Seitenaufbaus und der parallelen Auslieferung mit Fastboot als statische Seiten, haben wir auf sogenannte Page-Transitions beim Wechsel einer URL verzichtet. Diese könnten auch mit Ember nachimplementiert werden, wenn gewünscht, zum Beispiel mit liquidfire. Ist eine vollständige native Anmutung für mobile Apps gewünscht, empfehlen wir, die Frontend-App mit React oder React-Native auszuliefern.

Designprinzipien

Wir verzichten in dieser Anleitung auf spezifische UI/UX-Prinzipien. Die Basis-Templates von mozaikoo sind gemäß den aktuellen W3C-Richtlinien aufgebaut und ergänzen entsprechende Tags mit role-Attributen und alt-Tags für Accessibility.

Besonders für „Mobile-First“-Applikationen sollte aber ein angepassten Deployment gegebenenfalls ohne UIKit in Erwägung gezogen werden. Es empfiehlt sich die Auslieferung als React/Reactnative App oder nach wie vor als Ember-App mit spezialisiertem Design für Android (Material-Design) oder IOS mit Ionic-CSS.

Wichtige Dateien für das Design

Die wichtigsten Verzeichnisse für das Design sind

├── ...           
├── app                         das Hauptverzeichnis der App
│   └── index.html              das Basis-HTML der App
│   └── styles                  LESS-Styles der App
│   │   └── app.less            Basis-LESS-Style der App
│   │   ├── ...                 weitere Style-Dateien
├── public                      Dateien, die unter '/' erreichbar sind
│   │   favicon.png             favicon-Datei
│   │   ...                     weitere Icon-Dateien
│   └── images                  Bilddateien für LESS-Styles und Templates
│   └── fonts                   Schriftdateien für LESS-Styles