Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dr. Web Team 8. Juli 2010

25 nützliche Tools für Webdesigner

Webdesign und -ent­wick­lung ist ein zeit­in­ten­si­ves Métier. Neben dem eigent­li­chen Gestalten und Entwickeln, Absprachen mit Kunden und Kooperationspartnern, fres­sen Testläufe, Fehlersuche und Informationsrecherche die Zeit. Wie schön, dass die Community mit vie­len klei­nen Helferlein auf die­sen Zeitdruck reagiert. Hier ist eine Sammlung nütz­li­cher Tools und Referenzen, die das Leben als Webdesigner leich­ter machen.

Quick Links: Tools nach Themengruppen

CSS, Styleguides, Referenzlisten

css­ten­der

Wenn Sie Ihre Websites schon heu­te mit CSS-3-Eigenschaften wie border-radius, canvas oder opacity gestal­ten möch­ten – und zwar so, dass Ihr Layout auch in nicht-CSS-3-kon­for­men Browsern kor­rekt ange­zeigt wird, ist ecss­ten­der (sprich exten­der) von Aaron Gustafson eine mög­li­che Lösung. Das Besondere an dem Tool ist der sau­be­re CSS-Code, der ohne die übli­chen Browser-Hacks und Stylesheet-Weichen aus­kommt.

Gustafsons Ziel ist es, moder­nes Webdesign mit CSS 3 zu för­dern und den Einsatz von CSS3 von der Unterstützung der Browser-Hersteller unab­hän­gig zu machen Allerdings: Das, was sonst von Hacks und Conditional Comments erle­digt wird, ist nun die Aufgabe von JS-Extensions, was offen­bar die Ladezeiten zu bein­träch­ti­gen scheint. Zum Experimentieren mit neu­en Gestaltungsmitteln ist ecss­ten­der aber alle­mal geeig­net.

Download / Demo

Primer CSS
Klein und hand­lich: Primer CSS (was so viel heißt wie CSS-Grundierung) arbei­tet online und hat nur eine Funktion: Per Copy & Paste kön­nen Sie von einer HTML-Seite das Markup bezie­hungs­wei­se das Grundgerüst der Seite extra­hie­ren und dar­aus auto­ma­tisch ein sepa­ra­tes Stylesheet mit IDs und Klassen erstel­len. Das funk­tio­niert ganz her­vor­ra­gend, wenn Sie zuerst die Struktur in HTML anle­gen und dann die Formen und Farben im Stylesheet zuwei­sen.

Screenshot

Style Guides für Anwenderschittstellen
Wenn Sie Unterstützung beim Verfassen eines Style Guide für Anwenderschnittstellen benö­ti­gen, wer­den Sie auf die­ser Seite fün­dig: User Interface Style Guides bie­tet Hilfe und Orientierung durch zahl­rei­che Beispiel-Style-Guides gro­ßer Internetauftritte von Firmen, Nachrichtenagenturen und Rundfunkanbietern wie zum Beispiel der BBC Style Guide. Auch inter­es­sant: Erläuterungen zu Anwenderschnittstellen-Richtlinien und Style Guides für Web-Autoren (Editorial Style Guide) bezie­hungs­wei­se das Erstellen von Texten fürs Web.

Screenshot
Unicode Codepoint Chart
Eine sehr über­sicht­li­che Online-Referenz für Symbole und Sonderzeichen bie­tet Unicode Codepoint Chart. Die alpha­be­tisch geord­ne­te Liste bie­tet Zeichen für inter­na­tio­na­le Sprachen von Arabic über Basic Latin bis zu Tai Lee sowie Zeichensätze für Mathematische Operatoren, Pfeile und vie­les mehr. Ein Klick auf das gewünsch­te Symbol oder Zeichen öff­net eine Seite mit Detailinformationen nebst einer Browser-Test-Seite und den Codierungen und Zeichensätzen (HTML Entitites, UTF-8, UTF-16, UTF-32, ISO-8859–8 und ande­re).

ASCII Table
Noch umfas­sen­der, als das vor­her­ge­hen­de Tool und vor allem inter­ak­tiv gestal­tet kommt die Online-Referenz ASCII Table daher. Ein unver­zicht­ba­res Nachschlagewerk für jeden Webdesigner.

ASCII Table

Tastaturkürzel und Befehle für Linux
Aus den knapp 3.000 ver­füg­ba­ren Befehlen für die Administration von Linux haben Stan und Peter Klimas unter Linux Newbie Guide eine sys­te­ma­tisch geord­ne­te Auswahl der gebräuch­lis­ten Shortcuts und Befehle erstellt.
Linux Newbie Guide

