OnBuSys - Responsives Design (beta) PDF Drucken E-Mail
Geschrieben von: Administrator   
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'.
Damit die Elemente von OnBuSys in solchen responsiven Websites verwendet werden können, wurden diese so angepasst, dass Inhalte, die normalerweise zu groß für einen kleinen Bildschirm sind, automatisch auf diesen angepasst werden. Dies funktioniert sowohl im Landscape- als auch im Portrait-Modus.
Verwendet wurde hierzu u.a. das viewport-meta-tag auf folgende Weise:
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi">.


Im ersten Bild wird das Buchungsformular im Landscape-Modus angezeigt.
Der zugehörige URL lautet: https://badduew.de/ssl/OBS/Buchung.php?id=domizil@Buttje

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, im Landscape-Modus bleibt am rechten Rand ein kleiner freier Bereich, da die Breite des Buchungsformulars kleiner als die Bildschirmbreite ist. Dieser freie Bereich kann durch Einzoomen beseitigt werden.

 



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 mit dem URL:
https://badduew.de/ssl/OBS/belegung.php?id=domizil



Jahresbelegung

Jahres-Belegungsübersicht für das Objekt 'Buttje' mit dem URL:
https://badduew.de/ssl/OBS/monTAB.php?id=domizil@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.

Der zugehörige URL lautet:
https://badduew.de/ssl/OBS/miniTAB.php?id=domizil@Buttje&groesse=30&x=2&y=2

Wenn Sie diesen URL auf Ihren Geräten testen, können Sie durch Ändern der Werte für die Parameter groesse, x und y deren Einfluss auf die Darstellung feststellen.

 


Mit den beiden folgende Links können Sie zwei einfache html-Seiten öffnen, bei denen lediglich das Prinzip verdeutlicht werden soll, inhaltlich machen sie keinen allzugroßen Sinn.
Beobachten Sie insbesondere das Verhalten der Seiten, wenn Sie sie auf dem PC öffnen und die Bildschirmbreite verkleinern.

Buchungsformular im iframe

Minibelegungsübersicht im iframe

 



Nachfolgenden sehen Sie eine Zusammenstellung der hier 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://badduew.de/ssl/OBS/Buchung.php?id=domizil@Buttje (Buchungsformular)
https://badduew.de/ssl/OBS/belegung.php?id=domizil (Belegungsübersicht für alle Objekte)
https://badduew.de/ssl/OBS/monTAB.php?id=domizil@Buttje (Jahresbelegungsübersichten für das Objekt Buttje)
https://badduew.de/ssl/OBS/miniTAB.php?id=domizil@Buttje&groesse=30&x=2&y=2 (Minibelegungsübersicht für das Objekt Buttje)
https://badduew.de/ssl/OBS/Demos/resp_buchung.html (html-Buchung)
https://badduew.de/ssl/OBS/Demos/resp_belegung.html (html-Minibelegungsübersicht)

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

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


 

Aktualisiert am Montag, 06. März 2017 11:39