Uncategorized

Heute was für alle Mobile / Responsive Interessierten. Hier hat sich jemand viel Mühe gegeben und ist zu einem sehr anschaulichen Ergebnis gekommen.

Heute mal an die Kollegen, die der Auffassung sind, lauter, schriller und bunter ist der letzte Weg die Aufmerksamkeit der User zu erhaschen. Schriller und bunter, nun von mir aus, wobei das oft nicht gerade von Einfallsreichtum zeugt. Ganz fürchterlich kontraproduktiv hingegen, sind Werbeanzeigen die Laut machen. Hier sollte man es doch halten wie bei der Bundeswehr, Maul erst aufmachen wenn man dazu aufgefordert wird, sonst gilt: S C H N A U Z E  H A L T E N. Wie kann ich einem Kunden ernsthaft Werbung anbieten, die die potentiellen Endkunden unaufgefordert (v)erschreckt? Was wird wohl die erste Intention sein, wenn beim entspannten surfen urplötzlich ein schallender Lärm aus meinen Boxen ertönt? Nun ich werde ganz sicher auf die Werbung aufmerksam, aber auch ganz, ganz sicher nicht im erhofften Maße. Die Werbung wird mit großer Sicherheit schnellstmöglich geschlossen und das einzige was mit dem in dieser Sekunde vielleicht erhaschten Namen des Werbenden verbunden wird ist Ärger und nichts anderes.

Also um Gottes Willen: Finger weg von Werbeanzeigen die beim überfahren mit dem Cursor, oder gänzlich ohne Zutun einen höllen Lärm verbreiten, das nützt niemandem. Es gibt hier durchaus viele andere Beispiele die ich an dieser Stelle lobend hervorheben möchte, nämlich in erster Linie natürlich jene die so etwas gar nicht nötig haben. Aber auch die, die schlicht und einfach einen kleinen Lautsprecher im Banner einblenden, der natürlich default auf – MUTE – steht. Es muss immer der Grundsatz gelten, dass man den Nutzer nicht in seiner Freiheit beeinträchtigen darf, was übrigens auch der Grund ist warum man auf solche Sachen wie „target=’_blank'“ weitestgehend verzichten sollte, aber anderes Thema. Beeinflussung: Ja, natürlich – Beeinträchtigung / Zwang: Keinesfalls.

Natürlich gibt es Ausnahmen, immer dann wenn ein Benutzer ohnehin gleich mit einer Audio / Video Wiedergabe rechnet, kann natürlich Werbung vorgeschaltet werden. Diese Möglichkeit wird inzwischen sehr oft bei Videos genutzt und ist natürlich völlig legitim.

Vor wenigen Tagen erschien nun der Internet Explorer 9 mit dem Microsoft nun endgültig (wieder) den Durchbruch schaffen will, die technischen Voraussetzungen sind gut. Der Oberfläche hat Microsoft eine strikte Diät verordnet, wie bei aktuellen Browsern üblich, ist hier Minimalismus angesagt. Die Entscheidung die Tabs neben die Multibar zu setzen, finde ich allerdings eher unglücklich, zumindest für Leute die gerne mal mehr als 5 Tabs offen haben (natürlich Auflösungsabhängig). Dies lässt sich allerdings einstellen und soll somit keine wirkliche Kritik sein, es ist nun auch keine schlechte Idee.

In Sachen HTML5 Unterstützung ist der IE9 hingegen Behauptungen von Microsoft eigenen Tests ungenügend, hier hätte man mehr erwarten dürfen, letzter Platz mit 130+5 Punkten im Test.

Ranking HTML5 Support (by html5test.com)

1. Chrome: 288+13 Punkte
2. Firefox 4 (RC): 255+9 Punkte
3. Opera: 244+7
4. Safari 5: 187+0 Punkte
5. Internet Explorer 9: 130+5 Punkte

Aber schnell ist er! zumindest spürbar schneller als der Vorgänger. Zudem wird nun, wie bei Chrome und Firefox, für jeden Tab ein eigener Thread angelegt, was in der Praxis einfach verhindern soll, dass eine Fehlerzhafte Seite, sprich ein abgeschmierter Tab, den ganzen Browser ins virtuelle Nirvana befördert.

