Browserschlacht: Die Leiden eines Webdesigners und Webentwicklers

Nee, also Webdesigner oder Webentwickler möchte ich nicht sein. Neues Design in Photoshop und Co. zu gestalten ist vielleicht noch das einfachste an dem Job. Aber wenn es darum geht das Design in (X)HTML, CSS und Co. umzusetzen, wird einem schon mal mulmig. Schließlich gibt es nicht nur einen Browser am Markt, sondern gleich mehrere: Internet Explorer, Firefox, Safari, Opera und Chrome sind wohl die bekanntesten Vertreter. Hinzukommt das fast jeder Browser den Code anders interpretiert und dadurch dann auch anders darstellt. Schließlich benutzt jeder Browser eine andere Rendering-Engine: Firefox benutzt Gecko, Opera benutzt Presto, IE benutzt Trident und Safari/Chrome benutzen WebKit.
Ich glaube Firefox, Safari, Opera und Chrome sind da noch die unproblematischsten Vertreter, denn die Browser halten sich an die Standards. Anders beim Internet Explorer. Mit jeder neuen IE Version wurde auch immer wieder etwas an der Browser-Engine geändert, nicht immer positiv. Eine Website die mit IE 6.0 noch toll aussah, muss nicht auch mit IE 8.0 gut aussehen. Was kann man tun um sich schon im Vorfeld mit diesem Problem auseinander zu setzen?
Man sollt das Design mit möglichst vielen Browsern und verschiedenen Versionen testen. Mit Firefox, welcher den größten Marktanteil verbucht, ist das kein Problem. Man kann mehrere Versionen auf einem Rechner installieren und einzeln testen. Mit dem Internet Explorer wird das schon schwieriger. Hier ist der Browser mit dem OS etwas mehr verknüpft als gedacht. Es lassen sich nicht mehrere Versionen des IEs auf einem Rechner einfach so installieren. Windows XP wird standardmäßig mit IE6 ausgeliefert. Nun gibt es aber auch schon IE7 und IE8. Installiert man IE8, dann wird auch die Browser-Engine vom alten Browser komplett überschrieben. Nun könnte man sich 3 Rechner oder 3 virtuelle Umgebungen mit 3 unterschiedlichen IEs installieren. Dies kostet aber Zeit, Geld und Platz. Besser ist man aufgehoben, wenn man sich folgende Tools mal etwas näher anschaut:

Internet Explorer Collection
Bei dieser Lösung wird jede mögliche IE Version auf dem Rechner als standalone Version installiert. Jede IE Version ist anschließend einzeln ausführbar. Je nach verwendetem Windows gibt es den Internet Explorer ab Version 1.0 bis 8.0. Die aktuelle Version ist vom 01.Mai 2009.

Multiple IE
Auch hier werden die einzelnen IE Versionen einzeln auf dem Rechner installiert und können dann auch einzeln ausgeführt werden. Allerdings kann man hiermit nur die IE-Versionen 3.0 bis 6.0 installieren. Außerdem wird dieses Projekt nicht weiterentwickelt.

IETester
Mit dem IETester werden alle IE Versionen ab 5.5 in einem Programm vereint. Die Versionen können einzeln oder im Vergleich benutzt werden.

Expression Web SuperPreview
Auch aus dem Hause Microsoft hat man eine Lösung parat. Expression Web SuperPreview ist noch in der Betaphase und gibt es nur als englische Trial-Version. Macht bis jetzt einen gute Eindruck, aber warten wir mal auf die endgültige Version.

Wer keines dieser Projekte installieren möchte, dem bleibt nur noch die Nutzung von Browsershots oder IE NetRenderer übrig. Wie machen das eigentlich Webdesigner die einen Mac benutzen? Gibt es da auch sowas?

Websites beschleunigen

Eigentlich wollte ich mich heute hauptsächlich mit meinen beiden kleinen Projekten “Twitterwall für zu Hause” und “Stromsparender Homeserver” beschäftigen, aber irgendwie bin ich nicht dazu gekommen. Kaum hatte ich diesen Artikel über “WordPress-Websites beschleunigen” gelesen, musste ich mich auch gleich mit dem Thema beschäftigen. Dabei ist das nicht nur für WordPress-User gedacht, sondern generell für Websites interessant. Hab mich heute mal wieder in das Thema eingelesen und gleich einige Erkenntnisse in meinem Blog umgesetzt. Das Ergebnis kann sich sehen lassen und sicherlich kann man noch mehr rausholen, aber fürs erste sollte es reichen:

Ohne Optimierung

Durch diese Optimierung hat sich die Ladezeit des Blogs verringert und Traffic kann eingespart werden.

Mit Optimierung

