Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Jeden Monat stolpere ich über unzählige Tools, Scripte und Frameworks. Die in meinen Augen interessantesten Tools stelle ich detailliert vor, doch viele bleiben unerwähnt. Ab heute werde ich diese unerwähnten Tools regelmäßig in einem Beitrag zusammenfassen.
In diesem Monat könnt ihr euch auf spannende Quellen zum Thema HTML5, CSS3 und Responsive Design freuen. Interessante Animationen, Bookmarklets, Online Generatoren, Frameworks und Bildkompressoren runden die Liste ab. Viel Spaß!

Bookmarklets

deCSS3

Mit dem Bookmarklet deCSS3 könnt ihr die CSS3-Funktionen einer Website per Klick deaktivieren. Das Tool bietet sich an um Fallback-Lösungen zu überprüfen.

Website von deCSS3
Website von deCSS3

Frameworks & Boilerplates

Gumby

Gumby ist ein responsive Framework auf Basis von CSS3 und HTML5. Die vier verschiedenen Download-Pakete werden mit allen benötigten Scripten und Photoshop-Dateien ausgeliefert. Ihr könnt also sofort loslegen.

Screenshot der Gumby-Website
Screenshot der Gumby-Website

Columnal

Columnal ist ein responsive CSS Grid Framework mit einer Breite von 1140 Pixel und integrierter Video- und Bild-Skalierung.

Website von Columnal
Website von Columnal

Fluid Grids

Fluid Grids ist ein Basis-Framework mit sechs bis 16 Spalten. Es bietet sich vor allem für schnelle Prototypen an.

Website von Fluid Grids
Website von Fluid Grids

Online-Tools

This is responsive

This is responsive fasst verschiedene Quellen und Beispiele zum Thema Responsive Webdesign zusammen.

Website von "This is responsive"
Website von „This is responsive“

3D Ribbon Generator

Mit dem CSS Ribbon Generator könnt ihr Ribbons mit purem CSS3 erstellen lassen. Gestaltet wahlweise ein komplett eigenes Ribbon oder nutzt eine der verschiedenen Stilvorlagen.

Screenshot des CSS Ribbon Generators
Screenshot des CSS Ribbon Generators

HTML5 Readiness

Die Website HTML5 Readiness visualisiert die Browser-Unterstützung von HTML5- und CSS3-Funktionen der letzten Jahre.

Website von HTML5 Readiness
Website von HTML5 Readiness

CSS Box Machine

Mit der CSS Box Machine erstellt ihr im Handumdrehen ansehnliche Box-Shadow-Effekte für eure Website. Wählt einfach den passenden Effekt aus, und kopiert den HTML- und CSS-Code in eure Seite.

CSS Box Machine von Theme Shock
CSS Box Machine von Theme Shock

Color Hexa

Mit Color Hexa könnt ihr eine Farbe in nahezu alle Farbsysteme umrechnen lassen und interessante Informationen zu den verschiedenen Farbsystemen abrufen. Als Ausgangswert könnt ihr jeden gängigen Farbwert verwenden.

Website von Color Hex
Website von Color Hexa

Tiny PNG

Tiny PNG ist ein Online-Bildkompressor für PNGs. Ihr könnt bis zu 20 Dateien je 2MB Größe parallel hochladen.

Tiny PNG
Tiny PNG

Pigdom

Mit Pigdom könnt ihr die Ladezeit eurer Website detailliert testen und eventuelle Flaschenhälse ausfindig machen.

Website von Pidom
Website von Pidom

Get Twitter ID from User

Mit diesem Tool könnt ihr anhand eines Twitter-Benutzernamen, die User-ID und den RSS-Feed des Accounts abrufen.

Screenshot der Website "ID from Twitter-User"
Screenshot der Website „ID from Twitter-User“

Font Stack Builder

Mit dem Font Stack Builder wählt ihr sichere Schriftsätze für eure Website aus und sorgt für optimale Fallback-Lösungen in den verschiedenen Betriebssystemen.

Website des Font Stack Builder
Website des Font Stack Builder

Mobile HTML5

Wenn ihr wissen möchtet welche mobilen HTML5-Features in welchem mobilen Browser unterstützt werden, werft einen Blick auf Mobile HTML5.

Mobile HTML5-Website
Mobile HTML5-Website

Scripte

Spin.js

Mit Spin.js könnt ihr typische Ajax-Loader ohne Grafiken und mit puren CSS3-Animationen erstellen.

spin.js Website
spin.js Website

RefineSlide

RefineSlide ist ein auf jQuery basierender Slider für den Einsatz im Responsive Webdesign. Es können beeindruckende CSS3-Animationen festgelegt werden und der Slider funktioniert ab dem Internet Explorer 7.

Website von RefineSlide
Website von RefineSlide

Scrollorama

Wenn ihr wirklich coole Scrolling-Effekte in eurem Projekt einsetzen möchtet, werft einen Blick auf Scrollorama. Das Script unterstützt Fading-Effekte, Zoom, Fly-In und Rotate. Wenn euch das nicht reicht, schaut auch bei Super Scrollorama vorbei.

Website von Scrollorama
Website von Scrollorama

ResponsiveSlides.js

ResponsiveSlides.js ist ein 1KB winziges jQuery-Plugin das eine ungeordnete Liste (ul) in einen responsive Slider verwandelt.

Website von ResponsiveSlides.js
Website von ResponsiveSlides.js

Blueberry

Blueberry ist ein auf jQuery basierender responsive Slider.

Blueberry Website
Blueberry Website

Fixie.js

Mit Fixie.js fügt ihr Platzhalter-Texte in die leeren HTML-Elemente eurer Website ein. Sobald die Testphase vorüber ist, kann das Script wieder entfernt werden.

Website von Fixie.js
Website von Fixie.js

jRumble

jRumble ist ein jQuery-Plugin mit dem ihr Animationen erstellen könnt. Das Plugin ermöglicht unterschiedlichste Vibrationen und Schüttel-Effekte.

jRumble-Website
jRumble-Website

Animate.css

Mit Animate.css erweitert ihr eure Website um verschiedene CSS3-Animationen wie pulsieren, schwingen, blitzen, zoomen etc.

Website von Animate.css
Website von Animate.css

blur.js

blur.js ermöglicht einen Weichzeichnungseffekt hinter halbtransparenten Elementen. Das Script basiert auf jQuery und funktioniert auch mit sich bewegenden Hintergründen.

Website von blur.js
Website von blur.js

list.js

Mit list.js erweitert Ihr eine simple HTML-Seite um die Möglichkeit Listenelemente zu sortieren, zu durchsuchen oder zu filtern.

list.js-Website
list.js-Website

Templates

Underscores

Underscores ist eine perfekte Grundlage für neue WordPress-Themes.

Website von Underscores
Website von Underscores

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 – 11 Kommentare

  1. 24 neue Tools, Scripte & Frameworks für Webdesigner – Dezember 2012 | kulturbanause blog
    schrieb am 21.01.2013 um 08:51 Uhr:

    […] 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 […]

    Antworten
  2. 25 neue Tools, Scripte & Frameworks für Webdesigner – November 2012 | kulturbanause blog
    schrieb am 16.11.2012 um 15:38 Uhr:

    […] bereits im Oktober und September, habe ich auch in diesem Monat die besten Webdesign-Tools der vergangenen 30 Tage zusammengefasst. […]

    Antworten
  3. 26 neue Tools, Scripte & Frameworks für Webdesigner – Oktober 2012 | kulturbanause blog
    schrieb am 15.10.2012 um 08:11 Uhr:

    […] vorgestellt wurden in einem gemeinsamen Beitrag aufzulisten. Entstanden ist so die Liste der Webdesign-Tools von September. Nun möchte ich im Oktober erneut ein paar Ressourcen zusammenfassen. Neben Frameworks und […]

    Antworten
  4. Die besten meiner geteilten Links auf Twitter im September 2012 - pixelstrol.ch
    schrieb am 04.10.2012 um 11:17 Uhr:

    […] 25 neue Tools, Scripte & Frameworks für Webdesigner – September 2012 […]

    Antworten
  5. Jens
    schrieb am 22.09.2012 um 16:11 Uhr:

    Wow echt klasse Sachen dabei die ich noch nicht kannte, wird mir auf jedenfall in Zukunft helfen, so viel zum ausprobieren ;)

    Antworten
  6. Mischa Lempe
    schrieb am 19.09.2012 um 15:23 Uhr:

    Danke Jonas! An vielen Stellen ist man selbst schon vorbei gekommen aber ich finde in Deinen Beiträgen immer wieder viel Neues und Nützliches. Danke für die Mühe das zusammen zu tragen. :-)

    Antworten
  7. hans
    schrieb am 19.09.2012 um 11:13 Uhr:

    „this is responsive“ schaue ich jeden tag rein :)

    Antworten
  8. Felix
    schrieb am 18.09.2012 um 09:30 Uhr:

    Danke für diesen tollen Artikel!

    Antworten
  9. Henning Heyne
    schrieb am 17.09.2012 um 14:41 Uhr:

    Die Links zu Fluid bzw. Responsive Webdesign sind sehr hilfreich gewesen. Vielen Dank für die Sammlung!

    Antworten
  10. Marcel Kalveram
    schrieb am 17.09.2012 um 13:37 Uhr:

    Danke, in der Tat ne tolle Sammlung. Hab ein paar davon gebookmarkt. Scrollorama kommt mir gerade recht.

    Hier noch eine kleine Ergänzung, wenn auch eher experimenteller Natur:
    http://lab.hakim.se/avgrund/

    Antworten
  11. Klaus Oppermann
    schrieb am 17.09.2012 um 12:29 Uhr:

    Eine wirklich erstklassige Zusammenstellung, toll gemacht! Mir gefallen besonders „This is responsive“ und „Pigdom“, aber auch die anderen sind nützlich und tw inspirierend (Animate.css).
    Beste Grüße aus Oldenburg,
    Klaus

    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 →