Design, Interaction, Code & Teaching

004 Responsive-Design mit CSS3-Media-Queries – Responsive CSS Part I

Responsive Design mit CSS3-Mediaqueries für iPhone und Smartphone
Der klassische Computer ist nur noch ein Medium von vielen, um im Internet zu surfen. Im Alltag ersetzen Netbook, Tablet und Smartphones den sperrigen Computer und bald werden LCD-Fernseher und andere Gadgets diese Palette erweitern. Diese Medien unterscheiden sich dramatisch in der Auflösung und Größe der Screens von 3.5“ eines SmartPhones bis 27“ des Cinema-Displays. Für eine Webpräsenz bedeutet das: Es sollte eine Layouts-Strategie für große und kleine Screens konzipiert werden, um den Content mediengerecht zu präsentieren.
In dieser Serie stelle ich grundlegende Ansätze und die Realisierung vor. HTML5, CSS3 Media-Queries und ein paar Schnipsel Javascript machen aus einem starren Layout eine dynamische Webseite, die auf dem Smartphone und dem Cinema-Display richtig gut funktioniert.

Zwei Strategien: dynamisches Layout oder separate Seiten

Die erste Strategie ist das Layout und den Content responsive zu konzipieren – das Raster passt sich der Brwosergröße dynamisch an. CSS3 bietet dafür Media-Queries. Eine Media-Query selektiert die aktuelle Browsergröße und wendet darauf bezogen Styles an, um den Inhalt neu zu positionieren. Diese Strategie wende ich auch für diese Webseite an.
Die zweite Strategie ist eigenständige Webseiten für unterschiedliche Screengrößen zu gestalten zum Beispiel eine klassische Webseite und eine Smartphone-Webseite. Eine programmatische Logik auf dem Server oder im Browser lädt die jeweils richtige Webseite. Ein gravierender Nachteil ist der Aufwand der Pflege von zwei oder mehr Webseiten.

480, 960 und 1180 Pixel

Im erste Teil wird ein einfaches Responsive-Basislayout vorgestellt, im im zweiten Teil die Javascript-Lösung für separate Seiten. Das Layout wird auf die Browsergrößen von 1180, 960 und 480 Pixel reagieren. Die Browsergröße von 480 Pixel steht für Smartphones. Der Wechsel zwischen den Browsergrößen wird mit einer Transition animiert und verstärkt so den dynamischen Eindruck des Layouts. Zusätzlich wird bei jeder Browsergröße ein Textschnipsel eingefügt, der die Breite des Layouts einfügt.

Loading the player…

Demo & Code

Demo CSS3-Responsive-Layout
Download Code

Layout 1200 Pixel

Absolute Werte versus relative Werte

Im Responsive-Ansatz sollte möglichst auf absolute Werte verzichtet werden. Feste Pixelwerte müssen für alle Browsergrößen angepasst werden – Prozentwerte passen sich automatisch an. Bitte nicht vergessen, das die Breite (width) eines Block-Elements automatisch 100% ist.

Hinweise zum Code

  • Child-Selector element > element
    In Kombination mit HTML5-Tags (aside, article, footer, etc.) können ohne CSS-Klassen alle Elemente des Layouts selektiert werden s.h. w3schools selectors
  • Pseudo-Selector :before
    ermöglicht das Einfügen von Text über CSS. Damit werden die Textschnipsel eingefügt s.h. w3schools selectors
  • Transition-Eigenschaft -webkit-transition: all 9. linar
    lassen sich Animations-Effekte von einem Style zum nächsten realisieren s.h. w3schools transitions
  • Definition von Height-Eigenschaft im Layout
    Nur aus Demonstrationszwecken und sollte in der Realität unbedingt vermieden werden.

Das HTML5-Gerüst

ist aufgeteilt in drei Teile: Header, Hauptteil und Footer, die wiederum Layout-Module wie Navigation, Logo oder Sidebar beinhalten. Alle Elemente müssen sich bei der Veränderung der Browsergröße automatisch anpassen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <!-- header -->
    <header>
        <nav>main-navigation</nav>
        <h1>logo</h1>
    <header>

    <!-- main -->
    <section>
        <aside>sidebar</aside>
        <article>text</article>
    <section>

    <!-- footer -->
    <footer>
        <nav>sub-navigation</nav>
    <footer>

CSS-Styles

Der Body dient als Wrapper, um das Layout mit einer Breite von 1180 Pixel zu zentrieren. Die Transition animiert die Width-Eigenschaft.

1
2
3
4
5
6
    body {
        margin: 0 auto; /*center layout*/
        width: 1180px; /*width of the layout*/
        background: white;
        -webkit-transition: width .75s ease-out; /* animate the width */
    }

