Media Querries spielen beim Open eMag eine wichtige Rolle, über diese Querries lässt sich das Layout (nicht nur) für Mobile Endgeräte steuern. Gerade bei Photos die richtige “mobile” Skalierung wichtig. Die Photos sollen ja in voller Größe und Bildschirm füllend angezeigt werden können.
Das Problem ist, dass die Vorlage für das Open eMag eine auf ein Format von 1024 x 768 (r2) optimiert ist, eben für Apples IOS Geräte. Zu Anfang war auch nie geplant gewesen , dass Open eMag für Android Geräte verfügbar zu machen. Das hat sich im Laufe der Zeit aber geändert, wenn das Open eMag schon als PDF und IOS App erscheinen soll, dann bitte auch für Android.
Für die Apple IOS Geräte benötigt man nur 3 Media Querries, damit hat man schon alles erschlagen, bei Android Geräten ist das nicht so einfach. Die Hersteller von Android Geräten verwenden sehr viele unterschiedliche Display Größe mit verschiedenen Pixel Dichten, was eine optimale Darstellung der Photos sehr schwierig macht. Jede Android Media Querry muss mit dem richtigen Skalierungsfaktor ausgestattet werden, damit alles passt.
Ich habe lange nach einem Programm gesucht, was mit die Tests der Querries erleichtert, bin aber nicht wirklich fündig geworden. Aus diesem Grund werde ich alles auf dem IOS und Android Emulartor testen müssen. Dafür habe die die Querries so angepasst, das zuerst einmal nur ein Text erscheint, der je nach Display Größe eine andere Farbe bekommt. Die Skalierung der Photos ist dann nur noch eine reine Fleiß Aufgabe.
Wenn erst einmal alles passt, dann kann ich diese Media Querries zusammen mit dem Baker und Friar Framework für viele verschiedene Open eMag Ausgabeformen verwenden. Zur Zeit basiert alles noch auf PDF und “Sigle-Site-Content”, das wird sich aber noch ändern. Geplant ist, dass es auch weiterhin Photos geben wird, diese enthalten aber keine Texte mehr, der Text getrennt vom Photo angezeigt. Die ganze Erstellung des Open eMag basiert dann rein auf HTML 5 und CSS3, es wird dann auch keine PDF Ausgabe mehr geben.
