Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 21. Mai 2013

Schnell und unkompliziert: 5 unverzichtbare Bookmarklets für Webdesigner

Im World Wide Web mangelt es nicht an nützlichen Helfern für Webdesigner. Oftmals müssen diese aber installiert oder in ein Webprojekt eingebunden werden. Der Vorteil von Bookmarklets hingegen ist, dass sie einfach zu den Lesezeichen hinzugefügt werden und per Klick angewendet werden können.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

Gridwax

bookmarklets_gridwax

Anzeige

Wer als Webdesigner viel Wert auf die Einhaltung eines Grundlinienrasters legt, ist mit Gridwax gut bedient. Das Bookmarklet legt ein eben solches direkt über eine Website. Über die Shift- und Pfeiltasten ist es einfach möglich, die Startposition sowie den Abstand der Grundlinien zu verändern.

Mit Shift und den Pfeil-hoch- und Pfeil-runter-Tasten wird der Abstand der Linien um jeweils einen Pixel verändert. Mit Shift und den Pfeil-links- und Pfeil-rechts-Tasten wird die Startposition des Rasters verändert.

Responsive Design Bookmarklet

Zum Testen responsiver Layouts bietet sich das Responsive Design Bookmarklet an. Es blendet eine Werkzeugleiste über die zu testende Website ein, über die Standard-Auflösungen für Smartphones und Tablets in der Portrait- sowie Landscape-Orientierung ausgewählt werden können. Die Website wird anschließend innerhalb der ausgewählten Auflösung dargestellt.

Zusätzlich gibt es die Möglichkeit, die jeweilige Bildschirm-Tastatur für das iPhone sowie das iPad einzublenden. So lässt sich sehr gut testen, ob ein Formular beispielsweise bei eingeblendeter Tastatur noch gut sicht- und bedienbar ist.

Accessify

bookmarklets_accessify

Eine besondere Herausforderung für Webdesigner ist die Umsetzung barrierefreier Websites. Hier gilt es, Inhalte unter Berücksichtigung der ARIA-Richtlinie auszuzeichnen. Das Bookmarklet Accessify findet im Quelltext nicht zureichende Auszeichnungen und gibt Hinweise, wie die Auszeichnung verbessert werden kann.

Das Bookmarklet informiert unter anderem darüber, wie Bilder, Links, Formulare und Tabellen besser ausgezeichnet werden können, um sie barrierefrei zu machen.

autoPopulate

Um sicherzustellen, dass Formulare funktionieren, müssen diese ausgiebig getestet werden. Dazu ist es nötig, Formulare immer wieder mit Eingaben zu füllen. autoPopulate stellt ein Boorkmarklet zur Verfügung, welches Formulare per Mausklick mit Pseudowerten füllt. Für verschiedene Standard-Eingabefelder wie Name, E-Mail-Adresse, Anschrift lassen sich mehrere Werte eingeben, von denen zufällig einer ausgewählt wird.

Das Bookmarklet erkennt anhand regulärer Ausdrücke, welche Eingabe ein Formularfeld erwartet und gibt einen der vorgegebenen Werte aus. Nicht immer passen die regulären Ausdrücke auf die Bezeichnungen der Eingabefelder. Allerdings kann man sich das JavaScript für das Bookmarklet auch so zurechtstutzen, dass es auf das zu testende Formular passt.

Markup.io

bookmarklets_markupio

Als Webdesigner wird man ja gelegentlich gebeten, eine Website zu begutachten. Da fällt einem hier und da schon mal etwas auf, was verbessert werden könnte. Markup.io stellt ein Bookmarklet zur Verfügung, mit dem man Bemerkungen direkt auf einer Website machen kann. So kann man mit einem Stift auf der Website zeichnen und Texte hinterlassen. Anschließend kann man die Bemerkungen zu der Website als Link verschicken.

Links zum Beitrag

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

3 Kommentare

  1. Ich empfehle noch das Subtle Patterns Bookmarklet:

    http://bradjasper.com/subtle-patterns-bookmarklet/

    Damit kann seiner eigenen Website Hintergründe vom Subtle Pattern-Dienst hinzufügen.

  2. Nehmt doch bitte mal die Links von Euren Screenshots…

  3. Ebenfalls ein interessantes Bookmarklet für Webdesigner ist „WhatFont“, mit dem sich schnell die verwendeten Schriften auf einer Website erfassen lassen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.