kulturbanause Blog

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

25 neue Tools, Scripte & Frameworks für Webdesigner – Januar 2013

Auch im neuen Jahr möchte ich euch die interessantesten Tools der letzten 30 Tage nicht vorenthalten. Neben spannenden Download-Quellen für Webfont-Icons, findet ihr in der heutigen Zusammenfassung diverse Scripte zum Thema RWD, Polyfills für den Einsatz von CSS3, Scripte zur Performance-Optimierung sowie Drag & Drop-Rastersysteme.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Bookmarklets

HTML Code Sniffer

Mit dem HTML Code Sniffer könnt ihr den Quellcode euer Website sehr detailliert validieren und prüfen. Im Mittelpunkt der Prüfung steht auch eine Validierung nach WCAG 2. Das Tool ist in Form eines Bookmarklets und eines Online-Tools verfügbar.

Screenshot von HTML Code Sniffer
Screenshot von HTML Code Sniffer

Frameworks

Grid-A-Licious

Mit dem jQuery-Plugin Grid-A-Licious erstellt ihr Layouts mit fließenden Boxen. Das an Pinterest erinnernde System ist selbstverständlich "fully responsive".

Screenshot von Grid-A-Licious
Screenshot von Grid-A-Licious

CSS Horus

CSS Horus ist ein Framework für Adaptive Websites mit umfangreichen Einstellungsmöglichkeiten. Neben Angaben für Tabellen, Buttons, Formulare etc. kann das Framework auch mit LESS verwendet werden.

Screenshot von CSS Horus
Screenshot von CSS Horus

BASE

Falls euch die Auswahl an "responsive Frameworks" immer noch nicht ausreichen sollte ... auch das Base-Framework bietet eine solide Grundlage für neue Projekte. :)

Screenshot von Base
Screenshot von Base

Online-Tools

PX to EM

Wie der Name bereits andeutet, ist PX to Em ein Tool um Pixel-Werte in EM-Werte umzuwandeln. Ihr könnt entweder eine Umrechnungstabelle verwenden oder den Converter bemühen.

Screenshot von Px to EM
Screenshot von Px to EM

css3base

Arbeitet Ihr CSS-Vorlagen wie normalize.css & Co? Mit css3base könnt ihr euch ein globales Stylesheet aus verschiedenen populären "Resets" zusammenstellen lassen.

Screenshot von css3base
Screenshot von css3base

Download-Quellen

icononstr

Auf iconmonstr findet ihr kostenlose Icons im PNG und SVG-Format. Alle Icons sind einfarbig und stark stilisiert bzw. simpel gestaltet.

Screenshot von Iconmonstr
Screenshot von Iconmonstr

IcoMoon

IcoMoon ist ein Download-Portal für SVG/Webfont-Icons und eine HTML5-App. Mit dem Online-Tool könnt ihr auch eigene Vektoren in Webfont-Icons umwandeln.

Screenshot von IcoMoon
Screenshot von IcoMoon

Iconbench

Auf Iconbench könnt ihr einfarbige Icons mit Farben, Verläufen, Effekten, Schlagschatten und Konturen aufwerten. Wenn ihr euch für einen Stil entschieden habt, stellt ihr per Klick ein Icon-Set zusammen und ladet die Icons im PNG-Format herunter.

Screenshot von Iconbench
Screenshot von Iconbench

X-Icon Editor

Der X-Icon Editor ist ein Favicon-Generator der allen Ansprüchen moderner Websites gerecht wird und Icons in allen notwenigen Größen erstellt. Insbesondere für den IE9+ werden hochauflösende Icons erstellt.

Screenshot von X-Icon Editor
Screenshot von X-Icon Editor

Scripte

Socialite.js

Mit Socialite.js könnt ihr Social Sharing Buttons dann laden, wenn sie vom Besucher auch benötigt werden. Um die Performance zu verbessern, könnt ihr das Nachladen an verschiedene Events knüpfen, z.B. an einen Mouse Over oder eine bestimmte Scrolling-Position.

Screenshot von Socialite.js
Screenshot von Socialite.js

Gridster.js

Mit dem jQuery-Plugin Gridster.js erstellt ihr Drag & Drop Rastersysteme.

Screenshot von Gridster.js
Screenshot von Gridster.js

FooTable

Das jQuery-Plugin FooTable optimiert HTML-Tabellen für die Nutzung auf kleinen Bildschirmen.

Screenshot der FooTable-Website
Screenshot der FooTable-Website

xCharts

Mit xCharts erstellt ihr dynamische und sehr schön gestaltete Diagramme auf Basis von SVG, HTML, CSS und natürlich dem JavaScript selbst.

Screenshot der Website von xCharts
Screenshot der Website von xCharts

HeyOffline.js

Mit dem JavaScript (CoffeeScript) HeyOffline.js könnt ihr User über ausgefallene Funktionen eurer Website informieren.

Screenshot der HeyOffline.js-Website
Screenshot der HeyOffline.js-Website

cssParentSelector.js

Mit dem folgenden Script könnt ihr die Vorteile des CSS Parent Selectors der CSS4 Spezifikation bereits heute einsetzen. z.B. E! > F

Screenshot des Parent-Selector-Scripts
Screenshot des Parent-Selector-Scripts

Response JS

Mit dem jQuery-Plugin Response JS könnt ihr HTML5-Inhalte in bestimmten Media Queries austauschen/nachladen. Nach dem "Mobile-First"-Prinzip, kann eine Website so um Inhalte erweitert werden.

Screenshot von Respond JS
Screenshot von Respond JS

Adapt.js

Mit dem winzigen Script Adapt.js könnt ihr verschiedene externe CSS-Dokumente in Abhängigkeit zum aktiven Media Query laden.

Screenshot der Website von Adapt.js
Screenshot der Website von Adapt.js

Backstretch

Mit dem jQuery-Plugin Backstretch fügt ihr Hintergründe in eure Website ein, die Grafik passt sich dabei automatisch der Größe des Eltern-Elements an. Auch Slideshows sind möglich. Das Script eignet sich nicht nur für Websites mit großen Foto-Hintergründen, sondern auch für kleine Grafiken im RWD.

Screenshot von Backstrech
Screenshot von Backstrech

carouFredSel

Mit dem Script (jQuery-Plugin) carouFredSel wandelt ihr beliebige HTML-Elemente in responsive Carousels um.

Screenshot von carouFredSel
Screenshot von carouFredSel

PageSlide

Mit dem jQuery-Plugin PageSlide könnt ihr unkompliziert ein Off-Canvas-Element herstellen.

Screenshot der PageSlide-Website
Screenshot der PageSlide-Website

yepnope.js

Mit Yepnope könnt ihr Scripte, insbesondere Polyfills, nur dann laden, wenn Sie von Besucher auch benötigt werden. In Kombination mit Modernizr nahezu unschlagbar.

Screenshot von Yepnope.js
Screenshot von Yepnope.js

Responsive Images

Mit diesem Script könnt ihr optimierte Bildgrößen für unterschiedliche Displays und Auflösungen herstellen.

Demo-Seite von Responsive Images
Demo-Seite von Responsive Images

selectivizr

Mit dem Polyfill selectivizr rüstet ihr CSS3 Pseudoklassen und Attributselektoren für die Internet Explorer 6-8 nach.

Website von selectivizr
Website von selectivizr

Picturefill

Picturefill ist ein Polyfill zur Verwendung des HTML--Elements.

Screenshot der Demo-Website
Screenshot der Demo-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.

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

3 Kommentare

  1. Daniel

    Verfasst am 21. Januar 2013 um 9:47 Uhr.

    Ganz ehrlich: Ich liebe diese Listen. Super Sache, dass du dir jeden Monat die Arbeit machst ;)

  2. Heohni

    Verfasst am 1. Februar 2013 um 15:52 Uhr.

    WOW! Ich bin begeistert! Klasse für diese Links! Herzlichen Dank für das zusammentragen! Ich lese Deine Feeds immer mit großer Begeisterung! Klasse! Weiter so!

  3. Bernd

    Verfasst am 8. Februar 2013 um 12:33 Uhr.

    Coole Liste an Links :-)

    Auch die eigene Suche ist eine gute Idee. Immer weiter so!

    Grüß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.