Blue Flower

Responsives Design

Da immer mehr Besucher von Websites Smartphones und Tablets verwenden, müssen die Websites flexibel so dargestellt werden, dass die Benutzerfreundlichkeit auf allen Endgeräten, wie PCs, Tablets und Smartphones, gewährleistet ist. Dies erreicht man mithilfe des 'Responsiven Webdesigns'.
Das responsive Webdesign hat da seine Grenzen, wo breite Objekte, die aus verschiedenen Gründen nicht in eine andere Form gebracht werden können, auf einem kleinen Display dargestellt werden sollen. Dazu gehören beispielsweise Tabellen mit vielen Spalten. In OnBuSys sind das die Belegungsübersichten, die eine Objektspalte und 31 Tagesspalten haben. Diese Belegungsübersichten haben eine Breite zwischen 800px und 900px und eine Darstellung in einem Display mit 320px x 480px führt zwangsläufig dazu, dass die Belegungsübersichten stark verkleinert werden und nur noch schwer lesbar sind. Dieses Problem kann man dadurch umgehen, indem man die sog. Minikalender verwendet.

Zunächst wird hier gezeigt, dass man die einzelnen Elemente direkt in einem kleinen Display darstellen kann, anschließend wird erläutert, wie diese Elemente von OnBuSys in eine responsives Template von Joomla eingebunden werden können. Das Ergebnis können Sie sehen, wenn Sie diese Demosite mit einem mobilen Gerät betrachten.

Um Elemente, deren Breite größer ist als die physikalische Breite des Displays ist (beispielsweise beim iPhone 320px bzw. 480px), darzustellen, gibt es zwei Möglichkeiten:

  1. man verwendet responsive Elemente, die sich automatisch der technischen Breite anpassen oder
  2. man vergrößert die Breite des Displays für Elemente, die nicht responsive sind.


Da die Elemente von OnBuSys mithilfe von Tabellen erstellt wurden und damit nicht responsive sind, kommt hier nur die zweite Möglichkeit infrage.
Die Vergrößerung der Breite des Displays wird softwaremäßig mithilfe des Metatags 'viewport' erreicht.
Bei Verwendung von z.B. <meta name ="viewport" content="width=800"> verhält sich das Display so, als hätte es sowohl im Landscape- als auch im Portrait-Modus die Breite 800px.

Bei den Buchungskalendern wurde verwendet:
<meta name="viewport" content="width=615">
und für body wurde die CSS-Eigenschaft 'max-width' mit dem Wert '615px' gewählt:
body {max-width: 615px;}
Die anderen Elementen wurden entsprechend angepasst.


Im ersten Bild wird das Buchungsformular im Landscape-Modus angezeigt.


Buchung

Buchung

Wenn man das Smartphone um 90° dreht, erhält man das neben dargestellte gleiche Buchungsformular im Portrait-Modus.

In beiden Fällen wird das Buchungsformular vollständig dargestellt.

 

Die nachfolgenden zwei Bilder zeigen zwei Belegungsübersichten, bei denen die Tage der Monate in Reihen angezeigt werden. Für Geräte mit sehr kleinen Bildschirmabmessungen sind diese Belegungsübersichten nur bedingt geeignet.
Auch hier kann man die Belegungsübersichten im Portrait-Modus vollständig darstellen, was aber wenig Sinn macht.


Belegung

Belegungsübersicht für alle Objekte:



Jahresbelegung

Jahres-Belegungsübersicht für das Objekt 'Buttje':




Die folgenden zwei Bilder zeigen eine für kleine Bildschirme besser geeignete Belegungsübersicht mithilfe von sogenannten Minikalendern.

Buchung

Buchung

Sowohl im Landscape- als auch im Portrait-Modus werden 2x2 Übersichten angezeigt (2 Reihen und 2 Spalten). Im Landscape-Modus erreicht man durch Scrollen die beiden restlichen Kalender.

Im Portrait-Modus werden die vier Kalender vollständig dargestellt.

 

Hier eine Zusammenstellung der verwendeten URLs.

Diese können Sie sich kopieren und sich beispielsweise in einer E-Mail zusenden. Dann haben Sie eine einfache Möglichkeit, die URLs auf Ihren Geräten zu testen.

https://onbusys.de/101/OBS/Buchung.php?id=domizil@Buttje (Buchungsformular)
https://onbusys.de/101/OBS/belegung.php?id=domizil (Belegungsübersicht für alle Objekte)
https://onbusys.de/101/OBS/monTAB.php?id=domizil@Buttje (Jahresbelegungsübersichten für das Objekt Buttje)
https://onbusys.de/101/OBS/miniTAB.php?id=domizil@Buttje&groesse=30&x=2&y=2 (Minibelegungsübersicht für das Objekt Buttje)
https://onbusys.de/101/OBS/Demos/resp_buchung.html (html-Buchung)
https://onbusys.de/101/OBS/Demos/resp_belegung.html (html-Minibelegungsübersicht)

Mit den entsprechenden Skripten Ihrer aktuellen OnBuSys-Installation funktionieren diese Darstellungen u.U. noch nicht.

Hier können Sie sich die geänderten Skripte herunterladen (Stand: 11.05.2018) und installieren.
Beachten Sie hierzu unbedingt die im zip-Archiv enthaltene Datei 'hinweise.txt'.


Nachfolgend wird Schritt für Schritt erläutert, wie die Elemente von OnBuSys in diese Demo eingefügt wurden.

Diese Demo wurde erstellt mit 'Joomla 3.9' und dem darin enthaltenen responsiven Template 'Protostar'.

Zu jedem Menüpunkt gibt es hier eine eindeutige ID für die zugehörige Seite, beispielsweise:

ID  125: Integration Widgets
ID  127:       "     Belegungsübersichten
ID  128:       "     Buchungsformulare

In der Datei 'index.php' des Templates hat die PHP-Variable '$itemid' den Wert 'ID'.

In der Datei 'index.php' wurde folgende Änderung vorgenommen:

Vor der Änderung:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <jdoc:include type="head" />
</head>

Nach der Änderung:

<head>
    <?php
      switch ($itemid) {
        case 125: echo '<meta name="viewport" content="width=990" />'; break;
        case 127: echo '<meta name="viewport" content="width=990" />'; break;
        case 128: echo '<meta name="viewport" content="width=690" />'; break;
        default: echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />';
      }
    ?>
    <jdoc:include type="head" />
</head>

Damit wird für die drei unten stehenden Seiten jeweils die Breite des Viewports an die Breite des Elements mit der größten Breite angepasst. Für die anderen Seiten wird mit 'width=device-width' als Breite des Viewports die physikalische Breite des Endgerätes eingestellt. Bei einem anderen Aufbau Ihrer Site müssen Sie entsprechend vorgehen.

Mit mobilen Endgeräten können Sie sich das Ergebnis bei folgenden Menüpunkten ansehen:

Integration / Widgets

Integration / Belegungsübersichten

Integration / Buchungskalender