kulturbanause Blog

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

24 neue Tools, Scripte & Frameworks für Webdesigner – Dezember 2012

Es ist wieder soweit, ich habe die interessantesten Tools des Monats für euch zusammengefasst. Wie bereits in den letzten drei Monaten (Nov., Okt., Sep.) findet ihr in diesem Artikel eine bunte Zusammenstellung an Hilfsmitteln für den Einsatz im Webdesign. Aktuell besonders interessant sind die Tools zum Thema Responsive Design, aber auch Video-Hintergründe, Animations-Tools, Slideshows, Scrolling-Effekte, SVG-Renderer und CSS3-Generator sind mit von der Partie.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Bookmarklet

Viewport Resizer

Mit dem Viewport Resizer könnt ihr den Viewport eures Browsers auf verschiedene typische Formate (iPhone, iPhone5, iPad …) einstellen. Das Tool zeigt darüber hinaus den aktuellen Viewport anhand der Größe des Browserfensters an. Über einen Konfigurator können auch eigene Voreinstellungen festgelegt werden.

Screenshot von Viewport Resizer
Screenshot von Viewport Resizer

Download-Quellen

Endless Icons

Auf Endless Icons findet ihr einfarbige, simple und sehr brachbare Icons zum kostenlosen Download im PNG-Format.

Screenshot von Endless Icons
Screenshot von Endless Icons

Online-Tools

Ringmark

Mit Ringmark wird überprüft, wie gut ein mobiler Browser den Anforderungen mobiler Web-Entwicklung gerecht wird. Das Tool sollte über einen mobilen Browser aufgerufen werden und zeigt dann in Form von Ringen wie gut der Browser sich geschlagen hat.

Screenshot von Ringmark auf einem Dekstop-Browser
Screenshot von Ringmark auf einem Dekstop-Browser

BrandColors

Wenn ihr in Zukunft einmal die exakte Hausfarbe eines (Online)-Unternehmens sucht, schaut bei BrandColors vorbei. Hier werden die Farbcodes der prominentesten Vertreter gelistet und können per Klick kopiert werden.

Die Farben bekannter Marken auf BrandColors
Die Farben bekannter Marken auf BrandColors

CSS3 Selectors Test

Mit diesem Tool testet ihr welche CSS3 Selektoren (z.B. .class, E + F, :nth, etc.) euer Browser unterstützt. Ein sehr hilfreiches Werkzeug bei der Suche nach Inkompatibilitätsproblemen.

Screenshot des CSS3-Selector Tests in Chrome
Screenshot des CSS3-Selector Tests in Chrome

Easing.net

Auf easing.net findet ihr eine Übersicht über die verschiedenen Easing-Animations-Effekte. Mit diesem Tool lässt sich sehr schnell die gewünschte Art der Animation finden.

Screenshot von Easing.net
Screenshot von Easing.net

On/Off FlipSwitch

Mit diesem Online-Tool könnt ihr im Handumdrehen ansehnliche und animierte An/Aus-Schalter für eure Website herstellen. Ihr könnt entweder das Aussehen von iOS oder Android übernehmen, oder den Schalter selbst gestalten.

Screenshot von On/Off FlipSwitch
Screenshot von On/Off FlipSwitch

CSS Media Queries Test

Auf der Website CSS Media Queries Test könnt ihr Media Queries erstellen und über einen QR-Code sofort am Handy/Tablet testen. Interessant ist das vor allem, wenn ihr mit Extensions für Media Queries arbeitet (z.B. -webkit-device-pixel-ratio: 2) und/oder experimentelle CSS4-Eigenschaften einsetzt.

Screenshot von CSS Media Queries Test
Screenshot von CSS Media Queries Test

Scripte

enquire.js

Mit enquire.js könnt ihr Media Queries über JavaScript ansprechen und Funktionen verknüpfen. Die Möglichkeiten klassischer Media Queries werden somit erweitert.

Screenshot von enquire.js
Screenshot von enquire.js

BonsaiJS

BonsaiJS ist eine JavaScript-Bibliothek, die grafische Objekte mit Hilfe eines integrierten SVG-Renderers darstellt. Das Tool kann für kleine Animationen, Grafik-Effekte oder für die Visualisierung von Datensätzen benutzt werden.

Screenshot von BonsaiJS
Screenshot von BonsaiJS

Kerning.js

Mit dem JavaScript Kerning.js könnt ihr das Kerning von Web-Texten buchstabengenau optimieren. Das Script wird einmal im head eingebunden, anschließend werden über individuelle CSS-IDs die Abstände, Farben und Schriftschnitte definiert.

Screenshot von Kerning.js
Screenshot von Kerning.js

Sequence.js

Mit Sequence.js lässt sich eine Responsive Slideshow mit sehr ansehnlichen CSS3-Animationseffekten herstellen. Das Script zwingt euch dabei kein Standard-Theme für den Slider auf, alles lässt sich frei gestalten.

