Referenzen

SenSEO mit Druckansicht

SenSEO hat in seiner neusten Version einen Druckansicht-Button. Dieser öffnet einen neuen Tab mit einer druckerfreundlichen Ansicht der SenSEO-Analyse und der zugrunde liegenden Komponenten der aktuellen Seite.
Dieses Feature wird das letzte vor der Veröffentlichung von Version 1.0 sein. Sollten keine Bugreports aufschlagen, werde ich die Version in Kürze auf 1.0 hochsetzen.

Geschrieben von Nico Steiner in Referenzen um 22:30 | Kommentare (0) | Trackbacks (0)

Idee für neue Extension

Die Firefox-Extension SenSEO geht auf die Version 1.0 zu. Damit sollten dann so ziemlich alle Features abgedeckt sein, die eine solche Extension bereitstellen kann.
Pünktlich zur "Fertigstellung" von SenSEO hatte ich gerade eben eine Idee für eine neue Extension. Auch bei dieser soll es um die Analyse von Webseiten gehen - eine Recherche bei den Mozilla Add-ons hat gezeigt, dass bisher noch niemand auf meine Idee gekommen ist - juhu!
Mehr möchte ich erstmal nicht verraten - noch habe ich nicht eine Zeile Code geschrieben. Wenn mir die Idee in ein paar Tagen immer noch gefällt, lege ich los

Geschrieben von Nico Steiner in Referenzen um 23:59 | Kommentare (0) | Trackbacks (0)

"100% FREE" Softpedia Award für SenSEO

Kennt jemand das Portal Softpedia, das sich als "Free Downloads Encyclopedia" bezeichnet? Ich selbst habe dort noch nichts gedownloaded, aber vor ein paar Tagen erreichte mich folgende E-Mail:

[...] "SenSEO" has been tested in the Softpedia labs using several industry-leading security solutions and found to be completely clean of adware/spyware components. We are impressed with the quality of your product and encourage you to keep these high standards in the future.
To assure our visitors that SenSEO is clean, we have granted it with the "100% FREE" Softpedia award. [...]

Das klingt nicht übel. Weitere Informationen finden sich direkt bei Softpedia. Ich werde die schicke Award-Grafik auf http://www.sensational-seo.com zeigen - es sei denn, ihr belehrt mich eines besseren.

Geschrieben von Nico Steiner in Referenzen um 23:38 | Kommentare (0) | Trackbacks (0)

!important - go home!

Eine wirkliche Seuche für eine Frontend-Infrastruktur ist die Verwendung von !important-Regeln. Einmal damit angefangen, verbreitet sich diese Auszeichnung wie ein Geschwür in sämtlichen Stylesheets. Wirklich übel wird es dann, wenn Elemente ohne Angabe einer Klasse oder ID mit !important ausgezeichnet werden.

Wir haben in unseren Stylesheets momentan solch einen Zustand. Da es sich um sehr viele und teilweise komplexe Selektoren handelt, reicht es leider nicht, die Verwendung einfach zu verbieten. Es muss ein Zustand erreicht werden, welcher die Verwendung von !important nicht mehr "provoziert".

Folgende Dinge halte ich dabei für angebracht:

• Verwendung möglichst simpler Selektoren in Stylesheets, welche in mehreren Projekten in Form von Modulen verwendet werden (dies ermöglicht ein einfaches lokales Überschreiben)
• Genaue Kenntnis der CSS-Kaskade
• Kenntnis des Jasmin-Servlet-Algorithmus zur Festlegung der Stylesheet-Reihenfolge
• Workshops zu den beiden letztgenannten Themen
• Reporting der Verwendung von !important in Form einer Fehlermeldung

Es drängt sich natürlich sofort der Gedanke einer ähnlichen Behandlung des style-Attributs auf. Hier trifft jedoch Theorie auf die Praxis eines marketinggetriebenen Arbeitsumfelds. Das style-Attribut hat ebenfalls jede Menge Nachteile. Allerdings wirkt es sich immer nur auf ein spezielles Element aus und generiert dadurch nicht so unangenehme Seiteneffekte wie die !important-Regel.

Geschrieben von Nico Steiner in Referenzen um 00:00 | Kommentare (0) | Trackbacks (0)

Even Faster Web Sites - Jetzt bestellbar

Heute morgen lag Even Faster Web Sites - das neue Buch von Steve Souders - auf meinem Schreibtisch. Es geht wie schon beim Vorgänger High Performance Websites um Kriterien zur positven Beeinflussung der Website-Performance. Ein Blick ins Inhaltsverzeichnis des neuen Buchs verspricht einige spannende neue Blicke auf dieses Thema. Mehr Informationen finden sich in Steve Souders Blog.

Geschrieben von Nico Steiner in Referenzen um 00:24 | Kommentare (0) | Trackbacks (0)

Mozilla Frontend Code Standards