99 Abkürzungen aus dem Online Business
Ein alpha­be­tisch sor­tier­tes Glossar mit 99 der gän­gigs­ten E-Commerce-Abkürzungen hilft Ihnen auf die Sprünge, wenn Sie mal wie­der eine kryp­ti­sche Nachricht von Ihrem Server-Administrator oder einem Kunden aus dem Marketing bekom­men. Schlagen Sie’s nach. Unter 99 Ecommerce Acronyms fin­den Sie – wie der Name schon sagt – 99 Abkürzungen aus dem Online Business – von Marketing über Informationstechnik, Suchmaschinenoptimierung, Webentwicklung, -design und ana­ly­se bis hin zu Logistik.

Typografie und Layout

AltFontPrev
Ein ein­fa­ches, aber wir­kungs­vol­les JavaScript-Bookmarklet ist AltFontPrev. Mit die­sem Tool kön­nen Sie die auf jeder belie­bi­gen Website ver­wen­de­ten Schriftarten ermit­teln. Sinn und Zweck: So kön­nen Sie gewähr­leis­ten, dass Ihr Layout auch dann gut aus­sieht, wenn bestimm­te Fonts auf dem System eines Anwenders nicht instal­liert sind. Ohne den Quellcode zu durch­fors­ten, sehen Sie auf einen Klick, wel­che Schriften im Font-Ordner der Website ent­hal­ten sind. Sie kön­nen sogar eine benut­zer­de­fi­nier­te Schrift fest­le­gen.

Screenshot

Web Font Specimen
Mit Web Font Specimen kön­nen Sie sehr bequem über­prü­fen, wie Schriften lau­fen. Sie kön­nen Überschriften in ver­schie­de­nen Fonts neben­ein­an­der dar­stel­len las­sen und den Effekt ver­glei­chen. Zudem gene­riert das Online-Tool gan­ze Textblöcke und Punktaufzählungen, so dass Sie sehen kön­nen, wie die gewähl­te Schriftart sich auf das Gesamtbild der Website aus­wirkt.

Screenshot

Typografix
Mit Typografix kön­nen Sie Webtypografie direkt kor­ri­gie­ren. Das Script Auslassungen und Zitate. Außerdem fügt es auto­ma­tisch  die Tags für  <script>, <pre> und <code> ein. Der en-Gedankenstrich wird zum Beispiel immer dann ein­ge­fügt, wenn Typografix einen von Leerzeichen ein­ge­schlos­se­nen Bindestrich fin­det; wäh­rend zwei auf­ein­an­der fol­gen­de Bindestriche durch den em-Gedankenstrich ersetzt werden.Typografix ist mit C# geschrie­ben und benö­tigt den Windows Installer nstal­ler 3.1 und das .NET Framework 3.5 SP1.

Screenshot

#grid
Was im Printdesign schon seit den 1930er erfolg­reich ein­ge­setzt wird, ist im Webdesign noch rela­tiv neu: Ein Gitternetz, mit dem sich Text und Bilder in regel­mä­ßi­gen, optisch anspre­chen­den Abständen aus­rich­t­gen lässt. Ein ent­spre­chen­des Hilfsmittel bie­tet #grid. Das Tool fügt Gitternetzlinien auf einer Webseite ein, die sich per Tastaturkürzeln ver­schie­ben sowie ein- und aus­blen­den las­sen.

Screenshot

Online-Lineale
Nicht schön, aber prak­tisch: Messen muss man immer wie­der, wenn man ein neu­es Layout anlegt. Ganz flott geht das mit einem Online-Lineal. Fünf ver­schie­de­ne Lineale – für jede gän­gi­ge Plattform von Mac bis Ubuntu eines.

 Five Awesome On-Screen Rulers

CSS Usage
Das Firebug-Addon CSS Usage unter­sucht Websites auf die ver­wen­de­ten CSS-Regeln. Per Mausklick kön­nen Sie kom­ple­xe Websites durch­su­chen. Öffnen Sie dazu die ers­te Seite, die Sie unter­su­chen möch­ten und kli­cken Sie auf  “Scan” auf dem FIrebug-Reiter “CSS Coverage”. Bei Seiten mit Ajax oder DHTML soll­ten Sie so viel mög­lich divs, Pop-ups und Taben öff­nen und erneut auf “Scan” kli­cken. Wiederholen Sie das auf allen zu unter­su­chen­den Seiten des Internetauftritts. Mit jedem erneu­ten Klick auf “Scan”, wer­den die mit der Site ver­bun­de­nen CSS-Dateien zur Analyse hin­zu­ge­ge­fügt und die Anzahl der auf der zu unter­su­chen­den Seite ange­wand­ten CSS-Regeln ange­zeigt.

