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

tools

Auch in diesem Monat möchte ich euch die neuen Tools und Scripte über die gestolpert bin nicht vorenthalten. Angefangen bei Hilfsmitteln zur Berechnung von Prozentwerten im RWD, über Code-Generatoren für WordPress-Themes und CSS3-Animationen bis hin zu Debuggern, Emulatoren und praktischen JavaScripten. Es ist für jeden etwas dabei.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Frameworks

ProFound Grid

Wenn ihr mit SCSS arbeitet und euch für Responsive Webdesign interessiert, ist ProFound Grid definitiv einen Blick wert. Das Framework ist sehr flexibel und ermöglicht flüssige und starre Raster.

Screenshot der ProFound Grid-Website
Screenshot der ProFound Grid-Website

Groundwork

Groundwork ist ein umfangreiches Responsive Framework auf Basis von SASS und Compass.

Screenshot von Groundwork
Screenshot von Groundwork

Online-Tools

Modern IE

Auf modern.ie stellt Microsoft umfangreiche Informationen und Test-Möglichkeiten für den Internet Explorer 10 zur Verfügung. Mit Hilfe dieser Website soll Webentwicklern die Optimierung für den Internet Explorer erleichtert werden. Vielen Dank an Mat für die Info zu dieser Seite.

Screenshot von modern.ie
Screenshot von modern.ie

GenerateWP

GenerateWP stellt verschiedene Code-Generatoren zur Entwicklung individueller WordPress-Themes bereit. Ihr findet u.a. einen Taxonomy Generator, einen Post Type Generator, einen Post Status Generator, einen Sidebar Generator, einen Menu Generator und einen Theme Support Generator for WordPress. Fantastisch!

Screenshot von GenerateWP
Screenshot von GenerateWP

Animation Fill Code

Mit dem Online-Tool "Animation Fill Code" könnt ihr euch den benötigten CSS-Code für Keyframe-Animationen generieren lassen. Sehr praktisch, da Keyframe-Animationen lästig zu schreiben sind. Das Tool berücksichtigt auch Vendor-Prefixes.

Screenshot des Online-Tools
Screenshot des Online-Tools

The Responsive Calculator

Mit dem Responsive Calculator berechnet ihr das Verhältnis zwischen Eltern- und Kind-Elementen in Prozent. Sehr praktisch, wenngleich ein Taschenrechner auch funktioniert.

Screenshot des Responsive Calculators
Screenshot des Responsive Calculators

Font2Web

Font2Web konvertiert Schriften (TrueType, OpenType) in die Webfont kompatiblen Formate .ttf, .otf, .eot, .woff und .svg. Auch der entsprechende CSS-Code wird mitgeliefert.

Website von Font2Web
Website von Font2Web

Hailpixel

Mit Hailpixel könnt ihr auf sehr intuitive Weise Farbsets erstellen.

Screenshot von Hailpixel
Screenshot von Hailpixel

Opera Mini Simulator

Der Opera Mini Simulator ist ein Online-Tool zur Simulation des Opera-Browsers auf sog. Feature Phones.

Screenshot des Opera-Simulators
Screenshot des Opera-Simulators

Cover Compliance Tool

Facebook hat in den Guidelines eingeführt, dass ein Coverfoto maximal 20% Text enthalten darf. Dieses simple Online-Tool hilft euch dabei die 20% abzuschätzen. Weitere Hilfe zur Facebook-Page-Anpassung findet ihr auch in meinen Cheatsheet zum Thema.

Screenshot des Cover Compliance Tool
Screenshot des Cover Compliance Tool

Fontello

Mit dem Online-Tool/Generator Fontello könnt ihr euch eigene Webfont-Icon-Sets zusammenstellen.

Screenshot von Fontello
Screenshot von Fontello

WP Fill Me

Auf WP Fill Me könnt ihr Test-Inhalte für WordPress erstellen lassen. Wählt aus der Liste verschiedene HTML-Elemente aus und generiert den entsprechenden Code. Anschließend fügt ihr die Struktur im WordPress-Editor wieder ein. Sehr praktisch!

