Responsives Webdesign Tutorial


Immer mehr Leute nutzen statt ihrem Computer lieber ihr Smartphone und Tablet um im Internet Informationen zu finden. Je zugänglicher diese Informationen für den Besucher sind, desto höher ist die Chance, dass er die Seite nicht sofort wieder verlässt. Dazu gehört auch, dass er nicht erst den Text per „pinch und zoom“ vergrößern muss, sondern dass dieser sich an den Bildschirm anpasst. Eine mögliche Lösung dafür ist ein Layout, dass sich der gewünschten Breite des Geräts anpasst: Responsive Webdesign.

Responsive Web Design – Media Queries

Wenn man mit einem modernen Browser auf MarcTV surft und man die Größe des Browserfensters verändert, dann ordnen sich die Elemente bezüglich ihrer Größe und Position neu an. Dies funktioniert grundsätzlich über die CSS3 media queries. Diese erlauben das Schreiben von Bedingungen für das Erkennen der Pixelbreite des Browserfensters direkt im CSS Code:

@media screen and (max-width: 320px) {
  #wrapper{
    width: 320px;
  }
}

Media Queries haben den Vorteil, dass man sie direkt im Stylesheet einsetzen kann und dass sie nicht mal Javascript benötigen. Und sie werden von allen modernen und vor allem von iOS und Android Browser voll unterstützt. Apple empfiehlt den Einsatz von Conditional CSS sogar explizit in ihrer Dokumentation.

Code to standards, not devices

Anne van Kesteren

Mobile Geräte und selbst Personal Computer entwickeln sich permanent bezüglich ihrer technischen Parameter wie Auflösung und Pixeldichte weiter. Dazu kommen noch Geräte wie der Amazon Kindle oder die Boxee Box, die bezüglicher dieser Eigenschaften über ihre eigenen speziellen Parameter verfügen. Sie haben eine Sache gemein: die Bildschirmauflösung.

Das ist zwar kein Web Standard, aber immerhin benutzt man dabei nicht User Agent, um das Gerät zu identifizieren.

prezi-responsive
Prezi Präsentation zum Thema „Responsive Webdesign“

Responsive Web Design – Welche Auflösungen?

Besonders relevant ist dabei, dass z. B. ein iPhone im vertikalen Portraitmodus 320px Breite ausgibt und im horizontalen Landscapemodus 480px. Das liegt an der hohen Pixeldichte des iPhone und vergleichbaren Geräten. Deswegen wird einfach die reale Pixelbreite halbiert.

Bezogen auf Android, iOS und MacOS bin ich auf folgende media queries gekommen. Diese funktionieren auch für die von mir getesteten Androidtelefone hervorragend.

@media screen and (max-width: 479px) {

  /* iPhone Portrait width: 320px */
  html h1:after {
    content: "Weniger als 480 Pixel - iPhone Portrai)";
  }

  html #wrapper {
    width: 320px;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {

  /* iPhone Landscape width: 480px */
  h1:after {
    content: "Weniger als 768 Pixel - iPhone Landscape";
  }

  html #wrapper {
    width: 480px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

  /* iPad Portrait */
  html h1:after {
    content: "Weniger als 1024 Pixel - iPad Portrait";
  }

  html #wrapper {
    width: 768px;
  }
}

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

  /* > iPad Portrait */
  html h1:after {
    content: "Mehr als 1024 Pixel- iPad Portrait oder Netbooks";
  }

  html #wrapper {
    width: 1024px;
  }
}

@media screen and (min-width: 1260px) {
  html h1:after {
    content: ">Mehr als 1260 Pixel - Normale Bildschirme";
  }

  html #wrapper {
    width: 100%;
  }
}

Wie man sieht, definiert dies Blöcke von CSS Anweisungen für verschiedenen Auflösungen. Darin kann man dann jeweils seine Styles für die entsprechende Auflösung anpassen. Nehmen wir an, ein Wrapper Element wäre vorher so definiert gewesen:

#wrapper{
  width: 960px;
}

Dann könnte man es so für die jeweilige Auflösung anpassen, in dem man den Style für Geräte mit einer Auflösung von max. 479px überschreibt:

@media screen and (max-width: 479px) {
 html #wrapper{
   width: 320px;
 }
}

