Georgien Nachrichten mobil

Diese Referenzliste bezieht sich auf eine Webseite, von der es zwei Versionen gibt. Diese Version ist mit Hilfe des Twitter Bootstrap Frameworks für mobile Endgeräte optimiert. Die Umschaltung zwischen beiden Versionen erfolgt mit Hilfe eines Links auf eine Subdomain.

Download Referenzliste als PDF

Details zur mobilen Version der Georgien Nachrichten

Startseite mobile Version

Georgien Nachrichten Startseite mobile Version ✔ Responsives Layout mit Twitter Bootstrap ✔ objektorientierte Programmierung in PHP ✔ mySQL Datenbank

Seite wird mit PHP aus mySQL Datenbank generiert. Aufbau des Quelltextes nach den Standards HTML5 und CSS3. Das Grundgerüst mit Bootstrap basiert auf dem Bootstrap Framework. Die Inhalte sind in flexibel skalierbaren Boxen angeordnet. Das gesamte Design ist vom W3C validiert. 

Startseite für Endgeräte mit geringer Auflösung

Georgien Nachrichten Startseite geringe Auflösung ✔ Responsives Layout mit Twitter Bootstrap ✔ objektorientierte Programmierung in PHP ✔ mySQL Datenbank

Die Webseite ist für die Anzeige mit mobilen Endgeräten optimiert. Inhalte sind in Grundgerüst eingehangen, das über das Bootstrap Framework aufgebaut ist. Die einzelnen Elemente werden nun entsprechend der Auflösung des Endgerätes nebeneinander und untereinander geschachtelt.

Link zu Umschaltung mobiler Version

Link zu Umschaltung mobiler Version ✔ Georgien Nachrichten ✔ Responsives Layout Bootstrap ✔ objektorientierte Programmierung in PHP ✔ mySQL Datenbank

Bei Bildschirmen mit großer Auflösung wird ein Hinweis auf die statische Version der Webseite angezeigt, die für diese Auflösung optimiert ist. Bei einer Auflösung <700 px wird die Anzeige weggeschaltet. Die Umschaltung erfolgt über das Style Sheet.

Zweispaltige Anzeige einzelner Artikel

Zweispaltige Anzeige einzelner Artikel ✔ Georgien Nachrichten mobile Version ✔ Responsives Layout Bootstrap ✔ PHP ✔ mySQL Datenbank

Bei großer Auflösung ist das Layout zweispaltig. Ein Artikel wird rechts neben der Spalte mit Suche, neuen Nachrichten und Kalender anzeigt. 

Einspaltige Anzeige einzelner Artikel

Einspaltige Anzeige einzelner Artikel ✔ Georgien Nachrichten mobile Version ✔ Responsives Layout Bootstrap ✔ PHP ✔ mySQL Datenbank

Bei kleinerer Auflösung schaltet das Layout auf einspaltige Darstellung um. Ein Artikel wird unterhalb der Spalte neuen Nachrichten anzeigt. Die übrigen Elemente werden weiter unten in der Webseite eingeblendet.

Übersicht in den Rubriken

Übersicht in Rubriken ✔ Georgien Nachrichten mobile Version ✔ Responsives Layout Bootstrap ✔ PHP ✔ mySQL Datenbank

Die Übersicht ist mit Hilfe eines Accordion-Menus gestaffelt. Das Menü ist über ein jQuery-Modul aufgebaut. Breite und Höhe der einzelnen Menüpunkte passen sich flexibel der gewählten Auflösung des Bildschirms an. 

Übersicht in den Rubriken mobile Version

Übersicht in Rubriken mobile Version ✔ Georgien Nachrichten mobile Version ✔ Responsives Layout Bootstrap ✔ PHP ✔ mySQL Datenbank

Bei kleinerer Auflösung schaltet die Darstellung auf einspaltiges Design um. Auch hier passen sich Höhe und Breite der Accordions flexibel der zur Verfügung stehenden Auflösung an.

Tab Menu

Tab Menu mit jQuery ✔ Georgien Nachrichten mobile Version ✔ Responsives Layout Bootstrap ✔ PHP ✔ mySQL Datenbank

Tab Menu am Fuß jeder Seite. Je nach Auflösung werden verschiedene Breiten geschaltet. Unterhalb einer Auflösung von 700 px wird das Menu abgeschaltet.

Linkliste in Darstellung für Desktop PC

Linkliste Darstellung Desktop PC ✔ Georgien Nachrichten mobile Version ✔ Responsives Layout Bootstrap ✔ PHP ✔ mySQL Datenbank

Linkliste in Darstellung für große Auflösung bei Desktop PC, daher zweispaltiges Design. Für beide Darstellungen gilt: Um für alle Breiten eine übersichtliche Darstellung zu erreichen, sind die einzelnen Textelemente und die Länderflaggen untereinander geschachtelt. Aktive Links werden mit der vollfarbigen Version einer Länderflagge dargestellt, inaktive mit ausgegrauter Farbe. 

Linkliste für mobile Endgeräte

Linkliste Darstellung mobile Endgeräte ✔ Georgien Nachrichten mobile Version ✔ Responsives Layout Bootstrap ✔ PHP ✔ mySQL Datenbank

Linkliste in Darstellung für mobile Endgeräte, daher einspaltiges Design. Elemente werden automatisch untereinander geschachtelt. Trennlinien und klare Struktur der Informationen gliedern einzelne Pakete voneinander ab.

Bildergalerie für mobile Endgeräte

Bildergalerie mobile Endgeräte ✔ Georgien Nachrichten mobile Version ✔ Responsives Layout Bootstrap ✔ PHP ✔ mySQL Datenbank

Die Bildergalerie baut auf einem jQuery-Modul auf. Die Anzeige wird entsprechend der verfügbaren Breite des Bildschirms skaliert. 

Thomas Berscheid ⧉ 29.07.2020