Hier sieht man den Einsatz des Child-Selectors statt Klassen. Der Header bekommt einen schwarzen Hintergrund, der mit einer Transition animiert wird. Alle Tags haben eine Height-Eigenschaft, weil in diesem Beispiel-Layout kein Inhalt platziert ist, der die Höhe der Elemente bestimmt. Die Navigation floated nach rechts – passt sich also automatisch neuen Browsergrößen an. Layout und Module bekommen einen Border-Eigenschaft, damit diese sich im Beispiel visuell abheben.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    header {
        min-height: 200px;
        border-bottom: 16px solid white; /* visual delimit the header from the section */
        background: black;
        -webkit-transition: background .75s ease-in; /* animate the background-color */
    }
    header > nav {
        float: right; /* float is a relative position! */
        width: 200px; height: 30px;
        border: 16px solid white; /* visual delimit the nav from the header */
    }
    header > h1 {
        width: 30px; height: 30px;
        border: 16px solid white; /* visual delimit the logo from the header */
    }

Im Hauptteil werden die Breite des Artikels und der Sidebar prozentual angegeben, damit diese sich automatisch anpasst. Und hier kommt der Pseudo-Style :before zum Einsatz, um in dem Article-Tag der Textschnipsel 1180 einzufügen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    section {
        background: black;
        -webkit-transition: background .75s ease-in; /* animate the background-color */
    }
    section > aside {
        float: right; /* float is a relative position!*/
        width: 30%; /* width in is percentage!*/
        min-height: 600px; /* always try to avoid heigt in your layout!*/
        border-left: 16px solid white; /* delimit the sidebar from the article */
    }
    section > article{
        width: 70%; min-height: 600px; /* width in is percentage! */
    }
   section > article:before {
        content: "1200px "; /* here pseudo-style to add text to the article */
   }

Und die Styles für den Footer.

1
2
3
4
5
6
7
8
9
10
11
    footer {
        min-height: 62px; /* always try to avoid heigt in your layout!*/
        border-top: 16px solid white; /* visual delimit the footer from the section */
        background: black;
        -webkit-transition: background .75s ease-in; /* animate the background-color */
    }
    footer > nav {
        float: right;
        width: 200px; height: 30px;
        border: 16px solid white;
    }

Fertig ist das Basislayout für 1180 Pixel;

Responsive-Layout 960 Pixel mit einer Media-Query

1
    @media screen and (max-width: 1024px) { /* defines styles */}

Die Media-Query überschreibt CSS-Werte und / oder definiert neue CSS-Eigenschaften. Frei übersetzt: Bei einer Browserbreite von maximal 1024 Pixel, wende folgende CSS-Eigenschaften an.
Im Beispiel wird die body.width auf 960px gesetzt. Die weiteren Layout-Elemente passen sich automatisch an. Die Navigation floated rechts und die Artikel- und Sidbarbreite haben prozentuale Werte. Um die Wirkung der Media-Query besser zu demonstrieren, wird noch die Hintergrundfarbe auf grey gesetzt und mit dem Pseudo-Selektor :before in den Artikel die aktuelle Breite geschrieben. Und jetzt kommt auch der transition-Style zum Tragen, der die veränderten CSS-Eigenschaften animiert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    @media screen and (max-width: 1024px) {
        body {
            width: 960px; /* new width size of the wrapper */
        }
        header {
            background: gray; /* for the transition -&gt; animate from black to grey */
        }
        section {
            background: gray; /* for the transition -&gt; animate from black to grey */
        }
        section > article:before {
            content: "960px "; /* pseudo-style - text-snippet 960px */
        }
        footer {
           background: gray; /* for the transition -&gt; animate from black to grey */
        }
    }

Fertig ist das Layout mit Animation für 960 Pixel;

480 Pixel (iPhone-Breite)

Bei der Media Query für 480 Pixel wird zusätzlich die Sidebar ausgeblendet (display: none) und der frei werdende Platz für den Artikel genutzt (width: 100%).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
     @media screen and (max-width: 480px) {
        body {
            width: 480px; /* new width size of the wrapper */
        }
        header {
            background: black; /* for the transition -&gt; animate from grey to black */
        }
        section {
            background: black; /* for the transition -&gt; animate from grey to black */
        }
        section > article {
            width: 100%; /* new width size of the article - now 100%*/
        }
        section > article:before {
            content: "480px ";
        }
        section > aside {
            display: none; /* sidebar is not visible at this screensize*/
        }
        footer {
            background: black; /* for the transition -&gt; animate from grey to black */
        }
    }

Voila Smartphone-Version.
Das Basis-Layout funktioniert im Browsertest tadelos. Wie sieht es aus auf dem iPhone aus?

CSS3-Anpassungen für das iPhone

Auf OsX gibt es mit dem Programm xCode (Kostenlos) von Apple den iOS-Simulator (xCode starten und im Menü xCode > Developer Tools > iOS-Simulater). Ein Test ergibt, dass auf dem iPhone widererwarten die 960 pixelbreite Version angezeigt wird. iOS-Safari imitiert eine Screen-Breite von 1024 Pixel, um klassische Webseiten vollständig, aber verkleinert anzuzeigen.
Der folgende Meta-Tag im HTML schaltet diese automatische Skalierung aus
iOS Simulator: Viewport Scaling on und off