Juicer: CSS-Stylesheets und JS-Scripts packen
Ein rela­tiv neu­es Tool zum Komprimieren und Packen von CSS- und JavaScript-Dateien ist Juicer. Während es für die Entwicklung von Style Sheets und Scripts jede Menge Veröffentlichungen zur Best Practise gibt, bleibt das Einbinden die­ser Dateien in eine Website rela­tiv im Dunkeln – oft zum Nachteil der Performance, wenn etwa CSS-Code auf vie­le ein­zel­ne Dateien auf­ge­teilt wird. Mit Juicer las­sen sich all die­se Dateien und zusätz­li­chen Dokumentationen kom­pri­mie­ren und zusam­men­fas­sen, so dass sich spä­ter auf dem Server im Idealfall jeweils eine ein­zi­ge kom­pak­te CSS- und JS-Datei befin­det.

Farbwähler, Farbreferenzen

Interkulturelles Farben-Rad
Welche Bedeutung Farben in den ver­schie­de­nen Kulturkreisen die­ser Erde zuge­schrie­ben wird, kön­nen Sie auf Colours In Cultures an einer kreis­run­den Infografik able­sen. Infografiken sind näm­lich die Spezialität von David McCandless, der die­se beacht­lich kom­ple­xe Farb-Referenz für sein Buch Infor­ma­ti­on is Beautiful kre­iert hat.
Colours In Cultures

Farbschemata erstel­len
Mit dem Color Scheme Designer kön­nen Sie auf sehr intui­ti­ve Art fein auf­ein­an­der abge­stimm­te Farbschemata erzeu­gen. Je nach Voreinstellung kön­nen Sie Ton-in-Ton-Abstufungen, kom­ple­men­tä­re, tet­ra­di­sche und ande­re Zusammenstellungen wäh­len.

Color Tools für Webworker
Explizit für Webmaster und Webdesigner ist die­se Kollektion von zwölf Online-Color-Tools zur Farbwahl, dem Ermitteln von web­si­che­ren RGB-Werten sowie dem Mischen und Zusammenstellen von Farben nach ver­schie­de­nen Aspekten zusam­men gestellt.

Dateien konvertieren, Drucken & Testen

Videos kon­ver­tie­ren
Miro Video Converter ist ein ein­fach anzu­wen­den­des und abso­lut frei ver­füg­ba­res Werkzeug zum Konvertieren von Videos in MP4, WebM (vp8), Ogg Theora oder für Android, iPhone und mehr

Miro Video Converter

Modernes Dokumenten-Management mit AurigaDoc
AurigaDoc ist ein Java-XML-XSL basier­tes Tool mit dem XML-Dokumente schrei­ben und in ande­re offe­ne Formate wie HTML (Einzel- und Mehrfachseiten), DHTML, PDF, PostScript, Formatting Object(FO), RTF, Java Help and HTML Help(.chm). Achtung: AurigaDoc ist kein XML-Editor. Das Tool soll viel­mehr die medi­en­neu­tra­le Datenhaltung för­dern. Content wird grund­sätz im XML-Dokument erstellt und bear­bei­tet und anschlie­ßend je nach Zweck in einem ande­ren Format aus­ge­ge­ben – etwa als HTML fürs Internet oder als PDF zum Druck von Büchern, Broschüren und Magazinen oder als HTML-Help/Java Help für Online-Hilfen.

AurigaDoc

Printliminator
Im angeb­lich papier­lo­sen Zeitalter wirkt das Bookmarklet  The Printliminator fast ein wenig ana­chro­nis­tisch. Dennoch wer­den lan­ge Texte nach wie vor lie­ber auf Papier als am Bildschirm gele­sen. Wenn Sie zu den Zeitgenossen gehö­ren, die Dokumentationen ger­ne aus­dru­cken, wird Ihnen die­ses Tool gefal­len, mit dem Sie über­flüs­si­ge Grafiken und Werbung mit ein paar Klicks ent­fer­nen und den inter­es­san­ten Text für den Druck opti­mie­ren kön­nen.
The Printliminator