Screenshot von WP Fill Me
Screenshot von WP Fill Me

WP Function Me

Auf WP Function Me stehen verschiedene, häufig benötigte Code-Snippets für die functions.php des Themes zur Auswahl. Markiert die gewünschten Bausteine und generiert anschließend den entsprechenden Code.

Screenshot von WP Function Me
Screenshot von WP Function Me

Desktop-Anwendungen

Opera Mobile Emulator

Diese Desktop-Anwendung emuliert den Opera Browser auf diversen Tablets und Smartphones. Nicht nur die Auswahl an Hardware ist sehr umfangreich, auch die Einstellungsmöglichkeiten sind sehr ausgefeilt. Ein super Tool für den Einsatz im Responsive Web Design.

Screenshot des Opera Mobile Emulators
Screenshot des Opera Mobile Emulators

Scripte

jQuery Custom Content Scroller

Mit dem jQuery-Plugin jQuery Custom Content Scroller erstellt ihr individuell gestaltete Scrollbars.

Screenshot der Demo-Seite
Screenshot der Demo-Seite

Motio

Mit Motio erstellt ihr Sprite-Animationen mit Hilfe des JavaScript-Frameworks jQuery. Die Website zeigt einige interessante Beispiele.

Screenshot von Motio
Screenshot von Motio

Conditionizr

Mit Conditionizr könnt ihr CSS- und JavaScript-Code nur für ausgewählte Browser, Bildschirmauflösungen und/oder Betriebssysteme ausgeben. Also vergleichbar mit Conditional Comments, nur eben als Script für JavaScript, CSS und Retina. Darüber hinaus arbeitet das Script optimal mit Modernizr zusammen, und fügt nach dem selben Prinzip CSS-Klassen in den html-Tag ein.

Screenshot der Conditionizr-Website
Screenshot der Conditionizr-Website

Toolbar.js

Mit Toolbar.js erstellt ihr im Handumdrehen attraktive Toolbars im Look eines Tooltips. Die Optionsleisten können beliebig positioniert werden und enthalten eine klassische HTML-Liste.

Screenshot von toolbar.js
Screenshot von toolbar.js

Pickadate.js

Wer einen Datepicker auf jQuery-Basis sucht, sollte sich Pickadate.js einmal anschauen. Der Kalender eignet sich sogar für den Einsatz im RWD.

Screenshot von Pickadate.js
Screenshot von Pickadate.js

The Heads-Up Grid

Mit Hilfe des Scripts "The Heads-Up-Grid" kann ein (responsive) Raster über der Website eingeblendet werden. Das erleichtert die Webentwicklung im Browser enorm.

Screenshot von The Heads-Up Grid
Screenshot von The Heads-Up Grid

FlexNav

Mit FlexNav könnt ihr komplexe Multi-Level-Navigationen für responsive Websites herstellen.

FlexNav im Einsatz
FlexNav im Einsatz

Hint.css

Mit Hint.css erstellt ihr hübsche Tooltips auf Basis von CSS (SASS) und HTML5.

SASS/CSS-Tooltips mit Hint.css
SASS/CSS-Tooltips mit Hint.css

Responsive Img

Mit Responsive Img könnt ihr bereits existierende Bilder "responsive" machen. Das Script arbeitet sehr ähnlich wie Adaptive Images und benötigt eine winzige Anpassung auf dem Server. Ein großer Vorteil: Scripte dieser Art lassen sich in Zukunft wieder restlos entfernen.

Screenshot von Responsive Img
Screenshot von Responsive Img

Behave.js

Mit Hilfe von Behave.js wandelt ihr eine ganz normale Textarea in einen komfortablen Mini-Code-Editor um.

Screenshot von Behave.js :)
Screenshot von Behave.js :)

Download-Quellen

Raphaël Icon-Set via @font-face

Mit diesem Webfont-Icon-Set könnt ihr eure Website mit schicken Vektor-Icons aufwerten.

Screenshot der Webfont-Website
Screenshot der Webfont-Website

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.

Screenshot der Website
Screenshot der Website

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.

Das Artikelbild dieses Beitrags stammt von Profound-Grid.