1
    <meta name="viewport" content="user-scalable=no, width=device-width" />

Und im CSS sollte auch die automatische Anpassung der Textgröße ausgeschaltet sein. Dafür muss im Body folgende Eigenschaft ergänzt werden.

1
2
3
4
    body {
        /* other styles */
        -webkit-text-size-adjust: none;
    }

Jetzt funktionert alles wie erwartet!

Ready

Damit wäre der grundlegenden Ansatz für ein Responsive-Layout für drei Screengrößen inklusive iPhone gelöst. Einzelne Module können nach dem gleichen Schema angepasst werden. Nebenbei demonstriert der Ansatz wie mit HTML5-Tags das Markup klar strukturiert wird und der Einsatz von dem Child-Selektor Klassen und IDs minimieren kann. Der schöne Effekt der animierten Übergänge zwischen den Screengrößen lässt sich mit einer einfachen CSS3-Transition realisieren.

Hier noch Mal Demo & Code

Demo CSS3-Responsive-Layout
Download Code

Teil 2 stellt die zweite Strategie vor: Eigenständige Webseiten für unterschiedliche Bildschirmgrößen. Mit einem kleinen Schnipsel Javascript-Code kann das Betriebssystem, der Browser und die Bildschirmgröße erkannt werden.
Part I: Responsive-CSS mit CSS3-Media-Queries
Part II: Javascript-Switch für das iPhone und unterschiedliche Screengrößen
Part II: Bilder für Retina- und High-Resolution Displays


Über den Autor


Prof. Pepe Jürgens konzipiert, gestaltet und programmiert seit 20 Jahren digitale Medien. Er gründete das interdisziplinäre Design-Studio Weltformat und ist Co-Founder von lernox mit dem Ziel, freie Lehr- und Lernmaterialien aus dem Internet zu kuratieren. Seit 2013 doziert Pepe Jürgens Interaction Design an der Hochschule der populären Künste in Berlin


8 Kommentare

  1. Posted 3. Dezember 2012 at 12:29 | Permalink

    Hallo Pepe,

    danke für die Zusammenfassung, sehr hilfreich und übersichtlich. Eine Empfehlung von mir -gerade ist ein tolles Buch zu diesem Thema erschienen. http://www.abookapart.com/products/responsive-web-design
    Viele Grüße Zwetana

  2. Olcan
    Posted 3. Dezember 2012 at 15:21 | Permalink

    Hallo Pepe,

    Ich habe noch 2 nützliche Links gefunden hierbei handelt es sich einmal um eine Webseitensammlung die gute Response Design Beispiele zeigt; http://mediaqueri.es/

    Zudem eine Webseite die einen Galerien Code anbietet, dieser auf mobilen Endgeräten funktioniert;
    http://www.photoswipe.com/

    Gruß Olcan

  3. Posted 11. Dezember 2012 at 11:04 | Permalink

    Hier ist eine weitere Seite auf der man sein responsive Design testen kann:
    http://www.responsinator.com/
    Gruß Kalina

  4. Posted 11. Dezember 2012 at 12:44 | Permalink

    Schöne Website !!

  5. Niklas Bauer
    Posted 17. Dezember 2012 at 21:21 | Permalink

    Eine weitere Seite zum Testen von responsive design:

    http://quirktools.com/screenfly/

    Grüße, Niklas

  6. Harald
    Posted 20. Juli 2013 at 22:58 | Permalink

    Mal ein prominentes Beispiel:

    http://windows.microsoft.com/de-de/windows-8/

    Die Seitenelemente passen sich je nach Breite an. Einfach mal ausprobieren, indem man das Browserfenster schmaler zieht. Besonders auffällig ist das bei der Navigation ganz oben und unten.

  7. Harald
    Posted 20. Juli 2013 at 23:09 | Permalink

    Was man noch beachten muss: Die Breite per Auflösung zu bestimmen, kann heikel sein. Es gibt z.b. mittlerweile Smartphones mit Full HD, also 1080 Pixeln Bildschirmbreite. Aber das heisst nicht unbedingt, dass man dann dasselbe Layout wie bei einem normal großen Bildschirm mit derselben Pixelzahl wählen sollte, denn die Schrift ist im Verhältnis ja viiiiel kleiner. Vielleicht müsste man die Breite per „em“ bestimmen und nicht per Pixel? So habe ich es auf der Microsoft-Seite gesehen. Bin aber noch Anfänger auf diesem Gebiet, ich bin gerade erst auf diese Seite hier gestoßen ;-)

    • pepe
      Posted 21. Juli 2013 at 18:54 | Permalink

      Ein aktuelles iPhone hat mit dem Retina-Display auch eine wesentlich höhere Auflösung. Die
      Frage ist also nicht die Auflösung des Bildschrims sondern wie der Viewport angezeigt wird. Wie die normale Website oder angepasst an die geringe Größe des Bildschirms. Das Beispiel dafür kann im zweitem Teil der Serie angeschaut werden http://www.pepe-juergens.de/2012/11/javascript-weiche-browser-screen-size/.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>