Websites für große Displays gestalten

Websites vom Desktop auf kleine Screens zu bringen, war bis vor Kurzem  das Hauptziel im Responsive Webdesign. Doch angesichts der Massentauglichkeit von Ultra HD, 4K und 5K ändert sich nun die Perspektive: Unser Upwardly-Responsive-Tutorial für Flexbox und Bootstrap finden Sie in PAGE 11.2015.

Die Tabelle »Device Pixel Ratio« vergleicht die Werte verschiedener Devices von iPhone 6 bis Samsung Galaxy S6

Device Pixel Ratio
Die Device Pixel Ratio gibt an, wie viele Hardware-Pixel das jeweilige Display verwendet, um einen Software-Pixel darzustellen. In der Vergangenheit entsprach die Pixeldichte von Monitoren beziehungsweise TFT-Displays meist 72 Pixeln pro Zoll (ppi). Somit entsprach eine höhere Hardware-Auflösung auch immer einer proportional dazu größeren Fläche des Displays. Heute ist das nicht mehr der Fall. Displays werden mit mehr Pixeln auf derselben oder gar kleineren Fläche ausgestattet. Die Folge ist eine immer höhere Pixeldichte und eine Vielzahl unterschiedlicher ppi-Werte. Ein Element mit der immer gleichen Pixelgröße würde kleiner dargestellt, je höher der ppi-Wert steigt. Die Tabelle zeigt ein paar Beispiele.

Die Tabelle als Download

Layout mit Flexbox basteln
Seit Juni 2014 ist der Layoutmodus Flexbox, der auf einer Idee des irischen Web Developers Ian Devlin basiert, die Antwort auf diese Probleme. Seither flexibilisiert sich das Layoutsystem von Websites langsam, aber stetig. Durch die Änderung weniger Style-Eigenschaften lassen sich jetzt zum Beispiel Listen horizontal oder vertikal ausrichten. Außerdem kann man die Richtung invertieren, Inhalte umbrechen, Containergrößen dynamisch angleichen und vieles weitere. Der größte Vorteil hieran ist, dass der Browser, der ja seine Höhe und Breite am besten kennt, nun weiß, was von ihm erwartet wird, und somit bei der Optimierung helfen kann. Das spart nicht nur Ressourcen, sondern auch Entwicklernerven. Wie das geht, schauen wir uns jetzt genauer an:

#imageList {
width:100%;
padding:10px;
box-sizing: border-box;
display: -webkit-flex;
display:flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: space-around;
}
#imageList .insta-container {
width: 96%;
overflow:hidden;
margin-bottom:1vw;
}

Das CSS enthält außerdem Media Queries für mobile Geräte, wie Sie im nachfolgenden Code sehen:

@media (min-width: 641px) {
body {
font-size: 2vw;
}
#imageList .insta-container {
width: 48%;
}
}
@media (min-width: 961px) {
body {
font-size: 1.5vw;
}
#imageList .insta-container {
width: 32%;
}

[…]
}

Zusätzlich passen wir noch ein paar Schriftgrößen an, damit sie im Verhältnis zur sich nun schnell füllenden Seite besser in das Gesamtbild passen. In unserem Fall sähe der Code so aus:

.near-view,
.near-view div,
.near-view figure,
.near-view figcaption {
/* Schriftgrößé für die Near-View */
font-size:0.8rem;
}
.near-view #imageList .insta-container {
/* Feste Insta-Container Breite */
width: 200px;
}

Upwardly Responsive Design mit Bootstrap
So können wir, basierend auf den eben genannten Breakpoints, bestimmen, welches Element wann und wie umbricht:

<div class=”container”>
<div class=”row”>
<div class=”col-lg-3 col-md-6″>
Inhalt 1
</div>
<div class=”col-lg-3 col-md-6″>
Inhalt 2
</div>
<div class=”col-lg-3 col-md-6″>
Inhalt 3
</div>
<div class=”col-lg-3 col-md-6″>
Inhalt 4
</div>
</div>
</div>

Mehr zum Thema »Upwardly Responsive« finden Sie in PAGE 11.2015 im PAGE-Shop.