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.

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.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 9 Kommentare

  1. Patrick
    schrieb am 24.03.2013 um 15:04 Uhr:

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

    Antworten
    • Jonas Hellwig
      schrieb am 24.03.2013 um 16:46 Uhr:

      Das Tool weist den Anwender ja darauf hin.

      Antworten
  2. Andreas
    schrieb am 01.03.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

    Antworten
  3. Jenny
    schrieb am 22.02.2013 um 12:58 Uhr:

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

    LG Jenny

    Antworten
  4. Felix
    schrieb am 22.02.2013 um 09:58 Uhr:

    Dankeschön!

    Antworten
  5. Jörg
    schrieb am 20.02.2013 um 20:24 Uhr:

    Tolle Liste, Danke.

    Antworten
  6. Cody
    schrieb am 20.02.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. ;)

    Antworten
  7. Jason Richards
    schrieb am 20.02.2013 um 15:00 Uhr:

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

    Antworten
  8. Carsten Witt
    schrieb am 20.02.2013 um 09:15 Uhr:

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

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →