Responsive Web Design

Beispiel: Umstellung von statistik.arbeitsagentur.de auf Responsive Web Design

Das komplex Menü wurde mit jQuery und dem jQuery-Plugin mm-menu umgesetzt, wobei letzteres erheblich optimiert wurde.
Bei der Startseite ändert sich je nach Größe des Displays die Anzahl der Spalten des Inhaltes und die Positionierung des Suchfeldes im Header.

Suchergebnisse werden je nach Anzahl in mehrseitigen Tabellen angezeigt, z.B. bei der Suche nach dem Begriff "Langzeitarbeitslose"

responsive Elemente

Grafiken und Bilder wurden so eingebunden, dass sie auf kleine Bildschrimen entweder skaliert oder verschoben werden können.
Bei einigen Tabellen wurde ein responsive Version erstellt, bei der die Struktur der Tabelle aufgelöst und die Header bei jedem Eintrag angezeigt werden. Das sind dann quasi Key-Value-Paare.
Mehr über die Möglichkeiten responsiver Tabellen bei Sitepoint Responsive Data Tables: A Comprehensive List of Solutions

Herausforderung JavaScript

Ein Kombination von normalem JavaScript mit jQuery, jQuery UI, Dojo und ArcGIS.

Animierte Karten mit HIlfe von ArcGIS

Bei der Seite Statistik nach Regionen - Bund, Länder und Kreise sehen Sie in der Desktop-Version eine Karte mit je nach Arbeitslosenquote unterschiedlich gefärbten Bundesländern. Wenn Sie unterhalb der Karte auf den Pfeil klicken, wird eine Animation gestartet und die Färbung der Länder je nach Arbeitslosenquote im Laufe der Jahre geändert. Auf kleineren Bildschirmen, z.B. Smartphones, wird nur die unter der Karte liegende und ebenso animierte Tabelle dargestellt. Das Design der Tabelle entspricht einer sogenannten Hichert-Tabelle.

Beispiele zu JavaScript

Die rechte Spalte wird unsichtbar, wenn das Browser-Fenster zu schmal wird.

function Fensterweite() {
     if (window.innerWidth) {
        return window.innerWidth;
     } else if (document.body && document.body.offsetWidth) {
        return document.body.offsetWidth;
     } else {
        return 0;
     }
}
      

CSS-Beispiel: Plazierung eines Elementes unten im Browserfenster

#footer {
    bottom: 0px;
    left: 0px;
    /* ohne diese Angabe wird dieses Menü im IE 7 rechts (!) stehen */
    padding: 0;
    margin-bottom: 1px; margin-left: 192px;
    position: fixed;
}