Für das Passauer Uniradio habe ich für eine virale Kampagne (QR-Code-Flyer für eine Party) eine kleine HTML5-Seite gestaltet, zu der der Code führt. Es haben sich beim Zusammenstellen der Seite mehrere Probleme ergeben:
- Wie legt man am besten eine Anzeigengröße für mobile Seiten fest?
- Wie legt man die responsive Anzeige von Bildern fest, die in jedem Browser funktionieren?
- Wie fügt man eine mp3 mit dem Audio-Tag ein, die in jedem Browser funktioniert?
Der Audio-Tag
Um in HTML5 einen Audioplayer für eine MP3 einzurichten, benötigt man folgenden Code:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Wichtig ist, dass die Sound-Datei wie im Beispiel nicht nur den MP3-Link enthält, sondern auch einen OGG-Link, da Firefox keine mp3s auf diese Weise aus lizenzrechtlichen Gründen abspielen kann. Außerdem sollte man auch auf die Dateigröße der Sounds achten – gerade bei mobilen Devices, d.h. die minimal mögliche Bitrate nehmen, ohne dass die niedrigere Qualität wirklich auffällt.
Die responsive Anzeige auf mobilen Seiten
[AdSense-A]
Jedem HTML-Element (img, p, etc.), das im CSS eine feste Höhe oder Breite hat, wird genau diese Breite und Höhe bei der Anzeige auf mobilen Browsern haben, d.h. eine responsive Seite muss mit relativen Werten arbeiten, z.B. mit Prozentwerten oder em. Ich habe mich für Prozentwerte entschieden, da die einfacher zu handhaben sind und habe den body auf eine Weite (width) von 100% gesetzt und die einzelnen Inhalts-Bausteine in der Anzeige (div-Container) auf 80%. Damit konnte ich diese Bausteine mittig ausrichten.
Außerdem benötigt man den so genannten Viewport. Dieser regelt das Verhältnis Bildschirmgröße – Pixelanzeige. Bei mobilen Geräten ist das besonders wichtig, damit keine unnötigen Scrollbalken entstehen oder man erst reinzoomen muss. Bilder, die eine bestimmte Größe haben, können damit auch automatisch auf den Bildschirm angepasst werden. Ich werde hier keine ausführliche Erklärung machen, sondern nur zeigen, was ich eingesetzt habe (muss in den Header der HTML):
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
Beim Einsetzen des Viewport sollte man darauf achten, dass Bilder keine vordefinierte width und height im img-Tag haben, sonst klappt es teilweise nicht. Die width sollte pro Element im CSS mit width:100% geregelt werden.
Bilderanzeige bei Android Browsern
Auch wenn das oben beschriebene gemacht wurde, werden Bilder im Android Browser, z.B. beim Samsung Galaxy S2 nicht korrekt angezeigt, sondern falsch gecropped. Das liegt an der so genannten target DPI. Hier muss für die Anzeige in Android Browsern noch target-densitydpi=device-dpi eingefügt werden.
Hier die fertige Seite zum ansehen. Ich habe noch Open Graph Metadaten eingefügt, damit die Seite in Facebook auch etwas hergibt.
