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.
Kommentare
Guido #
Geschrieben am 26.09.2013 um 02:00
@Peter:
Ich kann gerade nichts beim Verlag finden: Ist die PDF-Version mit irgendeinem DRM-Kram bestückt?
Peter #
Geschrieben am 30.09.2013 um 16:52
Nope, alles ohne DRM.
Andreas Sander #
Geschrieben am 29.09.2013 um 21:21
Bzgl. mobile Browser Bugs: Ich hatte mal ein Problem mit zwei nahezu identischen Windows Mobile 6.5 Phones, abgesehen vom Hersteller. Einer der IEs (beide mit absolut identishcer Versionsnummer!) zeigte die Zeilenhöhe doppelt so hoch an, wie der IE des anderen Gerätes.
Insgesamt stimme ich euch zu, dass der Safari einige hässliche Bugs besitzt, die tolle RWDs insbesondere mit absolut oder fixed positionierten Navigations-Elementen beim Scrollen ziemlich schlecht aussehen lassen. Mein „Lieblings“-Safari-Bug (für <= iOS6) ist die Einblendung der Apple-Tastatur in fixed positionierten Elementen. Dieser Bug macht alle Top-Bars mit Suchfeldern bzgl. Usability zu Nichte.
Zum Schluss: Vielen Dank für diesen Podcast! Macht mir immer sehr viel Laune euren Podcast zu lauschen, da ihr nicht nur auf Cutting-Edge Technologien, sondern auch auf Probleme im täglichen Agentur-Alltag eingeht. Dickes Lob an euch!
Schepp #
Geschrieben am 1.10.2013 um 20:24
Hey Andreas,
danke für die das In-den-Pott-Werfen dieser zwei Mobile-Browser-Bugs! Windows Phone 6.5 ist allerdings auch ziemlich hardcore – das ist ja fast wie sich die Fußnägel ziehen lassen :)
Und ein noch viel größeres Danke für das positive Feedback. Freut uns, wenn wir den einen oder anderen Nerv treffen!
RSS-Feed zu diesem Beitrag
Kommentare sind für diesen Beitrag geschlossen.