Responsive Web Design – CSS vereinfachen

Wenn man so an die Sache heran geht, dann merkt man schnell, dass man am Ende redundanten Code vor sich hat. Für mein Theme habe ich einen ähnlichen Ansatz gewählt, wie bei meiner Inspirationsquelle informationarchitects.ch: Man arbeitet so weit es geht ohne explizite Pixelangaben für alle Elemente, die man verändern will sondern nutzt den Wrapper, an dem sich dann alle Elemente ausrichten.

Dafür muss aber leider die im IMG Tag angegeben Pixelbreiten entfernt werden, damit man die Bilder mit CSS mit 100% in der Breite entsprechend justieren kann. Dafür habe ich mir ein einfaches WordPress Plugin geschrieben: MarcTV Remove IMG height. Die vollständige CSS Datei mit den css media queries ist deswegen recht überschaubar. Leider gibt es noch einige Sonderfälle durch Plugins weswegen ich dort teilweise Dinge per ! important überschreiben musste.

Responsive Web Design – Gleiches HTML für alle

Man sollte sich auch bewusst machen, dass das HTML der Webseite immer gleich bleibt und nur die CSS Styles die Elemente beeinflussen. Dies steht im harten Kontrast zu einer eigenen HTML Version, die über den User Agent ausgeliefert wird. Deswegen sollte man sehr viel Zeit darauf verwenden, das HTML zu optimieren und sich gut überlegen, was man über die Template Engine in das DOM reinläd.

Definition des Viewports

<meta
name="viewport"
content="user-scalable=0, width=device-width, initial-scale=1, maximum-scale=1">
</meta>

Der viewport Tag mit den entsprechenden Attributen gehört in den head-Bereich der Webseite. Er steuert wie Geräte wie das iPhone und Android die Webseite initial darstellen. Bei allen anderen Browsern zeigt er keine Wirkung weswegen ich ihn permanent im Template einsetze.

  • user-scalable=0
    Der Benutzer kann nicht mehr Zoomen
  • width=device-width
    Die Breite des Viewports wird auf die interne Auflösung des Gerätes eingestellt. Dies muss nicht zwangsläufig die native Auflösung des Displays sein.
  • initial-scale=1
    Der Zoom wird auf den Standardwert gesetzt.
  • maximum-scale=1
    Der höchstmögliche Zoom wird auf den Standardwert gesetzt.

Schriftgröße in Prozentangaben

font-size: 100% ist nicht zu groß sondern entspricht egal auf welcher Plattform der Schriftgröße, die er Browser als normalgroß ansieht. Dies ist auf einem Mobiltelefon oder E-Reader unter Umständen in Pixel umgerechnet etwas völlig anderes als auf einem PC. Die Schriftgröße liegt hier im Blog ist je nach Auflösung sogar über 100% und wird bei über 1240px sogar auf 120% angehoben. So kann man auf auch großen PC Monitoren oder der Boxee Box die Texte angenehm lesen.

Linearisierung

Auf meinen Übersichtsseiten sind die Artikelbilder gekachelt in einem Raster angeordnet. Auf einem kleinen Display funktioniert das natürlich nicht mehr. Deswegen habe ich dort und an vielen anderen Stellen das Layout linearisiert. Alle Elemente laufen auf den schmalen Versionen deswegen untereinander. Das gilt auch für Label für z.B. das Kommentarformular und die Artikeltools unter den Artikeln. Meistens musste ich nur ein float: right gegen ein float: none austauschen.

Javascript

Manche Javascript-Features machen auf der kleinen Versionen keinen Sinn. Dazu gehören u.a. Scripte wie colorbox, für die ich eine Ausnahme einbauen musste:

if($(window).width() > 1023){
  /* load colorbox(); and other stuff for non-mobile devices */
}

Fazit

Während man bei einer echten mobilen Ansicht in den Templates kleinere Bilder laden kann, so ist dies über den Ansatz über CSS nicht möglich. Im Blog werden immer die 960px breiten Teaserbilder geladen. Egal, ob sie auf dem iPhone auf 320px skaliert werden oder nicht. Dadurch müssen deutlich mehr Daten übertragen werden als nötig. Eine Alternative für WordPress ist WP Touch, dass eine komplett eigene Oberfläche für Gesten von Touchdisplays läd.

