5202

ein Blog über technische Fragen zu Blogger

Anpassen von Blogger 'dynamic Views' an das iPad

von
Eigentlich wollte ich diesen Post im besten Denglish "Responsive Webdesign von Blogger-Layouts mithilfe von CSS3 Media Queries" nennen - alle Webdesign-Buzzwords auf einem Schlag! Der Post wäre der Hit geworden. Das ist ein sehr spannendes Thema und wer etwas über den komplexen Hintergrund von CSS3 Media Queries wissen will, kann sich auf den tollen Blog von Ellen Bauer umschauen.

Ich möchte eine kleine praktische Demonstration geben, wie Media Queries in den neuen 'dynamischen Views' funktionieren. Als Ausgangsproblem nehme ich mein Blog-Design, das auf dem iPad einige kleine Darstellungsfehler hat.

Das iPad hat zwei Darstellungsformen, nämlich Querformat [=landscape] mit 1024px*768px und Hochformat [=portrait] mit 768px*1024px Auflösung. Hier was mich stört und wie's danach aussehen soll;

VorherNachher
VorherNachher
Problem

- Im Landscape-Modus wird die Höhe/Breite des Hintergrundbildes nicht korrekt skaliert.
- Im Portrait-Modus schiebt sich die Suchbox über das Header-Bild
- Im Portrait-Modus wird die Höhe des Hintergrundbildes nicht korrekt skaliert.

Lösung

Der Hintergrund der Blogger-Layouts wird auf dem iPad grundsätzlich falsch skaliert. Fehler im System! Eine Hilfe ist die CSS Eigenschaft background-size, womit ich die Skalierung des Hintergrunds kontrollieren kann.

Die Searchbox hat im Header beim Portrait-Modus schlicht und einfach zu wenig Platz, also blende ich sie in diesem Modus aus. Ansonsten will ich sie behalten, nur im Portrait-Modus soll sie wegfallen. Wie funktioniert das?

Media Queries  

Media Queries sind eine Erweiterung des CSS-Standards, durch die ich für bestimmte Ausgabegerät jeweils eine eigene CSS definieren kann. Am ehesten sind Media Queries mit Konditionellen-Tags vergleichbar, nur das sie eingeschränkter sind und als 'Bedingung' lediglich verschiedene Werte der Ausgabegeräte abfragen. Die Syntax von Media Queries ist einfach, trotzdem sollte das ganze mit Bedacht eingesetzt werden. Das hier ist kein Webdesign-Tutorial, sondern nur ein praktisches Beispiel für den Einsatz von Media-Queries in Blogger, also nicht gleich übertreiben und vor allem am Schluss immer kontrollieren, ob damit wirklich das erreicht wird, was ihr eigentlich wolltet.

Einige wichtige Werte für die Abfrage von Media Queries

width [=Breite innerhalb des Browsers]
@media screen and (min-width: 768px) {
  ...
}
height [=Höhe innerhalb des Browsers]
@media screen and (max-height: 1024px) {
  …
}
device-width [=Breite des Geräts]
@media screen and (device-width: 768px) {
  ...
}
device-height [=Höhe des Geräts]
@media screen and (device-height: 1024px) {
 ...
}
orientation [=Ausrichtung des Geräts: Querformat (landscape) oder Hochformat (portrait)
@media screen and (orientation:portrait) {
   …
}
iPad allgemein
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
  ...
}
iPad landscape
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
and (orientation:landscape){
  ...
}
iPad portrait
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
and (orientation:portrait){
  ...
}
Anwendung

Media Queries gehören bei Blogger im Vorlagen-Designer in die Box 'CSS hinzufügen' - der packt das dann an die richtige Stelle. Angewendet werden Media Queries, indem ihr in der Box 'CSS hinzufügen' hinter der letzten geschweiften Klammer } des letzten Ausdrucks die Taste 'Eingabe' [Enter] drückt und anschließend 'Auf Blog anwenden' sichert. Auswirkung seht ihr erst mal keine, weil sich die Media Queries ja nur im jeweiligen Ausgabegerät auswirken, d.h. ob's funktioniert oder nicht, könnt ihr nur am iPad überprüfen. Zur Not gehe ich dafür in den örtlichen Apple-Shop und seh's mir dort an.

CSS

Im Media Query für den Landscape-Modus kachele ich das Hintergrundbild auf der Y-Achse mit background-repeat: repeat-y und skaliere das Bild mit background-size auf 100% Bildschirmbreit und automatischer Anpassung der Höhe zur jeweiligen Breite - sicherheitshalber formuliere ich die Syntax für background-size noch für Opera, Webkit und Firefox, immerhin gibt's von denen ja auch mobile Browser. Der IE verhält sich ab 'Mango' überraschenderweise standardkonform und versteht die Eigenschaft background-size - wobei es [noch] kein Tablett gibt, dass das unterstützt.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and 
(orientation:landscape){
body {
  background-repeat: repeat-y !important;
  -o-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}
}
Im Portrait-Modus kachele ich ebenfalls das Hintergrundbild und blende die Searchbox mit display:none !important; aus.

Als letztes Detail passe ich ganz leicht die Breite des Blogs für den Portrait-Modus an. Mein iPad hat in 'portrait' 768px Breite, der Artikel-Bereich vom Blog dagegen 700px Breite plus einem Padding von zweimal je 70px links und rechts - das kann nicht ohne scrollen funktionieren. Ich reduzier's, dass die Breite vom Blog genau in die Bildschirmbreite passt. Nur ein unbedeutender Schönheitsfehler, aber so gefällt's mir besser.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
and (orientation : portrait) {
body {
  background-repeat: repeat-y !important;
}
#search {
  display: none !important;
}
li.item {
  max-width: 690px;
  padding: 20px 39px;
}
.article {
  max-width: 690px;
}
}
Zusammenfassung

Media Queries sind in Zukunft eine spannende Sache und funktionieren auch in blogspot.com Blogs. Das Hintergrundbild von Blogger Layouts hat etwa z.Z. ein Darstellungsproblem auf dem iPad und wer das nicht mag, kann das mit einem Media Query angehen. 

Wie immer bei solchen Sachen gehört testen, testen, testen mit zum Spiel. Blogger ist nichts statisches und gerade die dynamischen 'Views' sind ständig im Umbruch und was heute funktioniert, kann morgen schon den Blog zerschreddern. Also bleibt aufmerksam und schaut euch euren Blog immer mal wieder auf den verschiedensten Browsern und Geräten an.

Eine Bitte hätte ich noch, falls hier irgendjemand mal vorbeikommt und ein Galaxy und/oder HTC Tablett bei der Hand hat, kann derjenige mir einen kurzen Kommentar hinterlassen, ob das auch auf Droiden funktioniert? Danke