26 neue Tools, Scripte & Frameworks für Webdesigner – Oktober 2012

Jeden Monat erscheinen unzählige Tools, Scripte und Plugins, die dem Webdesigner das Leben erleichtern sollen. Vergangenen Monat habe ich angekündigt, alle Tools die nicht mit einem eigenen Beitrag vorgestellt wurden in einem gemeinsamen Beitrag aufzulisten. Entstanden ist so die Liste der Webdesign-Tools von September. Nun möchte ich im Oktober erneut ein paar Ressourcen zusammenfassen. Neben Frameworks und Online-Tools sind diesmal auch einige Scripte, Slideshows und Templates dabei. Viel Spaß.
Workshops & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
Bookmarklets
Live.js
Mit dem Bookmaklet Live.js müsst ihr eure Seite nicht länger manuell neu laden. Das Script überwacht den JavaScript- HTML- und CSS-Code der Website und aktualisiert die Ansicht, sobald ihr etwas geändert habt. Ein ähnliches Tool habe ich bereits detailliert vorgestellt.

Frameworks & Boilerplates
The Goldilocks Approach
The Goldilocks Approach ist ein CSS-Framework für Multi-Screen-Websites. Das Framework unterstützt drei Ansichten einer Website, flüssige und starre Raster.

Proportional Grids
Proportional Grids ist ein responsive CSS-Framework das mit Proportionen anstelle fester Breitenangaben arbeitet. Mit CSS-Klassen legt ihr die Proportionen fest, die Abstände zwischen den Spalten werden mit festen Breiten gefüllt.

The Boiler
The Boiler ist ein auf HTML5, CSS3 und einem flüssigen Raster basierendes Framework für den Einsatz in WordPress.

Susy
Wenn ihr den CSS-Code euerer Seite mit dem Preprocessor Compass schreibt, hilft euch dieses Framework sicher weiter. Susy ist ein responsive Grid Framework auf Basis von Compass.

Fluid Baseline Grid
Das Fluid Baseline Grid ist ein mobile First, responsive Framework. Um dem Anspruch typografisch hochwertige Projekte zu ermöglichen gerecht zu werden, basiert das Framework auf flüssigen Spaltenbreiten und einem Grundlinienraster. Wo der Vorteil eines Grundlinienrasters im Webdesign liegt, steht hier.

Wirefy
Wirefy ist ein responsive Framework um schnelle Prototypen, Mockups oder Wireframes zu erstellen. Auf Basis dieser Struktur kann später der interaktive Prototyp gestaltet werden.

Amazium
Amazium ist ein Responsive Webdesign Framework auf Basis des 12-Spalten/960 Pixel Rasters. Es bietet diverse Voreinstellungen für Bilder, Videos oder Tabellen.

Online-Tools
Google Tag Manager
Der Google Tag Manager ist ein Dienst zur Verwaltung von Code-Snippets (Tags). Über die Benutzeroberfläche können Tags für diverse Einsatzgebiete (z.B. Google Analytics, AdWords, benutzerdefinierte HTML-Tags) konfiguriert werden. Der Tag Manager erlaubt die Verwaltung verschiedener Websites und bietet die Möglichkeit mehrere Benutzer mit unterschiedlichen Rechten einzusetzen.

iOS Fonts
Welche Schriften sind in welcher Version von iOS verfügbar? Um vernünftige Fallbacks und Font-Stacks zu konstruieren, ist es praktisch ein Tool wie iOS-Fonts zur Hand zu haben.

Facebook ID ermitteln
Mit diesem kleinen Tool könnt ihr die ID eines Facebook-Users oder einer Facebook-Seite über die URL auslesen. Kopiert einfach die URL in die Suchmaske, das Tool antwortet mit der passenden ID.

Gradient Scanner
Mit dem Gradient-Scanner könnt ihr CSS3-Verläufe aus Grafiken generieren lassen. Ladet einfach eine Grafik hoch, erstellt eine Auswahl des gewünschten Bereichs und kopiert den passenden CSS-Code. Die Option innerhalb des hochgeladenen Bildes noch eine Auswahl definieren zu können, hebt dieses Tool von vergleichbaren Diensten ab.

Contrast Ratio
Mit dem Tool Contrast Ratio kann das Kontrast-Verhältnis zwischen Text- und Hintergrundfarbe berechnet werden. Ziel ist es die Lesbarkeit von Web-Texten zu optimieren.

Plugins
Guide Guide
Guide Guide ist ein Photoshop-Plugin zur Erstellung von Gestaltungsrastern.

Scripte
Uniform
Uniform hat zwar schon einige Jahre auf dem Buckel, funktioniert aber immer noch einwandfrei. Das Script arbeitet auf Basis von jQuery und ermöglicht es euch Formularelemente zu gestalten. select
-, radio
-, input
- und checkbox
-Elemente werden maskiert und können mit CSS3 oder einer Grafik überschrieben werden.

ArcText
Mit dem jQuery Plugin ArcText könnt ihr Textelemente verformen. Das Script erhaltet Ihr übrigens durch einen Klick auf den Link ganz oben rechts. Wenn Euch Bögen und Kreise nicht ausreichen, werft auch einen Blick auf dieses Tool.

Retina Images
Das Script Retina Images liefert Bilder in verschiedenen Auflösungen anhand der Auflösung des Betrachtungsgeräts. Somit lassen sich auch img
-Tags im HTML-Markup Retina-Ready umsetzen.

Tweet!
Puh! Noch ein Tool zur Intergration eines Twitter-Streams? Dieses Tool hat es in die Liste geschafft, da es einfach zu implementieren ist und Links, Retweets und Benutzerbilder anzeigt.