Ranking Acid3 Test (by acid3.acidtests.org)

1. Chrome: 100/100 Punkten
2. Opera: 100/100 Punkten
3. Safari 5: 100/100 Punkten
4. Firefox 4 (RC): 97/100 Punkten
5. Internet Explorer 9: 95/100 Punkten

Bei diesen Ergebnissen sind meine lobenden Worte eingangs schon fast wieder in Frage gestellt, aber es geht doch gut voran, also darf man doch schon mal loben und muss nicht gleich wieder mit dem Knüppel draufschlagen. Die Jungs aus Redmond geben sich ganz offensichtlich Mühe und da kann man doch nur sagen: weiter so!

Übrigens, der IE9 ist auch in einer 64-Bit Variante verfügbar, allerdings ist von dieser Version offenbar abzuraten.

WebM by Google / HTML5 Video

Wie angekündigt stellt Google WebM für den Internet Explorer 9 zur Verfügung. Allerdings nicht wie zuerst angedacht per Browserplugin, sondern als Codec für die Betriebssysteme Windows Vista und Windows 7. Da der IE9 alle unterstützten Codecs vom Betriebssystem abgreift (per Media Foundation) und dieser nur auf den zuvor genannten Betriebssystemen lauffähig ist, gehen XP – User an dieser Stelle leer aus. Das die Nichteinigkeit über einen Codec für das HTML5 Video Format, dem Standard erheblich schadet ist mit Sicherheit unbestritten, aber wer hat ernsthaft etwas anderes erwartet?

Der aktuelle Stand sagt also:

• Kein H.264 (mehr) in Google Chrome, stattdessen WebM
• Standardmäßig kein WebM im Internet Explorer 9, stattdessen H.264
• Kein WebM für Apples Safari, hier wird ebenfalls auf H.264 gesetzt
• Opera und Firefox setzen ebenfalls auf WebM

Gehen wir nach den aktuellen Marktanteilen, hat WebM also die Nase eindeutig vorne, was natürlich nichts daran ändert, dass weiterhin Videos in beiden Formaten zur Verfügung stehen müssen.

Aktuell werden wir von neuen Browserversionen nahezu erschlagen, nicht jeder ist aber für Entwickler geeignet. Ich bin seit jeher ein großer Firefox Fan, prüfe aber regelmäßig was die Konkurrenzbrowser so bieten und bin zuletzt aufgrund einer solchen Prüfung immerhin ein Jahr lang bei Google Chrome gelandet. Was sind also die Vor- und Nachteile der einzelnen Kandidaten, schauen wir uns die großen Vertreter einmal genauer an.

Getrennter Privat und Webworker Browser? In der Theorie sicher eine sinnvolle Idee, praktisch zeigt sich aber das sich das ohnehin nicht strikt trennen lässt, weswegen man gleich auf eine Einzelbrowser Lösung setzen sollte, die aber gut Strukturiert sein will. Daher werde ich nachfolgend immer darauf achten, dass wir die Browser so einrichten, dass diese nicht mit Tools zugemüllt werden und somit performant und übersichtlich bleiben.

Wie zu sehen sein wird, unterscheiden sich die Konsolen der einzelnen Browser nur noch unwesentlich, alle sind inzwischen mehr oder weniger dem Beispiel von Firebug gefolgt. Ich stelle also eher Besonderheiten heraus.

Firefox

Angefangen mit dem Brangenprimus Mozilla Firefox, ich greife hier schon zu Version 4 da zum Zeitpunkt der Erstellung des Artikels bereits der erste Release Candidate erschienen ist, die Final somit kurz bevorsteht.

Von Haus aus bringt Firefox wenig bis gar keine Unterstützung für Entwickler mit, was ja auch nicht weiter tragisch ist, die meisten User brauchen einen schlanken Browser und keine Entwicklertools. Lösungen per Modul bieten sich also an, an vorderster Front „Firebug“. Außerdem ist das Add-On WebDeveloper ganz sinnvoll. Nachdem die AddOns installiert sind richten wir uns noch ein paar Shortcuts ein, um schneller Zugriff auf die Funktionen zu haben. Dazu einfach einen Rechtsklick in einem freien Bereich auf Höhe der Adressbar machen und „Anpassen“ wählen, hier ziehen wir uns nun einmal das „Element Suchen“ von Firebug rechts neben das Suchfeld und das Zahnrad-Icon vom WebDevoloper Modul. So behalten wir den Platz im Browser zum Surfen und haben trotzdem schnellen Zugriff auf die Funktionen.

Außerdem oft benötigt wird das „Fireshot“ (alternative: „Awesome Screenshot“) genannte Screenshot Modul, „MeasureIT“ als Lineal (noch kein FF4 Support) und „ColorZilla“ als Farbwähler.

Chrome

Nun zu Google Chrome, Chrome bietet von Haus aus eine sehr komfortable Entwicklerkonsole an, aufzurufen per [STRG]+[GROßSTELLTASTE]+[I]. Die Lösung ist sehr übersichtlich gestaltet, allerdings kann man sich dem Gefühl nicht erwehren das sich in Firebug etwas flüssiger arbeiten lässt. Vom Funktionsumfang her, kann man mit der Chrome Konsole ebenso arbeiten wie auch mit Firebug.

In Chrome ist weiterhin das Modul „Awesome Screenshot“, wesentlich moderner aufgemacht und mit größerem Funktionsumfang, das Pendant schlechthin für Fireshot im Firefox. Die vorhandenen Colorpicker für Chrome, funktionieren meiner Erfahrung nach miserabel, von daher verzichte ich hier auf eine Modulempfehlung. „MeasureIT“ hingegen gibt es ebenfalls für Chrome.

Internet Explorer

Bietet inzwischen ebenfalls eine integrierte Entwicklerkonsole, die es auch ermöglicht ältere Renderengines zu emulieren. Aufzurufen ist diese über [F12], die Möglichkeit der Emulation ist oberhalb zu finden „Browser Engine“ und „Document Mode“. Microsoft hat hier gleich noch einige Features integriert die auch das Web Developer Modul im Firefox bieten. Es lässt sich so beispielsweise CSS abschalten um den sauberen Aufbau seiner HTML Dokumente zu prüfen, Auflösungen lassen sich emulieren, links zur W3C Validierung stehen zur Verfügung, Lineal und Farbwähler sind vorhanden und vieles mehr.

In der CSS Konsole lässt sich per Rechtklick ein Selektor per „Add Rule“ hinzufügen, diesem dann wiederrum per „Add attribute“ Attribute, das bietet so keine andere Konsole. Allerdings ist mir diese Rechtsklick-Lösung zu umständlich, wenigstens Attribute sollten sich, wie in Firebug, per Doppelklick hinzufügen lassen.

Hier hat Microsoft gelernt, das kann man wirklich nicht anders sagen. Der IE9 hat an vielen Ecken, wie eben bei den Entwicklertools, zugelegt so langsam sehe ich tatsächlich wieder Hoffnung für den Microsoft Browser.

Opera

Opera 11 bringt ebenfalls von Haus aus eine Entwicklerkonsole namens „Dragonfly“ mit, diese lässt sich wie in Chrome auch per [STRG]+[GROßSTELLTASTE]+[I] aufrufen. Besonderheit ist hier, dass beim Aufruf sofort die DOM Elementauswahl gestartet wird, gewöhnungsbedürftig aber sinnvoll. Außerdem fällt sofort auf das eine Art Grid (Hilfslinien) angezeigt wird, keine Frage, sehr nette Hilfe zur Ausrichtung von Elementen.

Was mir hier fehlt ist die Möglichkeit den Element Style zu bearbeiten, zum Testen von Styles eigentlich unabdingbar. Außerdem wurde auf eine Autovervollständigung verzichtet und generell scheint mir das editieren von Stylesheets eher Benutzerunfreundlich, schade.

Fazit

Kurz und knapp: Firefox bleibt mein Favorit, als perfekte Kombination von Privat- und Webworkerbrowser.