Fork me on GitHub

Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

Wie gehen wir mit der Herausforderung der verschiedenen Auflösungen und Pixeldichten um?

Responsive Design

Große Unterschiede im Platz kann man mit Mediaqueries in CSS behandeln. Die Verwendung von Mediaqueries wurde 2010 in einem Artikel von Ethan Marcotte in “A List Apart” unter dem Begriff “Responsive Webdesign” popularisiert .

In diesem ersten Beispiel von responsive Design werden drei verschiedene Layouts für verschiedene Größen angeboten. Der Inhalt und das HTML Dokument bleiben dabei gleich.

Das erste Beispiel für "Responsive Webdesign": Darstellung der Seite auf verschiedenen Breiten

Die technische Umsetzung des verschiedenen Layouts ist relativ einfach: Mediaqueries erlauben eine “Verzweigung” in CSS.

Css Code CSS mit Mediaqueries

@media screen and (max-width: 480px) {
  .column {
    width: 100px;
  }
  /* weitere Regeln für kleine Screens */
}
/* allgemein gültige Regeln */

Mobile First

Luke Wroblewski schlug 2009 unter dem Slogan “Mobile First” vor, zuerst die mobile Version der Website zu gestalten, und davon dann die “größeren” Versionen abzuleiten .

/images/responsive/mobile-first.jpg

Bild: (CC BY-NC) Sauce Babilonia

Mediaqueries and Featurequeries

Css Code CSS Medaqueries Beispiel

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}  

@supports not (display: grid) {
  div {
    float: right;
  }
}

siehe auch MDN: media features und MDN: features queries

Bilder und Responsive Design

Bilder waren lange Zeit ein Grund, warum das Layout von Webseiten nicht flexibel war: weil die Bilder nur für die Darstellung bei einer bestimmten Größe geeigenet waren. Das ist aber seit ca. 2010 anders.

Pixel

Als Bildformate für <img> Tags in Webseiten wurden lange nur Pixel-Formate unterstützt. Diese Formate (jpg, png, gif) sind für die Darstellung bei einer bestimmten Größe gedacht. Die Vergrößerte Darstellung von Pixel-Bildern liefert keine guten Ergebnisse:

Abbildung 29: Ausschnitte aus einem Pixel Bild, vom Browser (Firefox) in 3 Stufen vergrößert dargestellt

Die Verkleinerte Darstellung ist eine Verschwendung: Wenn ich ein Bild herunterladen muss, dass doppelt So breit und doppelt so hoch ist, wie mein Browser darstellen kann, dann sind das viermal so viele Daten, und damit eine viermal so lange wartezeit!

Vektor

Mit dem Format SVG steht auch ein vektor-basiertes Bildformat für das Web zur Verfügung. SVG-Bilder können in beliebiger Größe verwendet werden. Die Einbindung erfolgt mit dem img-Tag:

<img src="circle.svg">

Abbildung: Kreis in SVG-Darstelllung

Schriftgröße

Die Schriftgröße im Browser unterliegt nur bedingte der Kontrolle durch HTML und CSS Code. Das „letzte Wort“ hat hier die LeserIn, die die Schrift größer oder kleiner stellen kann. z.B. in MSIE unter Ansicht → Schriftgrad, in Firefox mit der Tastenkombination STRG + oder STRG –.

Je nach Schriftgröße und zur Verfügung stehendem Platz im Browser-Fenster wird der Browser die Absätze geeignet in Zeilen umbrechen, wie in Abbildung 31 gezeigt.

Abbildung 31: Darstellung von Text bei verschiedenen Fensterbreiten und Schriftgrößen

Zoomen

Alle Browser bieten das Vergrößern und Verkleinern der Webseite an, meist mit einer Tastenkombination mit + bzw. -. Dabei werden die CSS Pixel vergrößert bzw. verkleinert. Die Größe des Viewport und die CSS pixel-ratio verändern sich also, dadurch werden andere Mediaqueries schlagend.

Beispiel

Die Demo Seite für CSS Grid ist responsive.

/images/css-layout/example-responsive.png

Für Smartphones ist kein Grid vorgesehen:

@media screen and (max-width: 660px)  {
  .page_container {
    padding: 10px;
    max-width: 80em;
    font-size: 18px;
    line-height: 24px;
  }
  ...
}

Für Tablets gilt ein Grid mit zwei Spalten:

@media screen and (min-width: 660px) and (max-width: 1150px)  {

    .page_container {
      display: grid;

      grid-template-columns: 2fr 3fr;
      grid-template-rows: 60px 403px 1fr 1fr 60px 3fr;

      grid-template-areas:  "w1        headline "
                            "portrait  description"
                            "w2        facts"
                            "w2        navigation"
                            "w2        stylename"
                            "w2        css";
    }
    ....
}

für Desktops ein Grid mit drei Spalten:

@media screen and (min-width: 1200px)  {

    .page_container {
      display: grid;

      grid-template-columns: 270px 5fr 3fr;
      grid-template-rows: 60px 2fr 210px;

      grid-template-areas:  "w1        headline     stylename"
                            "portrait  description  css"
                            "w2        facts        navigation";
    }
    ...
}

und als Easter Egg ist noch eine ganz verrücktes Grid dabei:

/images/css-layout/easteregg-responsive.png

@media screen and (min-width: 1150px) and (max-width: 1200px) {

    .page_container {
      height:1200px;
      width:1200px;

      display: grid;

      grid-template-columns: 140fr 131fr 152fr 283fr 190fr 166fr;
      grid-template-rows: 114fr 306fr 305fr 131fr 129fr 70fr;

      background-color: black;
      grid-gap: 25px 25px;

      grid-template-areas:  
        "w1    w1           w2           w2           headline  headline"
        "w4    description  description  description  facts     facts"
        "w5    description  description  description  portrait  w11"
        "w5    navigation   navigation   w6           w7        w7"
        "gelb  navigation   navigation   w8           css       css"
        "gelb  w9           w9           stylename    css       css"
        "gelb  w9           w9           w10          w10       w10";
    }
    ...
}