FancyMoves
FancyMoves ist ein auf jQuery basierendes Carousel zur attraktiven Darstellung von Bildern. Pro Element können weitere Bilder in einer Lightbox angezeigt werden, das Script lässt sich auch über die Tastatur steuern.

jQSlickWrap
Mit dem jQuery-Plugin jQSlickWrap könnt ihr Texte um filigrane Formen in Bildern herumfließen lassen. Das Tool ermöglicht also komplexere Seitenlayouts als das mit den Floating-Eigenschaften von CSS möglich ist. Adobe arbeitet übrigens bereits an einer ähnlichen Lösung namens Adobe CSS Regions.

Swipe.js
Mit Swipe.js wandelt ihr eine Liste kinderleicht in einen per Touch-Control steuerbaren Slider um. Das Script arbeitet unabhängig von JavaScript-Bibliotheken wie jQuery.

iView Slider
Der iView Slider ist ein auf jQuery basierender Bildslider mit einigen interessanten Funktionen. Neben der "responsive"-Komponente können Video-, HTML- und iframe-Inhalte im Slider platziert werden. Zusätzlich können Bildbeschreibungen animiert werden.

Responsly.js
Das jQuery Plugin responsly.js bindet "Responsive Widgets" für die Elemente Slider und Accordion ein. Die Effekte sind mit CSS3 realisiert.

Photo Swipe
Photo Swipe ist eine für Touchscreens und mobile Geräte optimierte Bildergalerie. Die Fotos werden im Vollbild dargestellt; per Gestensteuerung (Swipe) kann zum nächsten Bild gewechselt werden.

Templates
HTML5 Blank WordPress Theme
Dieses Blank-Theme bietet euch die perfekte Grundlage für den Start eines neuen HTML5-WordPress-Projekts. Diverse Techniken wie das Auslagern von Scripten, Custom Post Types, mobile Unterstützung u.v.m. sind bereits enthalten. Auf der Website findet ihr eine vollständige Liste. Sehr empfehlenswert - auch um einfach im Code zu stöbern.

Interface Sketches
Mit dieser umfangreichen Sammlung an Vorlagen für Browser, Tablets und Smartphones, könnt ihr euer nächstes Projekt optimal beginnen.

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.
Die Website ist noch lange nicht fertig. Für Bug-Reports, Anregungen und Hinweise bin ich euch sehr dankbar.
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Das könnte dich auch interessieren
17 Kommentare
Kommentar verfassen
Justin Schueler
Verfasst am 15. Oktober 2012 um 8:48 Uhr.
Moinsen.
Super Beitrag, Danke :)
Nur zur Info: Der Link zu Wirefy ist leider broken :(
Jonas Hellwig
Verfasst am 15. Oktober 2012 um 11:56 Uhr.
Danke für die Info. Das Tool ist wohl jetzt unter einer eigenen Domain erreichbar. Ist korrigiert. http://getwirefy.com/
Bertram Simon
Verfasst am 15. Oktober 2012 um 10:07 Uhr.
Schöne Auflistung, obwohl ich die vielen Grid-Frameworks nicht mehr sehen kann;)
Jonas Hellwig
Verfasst am 15. Oktober 2012 um 11:54 Uhr.
Ich frage mich eher wer noch die Motivation hat ein neues Framework zu entwickeln, obwohl es schon so viele gibt :)
Ralf Heumann
Verfasst am 15. Oktober 2012 um 11:24 Uhr.
Danke, Jonas! Live.js werde ich mal ausprobieren. Habe bisher immer CSSrefresh verwendet und fand es immer schade, dass nur die CSS-Datei überprüft wird.
Jörg
Verfasst am 15. Oktober 2012 um 12:08 Uhr.
Wobei ich statt live.js lieber das FF Addon „Auto Reload“ nutze. Denn das funktioniert auch lokal und man kann ganze Ordnerinhalte auf Änderungen überprüfen lassen.
Ralf Heumann
Verfasst am 15. Oktober 2012 um 15:11 Uhr.
Noch besser! Danke :)
Felix
Verfasst am 15. Oktober 2012 um 15:07 Uhr.
Du hast wieder einmal vieles vorgestellt, was ich noch nicht kannte. Recht herzlichen Dank!
Marcel Kalveram
Verfasst am 16. Oktober 2012 um 0:45 Uhr.
OMG, das sind so viele Tools, dass ich einen Monat brauche, mir alle reinzuziehen :)
Florian
Verfasst am 16. Oktober 2012 um 19:35 Uhr.
Herzlichen Dank, super Zusammenstellung, wie immer. :-)
Aber habe nur ich das Gefühl, dass die Welt langsam von *enorm* vielen Grid-Layouts und Responsive Design – Scripts überflutet wird?
Jürgen
Verfasst am 16. Oktober 2012 um 21:03 Uhr.
Hi Jonas,
danke für die tolle Aufstellung, auch ich habe hier neues gefunden.
platzh1rsch
Verfasst am 19. Oktober 2012 um 10:42 Uhr.
Wow. Das ist mal eine ausführliche Liste. Die verschiedenen Gallery Tools werde ich mir mal anschauen. Was hälst du von Grids? Bisher habe ich all meine Responsive Layouts „from Scratch“ erstellt, hatte nie wirklich Lust mich in ein Grid System einzuarbeiten.
Jonas Hellwig
Verfasst am 19. Oktober 2012 um 11:05 Uhr.
Ich selbst nutze eigentlich immer einen Grid-Calculator (wenn überhaupt) und kein Framework. Da nutze ich dann GridCalculator oder Gridpak. Vorab erstelle ich normalerweise eine Skizze und schaue dann was für ein Raster überhaupt Sinn macht.