Das mobile Web sollte für alle da sein

Aktualisierung vom 4.8.2014 – Entwickler können sich diese Neuheiten ab sofort in der Windows Phone Developer Preview ansehen oder den Windows Phone 8.1 Update Emulator herunterladen. Ausführliche Informationen zu den in diesem Beitrag beschriebenen Plattformänderungen finden Sie im MSDN. Außerdem haben wir aktualisierte bewährte Methoden bezüglich der Aktualisierung eigener Websites zur Unterstützung von Standards veröffentlicht.

Windows Phone 8.1 Update enthält Hunderte Optimierungen an Internet Explorer 11, die die Kompatibilität im mobilen Web deutlich verbessern.

Anhand Ihres Feedbacks haben wir uns entschieden, IE-Anwendern eine Webnutzung zu ermöglichen, die der auf iOS- und Android-Geräten entspricht, auch wenn dies Funktionen erfordert, die nicht den Webstandards entsprechen. Unsere Ansicht nach handelt es sich um einen pragmatischen Ansatz hinsichtlich des mobilen Webs, in dem weniger auf Standards geachtet wird.

Wir haben über 500 der beliebtesten mobilen Websites getestet und festgestellt, dass das IE11-Update die Nutzung von 40 % dieser Websites optimiert.

Beispielsweise sah „www.twitter.com“ mit IE11 bislang so aus:

Windows Phone 8.1

Hier die Darstellung in IE11 mit dem Update, unter Firefox OS und auf einem iPhone:

Windows Phone 8.1 Update

Firefox OS

iPhone mit iOS 7

Entsprechend wird „www.baidu.com“ mit IE11 und unter Firefox OS folgendermaßen dargestellt:

Windows Phone 8.1

Firefox OS

Hier die Darstellung in IE11 mit dem Update und auf einem iPhone:

Windows Phone 8.1 Update

iPhone mit iOS 7

Analyse der beliebtesten Websites

Im Gegensatz zu den eher standardbasierten „Desktop-Websites“ sind die meisten modernen Websites für iOS und das iPhone ausgelegt. Dies führt bei Benutzern anderer Geräte oftmals zu Einschränkungen.

Vor einigen Wochen haben wir über unsere Vorstellungen und Prioritäten für das Web berichtet. Wir sind der Meinung, das „das Web für alle da sein sollte – für Benutzer, Entwickler und Unternehmen.“ Wir haben untersucht, wie wir die Funktion mobiler Websites für unsere Benutzer verbessern können.

Bei der Untersuchung der weltweit beliebtesten mobilen Websites ergaben sich Gemeinsamkeiten bei den Problemursachen. Websites verwenden oftmals minderwertigen Code zur Browsererkennung, der dazu führt, dass Windows Phone-Benutzern die Desktop-Website angezeigt wird. Desktop-Websites sind in der Regel größer, werden langsamer geladen und verursachen daher im Rahmen von Datentarifen höhere Kosten. Bei diesen Websites wird die Schrift besonders klein dargestellt, was hohen Zeitaufwand durch Zoomen und Verschieben verursacht. Außerdem wird die Verwendung einer Maus vorausgesetzt, was den Umgang mit Menüs und Formularen erschwert.

Die RTM-Version von Windows Phone 8.1 verwendete dieselbe schnelle, standardbasierte IE11-Browserengine wie die PC-Version von IE auf dem Desktop. Seit einigen Jahren haben wir die Bereitstellung desselben Markups für alle Browser mithilfe von Funktionserkennung und angemessener Reduzierung propagiert. Obwohl noch immer nicht alle Desktop-Websites diese Idee umsetzen, hat sich hier die Lage verbessert. Im mobilen Web sieht dies jedoch völlig anders aus. Zahlreiche Websites verwenden Funktionen mit veraltetem anbieterspezifischem Präfix, unterstützen jedoch nicht die Standardversion ohne Präfix bzw. unterstützen anbieterspezifische Präfixe nur für bestimmte Geräte. Andere Websites verwenden nicht standardkonforme proprietäre APIs, die nur Safari oder Chrome unterstützen. Selbstverständlich gab es auch Bugs in IE oder es fehlten schlichtweg Funktionen, was bei mobilen Websites, die für die Browser der Konkurrenz entwickelt wurden, besonders offensichtlich war.

Aktualisierung von Internet Explorer in Windows Phone 8.1 Update

