Ganz egal ob ich Webseiten im Kundenauftrag designe oder an meinen eigenen Seiten bastle, ich benutze eine ganze Reihe von Browser-Erweiterungen für meine Arbeit als Webdesignerin. Heute möchte ich dir fünf davon vorstellen. Es handelt sich dabei um kleine Browser-Tools, die dir als Werkzeug dienen und ich bin mir ganz sicher, dass sie auch dir deinen Alltag erleichtern werden!
Die folgenden Anleitungen wurden für den Chrome-Browser erstellt. Die meisten Extensions gibt es auch für Firefox und Co. Ich möchte mich hier jedoch auf Chrome beschränken.
Browser-Erweiterungen installieren
Zuerst möchte ich dir zeigen wie du die Browser-Erweiterungen überhaupt installierst.
Öffne zuerst Chrome …
… und klicke auf den folgenden Link: Chrome-Webstore. Dieser führt dich direkt in den Chrome-Webstore, wo du die nachfolgenden Browser-Erweiterungen kostenlos und mit zwei Klicks installieren kannst.
Falls du die Anleitung lieber als Video sehen möchtest:
Floating Player
Ist dir das auch schon passiert? Du suchst ein Video-Tutorial, z.B. auf YouTube und möchtest dann die darin vorgestellten Schritte step-by-step auf deiner Website umsetzen. Das Doofe daran ist nur, dass du jetzt alle paar Sekunden zwischen dem Tab mit dem Video und dem Tab von deiner Webseite hin und her wechseln musst 🙄.
Ab jetzt nicht mehr! Diese Browser-Extension ermöglicht dir, Videos "anzupinnen". Genauer gesagt, öffnet sich ein kleines Fenster mit dem Video und egal in welchem Tab du dich gerade befindest, das Video "fliesst" mit.
Schau dir am besten das kurze Video an, installiere die Browser-Extension und probiere es direkt aus 👍🏼! Wenn mehrere Videos auf einer Seite eingebettet sind (wie hier bei diesem Blog-Artikel), dann wirst du eine Miniaturansicht der gesamten Website sehen und kannst einfach zum gewünschten Video scrollen 😉).
Browser-Extension "Floating Player" installieren und verwenden (Video-Anleitung)
ColorZilla
Die kleine Browser-Erweiterung ermöglicht es dir, den exakten Farbcode von Bildern, Fotos, Grafiken, Illustrationen und allem, was halt Farbe enthält, herauszufinden und in deine Zwischenablage zu kopieren, um ihn dann wiederzuverwenden, z.B. in Canva, für Texte, u.s.w.
Gehen wir mal davon aus, dass du auf deiner Website ein Foto mit einer roten Rose eingebunden hast und nun möchtest du in derselben Farbe wie die Rose den Titel einfärben. Dazu klickst du nach dem Installieren lediglich die Browser-Erweiterung an, fährst mit der Pipette über die Rose und pickst so den exakten Farbcode als Hexcode heraus und kannst ihn dann bei der Schriftfarbe wieder hineinkopieren.
Browser-Extension "ColorZilla" installieren und verwenden (Video-Anleitung)
Page Ruler
"Page Ruler" hilft dir als Browser-Extension dabei, die genaue Anzahl Pixel herauszufinden und so z.B. beim Designen deiner Seiten Abstände genauer zu definieren, Elemente genauer auszurichten und anzuordnen oder Design symmetrischer zu gestalten. Du kannst "Page Ruler" als erweiterten Lineal verstehen, der dir die genauen Pixel eines Elements, eines Abstandes zwischen zwei Elementen, u.s.w. anzeigt.
Browser-Extension "Page Ruler" installieren und verwenden (Video-Anleitung)
View Image Info (properties)
Mit View Image Info (properties) kannst du mit einem Klick auslesen, welche Masse (Breite/Höhe) ein Bild effektiv hat, wie gross es ist (KB/MB), was für ein Format (JPG/PNG) es hat und wie der Alt-Text lautet, ebenso den genauen Pfad auf dem Server anzeigen. Das ist dann zum Beispiel extrem hilfreich, wenn du unsicher bist, ob du das bereits hochgeladene Bild auch für andere Stellen auf deiner Seite verwenden kannst, wenn du z.B. andere Grössen benötigst.
Browser-Extension "View Image Info (properties)" installieren und verwenden (Video-Anleitung)
WhatFont
Warst du auch schon mal online unterwegs und hast eine Schriftart entdeckt, in die du dich sofort verliebt hast? Nur wie findest du jetzt heraus, wie diese Schriftart heisst? Du möchtest sie ja vielleicht selbst verwenden oder sie für ein Kundenprojekt abspeichern, zu dem sie perfekt passt. Mit der Browser-Extension "WhatFont" fährst du nur noch über die Schriftart und schon wird dir in einem kleinen Fenster angezeigt, wie sie genau heisst, geil oder?
Browser-Extension "WhatFont" installieren und verwenden (Video-Anleitung)
Haben dir meine Tipps gefallen? Oder hast du noch Fragen? Hinterlasse mir gerne einen Kommentar, ich freue mich immer sehr darüber!
A presto!
Deine Mary
Was du jetzt tun kannst
Schreib mir gerne einen Kommentar mit deiner Meinung oder deinen Fragen und teile den Artikel auf Social Media. Kommentiere auch gerne, zu welchem Thema ich demnächst schreiben oder ein Video machen soll.
Ciao, a presto!
Mary
Hey, ich bin Mary Mattiolo, Webdesignerin, Business- und Technik-Mentorin
…und ich liebe es, Frauen/FINTA* beim Auf- und Ausbau ihres Onlinebusiness durch sinnvolle Prozesse zu unterstützen, um #MehrZeitGeldEntspannung im Business und Leben zu ermöglichen.
Selbstständig seit 2003, schlägt mein Herz für Frauen/FINTA*, die die Welt mit ihrem Angebot intersektional verändern möchten. Mit meiner Expertise bringe ich Klarheit in scheinbar komplexe Prozesse und helfe Selbstständigen dabei, über ihre Website sichtbar zu werden, damit sie von ihren zahlenden Wunschkund*innen gefunden werden, statt ihnen hinterherzulaufen.
