25 neue Tools, Scripte und Frameworks für Webdesigner – Mai 2013

Ich habe erneut eine Liste mit hilfreichen Webdesign-Tools für euch zusammengestellt. Im der Sammlung von Mai finden sich verschiedene Scripte für Slider und Navigationsmenüs im Responsive Design, Websites zum Decodieren von URLs und Sonderzeichen, CSS3-Animationen, SVG-Hintergründe uvm. Es ist sicher für jeden etwas dabei.

Nur noch wenige Tage!

Frühbucher-Preise für unsere Seminare in Berlin: CSS – The Next Level, WordPress, SVG, Prototyping, Responsive Design für Konzepter, HTML & CSS, Muse …

Jetzt Tickets sichern!

Bookmarklets

Gridwax

Gridwax ist ein hilfreiches Bookmarklet das den Inhalt eures Browsers mit einem Grundlinienraster überlagert. Per Tastatur kann das Raster gesteuert werden. Das Tool kann euch dabei helfen, den vertikalen Rhythmus einer Website zu optimieren (Stichwort: Baseline Grid).

Ein Grundlinienraster per Bookmarklet – Gridwax

Ein Grundlinienraster per Bookmarklet – Gridwax

Frameworks

Cool Kitten

Cool Kitten ist ein Framework für die Erstellung von responsive Parallax-Effekten.

Responsive Parallax-Effekte mit Hilfe des Cool-Kitten-Frameworks

Responsive Parallax-Effekte mit Hilfe des Cool-Kitten-Frameworks

Scripte

Unslider

Unslider ist ein extrem reduzierter jQuery-Slider, ohne überflüssige Effekte oder aufgeblasenen Code. Die responsive Slideshow lässt sich auch mit der Tastatur steuern.

Responsive Slideshow mit jQuery

Responsive Slideshow mit jQuery

Strapdown.js

Mit Strapdown.js könnt ihr in Sekunden schicke Websites auf Basis von Marked (Markdown Parser) und einem Bootstrap-Theme erstellen. Schreibt einfach ein wenig Markup, bindet das JavaScript ein und gebt an, welches Bootstrap-Theme verwendet werden soll. Fertig ist die Micro-Website.

Schnell zur Micro-Website mit JavaScript und Bootstrap

Schnell zur Micro-Website mit JavaScript und Bootstrap

Sidr

Mit dem jQuery-Plugin Sidr lässt sich ohne großen Aufwand ein "Off-Canvas"-Menü für Responsive Websites herstellen.

jQuery-Plugin für Off-Canvas-Navigation

jQuery-Plugin für Off-Canvas-Navigation

Transit

Mit Transit erstellt ihr fantastische CSS-Transitions oder Animationen für jQuery.

jQuery und CSS Transitions und Animationen

jQuery und CSS Transitions und Animationen

Flexisel

Flexisel ist ein jQuery-Plugin zum Erzeugen eines responsive Carousels/Sliders.

jQuery-Plugin für Responsive Carousels und Slider

jQuery-Plugin für Responsive Carousels und Slider

Countable.js

Countable.js ist ein kleines JavaScript das für ein bestimmtes HTML-Element die enthaltenen Zeichen, Wörter und Absätze zählen kann.

Wörter, Buchstaben und Absätze per JavaScript zählen

Wörter, Buchstaben und Absätze per JavaScript zählen

Responsive Nav

Responsive Nav ist ein kleines JavaScript das eine für Touch-Screens und RWD optimierte Navigation erzeugt. Das Script basiert auf keiner Bibliothek wie etwa jQuery.

Touch Screen Navigation mit Responsive Nav

Touch Screen Navigation mit Responsive Nav

Chardin.js

Mit dem jQuery-Plugin Chardin.js könnt ihr sehr ansehnliche Overlays mit Erklärungen für Websites oder Apps erstellen.

Informationen per Overlay mit Chardin.js

Informationen per Overlay mit Chardin.js

Retinise.js

Mit dem jQuery-Plugin Retinise.js könnt ihr Grafiken im HTML-Code dank des data-src-Attributs für HiDpi-Displays optimieren.

Retina-Images mit dem jQuery-Plugin "Retinise.js"

Retina-Images mit dem jQuery-Plugin "Retinise.js"

jQuery Smart Banner

Mit dem Script jQuery Smart Banner rüstet ihr Smart App Banners in alten Versionen von iOS und unter Android nach.

Smart App Banners für Android nachrüsten