Nicht alle Optimierungen können überall umgesetzt werden. Das ist abhängig vom verwendetem Hosting. Beim eigenen Server oder vServer lässt sicherlich mehr einstellen als bei einem Webhosting-Paket. Für eine WordPress-Installation empfehle ich die gängigen Plugins WP Super Cache (WP-Cache mit Zusatzfeatures), WP Widget Cache und Compress for WordPress 2.5. Die Cache-Plugins machen eigentlich nur caching. Das bedeutet sie speichern Seiten statisch ab. Somit muss nicht jede Website-Anfrage vom Server generiert (SQL Abfragen etc.) werden, sondern wird als statische Seite aus dem Cache geholt. Ändert sich etwas auf der Seite, so wird wieder eine neue Kopie der Seite statisch abgelegt.
Compress for WordPress 2.5 geht einen anderen Weg. Dieses Plugin komprimiert die Daten mit PHP und GZIP bevor diese vom Webserver zum Browser geschickt werden. Beides ins Kombination erledigt z.B. WP Super Cache.
Die Komprimierung der Daten geht eleganter wenn der Webserver das ohne ein Plugin erledigt. Allerdings muss man hier vollen Zugriff auf die Konfiguration des Webservers haben. Wer das nicht hat, der ist mit dem Plugin WP Super Cache oder Compress for WordPress 2.5 bestens ausgerüstet. Vorteil der Webserver-Varinate wäre, dass man kein zusätzliches WordPress-Plugin installieren muss und das der Server weniger blastet wird.

Um serverseitig die Daten komprimieren zu können, muss beim Webserver (Apache) das Modul mod_gzip oder mod_deflate geladen sein. Mit phpinfo(); kann man sich dies anzeigen lassen. Ist das jeweilige Modul nicht geladen, dann sollte es nachgeladen und konfiguriert werden. Wenn mod_deflate schon geladen ist, dann kann das Modul über die .htaccess-Datei  angepasst werden:

<FilesMatch "\\.(js|css|html|htm|php|xm)$">
SetOutputFilter DEFLATE
</FilesMatch>

Bei diesem Beispiel werden textlastige Dateien (anhand ihrer Endungen!) komprimiert ausgeliefert. Man kann dieses Bespiel natürlich auch noch mit den Endungen von Bildern (jpg|gif|png) ergänzen. Allerdings sind diese meistens schon komprimiert. Bringt also keine Punkte.
Wem die Endungen nicht gefallen und es lieber nach Filetyp haben möchte:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript

Was ich mir auch nochmal näher anschauen muss sind die Plugins WP Minify und CDN Tools. WP Minify basiert auf Minify und soll verschiedene CSS und Javascripte zusammenfassen und komprimieren. Das junge Plugin CDN Tools ermöglicht die Nutzung von Content Delivery Networks. Momentan unterstützt das Plugin aber nur Cloud Files. Bekanntester Vertreter von CDN ist Akamai. Allerdings nutzen das nur größere Firmen oder Institutionen.

Weitere lesenswerte Beiträge zu dem Thema: brightscape.net | jestro | betterexplained.com | PHP Performance | Yahoo Developer Network | G-Loaded! |Performance Tool and Web Page Speed Analysis

Diese Blogs haben auch optimiert: Bandscheiben-Blog | Blogoase |

WordPress Probleme gelöst

Seit meinem Upgrade auf WordPress 2.7.1 häufen sich hier im Blog auch die Probleme. Gestern habe ich endlich mal etwas Zeit für die Fehlerrecherche nutzen können.
Mein erstes Problem war, dass ich die Backend-Suche nicht benutzen konnte. Na ja, ich konnte schon, nur wurde ich immer per 301-Umleitung auf meine Startseite umgeleitet. Wie ich das herausgefunden habe? Ganz einfach. Durch das tolle Firefox-Plugin Live HTTP Headers. Das Problem wurde anscheinend durch das WordPress Plugin Meta-Robots, welches an sich nicht schlecht ist, verursacht. Seitdem ich es entfernt habe, klappt das jetzt auch wieder mit der Suche.
Das andere Problem scheint aber kein Problem mit einem WordPress Plugin zu sein. Beim “Erstellen” eines Artikels fehlen über den Editor “Hochladen/Einfügen” mit den entsprechenden Buttons. Außer mir haben das Problem noch einige andere Blogger. Leider lässt sich das Problem nicht richtig eingrenzen. Eventuell könnte es mit den Sachverhalt zu tun haben, das ich SSL fürs Backend nutze und das redirect nicht richtig funktioniert.  Im Firefox hat es immer nicht geklappt und IE immer. Allerdings habe ich jetzt da auch eine Lösung gefunden. Zumindest funktioniert diese bei mir. Dafür habe nachfolgende Befehle in der wp-config.php eingetragen:

define(‘FORCE_SSL_ADMIN’, true);
define(‘FORCE_SSL_LOGIN’, true);

Die erste Zeile hatte ich schon drin und die zweite habe ich aus der wp-config.php von meiner 2.6er Version. Mehr zu SSL und WordPress gibt es hier.

PortableApps auf dem USB-Stick installieren

PortablesApps.com Menü

