Nützliche Websitetools

Bei der Entwicklung, Fehlerbehebung und Untersuchung von Websites stehen uns in der Webabteilung zahlreiche Tools zur Verfügung, welche unsere Arbeit erleichtern. So können wir unsere erstellten Seiten auf Herz und Nieren prüfen und stetig optimieren. Im nachfolgenden Beitrag wollen wir Ihnen unsere Favoriten der Websitetools vorstellen.

Tools, die Sie ganz leicht selbst anwenden können:

1. Entwicklerwerkzeuge

Die meisten gängigen Browser stellen Werkzeuge zur Verfügung, um die geöffnete Website zu untersuchen. So lassen sich Websitestruktur aufschlüsseln, JavaScript ausführen oder Cookies auf der Seite anzeigen. Das waren noch längst nicht alle Funktionen der sogenannten DevTools – aber die gängigsten. Es existieren noch unzählige weitere. Die meistgenutzten Entwicklertools in den Browsern heißen “Inspektor” (Firefox) und “Elements” (Chrome). Mit einem Rechtsklick auf einer beliebigen Stelle der aktuell geöffneten Seite und der Auswahl des erscheinenden Punktes “Untersuchen” oder “Element untersuchen” lassen sich diese Entwicklertools öffnen.

Entwicklertools

Zur Simulation und Überprüfung der verschiedenen Bildschirmgrößen an Smartphones und Tablets gibt es unzählige eigene Tools. Natürlich lässt sich einfach das Browserfenster verkleinern, um die responsive Ansicht kurz zu überprüfen.  Dies sollte aber wirklich nur ein schneller Check sein, denn diese Art ist nicht immer zu 100% zuverlässig. Um das responsive Design ordentlich zu überprüfen, möchten wir Ihnen ein spezielles Tool vorstellen: Ish.

Dabei handelt es sich um ein Tool, das von dem bekannten Entwickler Brad Frost kreiert wurde. In der am Browserfenster angedockten Leiste lässt sich an der linken Seite die URL einer Website einfügen. Auf der rechten Seite der Leiste lassen sich Pixelbreite und Höhe der Vorschau sowie andere hilfreiche Optionen einstellen. So generiert z. B. ein Klick auf „M“ verschiedene Breiten, die sich in einem festgelegten Bereich befinden. Da die Fensterbreite für eine Website nie wirklich vorhersehbar ist, lassen sich so am besten aussagekräftige Entscheidungen bezüglich des Layouts treffen.

2. Google Analytics und Matomo

Google Analytics und Matomo sind Tools, die es erlauben, verschiedene Zugriffszahlen einer Website zu verfolgen. So können Inhalte über einen bestimmten Zeitraum überwacht werden.

Es lassen sich beliebte Inhalte ermitteln und die Seiten nach Suchprinzipien optimieren. Google Analytics lässt sich, wenn man einen Google-Account besitzt, extrem schnell in die Website integrieren und zeigt massenhaft Nutzerdaten. Zu diesen Daten gehören z. B. Besucheranzahlen, eingegebene Keywords in der Suchmaschinen, Ladezeiten, aufgerufene Seiten, Geräteinfos (zu Betriebssystem, Browser, Browserversion), Aufenthaltsdauer auf der Seite und Absprungraten.

Datenschutzkonformer ist hier Matomo. Es bietet zwar nicht so viele umfangreiche Daten und ist etwas aufwendiger zu integrieren, aber dafür landen keine Daten auf Drittservern im Ausland, sondern auf den eigenen Servern.

Bei jeden Analysetool sind datenschutzrechtliche Dinge zu beachten. Bei Google mehr –  bei Matomo weniger. Diese müssen auf jeden Fall im Datenschutz der Website Erwähnung finden.

Website analysieren

3. SEO – Suchmaschinenoptimierung

Für eine SEO-Analyse empfehlen wir das Tool Seobility. Fügen Sie einfach die zu prüfende URL in das dafür vorgesehene Feld ein- der Check zeigt die OnPage Optimierungen dieser einen URL bzw. Seite.  Seobility offenbart dann, welche Punkte noch verbessert werden können, damit sich das SEO Ihrer Website verbessert. Für umfangreiche OnPage und OffPage sowie Keyword-Analysen lohnt sich die Anschaffung eines eigenen Accounts.

Häufig lassen sich nicht alle Tipps des Tools ausführen, da manche technische Lösungen schlichtweg nötig sind, damit die Seite einwandfrei funktioniert. Außerdem sollte man sich bewusste sein, dass die “100%” nicht ohne weitere Kosten und intensive Mühen zu erreichen sind.

4. Google Pagespeed

Über Google Pagespeed lässt sich die Geschwindigkeit einer Website und weitere Möglichkeiten zur Optimierung herausfinden. Allerdings ist Pagespeed seit letztem Jahr mit Vorsicht zu genießen, da es sich nun mehr nach Apps als auf traditionelle Websites ausrichtet. Auch hier lässt sich einfach die URL der entsprechenden Seite einfügen, um sie zu analysieren.

Ein kleiner Geheimtipp: Google hat neben Pagespeed noch ein weiteres Testtool. Dieses heißt „Web.dev„. Hier werden neben der Performance weitere Aspekte wie Accessibility, Best Practices und SEO (OnPage) getestet.

Tools, die wir gerne bei der Erstellung einer Website verwenden:

1. Visual Studio Code

Visual Studio Code ist ein offener, von Microsoft entwickelter Code-Editor. Hier wird der Code der Website geschrieben. Der Editor lässt sich über Erweiterungen individuell anpassen und bei Bedarf um viele zusätzliche Funktionen ausbauen.

2. Farb-Tools

Über den Farb-Kontrast-Checker lassen sich Farbkontraste auf Lesbarkeit untersuchen. Dies ist besonders wichtig, um Farbschemen zu finden, die auch Nutzer mit Farbsichtigkeitsproblemen gut erkennen können. Die Vordergrundfarbe und Hintergrundfarbe lässt sich im Hex-Format vergleichen.

3. Security

  • Über Webbkoll lassen sich Implementierungen von Sicherheitsprotokollen, Server-Einstellungen, HTTP-Header, externe Cookies und viele weitere wichtige Einstellungen der Seite und des Servers abfragen. Dazu muss man nur die URL der zu prüfenden Seite eingeben.
  • Sucuri scannt Ihre Website und den Server auf Sicherheitslücken. So wird beispielsweise empfohlen, die PHP-Version des Servers nicht nach außen dringen zu lassen, da sich so bei veralteten Versionen Sicherheitslücken schnell in Erfahrung bringen lassen. Auch in diesem Fall kann die Seite über die URL gecheckt werden.

4. CSS-Stats

CSS-Stats zeigt Ihnen, wie viele Style-Regeln für Ihre Website definiert sind. Je weniger, desto besser. Der Check erfolgt wieder über die Eingabe der URL.

Browsererweiterungen, die wir gerne einsetzen:

1. “Full Page Screen Capture” oder “Easy Screenshots”

Über diese Erweiterung lassen sich schnell und einfach Screenshots der ganzen Seite erstellen und in verschiedenen Formaten exportieren.

2. “Empty Cache” oder “Clear Cache”

Auf diese Weise löschen Sie den Cache der Seite mit nur einem Klick.

Tipp: Regelmäßiges Löschen des Caches nicht vergessen. Änderungen oder neue Elemente auf der Website werden oft zu 90% wegen des eigenen PageCaches nicht oder falsch angezeigt.

Websitetool Cache löschen

3. “WhatFont”

Damit lassen sich die Schriftarten der Seite ganz einfach und schnell herauslesen.

4. “Colorpicker”

Hiermit lässt sich der HEX-Wert der jeweiligen gewünschten Farbe ohne großen Aufwand kopieren. Dieses Tool funktioniert genau wie die Pipette bei den bekannten Design-Programmen wie Photoshop, Illustrator etc..

5. “Quick JavaScript Switcher“

Schalten Sie doch einfach mal ab und sehen Sie sich an, wie Ihre Website ohne JavaScript aussieht.

6. “Wappalyzer”

Der Wappalyer identifiziert viele eingesetzte Technologien auf einer Website. So lassen sich das verwendete CMS, die PHP-Version und viele andere Serverspezifikationen schnell einsehen.

Tools, wie Sand am Meer

Wie Sie nach Lesen dieses Beitrags sicherlich schon festgestellt haben, gibt es jede Menge Tools, die einem Entwickler bei der Optimierung einer Website unter die Arme greifen. Und das waren natürlich noch nicht alle. Wer im Netz nach hilfreichen Tools sucht, der wird auf eine große Masse stoßen. Mit unseren Vorschlägen konnten wir Ihnen hoffentlich ein gutes Starterset mit an die Hand geben – Nun heißt es ausprobieren und seine Favoriten finden!

Bildnachweis:

Bild-Nummer: 268829000 von fgnopporn, 234092335 von rh2010, 53665356 von jdwfoto stock.adobe.com

Picture of Maria Truckenbrodt

Maria Truckenbrodt

Hey, ich bin Maria und koordiniere als Leiterin der Webabteilung alles innerhalb und außerhalb des Teams. Am liebsten vertiefe ich mich momentan in Themen wie Usability und Projektmanagement und versuche dabei, das Beste für unsere Kunden und unser Team herauszuholen, denn im World Wide Web ist nichts unmöglich!
Suchen
Suche
Autoren

Wir denken strategisch, entwickeln systematisch und gestalten gewagt. Immer mit dem Ziel vor Augen, mittelständische Unternehmen zu besonderen Marken zu machen.

Webdesigner (m/w/d)

Wir entwickeln ganzheitliche Marketing-Konzepte für mittelständische Kunden aus dem (Genuss-)Handwerk. Unser Anspruch ist es, anders und laut zu gestalten, ganz nach unserem Motto ‚MOve Your Ass‘. Deshalb suchen wir ab sofort Verstärkung für unser Team.

Was wir suchen:

  • Eine herzliche und kollegiale Person, die unser Team verstärkt, mit uns lacht und mit der wir gemeinsam Herausforderungen angehen können
  • Fundiertes Wissen im Bereich der Gestaltung von Websites, Webshops sowie User Centered Design
  • UI & UX
  • Grundwissen in Suchmaschinenoptimierung
  • Gute Kenntnisse in HTML, CSS sowie SCSS
  • Gute Kenntnisse im Umgang mit Wordpress
  • Sicherheit im Umgang mit Adobe Creative Cloud, Schwerpunkt XD
  • Team- und Kommunikationsfähigkeit
  • Mut zu provokantem, polarisierendem und auffälligem Design

What you see is what you get:

  • Ein Team bestehend aus systematischen Marketern, leidenschaftlichen Programmierern und kreativen Designern, denen gemeinschaftliches Arbeiten, Zusammenhalt und Kollegialität sehr am Herzen liegen
  • Eine sehr gute Work-Life-Balance, die perfekt zu deinen Freizeitaktivitäten im schönen Frankenwald passt
  • Modernste Technik/Software und flexible Arbeitszeiten
  • Möglichkeit zum Homeoffice
  • Regelmäßige Kreativnachmittage zur Fortbildung und zum Austausch in der Gruppe
  • Agenturgedöns, wie Obstkorb, gefiltertes Wasser, Kicker und ab und an auch mal einen Hund, der auf deinen Füßen schläft