Smart App Banners für Android nachrüsten

TimeJump

Mit TimeJump könnt ihr in Audio- und Video-Podcasts an eine beliebige Position verlinken. Die Medieninhalte müssen dazu lediglich über HTML5 eingebunden sein.

Sprungmarken für HTML5 Audio- und Videodateien

Sprungmarken für HTML5 Audio- und Videodateien

whoops

Mit Hilfe von Whoops verbessert, bzw. vereinfacht ihr das Error-Handling, und könnt wunderschöne Fehlermeldungen ausgeben.

Vereinfachtes Error-Handling mit "whoops"

Vereinfachtes Error-Handling mit "whoops"

Helium

Mit dem JavaScript Helium erkennt ihr ob eure Website überflüssigen CSS-Code einsetzt. Das Tool untersucht verschiedene URLs und erstellt anschließend einen Report.

Mit Helium findet ihr unbenutzten CSS-Code

Mit Helium findet ihr unbenutzten CSS-Code

Online-Tools

CSS to Compass Converter

Der Name sagt eigtl. schon alles. Mit dem CSS to Compass Converter wandelt ihr validen CSS-Code in Compass-Code um.

CSS to Compass Converter

CSS to Compass Converter

Flat UI Colors

Das kostenlose UI-Kit Flat UI dürfte den meisten von euch bereits bekannt sein. Mit Flat UI Colors kann per Klick das Farbschema für Flat UI kopiert werden.

Farben für Websites im Flat Design

Farben für Website im Flat Design

SVG Patterns Gallery

In der SVG Patterns Gallery findet ihr diverse nahtlose Hintergrundgrafiken im SVG-Format bzw. als SVG-Code.

Endlosmuster auf Basis von SVG

Endlosmuster auf Basis von SVG

Animatable

Auf Animatable findet ihr diverse CSS3-Animationen zum Copy-&-Paste-Download. Alle Animationen verwenden nur eine Eigenschaft und zwei Werte.

CSS3 Animationen zum sofort einsetzen

CSS3 Animationen zum sofort einsetzen

URL-Encoder

Mit einem URL Encoder werden Internetadressen (URLs) so kodiert, dass diese URLs, auch wenn sie Sonderzeichen enthalten, von Browsern korrekt interpretiert werden und selbst Teil einer Internetadresse sein können.

Tool zum Encoden von Sonderzeichen in URLs

Tool zum Encoden von Sonderzeichen in URLs

HTML Live Code

HTML Live Code ist ein Code-Editor im Browser inkl. Live-Vorschau.

Online Code Editor

Online Code Editor

Unicode Table

Die Unicode Table listet alle Unicode-Zeichen auf und bietet sogar einen Converter an. Sehr praktisch ist auch die Suchfunktion.

Alle Unicode-Zeichen und ein Tool zum Umwandeln von Texten – Unicode Table

Alle Unicode-Zeichen und ein Tool zum Umwandeln von Texten – Unicode Table

Fake images please?

Mit Fake images please? könnt ihr Platzhalter-Bilder über eine URL einbinden. Im Gegensatz zu vielen anderen Anbietern könnt ihr sowohl die Größe des Bilders, als auch Farbe, Text, Textfarbe und Schriftart festlegen.

Platzhalter-Grafiken mit individueller Größe, Farbe und Schriftart

Platzhalter-Grafiken mit individueller Größe, Farbe und Schriftart

Sonstiges

Redacted Font

Der "Wireframe-Webfont" Redacted ist sehr vergleichbar mit BLOKK, erzeugt meiner Ansicht nach aber einen besseren Eindruck vom optischen Gewicht des Textes.

Platzhalter-Webfont für Prototypen und interaktive Wireframe

Platzhalter-Webfont für Prototypen und interaktive Wireframe

ClearLess

ClearLess ist eine Sammlung von hilfreichen LESS mixins.

Hilfreiche Mixins für LESS

Hilfreiche Mixins für LESS

Noch mehr Tools gefällig?

Als Gedankenstütze für mich selbst, habe ich eine Website gebastelt, die alle mir bekannten Tools auflistet. Wenn ihr ein Hilfsmittel für ein bestimmtes Anwendungsgebiet sucht, werden ihr dort sicher schnell fündig.
Die Tools sind verschlagwortet und können am einfachsten über die Suche gefunden werden. Probiert es doch mal aus und sucht nach Responsive Slidshow jQuery, Retina Script oder CSS3 Tooltip.