In den News des Webstandards Magazin habe ich einen Verweis auf die Mozilla Frontend Code Standards gefunden.

Wirklich sinnvoll und langfristig wertvoll finde ich folgende Punkte:

• Need to work on accessibility!
• No inline CSS & JS unless absolutely necessary
• Pages must validate.
• Use most meaningful tags for content
• Use least amount of selectors possible to allow for overriding
• Don't use !important
• Don't pollute the global namespace (put all functions into objects/closures)
• Make JS reusable as best as possible.
• Use .prototype for objects
• var your variables
• Follow Yahoo!'s 34 rules http://developer.yahoo.com/performance/rules.html
• Concat and minify JS & CSS
• Use ySlow to see where pages can be improved

Grund zur Diskussion gäben aus meiner Sicht auf jeden Fall folgende Standards (ich habe kurz angegeben, welche Probleme ich sehe):

• Pages must validate. Not a strict requirement. Some layouts can't be achieved without a few errors. (Da kenne ich keine Layouts, die invaliden Code erzwingen würden. Für eine automatisierte Prüfung wären solche Ausnahmen ungünstig)
• No separate stylesheets for any browser and no conditional statements. (Für Mozilla ist das vielleicht ok - für unsere Webseiten wird das noch so lange nötig sein, wie IE6 und IE7 signifikante Zugriffe generieren)
• Specify font sizes in EMs or % (Angaben in Pixel sind sehr viel pragmatischer. Mit modernen Browser-Zoom-Techniken sollten flexible Layouts obsolet sein)
• Standardize on jQuery? (Nö. Standardize on Qooxdoo)
• Don't include JS from 3rd party domains (Leider gibt es da jede Menge Tracking-Pixel-Scripte, die das nötig machen)

Diesen Standards würde ich unter anderem folgende eher allgemeinen Punkte hinzufügen wollen:

• Etabliere ein System zur Messung von Frontend-Metriken. Nur so bewahrst du den Überblick und findest Schwachstellen.
• Korrigiere diese Schwachstellen kontinuierlich.
• Etabliere Systeme zur zentralen Auslieferung aller Frontend-Ressourcen. Dadurch können Optimierungen an zentralen Punkten vorgenommen werden.
• Modularisiere, automatisiere und vereinheitliche Frontend-Elemente und mache sie global verfügbar.
• Dokumentiere alles und finde ein generisches System, um diese Dokumentationen zugänglich zu machen.
• Bereinige und formatiere Deinen Code wo es geht automatisiert. Wo es nicht geht, stelle verbindliche Regeln auf.
• Nutze Firefox-Extensions um Suchmaschinenfreundlichkeit, Zugänglichkeit und korrekte Semantik zu überprüfen.
• Automatisiere diese Überprüfungen wenn möglich und generiere daraus Frontend-Metriken.
• Etabliere Systeme, die dich über sämtliche Frontend-Fehler informieren (Fehlende Grafiken, fehlende Dokumente, JavaScript-Fehler, Validierungs-Fehler etc.). Nutze dazu auch die Live-Version deiner Projekte. Dort entstehen die unerwarteten Fehler.
• Korrigiere diese Fehler kontinuierlich
• Laß deine Systeme sämtliche unerwarteten Zustände kommunizieren. Dadurch können frühzeitig Probleme erkannt werden.
• Mach die Ideen der Webstandards zu einem zentralen Bestandteil deiner Arbeit. Die Einhaltung dieser Standards erzeugt zusammen einen größeren Nutzen als die Summe ihrer einzelnen Bestandteile, da sich diese untereinander begünstigen und verstärken.

Geschrieben von Nico Steiner in Referenzen um 00:02 | Kommentare (0) | Trackbacks (0)

Cheat-Sheets 2.0 umgesetzt

Ich hatte heute ein wenig Zeit und habe die Cheat-Sheets 2.0 umgesetzt. Im Prinzip sind alle Features implementiert, die ich in diesem Artikel bereits angedacht hatte.
Es fehlt noch die Bereitstellung der Styles an einer zentralen Stelle - das sollte allerdings recht schnell erledigt sein.
Wenn ich das richtig sehe, sind sämtliche bereits mit Word erstellten Cheat-Sheets auch mit dem neuen System realisierbar - dabei sollte die Umsetzung jedoch nur einen Bruchteil der Zeit in Anspruch nehmen, die für die Erstellung mit Word nötig war. Darüber hinaus ist mit der neuen HTML-Lösung eine viel größere Flexibilität gegeben und Anpassungen von bestehenden Cheat-Sheets sollten damit um einiges komfortabler werden.
Zur Veranschaulichung habe ich die alte Version (Erstellung ca. 2 Stunden) und die neue Version (Erstellung ca. 1/2 Stunde) verlinkt.

Geschrieben von Nico Steiner in Referenzen um 23:51 | Kommentare (0) | Trackbacks (0)