Revision 137: Mobile Browser Wonderland

Aus Mangel an aktuellen Themen geben Peter, Stefan und der Schepp einen Rundumschlag zum Thema Mobile Browser. Wir plaudern fröhlich aus dem Nähkästchen, erzählen von unseren Erfahrungen und präsentieren die irrsinnigsten Browserquirks, die selbst dem IE6 alle Ehre gemacht hätten.

[00:00:17] News

Adobe Generator for Photoshop CC

Echtzeit Assets direkt aus Photoshop in eure App? Geht mit dieser offziellen Erweiterung von Adobe.

Schaunotizen

[00:05:00] HTML5 Video mit MP4

Schepp erzählt von seinen jüngsten Erfahrungen mit HTML5 Videos auf mobilen Browsern, und welche Browser sich trotz allen Vorkehrungen sich durch einen bestimmten Grund querstellen, wenn es um das Abspielen von MP4 geht. Peter und Stefan raten mehrmals falsch, die Lösung ist umso augenöffnender

[00:11:08] Scrolling

Schon mal eine Seite mit „tollen“ Scrollingeffekten auf iOS Safari angesehen? Scrolling blockiert den Render-Thread aus diversen Gründen, Abhilfe schaffen JavaScript Bibliotheken wie iScroll und Scrollability, aber auch nur bedingt, wie Stefan auf Android 2.x geräten schmerzhaft erfahren musste.

[00:18:07] Rendering Geschwindigkeit

Peter erzählt von seinen Kursen mit HTML5 Padawanen und wie sogar auf Desktop-Browsern keine ordentliche Renderperformance zustande kommt (Continuous Painting Mode ist des Rätsels Lösung). Schepp empfiehlt CSS Transforms statt herkömmlichen Positionierungsmöglichkeiten, wenn es um flüssige Animationen geht und predigt und erklärt Browser-Verständnis, wie in seinem letzten Artikel in der Screenguide.

[00:28:30] Debugging

Während man sich in den mobilen Urzeiten meist mit dem alert()-Debugger Abhilfe schaffen musste, gibt es jetzt mittlerweile ein paar sehr gute Tools, die einem dabei helfen. Command Line Tools Wasserfalldiagramme zu erstellen und im Web zu betrachten. Zu guter Letzt stellen wir noch das MIHTool vor.

[00:38:46] Mobile Safari, IE10 und die Android Eigenheiten

Wer aktuell für den iOS Safari entwickelt muss sich auf diverse IE6 und WWII Vergleiche einstellen. Wir plaudern über unsere Erfahrungen mit den verschiedenen Plattformen und deren Standardbrowsern und kommen zum Schluß, dass wir nur noch von IE6en umgeben sind. Außerdem erwähnen wir clevere Hacks, wie Peters IndexDB Polyfill, erwähnen das 300ms Klick Delay und welche Probleme man damit hat, und verdammen neue Browser, die selbst die einfachsten Viewport Anweisungen nicht ohne Extraeinladungen verstehen.

[01:08:57] Audio

Die Klammer schließt sich. War Video schon ein gebrochenes Ding, geht es mit HTML5 Audio weiter. Stefan erzählt von der Ein-Klick-Regel und erwähnt Soundsprites, und wir geben Hinweise auf Audio-Bibliotheken wie Howler, SoundManager2 und Roadie.js

[01:15:04] Get Firefox

Zu guter Letzt brechen wir noch eine Lanze für Firefox, dem mobilen Browser der im Moment wohl alles richtig zu machen scheint.

[01:16:55] Glücksrad

Das Template Element

Schepp erklärt uns das <template>-Element, mit dem wir kleine HTML Schnippsel für die spätere Verwerndung zwischenlagern können.

[01:21:00] Keine Schaunotizen

Canvas Inspection With Dev Tools

Der Titel sagt alles. Das geht jetzt, und ist echt prima.

border:none 2013

Apropos Mobile Devices. Die border:none aus dem Hause Thiele bringt zum Open Device Lab Day auch noch eine Minikonferenz mit hochkarätigem Line-Up und starkem Mobileinschlag.

ECMAScript 5

Peters aktuellstes Schriftstück aus dem Open Source Press Verlag könnt ihr hier finden.