Topliste: Tools für den Webworker

Vor ein paar Wochen bereits angekündigt, als wir eine Topliste mit deutschen Infos zum Webdesign erstellt haben, nun für euch online: hier kommt eine Reihe besonders sehenswerter Tools für den Webworker. Schwerpunkt liegt auch diesmal auf HTML, CSS und Webdesign.

Firebug: das Must-Have an Firefox-Add-Ons für den Webworker
Firebug: das Must-Have an Firefox-Add-Ons für den Webworker

Firebug: Webseiten live checken mit dem kleinen Käfer

Das feine Add-On Firebug dürfte einer der wichtigsten Gründe für die Beliebtheit von Firefox beim Entwickeln von Webseiten sein. Einmal installiert, kann der Käfer Ladezeiten einzelner Dateien anzeigen, HTML und CSS on the fly ändern, die Dokumentstruktur zeigen, Abstände der Boxen hervorheben und noch einiges mehr. Ich kenne keinen, der ihn wieder deinstalliert hat.

Web Developer Toolbar:  Schweizer Taschenmesser für Webworker

Wie der Name schon sagt, steckt in der Web Developer Toolbar (auch ein Add-On für Firefox) versteckt in verschiedenen Menüs viel von dem, was der Webworker braucht. Sylvia Egger hat für die Webkrauts schön beschrieben, wie man die Toolbar zur Optimierung der Barrierefreiheit verwenden kann. Nur ein Beispiel von vielen.

UI Test: Links zu wichtigen Validatoren und Test-Tools

Jens Meiert hat mit UI Test ein feines Tool geschrieben, das alle möglichen Validatoren, Generatoren und Test-Tools in einer Oberfläche vereint. Nie war validieren einfacher.

HTML Lorem Ipsum Deutsch: Blindtext ja, aber bitte mit Sinn

Blindtexte sind ein wichtiges Element gerade in der Frühphase eines Projekts, wenn noch keine „richtigen“ Inhalte vorhanden sind. Doch statt Kauderwelsch sollte man auf echte Texte zurückgreifen — nur so lässt sich das Aussehen der Schrift richtig beurteilen. HTML Lorem Ipsum Deutsch liefert verschiedenste Textformen direkt mit passendem Mark-Up.

CSS Sprite Generator: CSS Sprites auf einen Klick

CSS Sprites sind eine coole Technik, um die eigene Serverlast zu verringern. Blöd nur, dass sie etwas frickelige Handarbeit sind. Der CSS Sprite Generator schafft Abhilfe: gezippte Bilder hochladen, Einstellungen vornehmen, fertig.

Typetester: schnelle Typografie fürs Web

Wo Web ist, ist meist auch Schrift. Und die sollte gut aussehen. Typetester erlaubt eine komfortable Voransicht frei wählbarer CSS-Schrifteigenschaften und spuckt gleich noch den passenden Code aus.

Grid Designer 2: Ordnung schaffen im Layout

Grids strukturieren das Layout und schaffen regelmäßige Abstände zwischen den Elementen. Der Grid Designer 2 hilft, das Design in geordnete Bahnen zu lenken.

Em Calculator: von absolut nach relativ

Es gibt gute Gründe, die für die Verwendung relativer Maßeinheiten wie em gelten, doch sind sie nicht immer einfach zu handhaben. Der Em Calculator hilft weiter: einfaches Umrechnen von Pixelwerten in relative Größenangaben.

Von px in em mit einem Klick.
Von px in em mit einem Klick.

Adobe kuler: Farbenspiele

Wer eine aufeinander abgestimmte Farbpalette braucht, sollte sich Adobe kuler anschauen. Hier lassen sich fünfteilige Farbpaletten sowohl automatisch (anhand vorgegebener Verfahren) als auch manuell erstellen. Schön zur Inspiration.

Font Matrix: Verfügbarkeit der Schriften auf diversen Systemen

Kein Tool, aber ungemein praktisch: die Font Matrix sagt euch, welche Schriften standardmäßig auf verschiedenen Systemen installiert sind.

Mehr?

Das Web ist voll von coolen Tools, die das Leben einfacher machen. Was sind eure Favoriten?

ist Medienwissenschaftler und beobachtet als Autor („Grundkurs Gutes Webdesign“) und Berater den digitalen Wandel. Seine Themenschwerpunkte sind User Experience, anwenderfreundliches Design und digitale Strategien. Er schreibt regelmäßig für Fachmedien wie das t3n Magazin, die Netzpiloten oder Screenguide. Mitglied des Netzpiloten Blogger Networks.


Artikel per E-Mail verschicken
Schlagwörter: , ,

1 comment

Schreibe einen Kommentar

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