Responsive Webdesign Tutorial

Beim Responsive Webdesign wird, egal welches Gerät auf eine Webseite zugreift, immer der gleiche HTML Code aufgerufen. Die Darstellung der Inhalte wird jedoch in Abhängigkeit von der Bildschirmgröße des zugreifenden Geräts, eine bestimmte CSS Datei aufgerufen. Dazu wird im head des HTML Files das Viewport-Meta-Tag verwendet.

<meta name=“viewport“ content=“width=device-width, initial-scale=1″>

Viewport steht für Anzeigebereich. Dieses Meta-Tag teilt dem Browser mit, an welche Breite der Inhalt angepasst werden soll – und zwar an die Breite des Displays des jeweiligen Geräts. „initial-scale=1“ legt zusätzlich fest, dass beim aufrufen der Seite nicht hineingezoomt werden soll.

Achtung:
Webseiten welche jedoch nicht auf Responsive Webdesign ausgelegt sind, können mit diesem Meta-Tag alleine noch schlechter lesbar werden als sie ohne dem Tag wären.

Um dieses Problem zu beheben, muss das CSS File angepasst oder erweitert werden. Man kann zum Beispiel durch hinzufügen folgenden Codes im Haupt-CSS File,

@media screen and (max-width: 481px){…}

innerhalb der geschwungenen Klammern, eigene Styles, für alle Displays deren Breite kleiner ist als 481px, definieren.

Alternativ dazu kann man natürlich auch mit zwei getrennten CSS Files arbeiten und diese wie folgt ins HTML File einbinden:

<link rel=“stylesheet“ href=“base.css“ /> // beinhaltet sämtliche Standardformatierungen
<link rel=“stylesheet“ media=“only screen and (max-width: 400px)“ href=“mobile.css“ />
<link rel=“stylesheet“ media=“only screen and (min-width: 401px)“ href=“desktop.css“ />

Grundsätzlich sollte darauf geachtet werden, beim festlegen von Größen bei zB width, line-height, font-size, padding, etc., möglichst mit den Einheiten % beziehungsweise em zu arbeiten.

Für Schriftgrößen nutzt man em um

die Default-Größe des Gerätes zu nutzen, da diese eine Höhe hat die der Leser komfortabel lesen kann.

Schriftgrößen anderer Elemente mit em: H1 {font-size: 2.5em;} zu erstellen und damit H1 2½ mal so gross darzustellen wie den standard Text im body.

Größen und Breakpoints im Responsive Webdesign

Mit welchen Größen sollte man im Responsive Webdesign arbeiten? Wo setzt man die sogenannten Breakpoints im CSS File? Und welche Displaygrößen sind denn am wichtigsten bzw. am häufigsten benutzt?

Da sich die Displaygrößen und deren „device-width“ (auf welche es im Responsive Webdesign in erster Linie ankommt), mit jedem Gerät das neu auf den Markt kommt, wieder ändern wird, ist es meiner Meinung nach am sinnvollsten die Breakpoints so zu wählen, dass sie abhängig vom Inhalt gesetzt werden, anstatt Gerätespezifisch! Der Aufwand bleibt so um einiges geringer, da man mit Sicherheit weniger Breakpoints in Abhängigkeit zum Inhalt finden wird, als es unterschiedliche Gerätedisplaygrößen am Markt gibt und da man sein CSS bestimmt auch weniger oft erweitern oder anpassen werden muss, als die Liste der Geräte ständig zu erweitern. Außerdem ist man auch in Zukunft unabhängig von den sich ständig ändernden Displaygrößen.

Um zu sehen wie groß die Liste wäre bei bereits nur wenigen ausgewählten Geräten von Samsung und Apple (Stand 2017) – trotzdem noch ein kleiner Überblick über die derzeit gängigsten Displaygrößen und wie gerätespezifische Breakpoints im CSS File aussehen würden:

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* iPad 3,4, Air */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens */
@media only screen and (min-width : 1824px) {
/* Styles */
}