Wir haben all diese Kompatibilitätsdaten gesammelt und die erforderlichen Änderungen an IE vorbereitet. Der verbleibende Teil dieses Beitrags befasst sich mit einigen der wichtigsten Änderungen und den Ursachen, die diese Änderungen erforderlich gemacht haben. Die Probleme mit mobilen Websites lassen sich grob in fünf Kategorien unterteilen:

• Fehlerhafte Browsererkennung, durch die IE nicht als Mobilgerätebrowser erkannt und dadurch die Desktop-Website bereitgestellt wird
• Verwendung veralteter Funktionen mit WebKit-Präfixen, die durch Standards ersetzt wurden
• Verwendung proprietäter Funktionen mit WebKit-Präfixen, für die keine Standards vorhanden sind
• Verwendung von Funktionen, die IE nicht unterstützt und nicht angemessen reduzieren kann
• Interoperabilitäts-Bugs und Implementierungsunterschiede in IE

Ändern der Zeichenfolge des Benutzer-Agenten

Einer der auffälligsten Fehler, den wir auf Websites feststellen konnten, war die Tatsache, dass IE unter Windows Phone nicht als Mobilgerätebrowser erkannt und deshalb die Desktop-Website bereitgestellt wurde. Dadurch wurden die Websites oft mit zu kleiner Schrift dargestellt, sodass beim Lesen Zoomen und Verschieben erforderlich waren. Außerdem wurden dadurch oftmals mehr Daten über die Datenverbindung des Smartphones übertragen, da es sich um nicht für Mobilgeräte optimierte Inhalte handelte. Die Bilder sind groß und außerdem werden wesentlich mehr Werbeanzeigen heruntergeladen und eingeblendet.

Es gibt verschiedene Möglichkeiten, mit denen sich ermitteln lässt, ob eine Website für Mobilgeräte bereitgestellt werden soll. Hier ist eine dieser Überprüfungsmöglichkeiten, die wir auf einer Website im Internet gefunden haben:

window.mobileCheck = function() { var check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; }

Wir haben die Zeichenfolge des Benutzer-Agenten in IE unter Windows Phone aktualisiert, um die Anzahl der Websites zu erhöhen, die für Mobilgeräte optimierte Inhalte bereitstellen. Dies setzt ein unerfreuliches Muster fort, das alle Browser betrifft und den meisten Entwicklern bekannt ist. Beispielsweise gibt es eine interessante Diskussion aus dem Jahr 2006 in einem WebKit-Bug mit dem Titel „Safari lies. Reports itself as Mozilla, Gecko and KHTML too“. Bei der Veröffentlichung von IE11 für den Desktop hatten wir den Zusatz „like Gecko“ zu der Zeichenfolge hinzugefügt, da dieser die Kompatibilität mit Desktop-Websites deutlich verbessert. Chrome und Opera geben vor, Inhalte wie Gecko und Safari zu verarbeiten, um Kompatibilität mit Webinhalten zu erzielen.

Wenn Sie „www.hawaiianairlines.com“ mit IE11 und Firefox OS aufrufen, wird die Desktop-Website angezeigt:

Windows Phone 8.1

Firefox OS

Hier die Darstellung in IE11 mit dem Update und auf einem iPhone:

Windows Phone 8.1 Update

iPhone mit iOS 7

Wenn Sie „www.nytimes.com“ mit IE11 und Firefox OS aufrufen, wird ebenfalls die Desktop-Website angezeigt:

Windows Phone 8.1

Firefox OS

Hier die Darstellung in IE11 mit dem Update und auf einem iPhone:

Windows Phone 8.1 Update

iPhone mit iOS 7

Im Allgemeinen raten wir zur Entwicklung flexibler Websites, die sich an die Funktionen unterschiedlicher Geräte anpassen. Wenn Sie eine Website für Mobilgeräte erstellen, empfehlen wir die Suche nach der Unterzeichenfolge „mobile“ in der Zeichenfolge des Benutzer-Agenten, um zu ermitteln, ob für Mobilgeräte optimierte Inhalte bereitgestellt werden sollen.

function isMobile() {     return navigator.userAgent.toLowerCase().indexOf("mobile")>=0; }

Zuordnung von veralteten Funktionen mit WebKit-Präfix zur IE-Implementierung

