senäh

17senäh und so…

CSS3 Logo Thumbnail

HTML/CSS/JS
06. Okt 2011
Kommentare: 0

Media Queries in der Praxis: Orientation

Kategorien: HTML/CSS/JS | 06. Okt 2011 | Kommentare: 0

Serie: Media Queries en détail erklärt

Yeah, Praxis! Heute beginne ich mit ein paar Praxisbeispielen für Media Queries. Dabei werde ich mich aber auf die Themengebiete beschränken, die für Webentwickler interessant sind. Zunächst werde ich mich der Orientation widmen. Let’s get ready to rumble! Durch das Orientation Media Feature könnt ihr überprüfen, ob der Viewport des Ausgabegerätes im Portrait- oder Landscape-Modus ist. (Ihr wisst nicht was ein Media Feature ist? Oder ein Viewport? Dann lest den vorigen Teil dieser Serie.) Portrait bedeutet, dass der Viewport höher als breit ist (oder genauso hoch wie breit) und Landscape bedeutet, dass er breiter als hoch ist. Durch dieses unterschiedliche Format kann es in vielen Fällen lohnenswert sein, den anzuzeigenden Inhalt anders darzustellen. Dies liegt hauptsächlich daran, dass Zeilen in einem Fließtext ab einer gewissen Länge schwerer zu lesen sind (Stichwort Lesbarkeit). Wenn ein Satz im Portrait-Modus vom linken bis zum rechten Bildschirmrand verläuft und dabei gut lesbar ist, muss dies nicht ebenso für den Landscape-Modus gelten. Es kann deswegen die Lesbarkeit verbessern, wenn man die Satzbreite im Landscape-Modus manuell und nicht durch die Breite des Bildschirms beschränkt. Was aber macht man mit dem gewonnenen Freiraum? Dies hängt ganz vom Anwendungsfall ab. Schauen wir uns mal ein paar Beispiele an.

Beispiel 1: Meta-Daten anzeigen

Stellt euch vor ihr würdet eine wissenschaftliche Arbeit in eine Internetseite umwandeln oder vielleicht ein Lexikon erstellen wollen. Der Fließtext sollte auf Grund der Länge eines wissenschaftlichen Textes besonders gut zu lesen und die Satzbreite deswegen nicht allzu breit sein. Aber sobald der Nutzer sich die Seite beispielsweise auf einem iPad im Landscape-Modus betrachten möchte, würde viel freier Raum entstehen, wenn man die Satzbreite nicht erhöht. Was tun? Man kann den Text mit weiterführenden Randnotizen füllen (=Meta-Daten). Die Randnotizen mitten im Text unterzubringen wäre ablenkend. Sie unter den Text zu schreiben nicht so sinnvoll, wenn sie sich auf einen speziellen Paragraphen beziehen und der Text sehr viele Paragraphen hat. Sie in jedem Fall anzuzeigen ist auch nicht notwendig, wenn sie nur weiterführende Informationen enthalten, die der Nutzer nicht unbedingt braucht. In so einem Fall bietet es sich an das Orientation Media Feature zu verwenden. Der Nutzer weiß: drehe ich mein iPad in den Landscape-Modus erfahre ich mehr. Auf diese Weise kann der Nutzer selbst entscheidend wie ausführlich die Informationen sein sollen, die er konsumiert. Die fertige Umsetzung könnte vielleicht so aussehen (Quelleder iPad-Grafik):

Orientation Beispiel 1 - Randnotizen

Orientation Beispiel 1 - Randnotizen

Die relevanten Stellen im Code sind einfach gefunden. Ich habe drei div’s:

  • #pageWrapper: Enthält die komplette Seite.
  • .articleContentText: Enthält den Fließtext.
  • .articleMarginalNote: Enthält die Randnotizen.

In der CSS lege ich als Standard folgendes Design fest (Code ist auf relevante Stellen gekürzt!):

#pageWrapper {
    width: 500px;
}
.articleMarginalNote {
    display: none;
}

Damit ist die Seite 500 px breit und die Randnotizen werden nie dargestellt. Der Fließtext breitet sich auf der ganzen Seite aus. Dies soll sich aber im Landscape-Modus ändern! Dann soll die Seite etwas breiter werden um Platz für die Randnotizen zu schaffen. Außerdem sollen der Fließtext und die Randnotizen dann optisch durch einen Strich getrennt werden. Dazu erstelle ich nach der obigen Beschreibung folgende landscape-spezifische Beschreibung mit einem entsprechenden Media Query:

@media all and (orientation:landscape) {
    #pageWrapper {
        width: 800px;
    }

    .articleContentText {
        float: left;
        width: 590px;
        padding-right: 9px;
        border-right: 1px dotted #aaa;
    }

    .articleMarginalNote {
        display: inline;
        float: left;
        width: 190px;
        padding-left: 10px;
    }
}

