Viewport resizer: Responsive Webdesign testen
Viewport Resizer ist ein kleines Browser-Bookmarklet, das beim Testen und Betrachten von Websites mit Responsive Webdesign hilft.
Viewport Resizer ist ein kleines Browser-Bookmarklet, das beim Testen und Betrachten von Websites mit Responsive Webdesign hilft.
Eine aktuelle Studie von strangeloop enthält interessante Anhaltspunkte über die Performance von mobilen Websites. Im Juli und September 2012 wurden mit aktuellen Geräten (iPhone 4 + 5, iPad 2, Samsung Galaxy S + S3 + Tablet) über 200 E-Commerce-Sites getestet. Die Fragestellung lautet dabei hauptsächlich, wie die Performance über eine Mobilfunkverbindungen ist.
Einige Erkenntnisse sind beispielsweise:
Darüber sind noch einige Statistiken enthalten, die über die reine Performance hinausgehen (z.B. wie viele Websites sind nicht mobile-optimiert? Wo werden Tablets hingeleitet? etc.).
Nach dem Artikel über Remote Debugging in iOS6 folgt eine kurze Anleitung, wie man ein solches Remote Debugging auch auf einem Android-Gerät durchführen kann.
Ich hatte bereits erklärt, wie man Bilder für das Retina-Display optimiert. Neu in iOS6 ist eine vereinfachte Syntax, um die Bilder in unterschiedlichen Auflösungen anzugeben.
Mit Adobe Edge Web Fonts startet Adobe einen neuen kostenloses Webfonts-Service.
Mit dem kürzlich erschienen iOS6 wurde endlich eine vernünftige Remote-Debugging-Lösung geschaffen, um eine Website zur Laufzeit zu untersuchen (wie von Firebug oder Web-Inspector auf dem Desktop gewohnt).
Mit iOS6 führt Apple die Smart App Banner ein. Im Folgenden der notwendige Quellcode, wie man dieses App-Werbebanner in die eigene (mobile) Website einbindet.
Viele HTML-Elemente von mobilen Websites werden automatisch auf Geräten mit Retina-Display optimal dargestellt. Nicht jedoch das canvas-Element.
Das HTML-Element canvas (vom engl. Wort für Leinwand) ist eine Fläche, auf der mit JavaScript gezeichnet werden. So werden beispielweise Grafiken, Linien, Kreise, Bèzierkurven oder Farbverläufe unterstützt. Wie auch Website-Bilder (PNG, JPG) für das Retina-Display optimiert werden müssen, so ist dies auch für canvas-Elemente auf iOS-Geräten erforderlich.
Es folgt ein Überblick, wie man das Canvas-Element für iOS optimiert — und dabei auch bereits die neuen MacBooks mit Retina-Display berücksichtigt.
Dieser Beitrag erklärt die unterschiedlichen Pixelangaben, um eine optimale Darstellung auf den hochauflösenden Retina-Display zu erreichen.
Im Artikel Website-Bilder für das Retina-Display optimieren hatte ich bereits zwei Methoden vorgestellt, wie die Bildqualität für iPhone, iPad und mittlerweile auch Macbook verbessert werden kann. Ergänzend hierzu noch einmal einige grundlegende Erklärungen.
Mit iOS 6 wird endlich das Hochladen von Bildern und Videos unterstützt.