Screenshot von Sequence.js - Responsive Slider
Screenshot von Sequence.js - Responsive Slider

BigVideo.js

Mit dem Script BigVideo.js könnt ihr vollformatige Video-Hintergründe für eure Website erstellen. Das Script ermöglicht es auch Playlisten oder Bilder einzusetzen.

Screenshot von Big Video
Screenshot von Big Video

Tooltipster

Mit dem jQuery-Plugin Tooltipster könnt ihr HTML valide, stylische Tooltips erstellen. Das Script bietet von Haus aus bereits verschiedene Arten von Tooltips und verschiedene Themes.

Screenshot von Tooltipster
Screenshot von Tooltipster

Freetile.js

Freetile.js ist ein Plugin für jQuery mit dem Ihr das Layout eurer Website in einem Pinterest-ähnlichen Aufbau darstellen könnt.

Screenshot von Freetile.js
Screenshot von Freetile.js

Moment.js

Mit moment.js könnt ihr Datumsangaben formatieren. Möglich sind klassische Zeitangaben wie "24. Dezember 2008" oder relative Angaben wie "vor 6 Monaten", "letzten Freitag" etc.

Screenshot von moment.js
Screenshot von moment.js

Typograph

Mit dem Typograph könnt ihr relative Schriftgrößen (em) für verschiedene HTML-Elemente recht unkompliziert festlegen. Die typografische Gestaltung und das Verhältnis der Schriftelemente zueinander steht dabei im Vordergrund.

Screenshot des Typograph
Screenshot des Typograph

JZoopraxiscope

Mit dem jQuery-Plugin JZoopraxiscope lassen sich Animationen aus Einzelbildern erstellen. Schaut euch am besten die Demo auf der Website des Tools dazu an.

Screenhot von JZoopraxiscope
Screenhot von JZoopraxiscope

SwipeView

Mit SwipeView könnt ihr Slideshows oder Carousels für Touchscreens erstellen. Das Design ist sehr reduziert und unterstützt von Haus aus die Steuerung per Wischen (Swipe).

Screenshot von SwipeView
Screenshot von SwipeView

Infinity.js

Mit Infinity.js verbessert ihr die Performance von langen Listen, Feeds oder Websites mit Infinite Scrolling.

Screenshot von infinity.js
Screenshot von infinity.js

Chromath

Mit Chromath könnt ihr auf JavaScript-Basis Farben konvertieren, berechnen und umwandeln. Die Konvertierung von einem Farbraum in einen anderen ist dabei ebenso denkbar wie die Generierung eines Farbkonzeptes auf Grundlage einer Ausgangsfarbe.

Screenshot von Chromath
Screenshot von Chromath

Frameworks

Bourbon Neat

Bourbon ist ein auf SASS und Bourbon basierendes Framework. Und ja, es ist responsive.

Screenshot von Bourbon Neat
Screenshot von Bourbon

Kube CSS-Framework

Das Kube-Framework bietet eine sehr ordentliche und minimalistische Grundlage für neue Projekte. Adaptive, Responsive und typografisch hochwertig.

Screenshot des Kube-Frameworks
Screenshot des Kube-Frameworks

Toast

Toast ist ein minimalistisches CSS3-Framework für responsive Websites. Es bietet ein zwölfspaltiges Raster, einen CSS Normalizer und ein paar typografische Grundlagen.

Screenshot vom Toast-Framework
Screenshot vom Toast-Framework

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.

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

6 Kommentare

  1. Daniele De Rosa

    Verfasst am 16. Dezember 2012 um 21:27 Uhr.

    Wie immer sehr nützliche Tools, danke dafür!

    Viele Grüße,
    Daniele

  2. Rocki

    Verfasst am 20. Dezember 2012 um 21:58 Uhr.

    Sehr schöne Tools, besonder der Viewport Resizer hilft mir beim etwickeln eines Webdesign für mein WordPress Blog.

  3. Chris09

    Verfasst am 26. Dezember 2012 um 17:40 Uhr.

    Ich muss zustimmen, da sind einige Werkzeuge bei, mit denen ich das Webdesign von meinen einfachen CMS aufmöbeln werde.

  4. Nico (giga tags)

    Verfasst am 29. Dezember 2012 um 11:26 Uhr.

    Super Artikel, vielen Dank für die Tools und Frameworks :)

  5. Patrick

    Verfasst am 27. Dezember 2015 um 16:15 Uhr.

    Hey Jonas,

    ich hab mir die Resizer und RWD Bookmarklet auf dem Chrome installiert/ in den Fav drin.

    irgend wie funktionieren sie bei Offline Seiten nicht, muss man irgend was einstellen das es klappt?

    • Jonas Hellwig

      Verfasst am 28. Dezember 2015 um 17:00 Uhr.

      Hallo Patrick, die von dir angesprochenen Tools sind mittlerweile in fast allen Browsern automatisch integriert. Ich würde die Tools heute nicht mehr verwenden und statt dessen die Google Chrome Developer Tools nutzen.

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.