Kurzübersicht von Good Website Inspector, einem erweiterten Regelset für YSLOW, um HTML-/CSS-/Javascript-Code auf handwerkliche Fehler hinsichtlich SEO, Performance, Usability zu testen. In einfachen Worten wird auch für Technik-Laien erklärt, welches Optimierungspotenzial in Websites steckt und weshalb diese wichtig sind. Weitere Infos unter: http://www.goodwebsiteinspector.com

1. Good Website Inspector Qualitätskontrolle mit dem 08.12.2010 1 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media

2. Was ist der Good Website Inspector? FirefoxPluginbasierend auf AddOn-YSLOW & AddOn-Firebug Analyse des geladenen HTML-QuelltextesAnhand derzeit 42 Regeln wird der HTML-/CSS-/Javascript-Quelltext der geöffneten Seite hinsichtlich Performance, Usability, SEO und Qualität analysiert und bewertet Einfache Erklärung der RegelnDie Regeln, Optimierungshinweise und Gründe werden in verständlichen Worten auch für Nicht-Techniker beschrieben Installation unter:http://www.goodwebsiteinspector.com 08.12.2010 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media 2

3. Warum der Good Website Inspector? Verringerung der Kosten/Steigerung der Erlöse Erkennung der Schwachstellen im Code schon vor der Implementierung im CMS -> Änderungskosten gering! Schnellere Websites bedeuten mehr Umsatz!Siehe z.B. http://bit.ly/dpCtRR (Slide 60) Qualitativ hochwertige Websites haben oftmals geringere laufende Kosten durch konsequente Caching-Technologien oder weniger übertragene Bytes. Schnellere Websites bedeuten mehr User -> höhere Werbeerlöse 08.12.2010 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media 3

4. Warum der Good Website Inspector? Qualitätskontrolle der Agenturen Agenturen und ProduktmanagerInnen können selbständig kontrollieren, ob die erforderliche Qualität eingehalten wurde Mehr Sicherheit für ProduktmanagerInnen Ein Report mit aufgezeigten Schwachstellen bietet Sicherheit Erhöhte Nutzerbindung Durch schneller geladene Websites bleiben mehr Nutzer auf der Website Konkurrenzanalyse Was macht eine Konkurrenz-Seite besser als meine Seite? Die Antwort auf technische HTML/CSS/JS-Fragen bietet der Good Website Inspector 08.12.2010 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media 4

5. Wer sollte ihn nutzen? ProduktmanagerInnen Webentwickler Personen die Websites beauftragen und abnehmen müssen Personen mit Interesse an qualitativ guten und schnellen Webseiten 08.12.2010 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media 5

6. Installation Alle Schritte und direkte Links zu den aktuellsten Versionen der notwendigen Tools sind unter http://www.goodwebsiteinspector.com zu finden. Installiere die aktuellste Version von Firefox Installiere das AddOnFirebug Installiere das AddOnYSLOW Installiere das AddOnGood Website Inspector Download goodwebsiteinspector.xpi Ziehe goodwebsiteinspector.xpi in das Fenster von Firefox Folge den Installationsinstruktionen 08.12.2010 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media 6

7. Wie wird es benutzt? Im Firefox die Statusleiste aktivieren (Menü Ansicht->Statusleiste) Die zu überprüfende Seite im Browser aufrufen Fertig laden lassen!(Bis in der Statusleiste „Fertig“ steht) In der unten stehenden Statusleiste auf YSLOW klicken Regelset [GWI] Quality auswählen Button Run Test klicken Auswertungen lesen 08.12.2010 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media 7

8. Tipps & Tricks / Hinweise Startseiten bei größeren Websites schneiden immer schlechter ab, als Eintrags-/Artikelseiten Wenn Vergleich zwischen zwei Seiten, muss immer der gleiche Seitentyp miteinander verglichen werden. Beispiel: Nur Vergleich von Artikelseite Bunte.de mit Artikelseite Focus.de Um einen Gesamteindruck der Seite zu erhalten, sollten immer jeweils eine Startseite, Artikelseite, Galerieseite und statische Seite verglichen und ein Mittelwert aus den erreichten Punkten gebildet werden 08.12.2010 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media 8

9. Tipps & Tricks / Hinweise Wenn man sich nicht sicher ist, ob die Regeln stimmen, die Seite noch einmal mit hartem Reload (Strg+F5 / Cmd+Shift+R) neu laden und auswerten Seiten sollten immer mit den später tatsächlich geladenen Komponenten getestet werden (also inkl. Werbung und Widgets) Neben dem [GWI] Quality Regelset ebenfalls das Regelset Small Site or Blog testen, um weitere Optimierungshinweise zu erhalten komplette Auswertungen lassen sich über den Button PrintableView auch ausdrucken! 08.12.2010 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media 9

10. Wichtige Regeln sind Title-Tag Good URL Javascript: No document.write Javascript: Not placed in Head Javascript: Placed at bottom CSS: Avoid style attributes CSS: Place in documenthead Images: Use Alt and Title Attributes HTML: Avoid Table Layout HTML: Avoiddeprecated tags HTML: Avoiddeep <div> nesting HTML: Avoidlowcontent to tag ratio HTML: Avoid bad navigation Semantic: Use Headlines Semantic: Usesemantic tags 08.12.2010 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media 10

11. http://www.goodwebsiteinspector.com In Kürze alle einfach erklärten Regeln zum Nachlesen auch unter: 08.12.2010 http://www.goodwebsiteinspector.com – © 2010 Stefan Seifarth, Hubert Burda Media 11