Referenz Frontend: Responsive Webdesign

Transkript

1 Stand: Dezember 2014 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. - Startseite (mobile Version) Stand: Dezember Seite wird mit PHP aus mysql Datenbank generiert HTML5 und CSS3 Aufbau mit <DIV> Grundgerüst mit Bootstrap Framework Inhalte in flexibel skalierbaren Boxen validiert von W3C

2 - Startseite Stand: Dezember 2014 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.

3 - Link auf Seite für Bildschirme mit höherer Auflösung Ansicht für mobile Endgeräte 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 (oberes Bild). Bei einer Auflösung <700 px wird die Anzeige weggeschaltet (unteres Bild). Die Umschaltung erfolgt über das Style Sheet.

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

5 - Einzelansicht eines Artikels 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.

6 - Ü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.

7 - Übersicht in den Rubriken 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.

8 - Tabs 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.

9 - Linkliste Linkliste in Darstellung für große Auflösung Zweispaltiges Design Für beide Darstellungen: 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.

10 - Linkliste Darstellung für geringe Auflösung. Elemente werden automatisch untereinander geschachtelt. Trennlinien und klare Struktur der Informationen gliedern einzelne Pakete voneinander ab.

11 - Bildergalerie Die Bildergalerie baut auf einem jquery-modul auf. Die Anzeige wird entsprechend der verfügbaren Breite des Bildschirms skaliert.

12 - Reiseberichte Reiseberichte sind nach dem update der Webseite im August 2014 bereits mit <DIV>-Struktur aufgebaut. Die Breite der Textelemente mit eingebetteten Bilder und Infokästen ist variabel angelegt. Das Modul ist ins Bootstrap Framework eingehangen. Alle Anpassungen erfolgen automatisch. In allen Reiseberichten ist ein Slider eingebaut, der eine animierte Übersicht der verfügbaren Reiseberichte bringt.

13 - Artikel nach Datum Die Kalenderanzeige erlaubt die Anzeige aller Artikel zu einem Tag. Die Artikel werden untereinander gelistet und passen sich der verfügbaren Breite des Bildschirms an, in ein- und zweispaltiger Darstellung. Die Navigation innerhalb der Seite erfolgt über Links am Kopf der Liste und Backlinks zwischen den Artikeln, die als Buttons formatiert sind.

14 - Style Sheet CSS der Das Style Sheet für die mobile Version der Georgien Nachrichten erforderte nur geringe Anpassungen. Im Vorfeld waren bereits alle Inhaltselemente auf <DIV> umgestellt und entsprechend positioniert worden. Daher waren nur Arbeiten an den Rahmen erforderlich. Hier zeigte sich ein großer Vorteil des CSS3-Standards. Durch einfache Zuordnung ist die Webseite für unterschiedliche Auflösungen optimiert.