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.
Details zur mobilen Version der Georgien Nachrichten
Startseite mobile Version
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
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
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
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
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
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
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 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 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 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
Die Bildergalerie baut auf einem jQuery-Modul auf. Die Anzeige wird entsprechend der verfügbaren Breite des Bildschirms skaliert.