ProtoFluid – Prototyping für Web-Apps
Nicht nur für Web-Anwendungen, auch für mobi­le Versionen von HTML5- und CSS3-Websites eig­net sich der Online-Service ProtoFluid ganz her­vor­ra­gend zum Testen und Optimieren. Mit dem Tool kön­nen Sie Ihre Apps und Websites in einer Vorschau tes­ten – so wie sie auf auf ver­schie­de­nen mobi­le­nen Geräten ange­zeigt wür­de. Neben bestimm­ten Geräten wie iPhone und iPad kön­nen Sie Display-Größen manu­ell vor­ge­ben, was für die vie­len ver­schie­de­nen Android-basier­ten Geräte inter­es­sant ist. Zudem lässt sich die Orientierung des Geräts – Hochformat oder Querformat – ein­stel­len und die Darstellung Ihrer App in die­ser Ansicht tes­ten.

HTML5 and CSS3 Web App Prototyping

Lesezeichen, Shortcuts & Websites administrieren

Quix
Wäre es nicht schön, eine Befehlszeile im Browser zu haben, mit der sie Zugriff auf Tastaturkürzel und Befehle für Ihre Routineaufgaben als Webmaster, Administrator oder Blogger haben und so Ihren Arbeitsablauf schnel­ler und kom­for­ta­bler gestal­ten? Genau das bie­tet Ihnen Quix. Das Tool ist ein sehr pfif­fi­ges und erwei­ter­ba­res Bookmarklet, mit dem Sie nicht nur Lesezeichen auf­ru­fen, son­dern täg­li­che Routineaufgaben schnel­ler erle­di­gen kön­nen, wie zum Beispiel HTML-5-Validierung, das Kürzen und Versenden von Links und vie­les mehr. Eine Übersicht der ver­füg­ba­ren Befehle fin­den Sie hier.

Screenshot

WP-Toolbar book­mark­let
Ähnlich prak­tisch aller­dings rein auf WordPress zuge­schnit­ten ist das WP-Toolbar book­mark­let. Einmal instal­liert, blen­det ein Klick aufs Bookmarklet eine zusätz­li­che Symbolleiste im Browser-Fenster ein, über die Sie das WordPress-Backend auf­ru­fen, direkt zu den Kommentaren, zur Benutzerverwaltung und ande­ren Bereichen im Backend sprin­gen kön­nen. Direkter Zugriff auf einen bestimm­ten Post ist zwar nicht mög­lich, den­noch spart das Booklet eini­ge Klicks bei der täg­li­chen Arbeit. Über ein zusätz­li­ches GreaseMonkey script wird die Symbolleiste auto­ma­tisch gela­den, wenn Sie eine bestimm­te Website auf­ru­fen.

Screenshot

Gpanion
Schnellen Zugriff auf belieb­te Google-Apps bie­tet Gpanion. Wenn Sie lang­wie­ri­ges Klicken und Suchen nervt, instal­lie­ren Sie die­ses Tool, mit dem Sie eine Art Dashboard instal­lie­ren kön­nen, des­sen gra­fi­sche Oberfläche Ihnen guten Überblick und direk­ten Zugriff auf Ihre Lieblings-Apps bie­tet.

Linkifikation
Linkification ver­wan­delt Textlinks in ech­te anklick­ba­re Hyperlinks. Das Add-on für Firefox ist zwar frei ver­füg­bar, aber eine Spende wird vom Entwickler ger­ne gese­hen.

Die Liste erhebt kei­nen Anspruch auf Vollständigkeit. Wir freu­en uns auf Links zu wei­te­ren neu­en und nütz­li­che Tools in den Kommentaren.

(tm)

6 Kommentare

  1. An die­ser Stelle wei­se ich ger­ne auf unse­ren Responsive Design Viewer hin: http://www.active-value.de/responsive-design-viewer/ – mit die­sem lässt sich eine Website sehr ein­fach auf mobi­len Endgeräten anschau­en!

  2. Schöne Auflistung.

    Auf FreeDesizn.co.cc fin­det ihr 40 Tools fürs Webdesign. Sie rei­chen von Websites für mehr Inspiration über Design Tools und Coding Tools bis hin zu Diensten fürs Testen und Managen der Seite. Gefunden auf t3n.

    ado­com

  3. Danke für die guten Tipps – habe mal das Webfont Specimen aus­pro­biert und muss sagen, dass es mir ganz nütz­lich erscheint.

    Grüße,
    Jessica

  4. Tolle Sammlung, eini­ge Tools waren mir bekannt ande­re wer­den jetzt mal ange­tes­tet.

    Thanks for sharing :-)

  5. Schöne Sammlung mit teil­wei­se bekann­ten, und unbe­kann­ten (aber nütz­li­chen) Tools! Danke für’s Teilen :)

  6. Interessante Sammlung. Wers braucht.

Schreibe einen Kommentar zu G.Walter Antworten abbrechen

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