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

svg-pattern

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.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

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.