Dafür ist die Technik verhältnismäßig einfach umzusetzen und zu pflegen. Bevor man eine eigene mobile Version der Seite mit eigenem Template erstellt, kann man diesen Task recht bequem im Frontend erledigen. Außerdem muss man so keine zwei Templates oder gar Plattformen pflegen. Es kommt natürlich auch stark auf die Größe und Anforderungen an die Website an. Gleichzeitig bleibt das Look-and-feel der Webseite erhalten.

Der Hauptgrund für die Implementierung hier im Blog war aber, dass ich mittlerweile selbst mehr auf dem iPhone surfe als auf einem normalen PC. Das mag vielleicht zuerst absurd klingen, aber in meiner Freizeit habe ich eher die Zeit und ein iPhone bei mir, um schnell Dinge auf Wikipeda nachzusehen oder auch mal einen Artikel aus meinem Feedreader oder Social Networks zu lesen. Und je mehr ich mit dem Mobiltelefon surfe, desto wohler fühle ich mich aufseiten, die für mobile Geräte angepasst sind. Besonders bei Elementen, die eine Interaktion von mir erwarten wie Formulare. Deswegen musste eine konsistente mobile Version her. Deswegen konnte ich mir nichts Einfacheres vorstellen, als per CSS ein paar Media Queries dafür zu benutzen.


Beitrag veröffentlicht

in

von

Kommentare

