Westernsattel

7 Webdesigner-Tooltipps für Google Chrome

Schon seit vielen Jahren verwende ich hauptsächlich den Browser von Google, Chrome. Ich bin darauf umgestiegen, weil er schnell ist und sehr benutzerfreundlich.

Besonders als Webdesignerin kann ich von seinen Stärken profitieren, denn nach einem Rechtsklick mit der Maus, erhältst du ein Menu. Dort kannst du “Untersuchen” auswählen und hast damit ein tolles Hilfsmittel, das dir hilft Fehler und Probleme bei deiner Website aufzuspüren.

Du hast sogar die Möglichkeit dort CSS-Anpassungen zu testen und so schnell, ohne immer wieder zur Website zurück zu müssen, herauszufinden was sich genau wie auswirkt.

Ohne diese Hilfe hätte ich deutlich länger, beim Erstellen von Websites und für meine Nerven wäre es auch gut

Und jetzt stelle ich dir noch einige Erweiterungen vor, die dir ebenfalls helfen Deine Homepage effizient zu bearbeiten:

ColorZilla

Du möchtest wissen welche Farbe das auf einer Website ist? Dann nutz einfach ColorZilla, du fährst mit der Pipette über die Farbe und schon bekommst du den exakten Hexadezimalcode. Du kannst dir sogar alle Farben einer Website auf einen Klick ausgeben lassen! Cool nicht?

ColorZilla

Eye Dropper

Eine alternative zu ColorZilla ist der Eye Dropper. Auch hier kannst du mit einer Pipette über die Website fahren und herausfinden, welche Farbwerte eine bestimmte Farbe genau hat. Danach bekommst du den Farbwert angezeigt und das in verschiedenen Formaten.

Eye Dropper

Farbwahl

WhatFont

Dir gefällt eine bestimmte Schrift auf einer Website? Aber wie findest du nun heraus welche das ist? Ganz einfach, wenn du WhatFont installiert hast. Ein Klick darauf und dann über die Schrift fahren und schon wird dir angezeigt welche Schrift dort verwendet wird. Um die Funktion wieder “loszuwerden” musst du nochmals auf das Symbol oben in der Browserleiste klicken.

WhatFont

Check my links

Links die ins Nichts führen sind für Besucher ärgerlich und doch passiert es recht schnell. Auch Google und andere Suchmaschinen schätzen es nicht ins Leere zu laufen. Mit dieser Erweiterung von Google Chrome kannst du eine einzelne Seite rasch überprüfen.

Check my links

Eine ganze Website damit zu überprüfen ist allerdings sehr zeitaufwendig. Je nach Grösse sogar fast unmöglich. Deshalb empfehle ich dir dafür W3C Link Checker: https://validator.w3.org/checklink Update 31.01.2018 / Siteliner funktioniert offenbar nicht mehr.

Dort kannst du deine komplette Website auf einen Rutsch überprüfen.

SEO Meta 1 Click

Die sogenannten Meta-Informationen sind für die Suchmaschinen, aber teilweise auch für die Menschen die deine Website besuchen sehr wichtig. Diese Erweiterung hilft dir dabei sie auszulesen ohne den Quellcode danach durchforsten zu müssen.

  • Eine Übersicht über alle Meta-Tags wie Description, Title und vieles mehr.
  • Sämtliche Überschriften der Seite.
  • Alle Bilder und ob du korrekt alt-Tag und Title vergeben hast.
  • Alle Links auf dieser Seite.
  • Open Graph-Angaben, das heisst was Facebook oder Twitter ausliest.
  • Und zuletzt findest du noch eine Liste mit weiteren Tools die dir helfen können deine Website zu verbessern.

SEO Meta 1 Click

Wenn du noch nicht ganz sicher bist was Metatags sind und wie sie dir helfen, dann schau dir doch dieses Video an:

Responsive Web Design Tester

Wie wichtig es ist, dass deine Website auch auf dem Handy gut aussieht, weisst du. Bei der Arbeit an der Website muss das deshalb immer wieder überprüft werden. Damit du das nicht immer mit dem Handy machen musst, gibt es den Responsive Web Design Tester. Damit kannst du auch andere Handys, Betriebssystem ja auch Tablets simulieren. Eine unverzichtbare Hilfe für alle Webdesigner.

Responsive Web Design Tester

Screenshots, “Fotos einer Website”  erstellen

Es kommt immer wieder vor, dass ein Screenshot von der Website oder einem Ausschnitt gebraucht wird. Mit dieser Chrome-Erweiterung kannst du nicht nur den Screenshot erstellen, sondern ihn auch noch bearbeiten. Das bedeutet:

  • Texte und Pfeile hinzufügen
  • Teile des Screenshots unscharf machen
  • Drucken oder ihn in der Zwischenablage ablegen

Screenshots

Ich hoffe dir hilft diese Zusammenstellung der Erweiterungen die in meinem Alltag regelmässig zum Einsatz kommen. Sie sind für meine Arbeit unverzichtbar geworden.

Wenn du noch eine andere tolle Erweiterung für Chrome kennst, die hier nicht dabei ist, dann freue ich mich, wenn du in die Kommentare schreibst.

Westernsattel

Kommentar hinterlassen:

3 Kommentare
Füge Deine Antwort hinzu