Im Anschluss an die Änderung der Zeichenfolge des Benutzer-Agenten, dank der IE dieselben Inhalte erhält wie andere Smartphone-Browser, können wir mit der Analyse der Probleme beginnen, die auf Websites für Mobilgeräte auftreten. Bei ersten wichtigen Problem handelt es sich darum, dass viele Websites für Mobilgeräte lediglich Inhalte mit WebKit-Präfix für CSS-Farbverläufe, -Flexbox, -Übergänge und -Animationen bereitstellen. Deise Funktion unterstützt die webstandardbasierte IE11-Engine bereits für Websites mit browserübergreifendem Markup. Laut Mozilla kommt WebKitCSSMatrix häufig auf Mobilgeräten zum Einsatz. IE unterstützt MSCSSMatrix. Des Weiteren verwenden zahlreiche Websites window.orientation anstelle des kommenden Standards screen.orientation. Das zweite Problem besteht darin, dass im Website-Code häufig veraltete Syntax zum Einsatz kommt, beispielsweise die alte Syntax für Farbverläufe anstelle des aktualisierten, standardbasierten Verfahrens.

In Windows Phone 8.1 Update haben wir die in IE11 bereits vorhandene Unterstützung standardbasierter Syntax häufig verwendeten APIs mit WebKit-Präfix zugeordnet. Dadurch werden Websites, die lediglich WebKit-Code senden während des Ladevorgangs in standardbasierten Code übersetzt. Die Unterstützung sämtlicher APIs mit WebKit-Präfix ist nicht geplant. Wir haben diejenigen zugeordnet, die für das mobile Web unverzichtbar sind.

Beispielsweise sieht „www.macys.com“ in IE11 so aus:

Windows Phone 8.1

Hier sehen Sie die korrekte Darstellung der Farbverläufe in IE11 mit Update und auf einem iPhone:

Windows Phone 8.1 Update

iPhone mit iOS 7

Beispielsweise sieht „www.answers.com“ in IE11 so aus:

Windows Phone 8.1

Hier sehen Sie die korrekte Darstellung der Website in IE11 mit Update und auf einem iPhone:

Windows Phone 8.1 Update

iPhone mit iOS 7

Unterstützung für nicht standardmäßige, proprietäre Funktionen

Eine geringe Anzahl nicht standardmäßiger Funktionen, die Apple auf dem iPhone eingeführt hat, erwies sich als weit verbreitet. Eine Standardisierung dieser Funktionen ist nicht geplant, jedoch sind nur Browser, die diese Funktionen unterstützen, in der Lage, wichtige mobile Websites korrekt darzustellen. Ein Beispiel ist die Funktion -webkit-appearance, mit der Websites Elemente so umgestalten können, dass diese systemeigenen Apps entsprechen. Wie Mozilla hervorhebt, ist dies „nicht standardkonform und außerdem ergibt sich mit jedem Browser ein anderes Verhalten“. Leider ist die Verwendung von Websites ohne ein gewisses Maß an Unterstützung dieser nicht standardmäßigen Funktionen eingeschränkt.

Neue, in IE unterstützte Funktionen

Es gibt einige von IE11 bislang nicht unterstützte Funktionen, die auf Desktop-Websites nur selten Verwendung finden, dafür im mobilen Web umso häufiger eingesetzt werden. Wir haben beschlossen, diese Funktionen hinzuzufügen, da IE11 immer häufiger für mobile Inhalte verwendet wird. Beispielsweise ist window.locationbar Bestandteil von HTML5, wird für Desktop-Websites jedoch kaum genutzt. Wir haben die Implementierung mehrerer neuer Funktionen aufgrund deren Bedeutung für mobile Websites bevorzugt durchgeführt.

Eines der größeren Probleme im Zusammenhang mit APIs, das die Kompatibilität mit mobilen Websites beeinträchtigt, ist die Unterstützung für Toucheingabe. In IE10 wurden erstmals Zeigerereignisse unterstützt, die jetzt vom W3C mit dem Status „Candidate Recommendation“ geführt werden. In IE11 haben wir die Implementierung aktualisiert und Änderungen an der Spezifikation übernommen. Zeigerereignisse bedeuten zahlreiche Leistungs- und Funktionsverbesserungen hinsichtlich Websites, bei denen Maus-, Touch-, Stift- oder Zeigereingaben verarbeitet werden sollen. Wir empfehlen diese Methode weiterhin als beste API für Websites, die geräteübergreifend funktionieren sollen.

