Kunde: Metallbau | Südbaden, Deutschland
Start: Februar, 2016 | Status: abgeschlossen

Eine bestehende Webseite sollte so umgerüstet werden, dass sich die Web-Präsenz der Firma auf allen internet-fähigen Geräten gleichermassen darstellt (Responsive Design). Die Anforderungen des Kunden waren:

• Investitionsschutz - keine Änderung an der Oberfläche
• Kein Werkzeug (wie z.B. Joomla) zur effizienten Entwicklung und Inhaltsverwaltung erforderlich
• Umbau der eingesetzten Bildergalerie (FancyBox) auf Responsive Design
• Die Bildergalerie soll bei Geräten mit Touch-Bildschirm auch durch "Wischen", "Swipe" bedient werden können

Die Webseite ist in reinem Html (Standard Programmiersprache im Internet) erstellt und nutzt ausserdem zwei weitere Internet Technologien, PHP und JavaScript.

PHP und JavaScript sind weitere, sehr oft verwendete Programmiersprachen. Sie werden eingesetzt, um eine Webseite mit besonderen Funktionen auszustatten.
Eine Photogalerie, zum Beispiel, muss nicht unbedingt vom Web Entwickler selbst programmiert werden. Auf dem Internet gibt es viele, teilweise sogar kostenlose, fertige Programme welche diese nützliche Funktion zur Verfügung stellen.
FancyBox ist ein solches Programm, in der JavaScript Sprache geschrieben, zur komfortablen Darstellung von Bildern.

Auf Geräten mit Touch-Bildschirmen (zum Beispiel Smartphones oder das Ipad) sind es Internet-Nutzer gewohnt, mit Finger-Gesten wie "Wischen" oder "swipe"
Bilder oder Webseiten blättern zu können.

Ältere Webseiten nutzen oft Programme welche die neuen Web-Technologien wie Finger-Gesten noch nicht beherrschen. Ebenso finden Sie viele Webseiten, welche ihre Darstellung nicht an die unterschiedlichen Internet Geräte anpassen können.

Besitzer einer solchen Webseite stehen vor der Wahl eine "veraltete" Internet-Präsenz zu akzeptieren oder in eine verbesserte Webseite zu investieren.

Es ist bekannt, dass immer mehr Nutzer über Smartphone und Tablets auf das Internet zugreifen. Deshalb ist es notwendig, die eigene Internet-Seite auf solchen Geräten zu überprüfen.
Der Umbau dieser Webseite wurde unter Zuhilfenahme eines Responsive Web Templates - zParalaxy - vorgenommen. Dieses Template stellt auch ein sogenanntes responsive grid zur Verfügung (Zerogrid). Ein Responsive Web Template beschleunigt die Entwicklung von Responsive Design Webseiten indem es grundlegende Gestaltungshilfen, wie z.B. die Aufteilung der Webseite in Zeilen und Spalten, bereitstellt. Bei vielen Webseiten wurde diese Aufteilung mit festen Tabellen erzeugt - mit einem signifikanten Nachteil: feste Tabellen passen sich nicht an die unterschiedlichen Grössen von internetfähigen Anzeigegeräten an. Bilder, zum Beispiel, passen sich nicht in der Grösse an wenn sie in einer Tabelle ausgegeben werden.

Verändern Sie die Grösse Ihres Browser-Fensters und sehen Sie selbst, wie sich der Text und die Bilder auf der Webseite der Grösse des Fensters anpassen.
Idealerweise geschieht diese Anpassung so, dass der Inhalt weder am linken, noch am rechten Rand der Webseite abgeschnitten werden.

Vielleicht ist Ihnen aufgefallen, dass Sie auf vielen bekannten Webseiten nach rechts "scrollen" müssen um den ganzen Inhalt lesen zu können.
D.h. Sie benutzen die horizontale Bildlaufleiste. Auf Smartphones ist dies nicht akzeptabel. Hier sind Sie es gewohnt immer einfach nach unten zu blättern ( zu "wischen" ) um bequem alle Inhalte lesen zu können.