Individuelles Design umsetzen
Nachdem unsere Basis-Website läuft auf Ihrem Webserver, entwickeln wir daraus Ihre individuelle Website. Wir setzen den interaktiven Entwurf um und legen dabei die Schlüsselseiten an. Wenn in der größten und kleinsten Ansicht alles gut aussieht und funktioniert, optimieren wir auch die mittleren Ansichten Ihres responsiven Webdesigns.
Header, Footer, erste Inhalte
Elemente für Header und Footer
Die Dateien für Logo und Key Visual tauschen wir aus, die Icons für Such- und Kontaktfunktion passen wir an. Die Positionen aller Elemente, auch des Menüs, werden in der individuellen CSS-Datei eingestellt. Hier werden auch alle weiteren Abweichungen des Layouts gegenüber der Basis-Website festgelegt.
Globale Einstellungen
Ihre Farbwerte für Überschriften, Fließtexte und Flächen können wir global einstellen.
Erste Inhalte
Header und Footer einer Seite, einschließlich Menü werden in Templates programmiert. Seitenspezifische Inhalte und Funktionen werden mit Modulen umgesetzt. Die Redakteure können die Module als Modulblöcke im Backend der Artikel einsetzen, Optionen wählen und Content eintragen.
Zunächst passen wir die Module für Überschriften und Text und die zugehörige Formatierung entsprechend Ihrem Entwurf an. So können Sie schon einmal richtige Seiten Ihrer neuen Website sehen: mit Header, Footer und ersten Inhalten.
Die Ausgabebreite von Fließtext im Frontend ...
... kann im Redaxo Backend in den globalen Einstellungen eingestellt werden.
Alle Module anpassen und Schlüsselseiten anlegen
Schrittweise passen wir alle weiteren Module an, die für die Inhalte der Schlüsselseiten benötigt werden. Layouts werden als CSS-Klassen im Modul selbst programmiert, die Eigenschaften der CSS-Klassen werden in der individuellen CSS-Datei Ihrer Website festgelegt.
Im Redaxo-Backend editieren wir alle Schlüsselseiten und prüfen diese zunächst für Bildschirmgrößen über 1400 Pixel.
Responsives Design in 6 Ansichten
Das responsive Design der Basis-Website realisieren wir mit Bootstrap: einem Gerüst aus CSS- und JavaScript-Dateien, welche die Ausgabe von Inhalten an die Bildschirmgröße anpassen.
Von der XXL-Ansicht für große Monitore bis zur XS-Ansicht für kleinere Smartphones: Für Header, Footer und jeden Inhalt wird die gewünschte Ausgabebreite mithilfe spezieller Bootstrap-Klassen definiert.
Zunächst passen wir die Klassen für die größte und die kleinste Ansicht an (XXL ≥ 1400px und XS < 576px), also die Ansichten, die wir bereits im interaktiven Entwurf berücksichtigt haben. Danach optimieren wir die mittleren Ansichten.