Im mobilen Web verwenden die meisten Websites das ältere Touchereignis-Model. Trotzdem erwarten Benutzer, dass die Websites funktionieren. Mit dem Update von IE11 werden jetzt auch diese Touchereignisse unterstützt, damit die entsprechenden Websites richtig angezeigt werden. Untersuchungen haben ergeben, dass die Aktivierung von Touchereignissen auf Geräten, die auch eine Maus unterstützen (beispielsweise Windows-Tablets und Two-in-One-Geräte), im Desktop-Web Probleme verursacht. Beispielsweise führt die Aktivierung der Touchereignisse dazu, dass auf etwa 10 % der wichtigsten Websites die Unterstützung für Maus und Trackpad verloren geht. Bei vielen Websites wird nicht davon ausgegangen, dass sowohl Touch- als auch Mausereignisse verwendet werden können. Diese Websites bieten daher nur Unterstützung für eine Möglichkeit. Wir haben uns mit anderen Browserherstellern zur W3C Touch Events Community Group zusammengeschlossen, die an der Lösung dieser Probleme für das gesamte Web arbeitet. Weitere Informationen zu Zeiger- und Touchereignissen finden Sie in diesem Beitrag.

Beseitigung der schwerwiegendsten Probleme bei der Interoperabilität

Bei der Untersuchung des Markups von Websites, die in Internet Explorer nicht richtig angezeigt werden, haben wir einige seltsame Probleme bei der Interoperabilität entdeckt. Beispielsweise lässt sich in anderen Browsern innerhalb von <a>-Links unabhängig auf <button>- und <label>-Elemente klicken, obwohl dieses Verhalten an keiner Stelle dokumentiert ist. Ein anderes Beispiel ist die Aktualisierungsunterstützung für <meta>-Elemente. Die HTML5-Spezifikation sieht "URL=" als Teil des Inhalts eines Elements vor, damit eine Weiterleitung zu einer anderen URL erfolgen kann. In anderen Browsern ist dies nicht erforderlich, wodurch diese nicht konforme Verwendung dazu führen kann, dass Seiten in IE ständig neu geladen werden.

Letztlich haben wir noch einige Bugs in der Trident-Engine entdeckt, die die Darstellung wichtiger mobiler Websites beeinträchtigt haben. Mit dem Update werden diese Bugs behoben. Zu diesen zählten beispielsweise Navigationsprobleme mit location.hash sowie CSS-Layoutprobleme, von denen beliebte mobile Websites betroffen waren.

Was Sie beitragen können

Viele der vorgenommenen Änderungen beziehen sich auf die Verarbeitung von veralteten Websiteinhalten bzw. solchen mit anbieterspezifischem Präfix. Die Unterstützung sämtlicher APIs mit anbieterspezifischem WebKit-Präfix ist nicht das Ziel. Wir werden uns weiterhin dafür einsetzen, dass diese Websites standardbasiertes Markup übernehmen. Zugleich ist die von uns hinzugefügte Unterstützung notwendig, damit das mobile Web schon heute für alle da sein kann. Auch Sie können helfen, wenn Sie auf Websites mit nicht standardmäßigem Code stoßen: Wir arbeiten zusammen mit Mozilla unter webcompat.com an der Erfassung defekter Websites. Diese Websites verursachen oft browserübergreifend Probleme in Firefox sowie IE und sollten gemeldet werden.

Als Webentwickler sollten Sie Ihre Website mit dem Scannertool unter https://modern.ie testen. Dieses Tool erkennt häufige Probleme in der Programmierung, einschließlich Problemen, die durch anbieterspezifische Präfixe verursacht werden, und hilft bei deren Behebung.

Alles in allem verbessern die Änderungen an IE in Windows Phone 8.1 Update die Kompatibilität mit den beliebtesten mobilen Websites erheblich. Das Update steht mit der Windows Phone 8.1 Developer Preview bereits zur Verfügung. Benutzer mit Windows Phone 8.1-Geräten erhalten das Update in den kommenden Monaten. Des Weiteren haben wir auf MSDN im IE-Entwicklerhandbuch eine Liste sämtlicher Änderungen veröffentlicht.

Stellen Sie Ihre Fragen auf Twitter @IEDevChat. Der nächste #AskIETweet-Chat findet heute (31. Juli) von 18:00 bis 20:00 statt. Markieren Sie Ihre Fragen mit #AskIE.

Adrian Bateman
Program Manager, Internet Explorer

Frank Olivier
Program Manager, Internet Explorer