Lange vorgenommen, heute endlich gemacht: USB-Stick mit PortableApps auszustatten. Da sich in letzter Zeit die IT-Anfragen/Probleme bei mir häufen, wollte ich mir einige wichtige Tools auf den Stick packen, damit ich die immer dabei habe ohne diese immer auf dem Rechner zu installieren.
Mittlerweile gibt es da einige brauchbare Lösungen: U3 (ist aber nicht mit allen Sticks möglich und ist meistens schon vorinstalliert), PortableApps.com oder PStart.
Ich habe mich für PortableApps.com entschieden, weil es für diese Lösung schon eine große Auswahl von Software und noch eine größere Entwickler-Community gibt.
Hierfür habe ich meinen USB-Stick (2 GB) neuformatiert (FAT32) und anschließend die “Platform Only” PortableApps.com-Installation runtergeladen. Vor der Installation sollte man sichergehen, dass der USB-Stick auch ein Laufwerksbuchstaben (z.B. Laufwerk Z:) bekommen hat. Die Installation ist einfach durchzuführen und als Installationslaufwerk sollte man seinen USB-Stick angeben. Man kann natürlich auch die anderen Suiten “Suite Light” oder “Suite Standard” nehmen, bei diesen Varianten sind schon einige Programme vorinstalliert. Ich wollte aber zum Beispiel kein OpenOffice auf dem Stick haben und mir die Anwendungen lieber selber zusammenstellen. Anschließend habe ich folgende Programme (als paf.exe) auf dem USB-Stick installiert:

• 7-Zip – das beste Packprogramm was ich kenne
• ClamWin – Clam AntiVirus für Windows
• Chromium – Internet Browser (die Google-Variante heißt Chrome)
• FileZilla – FTP-Client
• Eraser – Sicher löschen
• Firefox 3 – Internet Browser
• FoxitReader – PDF Reader
• FreeCommander – Dateimanager
• JkDefrag – Defragmentierungsprogramm
• Pidgin – Instant Messaging Client (früher Gaim)
• Notepad++ – Text-Editor
• Putty – SSH/Telnet-Client
• Spybot & Destroy – Spy- und Malware entfernen
• VLC – MediaPlayer (der eigentlich alles abspielt)
• WinDirStat – Speicherauslastung von Ordnern und Dateien
• WinSCP – SFTP-/SCP-/SSH-Client
• TrueCrypt – Verschlüsselung
• Recuva – Datenrettung
• Defraggler – Defragmentierungsprogramm
• CCleaner – Windows aufräumen
• InfraRecorder – Brennprogramm

Was hab ich nun davon? Der größte Vorteil für mich, ich brauch die Software nicht erst runterladen und auf dem Rechner installieren. Ich kann die Programme direkt von dem USB-Stick starten (ohne Spuren auf dem Rechner zu hinterlassen). Einziger Nachteil ist, dass die Programme nicht so schnell wie von Festplatte laufen. Aber das liegt an der Geschwindigkeit vom USB-Stick. Dies ist mir in diesem Fall aber egal. Jetzt bräuchte ich nur mal einen USB-Stick mit Schreibschutz-Funktion, damit dieser dann auch vor Viren etc. geschützt ist.

WordPress 2.6 Turbo oder nicht?

Nachdem ich nun auf WordPress 2.6 geupdatet habe, muss ich sagen das diese Version wirklich sehr stabil läuft und einen guten Eindruck hinterlässt. Leider sind anscheinend noch einige Plugins (z.B. WPG2) etwas inkompatibel, aber die neuen Plugin-Versionen kommen sicher bald.
Ich arbeite sogar mit dem neuen Turbo-Modus. Nutzt das was? Ich scheine wohl immer perfekte Verbindung (Bandbreite; Speed) zum Server zu haben, denn ich merke den Vorteil nicht! Sollte das mal offline probieren ;) Vielleicht macht Google Gears für WordPress keinen Sinn? Das Prinzip von Gears ist eigentlich klar: offline Nutzung von Diensten und Anwendungen; anschließender Sync mit der Onlinequelle.
Aber wer braucht das bei WordPress? Die Seiten aus WP würde ich sowieso immer aus einem Cache anzeigen lassen. Super Plugins dafür sind WP-Cache und WP-SuperCache. Aber hier geht es um das Adminpanel! Da brauch ich aber keinen Cache! Das läuft bei mir wie immer, aber der Einsatz von einem abgespeckten WP Adminpanel etc. z.B. mit WP-Lite ist empfehlenswert. Das reicht meistens schon aus.

Firefox3 ist da

und wenn man den bis morgen 19 Uhr runtergeladen hat, dann trägt der Download gleich noch zum Weltrekord(versuch) bei. Ich habe den Firefox3 vorhin erfolgreich und offiziel runterladen können. Ab heute 19 Uhr war aufgrund des enormen Ansturms auf den Download die Website kurzfristig nicht erreichbar. Aber nun scheint man das Problem in de Griff bekommen zu haben. Mal sehen ob es für einen Weltrekord reicht.
Einen Überlick zu Firefox3 gibt es per Screencast, wo die die Top10 der Features vorgstellt werden. Wie und was sich im Firefox3 alles geändert hat, zeigt die Firefox History. Aber es gibt auch schon einige Tipps zum neuen Browser.