Fertig! Ihr könnt den Wechsel zwischen Portrait- und Landscape-Darstellung live im Browser testen. Öffnet einfach das Beispiel und verändert die Breite des Browserfenster. (Zieht vorher am besten das Fenster sehr groß. Der Orientation-Wechsel macht auf Tablets und Smartphones wesentlich mehr Sinn und lässt sich nur grob auf dem Desktop simulieren.) Das Anzeigen von Meta-Daten ist ein gutes Anwendungsbeispiel für Orientation-spezifische Darstellungen. Sie funktionieren besonders gut bei Single-Page-Apps (wenig Layout, im Prinzip nur simples sichtbar schalten der zusätzlichen Informationen). Angenommen wir haben eine flickr-App mit der ihr durch verschiedene Fotos stöbern könnt. Mit einer Wischbewegung wechselt ihr von Foto zu Foto. Im Portrait-Modus seht ihr das ganze Foto und im Landscape-Modus das ganze Foto mit zusätzlichen EXIF-Daten. Dies ist natürlich nicht immer sinnvoll (nicht alle Nutzer interessieren sich für EXIF-Daten, wollen aber vielleicht trotzdem den Landscape-Modus verwenden) und soll hier nur als Inspiration dienen.

Beispiel 2: Interface optimieren

Ihr könnt das Orientation Media Feature auch nutzen um das Interface einer Webapp anzupassen. Da jedes Interace immens vom Ausgabegerät abhängt, gehe ich in diesem Beispiel davon aus, dass ich die Auflösung des Ausgabegerätes kenne. Generell bietet sich das Orientation Media Feature hauptsächlich bei Geräten an, deren Bildschirmauflösung bereits bekannt ist. Dank Frameworks wie PhoneGap kann ich gezielt eine HTML5-Anwendung für ein bestimmtes Gerät schreiben. Im folgenden Beispiel gehe ich davon aus, dass ich einen Mail-Reader für das iPad entwickle.

Mein Mail-Reader soll je nach Portrait- oder Landscape-Modus ein angepasstes Interface besitzen. Der Portrait-Modus ist mein Lese-Modus. In diesem wird die Mail nahezu bildschirmfüllend dargestellt und es gibt nur zwei kleine Buttons, um zwischen den einzelnen Mails zu wechseln. Der Landscape-Modus ist mein Navigations-Modus und soll dazu dienen einen schnellen Überblick über die Mails zu erhalten und schnell zwischen diesen wechseln zu können. Deswegen gibt es von jeder Mail eine Vorschau in einer Liste durch die ich scrollen kann.

Dies könnte ungefähr so aussehen (seeeehr rudimentär):

Orientation Beispiel 2 - Mail-Reader

Orientation Beispiel 2 - Mail-Reader

Von der Darstellung sind vier div’s entscheidend, die entweder sichtbar oder unsichtbar geschalten und in der Größe verändert werden:

  • #pageWrapper: Enthält die komplette Seite.
  • .mailContainer: Enthält die einzelne Mail.
  • .mailList: Enthält alle Mails in einer Vorschau.
  • .mailBrowser: Enthält zwei Buttons um die vorige bzw. nächste Mail auszuwählen.

Und jetzt folgen die relevanten Teile im CSS-Code. Dieses Mal gehe ich übrigens davon aus, dass der Landscape-Modus der Standard-Modus ist.

#pageWrapper {
    height: 700px;
    width: 950px;
}
.mailContainer {
    width: 750px;
}
.mailList {
    /* Ist bereits sichtbar. */
}
.mailBrowser {
    display: none;
}
@media all and (orientation:portrait) {
    #pageWrapper {
        width: 750px;
        height: auto;
    }

    .mailContainer {
        width: 730px;
    }

    .mailList {
        display: none;
    }

    .mailBrowser {
        display: inline;
    }
}

Und hier das entsprechende Live-Beispiel. Denkt daran, dass es in einem Browser nur bedingt Sinn macht. Eigentlich soll es ja auf einem iPad laufen. Deswegen zum Beispiel die feste Seitenbreite…

So viel zum Orientation Media Feature. Ich hoffe, ihr konntet euch etwas Inspiration abholen 😉 Generell lässt sich sagen, dass dieses System größtenteils (oder nur?) auf tragbaren Geräten sinnvoll eingesetzt werden kann und nur wenn man die genaue Beschaffenheit (Displaygröße!) des Ausgabegerätes kennt. Ansonsten sollte man lieber width/height bzw. device-width/device-height verwenden um die Darstellung der Webseite oder Webapp anzupassen. Zu diesem Thema werde ich mich vielleicht auch noch einmal äußern, aber dann wahrscheinlich ohne Praxisbeispiele. Andere Blogger haben schon genug über width/height geschrieben – da muss ich das Rad nicht neu erfinden. Nur das Orientation Media Feature ist in letzter Zeit etwas untergegangen.

Autor: Pipo

...kommt ursprünglich aus der Designerecke, ist aber im Laufe seines Studiums in die Webentwicklung gestolpert. Kann sich seit dem nicht so richtig entscheiden wo er hingehört und wagt deswegen vielleicht die Flucht nach vorne in ein komplett neues Gebiet. Vielleicht Management? Niemand weiß es. Auch er nicht.