Die Aufgabe ist die Gestaltung einer Firmenhomepage für einen Schreinereibetrieb. Der Fokus liegt bei diesem Webauftritt auf der Darstellung von hochauflösenden Bildern verschiedener Kategorien, insbesondere für Mobilgeräte und Tablets. Die Umsetzung erfolgt mit dem leichtgewichtigen CMS Bludit.

Bludit-Logobludit.com

Bludit ist als openSource-Produkt unter der MIT-Lizenz bereitgestellt. Das sogenannte Flat-File-CMS nutzt keine Datenbank im Hintergrund, stattdessen werden alle Daten in .php- und txt-Dateien gespeichert.

Die Dokumentation ist auf englischer und deutscher Sprache verfügbar.

Zahlreiche Plugins erweitern falls gewünscht die Funktionalität.

Layout

Screenshot der Startseite der Schreinerei Messner

Das verwendete Theme stammt nicht direkt von Bludit, sondern ist einer der vielen schönen Vorschläge von HTML5 UP!. Es wurde auf die Belange der Schreinerei angepasst, eignet sich aber von Haus aus ideal für die visuelle Darstellung des Portfolios einer Firma, weil es durch Schlichtheit besticht.

Die Navigation auf der linken Seite enthält Kontaktinformationen, die Navigation zu den verschiedenen Produktkategorien sowie Links zum Impressum und zum Datenschutz. Selbstverständlich passt es sich der aktuellen Bildschirmgröße an und wird zu einem einfachen Text-Button minimiert, falls eine entsprechende die CSS media-query zutrifft.

Das einheitliche Layout wurde mit neuen CSS-Klassen, die sich an den Farben des Firmenlogos orientieren, sowie mit einigen JQuery-Dateien umgesetzt.

Die Anzeige der Bilder einer Kategorie wurde zweispaltig umgesetzt, unabhängig von der Bildschirmgröße des Endgeräts. Eine Popup-Bildergalerie (Bludit-Plugin lightBox) präsentiert zusammengehörige Bilder in voller Auflösung, es lässt sich auf Wunsch zwischen den Bildern wechseln, ohne die Galerieansicht zu verlassen.

Datenschutz

Es werden keine persönlichen Daten auf der Website erhoben - es gibt kein Eingabeformular, nicht einmal ein Suchfeld. Das CMS setzt jedoch je nach Konfiguration ein Session-Cookie, zusätzlich eröffnet ein Hinweis auf die Cookie-Speicherung die Möglichkeit, zukünftige Erweiterungen, z.B. die Verwendung von Google Analytics, zu realisieren. Daher wird auf die Speicherung von Cookies mit einem Popup beim Aufruf der Seite hingewiesen, um die gesetzlichen Anforderungen laut § 15 Abs.3 Telemediengesetz (TMG) zu erfüllen. Dieser besagt, dass es ausreiche, den Nutzer zu unterrichten und auf ein Widerspruchsrecht hinzuweisen.

Ladezeitoptimierung

Die hohe Anzahl der angezeigten Bilder und in erster Linie deren hohe Auflösung stellt bei solchen Projekten immer eine Hürde dar. Die Ladezeit hängt natürlich immer von der Internetqualität das Anwenders ab, große abzurufende Datenmengen beim erstmaligen Besuch der Seite sind also zu verhindern. Die Startseite der Homepage lädt die Bilder mit dem Plugin b-lazy on-demand, d.h. die Platzhalter-Pixel werden erst dann mit den eigentlichen Bildern ersetzt, wenn der Benutzer in den sichtbaren Bereich scrollt. Damit das Plugin seine Arbeit korrekt verrichtet, müssen die Bilder mit einer speziellen CSS-Klasse versehen und das Plugin am Ende des Artikels bzw. der php-Datei geladen werden:

<script>
   new Blazy();
</script>

Die Einstiegsseite index.php des CMS lädt standardmäßig den gesamten Inhalt eines Artikels, zeigt aber je nach Konfiguration (Blog oder Homepage) nur den Titel und das Hauptbild an. Da jede Seite der Homepage jedoch alle Bilder einer Kategorie enthält, ist die Ladezeit der Startseite üblicherweise unerträglich lang. Das Auskommentieren folgender Zeile verhindert das Laden aller Bilder eines Artikels:

<p><?php echo $page->content(false) ?></p>

Entwicklungsdauer

Die gesamte Konzeptionierung und Realisierung des Projekts nahm, auch dank der guten Zusammenarbeit mit dem Kollegen P. Engelmann, ganze drei Tage in Anspruch.

Go-Live war am 04. April 2018.