kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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.

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!

9 Kommentare

  1. Carsten Witt

    Verfasst am 20. Februar 2013 um 9:15 Uhr.

    …omannomann, und schon wieder 8 Tabs offen… danke für die Sammlung!

  2. Jason Richards

    Verfasst am 20. Februar 2013 um 15:00 Uhr.

    Wow, immer wieder toll hier reinzuschauen – vielen dank dafür, super tools!

  3. Cody

    Verfasst am 20. Februar 2013 um 15:42 Uhr.

    Da sind mal wieder starke Sachen dabei. Besonders GenerateWP ist für mich sehr interessant. Dann kann ichs mir demnächst noch einfacher machen. Dort fehlt nur noch ein Generator für die Options-Pages, die muss man sich ja aktuell selber zusammenschrauben. Sonst geniale und heiße Tipps Jonas. ;)

  4. Jörg

    Verfasst am 20. Februar 2013 um 20:24 Uhr.

    Tolle Liste, Danke.

  5. Felix

    Verfasst am 22. Februar 2013 um 9:58 Uhr.

    Dankeschön!

  6. Jenny

    Verfasst am 22. Februar 2013 um 12:58 Uhr.

    Super Sammlung =) werde ich gleich beim nächsten Projekt testen!

    LG Jenny

  7. Andreas

    Verfasst am 1. März 2013 um 17:19 Uhr.

    Hallo Jonas, danke für die Sammlung. Hailpixel.com finde ich ganz interessant, beim Designen kann man das vielleicht mal brauchen.
    Gruß, Andreas

  8. Patrick

    Verfasst am 24. März 2013 um 15:04 Uhr.

    Also mit Font2Web wäre ich sehr vorsichtig. „Lizenz-Verstöße“

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.