25 Antworten zu „Responsives Webdesign Tutorial“

  1. Avatar von Marc
    Marc

    Bevor jemand fragt warum das Video schlecht abgefilmt ist und ich das nicht mit Quicktime Screen Recording aufgenommen habe: Bei mir flackerten alle Browserfenster in der Aufnahme bei Veränderung der Fenstergröße. Und weil ich das unbedingt als Video zeigen wollte, habe ich es kurzerhand aufgenommen.

  2. Avatar von Andy
    Andy

    Sehr feiner Artikel – das adaptive Design ist mir bei deinem Blog bereits aufgefallen, schnieke Sache. Ich mag Technik, die einfach „schön funktioniert“.

    Aber was ich ganz und gar schrecklich finde sind Viewport Definitionen mit user-scalable=0 … ich meine, was soll das? Ich MAG es, mit einem einfachen Pinch die Textgröße so anzupassen wie ich gerade Lust habe. Mir persönlich ist bspw die Textgröße hier im Blog etwas zu groß, weswegen ich stets ein wenig verkleinere. Das möchte ich aber bitte auf allen Geräten machen dürfen.

    1. Avatar von Marc
      Marc

      Kannst Du mir mal ein abforografiertes Bild twittern, schicken, faxen? Bitte kein Screenshot. Ich brauche einen Größenvergleich. Denn mir ist die Größe fast jetzt noch zu klein. Jedenfalls auf meinen Monitoren.

      Die Schrift bei den Kommentaren war im übrigen swirklich zu groß. Das ist nun korrigiert. =)

  3. Avatar von Denise
    Denise

    Danke Marc! Das werde ich mir genauer anschauen und versuchen in meinem Blog umzusetzen! Das responsive web design in Deinem Blog ist mir schon positiv auf dem iPhone und dem iPad aufgefallen! :-)

    1. Avatar von Marc
      Marc

      Immer gerne. =)

  4. Avatar von ben_
    ben_

    Das Zitat ist von keinem geringeren als Anne van Kesteren und lautet korrekt.

    Code to standards, not devices

    Einen wichtigen Nebeneffekt hast du allerdings außer acht gelassen, vermutlich, weil es für Dein Blog eh eine Rolle spielt, weil Du das schon richtig machst, erwähnen sollte man es aber dennocht: Wenn man über Media-Queries geht und nicht über Browsersniffing auf Server-Seite mit alternativen HTML ist man gezwungen, auch das HTML für alle Endgeräte zu optimieren. Das bedeutet zum einen, dass man es möglichst schlank halten sollte und zum anderen Irrwege des Webdesigns wie größere Mouse-Over-Aktionen.

    1. Avatar von Marc
      Marc

      Hi ben_,

      ja, Du hast natürlich recht. Für mich war das zu selbstverständlich, um es zu erwähnen. Es ist nun unter „gleiches HTML für alle“ mit drin.

      Das mit der Optimierung von Mouse Over Elementen, die auf Touch-Devices nicht so gut funktionieren ist schlicht noch nicht drin, weil ich noch zu faul war, das bei mir zu ändern. Was daran liegt, dass ich mir über die Struktur der Inhalte noch nicht ganz mit mir im reinen bin. ;-)

  5. Avatar von Marc
    Marc

    Bei Responsive Designs nervt leider die angegebene Höhe im HTML. Vorher habe ich das über jQuery gelöst. Mein neues WordPress Plugin MarcTV remove img height löst das Problem eleganter.

  6. Avatar von Ingo
    Ingo

    Kleiner Fehler bei iPad portrait: max-width: 1023px.

    1. Avatar von Ingo
      Ingo

      Big screens min-width: 1280px ist vielleicht auch gängiger?

    2. Avatar von Marc
      Marc

      Ja, das stimmt. Da gab es eine Überschneidung. Das Problem habe ich im Artikel geändert.

      Für die bigscreen Sache habe ich bewusst eine Auflösung gewählt, die etwas unter den 1280 liegt. Denn z.B. beim Mac macht man die Browserfenster normalerweise nicht auf die max. Auflösung. Jedenfalls ich nicht. Deswegen ist sie etwas kleiner. Letztendlich muss das aber jeder selber wissen.

      Danke für die Hinweise! Das hilft mir und anderen!

  7. Avatar von Mac
    Mac

    Es gibt eine schöne Designhilfe, die im FF kleinere Screens simulieren kann

    in die Lesezeichen ziehen und jede Seite wird entsprechend verkleinert dargestellt. Für den Gestaltungsprozess ganz hilfreich.

  8. Avatar von Attila
    Attila

    Marc, ich fand diese Artikel extrem hilfreich und habe Stunden damit verbracht wunderlich an meinem Browserfenster rumzuzupfen. Was machen wir denn jetzt wo das iPad nen Retina display bekommen hat und ne besser Aufloesung hergibt als nen 27′ imac? (2048-by-1536 resolution)

    javascript? das ist doch nicht elegant. Just wondering.

    1. Avatar von Marc
      Marc

      Interessante Frage. Bei Apple lief es in der Vergangenheit so: Das Retina Display vom iPhone 4 wird nicht wirklich über 960px selektiert sondern über 320px. Das steht auch im Artikel. Das hat Apple deswegen gemacht, um eine gute Abwärtskompatibilität zu ermöglichen.

      Ich gehe nun fest davon aus, dass dies bei den Browser auch Einzug halten wird. Wenn nicht, dann werden Prozentangaben wieder interessant. Besonders für Schriftarten wird das, wie hier im Blog, ja an anderen Stellen auch schon so gemacht. Das bedeutet aber auch, dass der Browser bzw. das OS bestimmen muss, was 100% sind. Jedenfalls müssen es viel mehr sein als bei einem normalen Display.

      Bei dem MacBook mit Retina Display, dass ich hier in Hamburg im Laden gesehen habe, waren die Webseiten tatsächlich viel zu klein. Jedenfalls im Chrome. Ich weiß nicht, ob Apple beim Safari so etwas wie „Mach alles 2 × so groß“ implementiert hat oder so etwas bald ins das MacOS integriert. Und wie sieht das dann bei Windows aus?

      Um es kurz zu machen: Ich halte es für den falschen Weg, wenn man über die Media Queries die Webseiten an die Retina Displays anpassen müsste. Letztendlich sollte man mehr Pixel pro Inch zur Verfügung haben und das sollte auch der Browser bzw. das OS automatisch umrechnen.

  9. Avatar von Alex
    Alex

    Hallo Marc,

    wirklich super Artikel.
    Ich hätte mal noch eine Frage zu den Media-Queries.

    Du hast die ja oben alle aufgelistet. Meist verwendest du feste Breiten. (768px – 1023px verwendet 768px als Breite). Gibt es dafür einen Grund bzw. könnte man auch gleich 100% nehmen?

  10. Avatar von Patrick Heintzmann
    Patrick Heintzmann

    Merci, die px-Angaben passen wunderbar.

    Beste Grüße

    1. Avatar von Marc
      Marc

      Freut mich wenn es hilft. =)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert