Responsive UI

Um die Anwendung für möglichst viele Nutzer zugänglich zu machen, wird eine an das jeweilige Device anpassbare Darstellung benötigt. Dieser Aspekt sollte direkt mit in die Gestaltung einbezogen werden. Link UI berücksichtigt hierbei verschiedene Desktop-Auflösungen und Tablets, keine Mobiltelefone.

Grid Layout

Die Basis der Layoutstruktur ist das Grid Layout. Das verwendete Grid besteht aus 12 Spalten und kann ineinander verschachtelt werden. Mithilfe der Breakpoints kann das Grid bzw. jede Spalte nach Device Größe angepasst werden.

1
2
3
4
5
6
7
8
9
10
11
12
1
11
2
10
3
9
4
8
4
8
5
7
6
6
Spaltenabstand

Innenabstand links/rechts 15px

Genutze Breakpoints

Ein Breakpoint ist der Punkt, an dem das Design für die Größe des Viewports umspringt oder umbricht. Die Layoutstruktur muss bis zum Breakpoint "small" skalierbar sein. Der Breakpoint "small" enspricht der durchschnittlichen Größe von Mobiltelefonen und muss nicht abgedeckt sein. 





    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }