Seite wählen

Nicht nur für mobile Endgeräte: Responsive-Web mit Media-Queries

von | Jan 31, 2013 | Development

Im Buzzwort-Bingo hat beim heutigen Blogpost ‚Responsive Web‘ zugeschlagen.
Nachdem Tablets und Smartphones in sehr kurzer Zeit zur potentiellen Zielgruppe für die meisten Webapplikationen gelten, geistert ‚Responsive Web‘ als Paradigma durch das Web – und meint damit eigentlich nur, dass man jetzt wirklich darauf achten sollte dass Webseiten auch auf kleineren Displaygrößen benutzbar sind. Man tut dem ganzen aber Unrecht wenn man es nur als Mobile-Thema abtut – auch wer ’nur‘ mit dem Desktopbrowser surft kann von den Techniken profitieren.
Kernelement des ganzen sind CSS Media Queries. Diese stellen im Grunde eine Verfeinerung der media-types da, die alle Browser (ausser IE, der kann es ohne Hacks erst ab Version 9) seit Urzeiten unterstützen. mit
@media print {
... CSS für Druckausgabe ...
}
@media screen {
... CSS für Bildschirmausgabe ...
}

… stellen unzählige Angebote bereits Ihre Druckseiten anders dar als die Browseransicht (z.B. andere Schriftgrößen).
Media-Queries gehen noch einen Schritt weiter: Mit ihnen kann man CSS in Abhängigkeit der Fenstergröße, der Bildschirmorientierung (z.B. wenn man das Tablet dreht), des Höhe/Breite Verhältnisses, der Pixeldichte und vielen mehr anpassen. Die Query
@media screen and (max-width: 1024px) {
... css ...
}

definiert z.B. Regeln,die nur dann gelten, wenn das Browserfenster 1024px klein ist und greift auch, sobald der Nutzer das Fenster kleiner zieht. Meistens sieht man so etwas wenn es darum geht Mobilgeräte zu unterstützen, z.B. indem Werbebanner anders angezeigt werden sobald ein Gerät mit bestimmter Pixeldichte und Auflösung auf die Seite kommt. Man muss sich jedoch bewusst sein dass auch ein Desktopbrowser mit den gleichen Eigenschaften gerade die Seite anschauen könnte. Einen eigenen Medientyp für Smartphones oder Tablets gibt es nämlich nicht.
Allerdings sind media-queries in variablen Umgebungen wie dem Desktop-Browser fast praktischer: Da die Fenstergröße hier von sehr groß bis klein variieren kann sollte man als Entwickler auf Skalierbarkeit achten. Das fängt bei Netbooks an, geht zu Nutzern weiter die auch mal ein einzelnes Fenster klein gezogen haben, bis zu der (nicht mal so unpraktischen) Split-View von Windows 8.
Hier kann man mit Media-Queries ohne viel Aufwand auf Größenänderungen reagieren und die Seite anhand des vorhandenen Platzes anpassen. Denkbar wäre es je nach vorhandener Breite z.B. Icons kleiner zu machen, Bereiche nicht mehr nebeneinander, sondern untereinander darzustellen, u.v.m.
Als Demo habe ich mal ein kleines (extrem gestyltes) Szenario erstellt. Zieht man das Result-Fenster kleiner, ändert sich die Icongröße, der Text wird abgeschnitten und nur bei Mouseover angezeigt.
Zwar ist das keine Wunderwaffe für alle Szenarien, gezielt eingesetzt kann man damit aber den vorhandenen Platz oft besser Ausnutzen – ohne massig JavaScript schreiben zu müssen.

1 Kommentar

  1. webDESIGNwerkstatt

    Eine sehr schöne Zusammenstellung der Grundlagen.
    Wir haben uns darauf spezialisiert, bei Eignung vorhandene Webseiten nachträglich responsive umzuschreiben. Das lohnt sich vor allem für Betreiber umfangreicher Seiten sehr.

    Antworten

Einen Kommentar abschicken

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

Mehr Beiträge zum Thema Development

Mein PHP-Trainingsprojekt

PHP Schulung Vor kurzem haben wir begonnen, eine neue Programmiersprache zu lernen – PHP. In der ersten Woche haben wir mit den Grundlagen wie Variablen, Arrays, Schleifen begonnen und uns schrittweise zu komplizierterer Syntax wie Funktionen, Objekten und Klassen...

check_prometheus ist jetzt öffentlich verfügbar!

Monitoring ist komplex, das wissen wir hier bei NETWAYS leider zu gut. Deswegen laufen in der Infrastruktur auch mal gerne mehrere Tools für die Überwachung. Zwei gern gesehene Kandidaten sind dabei Icinga und Prometheus. Icinga und Prometheus erfüllen...