Version: GSB 7Responsives Design
Darstellung für Desktop, Tablet und Smartphones
Die GSB-SL besitzt ein responsives Layout für die Darstellung auf Desktop, Tablets und Smartphones. Dieses Layout passt sich grundsätzlich der entsprechenden Geräteklasse an. Auf mobilen Geräten ist das Layout beispielsweise einspaltig, die Schaltflächen sind leicht mit dem Finger zu bedienen und die Schriftgröße ist für die Ausgabe am kleinen Bildschirm optimiert. Die Inhalte sind dabei indentisch zur Ausgabe auf Desktopgeräten, sie werden lediglich durch Stylesheets und Umbruchregelen neu gestaltet.
Um gängigen Geräten und Displaygrößen gerecht zu werden, ist die Darstellung der GSB-SL für die folgenden Darstellungsgrößen optimiert.
- Smartphones bis zu einer Bildschirmbreite von einschließlich 600px bilden die Kategorie „small“.
- Tablets mit einer Bildschirmbreite zwischen 600px und einschließlich 1024px bilden die Kategorie „medium“
- Alle Geräte mit einer Bildschirmbreite über 1024px fallen in die Kategorie „large“
Diese Umbruchregeln sowie die Styleangaben für die verschiedenen Größen sind in den Styledokumenten small, medium und large hinterlegt.
ZURB Foundation als Basis
Die responsive Ausgabe nutzt eine angepasste Version des CSS-Framework ZURB Foundation in Version 5.4.2. Die in der folgenden Tabelle aufgeführten und mit "ja" gekennzeichneten Bestandteile dieses Frameworks werden hierbei in der GSB-SL genutzt.
| Modul | Verwendung | Hinweise | |
| Structure | Media Queries | nein | Verwendung von Media Queries mit eigenen Breakpointdefinitionen |
| Visibility | nein | ||
| Grid | ja | Verwendung zur Umsetzung des 12-Spaltigen Seitenrasters | |
| Block Grid | ja | Verwendung bspw. zur Anordnung der Elemente im Service-Footer | |
| Interchange responsive Content | nein | Verwendung des Frameworks „picturefill“ zur responsiven Ausgabe von Bildern. | |
| Utility Classes | nein | Tiefe Verankerung im HTML würde zu unverhältnismäßigem Aufwand bei Anpassungen führen | |
| Javascript Utilities | nein | ||
| Right to left support | nein | Aktuell gibt es keine Beispielinhalte und folglich keinen Anwendungsfall | |
| Navigation | Offcanvas | nein | Verwendung des Frameworks „mmenu“ zur Umsetzung der mobile Navigation |
| Top Bar | nein | Nicht ISB-konform | |
| Icon Bar | nein | Nicht ISB-konform | |
| Side Nav | nein | Nicht ISB-konform | |
| Magellan Sticky Nav | nein | Nicht ISB-konform | |
| Sub Nav | nein | Nicht ISB-konform | |
| Breadcrumbs | nein | Verwendung einer ISB-konformen Projektlösung | |
| Pagination | nein | Verwendung einer ISB-konformen Projektlösung | |
| Media | Orbit Slider | nein | Verwendung einer ISB-konformen Projektlösung |
| Thumbnails | nein | Verwendung einer ISB-konformen Projektlösung | |
| Clearing Lightbox | nein | Verwendung einer ISB-konformen Projektlösung | |
| Flex Video | nein | Verwendung des Frameworks „mediaelement.js“ | |
| Forms | Forms | ja | Verwendung zur Darstellung von Formularelementen |
| Switches | nein | Nicht Barrierefrei, da keine Tastaturbedienung möglich ist | |
| Range Sliders | nein | Nicht Barrierefrei, da keine Tastaturbedienung möglich ist | |
| Abide Validation | nein | Kein Anwendungsfall, zudem wird von einer Validierung mit Kommunikation zwischen Server und Browser nicht empfohlen | |
| Buttons | Buttons | nein | Tiefe Verankerung im HTML würde zu unverhältnismäßigem Aufwand bei Anpassungen führen |
| Button Groups | nein | Tiefe Verankerung im HTML würde zu unverhältnismäßigem Aufwand bei Anpassungen führen | |
| Split Buttons | nein | Kein Anwendungsfall | |
| Dropdown Buttons | nein | Kein Anwendungsfall | |
| Typography | Type | nein | Nicht ISB-konform |
| Inline Lists | nein | Nicht ISB-konform | |
| Labels | nein | Nicht ISB-konform | |
| Keystrokes | nein | Nicht ISB-konform | |
| Callouts and Prompts | Reveal Modal | nein | Kein Anwendungsfall |
| Alerts | nein | Kein Anwendungsfall | |
| Panels | nein | Umsetzung der Funktionalität durch Materna | |
| Tooltips | ja | Umsetzung durch eigene Umsetzung (per JavaScript ist eine Funktion umgesetzt, die alle ABBR-Tags erweitert und ein entsprechender Tooltip per JavaScript eingeblendet) | |
| Joyride | nein | Kein Anwendungsfall | |
| Content | Dropdowns | nein | Kein Anwendungsfall |
| Pricing Tables | nein | Kein Anwendungsfall | |
| Progress Bars | nein | Kein Anwendungsfall | |
| Tables | nein | Zugang auf mobilen Endgeräten wird durch Projektlösung von Materna optimiert. | |
| Accordion | nein | Umsetzung der Funktionalität durch Projektlösung von Materna | |
| Tabs | nein | Kein Anwendungsfall | |
| Equalizer | nein | Aufgrund der Verwendeten Projektlösung für Slider (z.B. Bühne) kann dieses Modul nicht eingesetzt werden | |
Sollen Projekt-spezifisch weitere Module genutzt werden, so können diese entsprechend integriert werden. Hierzu sind die Basis-Dateien des Frameworks z.B. mit Hilfe der Website http://foundation.zurb.com/develop/download.html#customizeFoundation neu zu generieren bzw. die fehlenden Module einzubinden. Das erzeugte Framework-CSS ist dann über den Editor im GSB-Dokument „/SiteGlobals/Frontend/Styles/libs/foundation/foundation“ zu hinterlegen. Weiter ist zu beachten, dass einige der Module weitere JavaScript-Module benötigen, die ebenfalls zu integrieren sind.
Testen und Bearbeiten von Layout und Styleangaben
Zum Testen des responsiven Layouts im Browser reicht es grundsätzlich aus, das Browserfenster im Preview auf die gewünschte Pixelbreit zu verkleinern. Optimaler sind jedoch Entwickler- und Vorschaufunktionen des Browsers, z.B. im Browser Google Chrome. Diese sind nach Start des Browsers über die Taste "F12" verfügbar. Nach Aufruf kann die gewünschte Darstellung bzw. der Gerätetyp oben links im Fenster gewählt oder der Darstellungsbereich manuell angepasst werden.
Um die Styleinformationen zu bearbeiten und sich in den Angaben zurechtzufinden, bietet der Browser Google Chrome ebenfalls Möglichkeiten zur temporären Anpassung an. Auch für andere Browser können Plug-Ins oder Add-Ons die Arbeit erheblich vereinfachen. Für den Browser Mozilla Firefox bietet sich das Add-On „Firebug“ an, für den aktuellen Microsoft Internet Explorer sowie Opera die bereits integrierten DevTools an. Mit allen Tools kann man Änderungen am Stylesheet simulieren ohne das Stylesheet-Dokument wirklich zu verändern. Sofern die gewünschte Darstellung erreicht ist, können die Styleangaben in das entsprechende GSB-Dokument übernommen werden. So kann man schon vor dem Eingriff die Auswirkungen von Änderungen im Browser ansehen. Weitere Details zu den PlugIns sind dem nächsten Kapitel zu entnehmen.
Hinweis: Für die Änderungen am Layout sind fundierten HTML-, CSS- und JS- sowie Foundation- und jQuery-Kenntnissen erforderlich.