Ich habe erneut eine Liste mit hilfreichen Webdesign-Tools für euch zusammengestellt. Im der Sammlung von Mai finden sich verschiedene Scripte für Slider und Navigationsmenüs im Responsive Design, Websites zum Decodieren von URLs und Sonderzeichen, CSS3-Animationen, SVG-Hintergründe uvm. Es ist sicher für jeden etwas dabei.

Bookmarklets

Gridwax

Gridwax ist ein hilfreiches Bookmarklet das den Inhalt eures Browsers mit einem Grundlinienraster überlagert. Per Tastatur kann das Raster gesteuert werden. Das Tool kann euch dabei helfen, den vertikalen Rhythmus einer Website zu optimieren (Stichwort: Baseline Grid).

Frameworks

Cool Kitten

Cool Kitten ist ein Framework für die Erstellung von responsive Parallax-Effekten.

Scripte

Unslider

Unslider ist ein extrem reduzierter jQuery-Slider, ohne überflüssige Effekte oder aufgeblasenen Code. Die responsive Slideshow lässt sich auch mit der Tastatur steuern.

Strapdown.js

Mit Strapdown.js könnt ihr in Sekunden schicke Websites auf Basis von Marked (Markdown Parser) und einem Bootstrap-Theme erstellen. Schreibt einfach ein wenig Markup, bindet das JavaScript ein und gebt an, welches Bootstrap-Theme verwendet werden soll. Fertig ist die Micro-Website.

Sidr

Mit dem jQuery-Plugin Sidr lässt sich ohne großen Aufwand ein "Off-Canvas"-Menü für Responsive Websites herstellen.

Transit

Mit Transit erstellt ihr fantastische CSS-Transitions oder Animationen für jQuery.

Flexisel

Flexisel ist ein jQuery-Plugin zum Erzeugen eines responsive Carousels/Sliders.

Countable.js

Countable.js ist ein kleines JavaScript das für ein bestimmtes HTML-Element die enthaltenen Zeichen, Wörter und Absätze zählen kann.

Responsive Nav

Responsive Nav ist ein kleines JavaScript das eine für Touch-Screens und RWD optimierte Navigation erzeugt. Das Script basiert auf keiner Bibliothek wie etwa jQuery.

Chardin.js

Mit dem jQuery-Plugin Chardin.js könnt ihr sehr ansehnliche Overlays mit Erklärungen für Websites oder Apps erstellen.

Retinise.js

Mit dem jQuery-Plugin Retinise.js könnt ihr Grafiken im HTML-Code dank des data-src-Attributs für HiDpi-Displays optimieren.

jQuery Smart Banner

Mit dem Script jQuery Smart Banner rüstet ihr Smart App Banners in alten Versionen von iOS und unter Android nach.

TimeJump

Mit TimeJump könnt ihr in Audio- und Video-Podcasts an eine beliebige Position verlinken. Die Medieninhalte müssen dazu lediglich über HTML5 eingebunden sein.

whoops

Mit Hilfe von Whoops verbessert, bzw. vereinfacht ihr das Error-Handling, und könnt wunderschöne Fehlermeldungen ausgeben.

Helium

Mit dem JavaScript Helium erkennt ihr ob eure Website überflüssigen CSS-Code einsetzt. Das Tool untersucht verschiedene URLs und erstellt anschließend einen Report.

Online-Tools

CSS to Compass Converter

Der Name sagt eigtl. schon alles. Mit dem CSS to Compass Converter wandelt ihr validen CSS-Code in Compass-Code um.

Flat UI Colors

Das kostenlose UI-Kit Flat UI dürfte den meisten von euch bereits bekannt sein. Mit Flat UI Colors kann per Klick das Farbschema für Flat UI kopiert werden.

SVG Patterns Gallery

In der SVG Patterns Gallery findet ihr diverse nahtlose Hintergrundgrafiken im SVG-Format bzw. als SVG-Code.

Animatable

Auf Animatable findet ihr diverse CSS3-Animationen zum Copy-&-Paste-Download. Alle Animationen verwenden nur eine Eigenschaft und zwei Werte.

URL-Encoder

Mit einem URL Encoder werden Internetadressen (URLs) so kodiert, dass diese URLs, auch wenn sie Sonderzeichen enthalten, von Browsern korrekt interpretiert werden und selbst Teil einer Internetadresse sein können.

HTML Live Code

HTML Live Code ist ein Code-Editor im Browser inkl. Live-Vorschau.

Unicode Table

Die Unicode Table listet alle Unicode-Zeichen auf und bietet sogar einen Converter an. Sehr praktisch ist auch die Suchfunktion.

Fake images please?

Mit Fake images please? könnt ihr Platzhalter-Bilder über eine URL einbinden. Im Gegensatz zu vielen anderen Anbietern könnt ihr sowohl die Größe des Bilders, als auch Farbe, Text, Textfarbe und Schriftart festlegen.

Sonstiges

Redacted Font

Der "Wireframe-Webfont" Redacted ist sehr vergleichbar mit BLOKK, erzeugt meiner Ansicht nach aber einen besseren Eindruck vom optischen Gewicht des Textes.

ClearLess

ClearLess ist eine Sammlung von hilfreichen LESS mixins.

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.
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.

• Best Web Design Tools

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Es ist wieder soweit – ich möchte euch einige neue Tools, Scripte und Frameworks vorstellen, über die ich in den vergangenen Wochen gestolpert bin. Diesen Monat sind verschiedene Hilfsmittel für die Arbeit mit Prototypen, Icon-Fonts und WordPress-Themes mit von der Partie. Darüber hinaus Scripte zur Erstellung von Text-Animationen, komfortablen Formularen und Suchfeldern. Viel Spaß beim stöbern.

Frameworks

Responsable

Mit dem CSS/LESS/SCSS-Framework Responsable könnt ihr Prototypen und responsive Websites auf Grundlage einer Reihe vordefinierter Elemente herstellen. Neben einem Baseline-Grid sind beispielsweise Responsive Images auf Basis von jQuery Picture enthalten.

Mueller Grid System

Wenn ihr mit Compass arbeitet ist das responsive/adaptive Framework Mueller sicher einen Blick wert.

jFormer

jFormer ist ein auf jQuery basierendes Framework zum Erstellen von komplexen Formularen. Auch eine umfangreiche Validierung des Formulars ist möglich.

Sidetap

Sidetap ist ein Framework für mobile Websites und Applications. Unter anderem lässt sich mit Sidetap eine Off-Canvas-Navigation herstellen.

jslibraryboilerplate

Mit Hilfe der jslibraryboilerplate könnt ihr ein eigenes JavaScript-Framework aufsetzen. Genutzt werden kann pures JavaScript, CoffeeScript und TypeScript.

Proto

Mit Proto erstellt ihr schnelle Prototypen auf Basis von SCSS.

Download-Quellen

Genericons

Die Macher von WordPress (Automattic) haben mit "Genericons" ein eigenes Webfont-Icon-Set zur Verfügung gestellt.

Scripte

Blokk

Blokk ist ein Webfont für Mockups, Wireframes oder Prototypen. Der Schriftsatz zeigt lediglich Balken anstelle von Zeilen und könnte immer dann helfen, wenn Kunden anfangen Lorem Ipsum Texte zu übersetzen. Zur Beurteilung des Layouts halte ich Blokk für ungeeignet. Die dunklen Textblöcke haben ein viel stärkeres Gewicht als echte Texte das hätten. Der Eindruck entspricht daher nicht dem Endergebnis.

pdf.js

pdf.js ist ein PDF-Viewer auf Basis von JavaScript.

cssFx.js

cssFx.js ist ein Polyfill für CSS3-Funktionen in alten und neuen Browsern. Das Script fügt die notwendigen Vendor-Prefixes automatisch ein und ist sehr vergleichbar mit -Prefix-Free.

typehead.js

Mit dem jQuery-Plugin typehead.js erstellt ihr eine performante Auto-Vervollständigung für Suchfelder.

textillate.js

Mit dem Script textillate.js könnt ihr mit recht geringem Aufwand sehr ansehnliche CSS3 Text-Animationen erstellen.

Leaflet

Mit der JavaScript-Bibliothek Leaflet erstellt ihr interaktive Karten, ohne die Performance auf Smartphones zu sehr zu belasten. Das Script funktioniert in allen populären Browsern (Desktop & Mobile) und kann mit Plugins erweitert werden.

Responsive Measures

Mit dem jQuery-Plugin Responsive Measures berechnet ihr die Schriftgröße einer Website automatisch anhand des Container-Elements.

jQuery Timing

Mit jQuery Timing könnt ihr Animationen und zeitabhängige Events jeglicher Art realisieren: Wiederholungen, Timeouts, Verzögerungen etc. lassen sich kinderleicht erstellen.

Holder.js

Mit dem Script Holder.js generiert ihr frei gestaltbare Platzhalter-Grafiken, ohne dass eine Internetverbindung notwendig ist. Je nach Projekt kann das ein entscheidender Vorteil gegenüber Diensten wie Placehold.it sein.

Fabric.js

Fabric.js ist eine Javascript-Bibliothek zur Erstellung von HTML-Canvas-Elementen. Enthalten ist auch ein SVG-Converter.

Online-Tools

Am I Responsive?

Mit dem Online-Tool Am I Responsive? erstellt ihr 4-in-1-Screenshots einer Website. Das Tool dient nicht als Debug-Umgebung, sondern soll dabei helfen schnell ansprechende Screenshots zu generieren.

HSL Color Picker

Mit dem HSL Color Picker steht euch ein umfangreiches Tools zum Auswählen von Farben zur Verfügung. Der Farbwähler kann auch in die eigene Website integriert werden, der Code steht auf GitHub bereit.

Compress PNG

Mit Compress PNG konvertiert ihr (geeignete) Grafiken ins PNG8-Format und verringert die Dateigröße noch einmal erheblich.

Sonstige Quellen

WP Test

WP Test ist ein Set von Test-Inhalten zur Überprüfung eines neuen WordPress-Themes. Nach dem Import stehen in WordPress diverse Artikel, Inhalte, Medien, Kategorien und mehr zur Verfügung. Wenn hier keine Fehldarstellungen mehr erkennbar sind, sollte das Theme weitestgehend kugelsicher sein.

One Div

Auf One Div findet ihr eine Liste an Icons, die ausschließlich mit CSS realisiert wurden. Jedes Icon verwendet nur ein einziges HTML-Element als Basis.

Roots Theme

Roots ist ein Blank-Theme für WordPress auf Basis der HTML5 Boilerplate und Bootstrap. Mit Hilfe eines solchen Templates kann die Theme-Entwicklung entscheidend beschleunigt werden.

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.

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.

• Best Webdesign Tools

Das Artikelbild dieses Beitrags stammt von WP Test.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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.

Groundwork

Groundwork ist ein umfangreiches Responsive Framework auf Basis von SASS und Compass.

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.

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!

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.

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.

Font2Web

Font2Web konvertiert Schriften (TrueType, OpenType) in die Webfont kompatiblen Formate .ttf, .otf, .eot, .woff und .svg. Auch der entsprechende CSS-Code wird mitgeliefert.

Hailpixel

Mit Hailpixel könnt ihr auf sehr intuitive Weise Farbsets erstellen.

Opera Mini Simulator

Der Opera Mini Simulator ist ein Online-Tool zur Simulation des Opera-Browsers auf sog. Feature Phones.

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.

Fontello

Mit dem Online-Tool/Generator Fontello könnt ihr euch eigene Webfont-Icon-Sets zusammenstellen.

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!

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.

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.

Scripte

jQuery Custom Content Scroller

Mit dem jQuery-Plugin jQuery Custom Content Scroller erstellt ihr individuell gestaltete Scrollbars.

Motio

Mit Motio erstellt ihr Sprite-Animationen mit Hilfe des JavaScript-Frameworks jQuery. Die Website zeigt einige interessante Beispiele.

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.

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.

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.

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.

FlexNav

Mit FlexNav könnt ihr komplexe Multi-Level-Navigationen für responsive Websites herstellen.

Hint.css

Mit Hint.css erstellt ihr hübsche Tooltips auf Basis von CSS (SASS) und HTML5.

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.

Behave.js

Mit Hilfe von Behave.js wandelt ihr eine ganz normale Textarea in einen komfortablen Mini-Code-Editor um.

Download-Quellen

Raphaël Icon-Set via @font-face

Mit diesem Webfont-Icon-Set könnt ihr eure Website mit schicken Vektor-Icons aufwerten.

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.

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.

• Best Webdesign Tools

Das Artikelbild dieses Beitrags stammt von Profound-Grid.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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.

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.

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".

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.

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. :)

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.

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.

Download-Quellen

icononstr

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

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.

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.

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.

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.

Gridster.js

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

FooTable

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

xCharts

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

HeyOffline.js

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

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

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.

Adapt.js

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

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.

carouFredSel

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

PageSlide

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

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.

Responsive Images

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

selectivizr

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

Picturefill

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

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.

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.

• Best Webdesign Tools

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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.

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.

Download-Quellen

Endless Icons

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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).

Infinity.js

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

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.

Frameworks

Bourbon Neat

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

Kube CSS-Framework

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

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.

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.

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.

• Best Webdesign Tools

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wie bereits im Oktober und September, habe ich auch in diesem Monat die besten Webdesign-Tools der vergangenen 30 Tage zusammengefasst. Die Sammlung ist sehr abwechslungsreich. Scripte zur Erstellung von Parallax-Effekten, Tools zum Sortieren des CSS-Codes, PDF Generierung per JavaScript, Bild- und Texteffekte mit jQuery, Cheatsheets für Media Queries … ich bin sicher, es ist für jeden etwas dabei.

Frameworks

34 Responsive Grid System

Das 34 Responsive Grid System ist ein Framework für Multi-Screen-Websites. Im Gegensatz zu vielen anderen Frameworks wird mit einem fest definierten Spaltenabstand gearbeitet.

Online-Tools

Media Query Snippets

Auf Media Query Snippets könnt ihr die exakten Media Queries von unzähligen Smartphones und Tablets nachlesen. Der Code kann direkt kopiert werden.

MQtest.io

Auf MQtest.io könnt ihr euch anzeigen lassen, auf welche verschiedenen Media Queries euer Computer oder euer mobiles Endgerät momentan reagiert.

Create CSS3

Create CSS3 ist ein puristischer Online-Generator für die Erstellung diverser CSS3-Effekte. Die Effekte lassen sich kombinieren und per Copy and Paste in das eigene Projekt übernehmen.

CSS Comb

CSS Comb ist ein Online-Tool mit dem ihr die Eigenschaften eures CSS-Codes in einer gewünschten Reihenfolge sortieren könnt. Nutzt einfach die vorgeschlagene Sortierung oder ordnet die Eigenschaften selbst an. Das Tool existiert auch als Plugin für verschiedene Web- & Text-Editoren.

vintageJS

Mit vintageJS könnt ihr eure Fotos altern lassen. Ladet ein Bild hoch, und stellt ein, welche Effekte ihr anwenden möchtet.

Thinkingtags (alpha)

Thinkingtags, aktuell in einer public Alpha-Version, ist ein Online-Tool um interaktive Prototypen auf Basis von CSS Frameworks wie YAML oder Blueprint zu erstellen.

Palm Reader

Palm Reader zeigt euch eine Liste aller verfügbaren Media Queries und welche davon aktuell genutzt werden.

147 Colors

Was? Ihr habt nicht alle CSS-Farbnamen im Kopf? Mit der Website 147 Colors fällt das Lernen vielleicht etwas leichter.

Scripte

FILo - Facebook Image Loader

Mit dem jQuery Plugin "Facebook Image Loader" könnt ihr die auf eurer Facebook-Seite gehosteten Bilder in eure Website integrieren. Die Vorteile liegen auf der Hand: Volle Kontrolle über die Auswahl der Fotos, keine doppelte Datenpflege, unbegrenzter Speicherplatz bei Facebook.

head.js

head.js ist ein winziges JavaScript das die Performance eurer Website verbessert. Es lädt alle anderen Scripte ohne den Seitenaufbau zu blockieren.

Adaptor

Adaptor ist ein auf jQuery basierender Image-Slider mit CSS3-Transitions und beeindruckenden 3D-Effekten. Es können verschiedene Übergänge zwischen den Bildern ausgewählt werden.

tiltShift.js

Mit dem jQuery-Plugin tiltShift.js könnt ihr einen sehr ansehnlichen Tilt-Shift-Effekt für Bilder herstellen. Das Script nutzt CSS3-Filter und funktioniert aktuell nur im neuen Chrome und Safari.

Smart Time Ago

Mit dem jQuery Plugin Smart Time Ago könnt ihr anzeigen wann eine Seite zuletzt aktualisiert wurde. Das Plugin prüft wie viel Zeit seit dem letzten Update vergangen ist und zeigt die entsprechende Information an. Die Zeitangabe wird dabei relativ abgebildet (z.B. "vor 20 Minuten").

Really Simple Slideshow

Das jQuery Plugin Really Simple Slideshow erstellt Slideshows mit verschiedensten Optionen und Bildübergängen. Die Grafiken werden dynamisch geladen.

jsPDF

Mit dem Script jsPDF generiert ihr PDF-Dokumente über JavaScript.

Jarallax

Mit dem Script Jarallax stellt ihr recht unkompliziert einen sog. Parallax-Effekt für eine Website her.

jQuery Zoom

Mit dem jQuery Plugin jQuery Zoom lassen sich kinderleicht Mouse Over-Effekte für Bilder herstellen. Wird das Bild mit dem Cursor berührt, zoomt es automatisch heran - eine komfortable Lösung für Produktabbildungen.

Power Tip

Power Tip ist ein jQuery Plugin zur Erstellung von Tooltips.

trunk8

Mit dem jQuery-Plugin trunk8 könnt ihr Textelemente auf eurer Website verkürzen, der Text wird dabei nach einer festgelegten Länge abgebrochen. Ihr könnt genau definieren wie der Text enden soll. So könnt ihr einen Weiterlesen-Link einbinden, Pfeile verwenden oder den Text mit drei Punkten (…) auslaufen lassen.

Lettering.js

Lettering.js ist ein JavaScript zum Stylen von Texten. Mit Hilfe des Scripts können individuelle Einstellungen für jeden einzelnen Buchstaben eines Textes festgelegt werden. Das Tool eignet sich daher für auch für manuelles Kerning.

jPanelMenu

Mit dem jQuery Plugin jPanelMenu könnt ihr ein Off-Canvas Menü in eure Website integrieren. Off-Canvas ist ein typisches Gestaltungsmuster im Responsive Webdesign und bekannt aus den mobilen Apps von Facebook und Google.

jqTiles

jqTiles ist ein jQuery Plugin zur Erstellung von Bildergalerien / Slidern. Der Slider unterstützt verschiedene Arten der Navigation (Vor/Zurück, Bullets etc. ) und erzeugt die Übergänge zwischen Bildern auf CSS3-Basis.

jResize

jResize ist ein Script/Vorschau-Tool zur Entwicklung von Responsive Websites. Per Klick werden alle Elemente der Seite auf einen bestimmten Viewport reduziert, ihr erhaltet also eine optimale Live-Vorschau direkt im Browser.

Sly

Sly ist ein jQuery-Plugin zur Erstellung von Slidern. Das Script arbeitet sehr übersichtlich mit einem Container-Element und einer Liste. Ihr könnt verschiedene Einstellungen festlegen und zwischen vertikalen und horizontalen Slidern wählen. Auch Infinite Scrolling wird unterstützt.

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.

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.

• Best Webdesign Tools

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn die gestalterische Arbeit in Photoshop abgeschlossen ist, muss das Design für die Entwicklung aufbereitet werden. Es werden Hilfslinien aufgezogen, Auswahlen erstellt und die gewünschten Grafiken Stück für Stück exportiert. Viele grafische Bestandteile werden zwar längst über CSS3 realisiert, dennoch ist die Aufbereitung eines Layouts ein Stück Arbeit. Das Photoshop CS6-Plugin „Cut & Slice Me“ automatisiert diesen Arbeitsschritt.

Photoshop-Dokumente für Android, iOS & Co.

Das Plugin arbeitet auf Basis des Ebenen-Bedienfeldes. Ihr könnt gezielt auswählen welche Ebenen und/oder Ordner exportiert werden sollen. Darüber hinaus orientiert sich das Plugin an den Namen der Ebenen und benennt die exportierten Grafiken entsprechend. Wurde die Photoshop-Datei in der richtigen Größe angelegt, exportiert Cut & Slice me sogar "Retina-Ready".

Besonders interessant sind auch die verschiedenen Export-Regeln die ihr anwenden könnt. Über einen Suffix im Ebenen-Namen könnt ihr das Plugin noch genauer steuern. Fügt ihr beispielsweise ein @-Zeichen ans Ende des Ebenen-Namens, wird die Ebene beschnitten, als PNG exportiert und alle transparenten Pixel gelöscht. Der Suffix _BTN exportiert eine Gruppe inklusive der verschiedenen Zustände der Schaltfläche.

Links zum Thema / Quellen

• Cut & Slice Me
• via: Impressive Photoshop Plugin For Exporting Layers Smartly – Cut&Slice me

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Jeden Monat erscheinen unzählige Tools, Scripte und Plugins, die dem Webdesigner das Leben erleichtern sollen. Vergangenen Monat habe ich angekündigt, alle Tools die nicht mit einem eigenen Beitrag 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 Online-Tools sind diesmal auch einige Scripte, Slideshows und Templates dabei. Viel Spaß.

Bookmarklets

Live.js

Mit dem Bookmaklet Live.js müsst ihr eure Seite nicht länger manuell neu laden. Das Script überwacht den JavaScript- HTML- und CSS-Code der Website und aktualisiert die Ansicht, sobald ihr etwas geändert habt. Ein ähnliches Tool habe ich bereits detailliert vorgestellt.

Frameworks & Boilerplates

The Goldilocks Approach

The Goldilocks Approach ist ein CSS-Framework für Multi-Screen-Websites. Das Framework unterstützt drei Ansichten einer Website, flüssige und starre Raster.

Proportional Grids

Proportional Grids ist ein responsive CSS-Framework das mit Proportionen anstelle fester Breitenangaben arbeitet. Mit CSS-Klassen legt ihr die Proportionen fest, die Abstände zwischen den Spalten werden mit festen Breiten gefüllt.

The Boiler

The Boiler ist ein auf HTML5, CSS3 und einem flüssigen Raster basierendes Framework für den Einsatz in WordPress.

Susy

Wenn ihr den CSS-Code euerer Seite mit dem Preprocessor Compass schreibt, hilft euch dieses Framework sicher weiter. Susy ist ein responsive Grid Framework auf Basis von Compass.

Fluid Baseline Grid

Das Fluid Baseline Grid ist ein mobile First, responsive Framework. Um dem Anspruch typografisch hochwertige Projekte zu ermöglichen gerecht zu werden, basiert das Framework auf flüssigen Spaltenbreiten und einem Grundlinienraster. Wo der Vorteil eines Grundlinienrasters im Webdesign liegt, steht hier.

Wirefy

Wirefy ist ein responsive Framework um schnelle Prototypen, Mockups oder Wireframes zu erstellen. Auf Basis dieser Struktur kann später der interaktive Prototyp gestaltet werden.

Amazium

Amazium ist ein Responsive Webdesign Framework auf Basis des 12-Spalten/960 Pixel Rasters. Es bietet diverse Voreinstellungen für Bilder, Videos oder Tabellen.

Online-Tools

Google Tag Manager

Der Google Tag Manager ist ein Dienst zur Verwaltung von Code-Snippets (Tags). Über die Benutzeroberfläche können Tags für diverse Einsatzgebiete (z.B. Google Analytics, AdWords, benutzerdefinierte HTML-Tags) konfiguriert werden. Der Tag Manager erlaubt die Verwaltung verschiedener Websites und bietet die Möglichkeit mehrere Benutzer mit unterschiedlichen Rechten einzusetzen.

iOS Fonts

Welche Schriften sind in welcher Version von iOS verfügbar? Um vernünftige Fallbacks und Font-Stacks zu konstruieren, ist es praktisch ein Tool wie iOS-Fonts zur Hand zu haben.

Facebook ID ermitteln

Mit diesem kleinen Tool könnt ihr die ID eines Facebook-Users oder einer Facebook-Seite über die URL auslesen. Kopiert einfach die URL in die Suchmaske, das Tool antwortet mit der passenden ID.

Gradient Scanner

Mit dem Gradient-Scanner könnt ihr CSS3-Verläufe aus Grafiken generieren lassen. Ladet einfach eine Grafik hoch, erstellt eine Auswahl des gewünschten Bereichs und kopiert den passenden CSS-Code. Die Option innerhalb des hochgeladenen Bildes noch eine Auswahl definieren zu können, hebt dieses Tool von vergleichbaren Diensten ab.

Contrast Ratio

Mit dem Tool Contrast Ratio kann das Kontrast-Verhältnis zwischen Text- und Hintergrundfarbe berechnet werden. Ziel ist es die Lesbarkeit von Web-Texten zu optimieren.

Plugins

Guide Guide

Guide Guide ist ein Photoshop-Plugin zur Erstellung von Gestaltungsrastern.

Scripte

Uniform

Uniform hat zwar schon einige Jahre auf dem Buckel, funktioniert aber immer noch einwandfrei. Das Script arbeitet auf Basis von jQuery und ermöglicht es euch Formularelemente zu gestalten. select-, radio-, input- und checkbox-Elemente werden maskiert und können mit CSS3 oder einer Grafik überschrieben werden.

ArcText

Mit dem jQuery Plugin ArcText könnt ihr Textelemente verformen. Das Script erhaltet Ihr übrigens durch einen Klick auf den Link ganz oben rechts. Wenn Euch Bögen und Kreise nicht ausreichen, werft auch einen Blick auf dieses Tool.

Retina Images

Das Script Retina Images liefert Bilder in verschiedenen Auflösungen anhand der Auflösung des Betrachtungsgeräts. Somit lassen sich auch img-Tags im HTML-Markup Retina-Ready umsetzen.

Tweet!

Puh! Noch ein Tool zur Intergration eines Twitter-Streams? Dieses Tool hat es in die Liste geschafft, da es einfach zu implementieren ist und Links, Retweets und Benutzerbilder anzeigt.

FancyMoves

FancyMoves ist ein auf jQuery basierendes Carousel zur attraktiven Darstellung von Bildern. Pro Element können weitere Bilder in einer Lightbox angezeigt werden, das Script lässt sich auch über die Tastatur steuern.

jQSlickWrap

Mit dem jQuery-Plugin jQSlickWrap könnt ihr Texte um filigrane Formen in Bildern herumfließen lassen. Das Tool ermöglicht also komplexere Seitenlayouts als das mit den Floating-Eigenschaften von CSS möglich ist. Adobe arbeitet übrigens bereits an einer ähnlichen Lösung namens Adobe CSS Regions.

Swipe.js

Mit Swipe.js wandelt ihr eine Liste kinderleicht in einen per Touch-Control steuerbaren Slider um. Das Script arbeitet unabhängig von JavaScript-Bibliotheken wie jQuery.

iView Slider

Der iView Slider ist ein auf jQuery basierender Bildslider mit einigen interessanten Funktionen. Neben der "responsive"-Komponente können Video-, HTML- und iframe-Inhalte im Slider platziert werden. Zusätzlich können Bildbeschreibungen animiert werden.

Responsly.js

Das jQuery Plugin responsly.js bindet "Responsive Widgets" für die Elemente Slider und Accordion ein. Die Effekte sind mit CSS3 realisiert.

Photo Swipe

Photo Swipe ist eine für Touchscreens und mobile Geräte optimierte Bildergalerie. Die Fotos werden im Vollbild dargestellt; per Gestensteuerung (Swipe) kann zum nächsten Bild gewechselt werden.

Templates

HTML5 Blank WordPress Theme

Dieses Blank-Theme bietet euch die perfekte Grundlage für den Start eines neuen HTML5-WordPress-Projekts. Diverse Techniken wie das Auslagern von Scripten, Custom Post Types, mobile Unterstützung u.v.m. sind bereits enthalten. Auf der Website findet ihr eine vollständige Liste. Sehr empfehlenswert - auch um einfach im Code zu stöbern.

Interface Sketches

Mit dieser umfangreichen Sammlung an Vorlagen für Browser, Tablets und Smartphones, könnt ihr euer nächstes Projekt optimal beginnen.

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.

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.

• Best Webdesign Tools

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Adobe hat ein neues Software- und Service-Paket für Webentwickler vorgestellt. Die Adobe Edge Tools & Services kombinieren verschiedene Programme und Dienste von Adobe zum Thema HTML5 und Webdesign. Dadurch werden einige sehr hilfreiche Tools wie Adobe Shadow nun leider kostenpflichtig. Neben alten Bekannten wurden auch neue Tools wie Edge Animate, Edge Code, Edge Reflow und Edge Webfonts in den Service integriert.

Adobe Shadow ist nun Edge Inspect

Die traurige Nachricht zuerst. Der bisher kostenlose (und wirklich hilfreiche) Dienst Adobe Shadow wurde in Edge Inspect umbenannt und ist nicht länger kostenlos. Alle Edge-Tools sind Teil der Creative Cloud. Im Rahmen einer Einführungsphase werden die Edge-Tools allerdings in Form einer „free Creative Cloud“ angeboten.

Edge Inspect ist ein Hilfsmittel für die Erstellung von Multi-Screen-Lösungen. Die Anwendung wird auf verschiedenen Endgeräten installiert und synchronosiert die Ansicht anschließend kabellos zwischen den Testumgebungen. Weitere Infos zu diesem Tool findet ihr in meinem Artikel zu Adobe Shadow (jetzt Edge Inspect).

Adobe Edge Animate

Edge Animate ist ein Programm zur Erstellung von animierten Web-Elementen auf Basis von HTML5, CSS3 und JavaScript.

Adobe Edge Code

Edge Code ist ein Code-Editor auf Basis des Open-Source-Projets Brackets. Das Tool liegt aktuell nur in einer Preview-Version vor.

Edge Reflow

Edge Reflow ist ein Hilfsmittel zur Entwicklung von Responsive Websites. Auf Basis von CSS und HTML können angeblich ganz intuitiv hochwertige Websites gestaltet werden.

Adobe Webfonts

Die Adobe Webfonts sind ein kostenloser Webfont-Service von Adobe. Die Schriften können manuell als Code-Snippet eingefügt werden. Zusätzlich stehen die Adobe Webfonts in anderen Edge Tools zur Verfügung. Der Service basiert auf Typekit und wird in Kooperation mit den Google Webfonts realisiert.

Typekit

Typekit ist ein Premium Webfont-Service von Adobe. Im Gegensatz zu kostenlosen Anbietern wie den Google Webfonts werden die Schriften in höherer Qualität (Open Type) ausgeliefert, was das Risiko eines schlechten Renderings unter Windows deutlich reduziert. Die Auswahl hochwertiger Schriften, die Kategorisierung und die Filterfunktion der Website runden den Service ab.
Mit Typekit wird übrigens auch die Schrift auf dieser Website ausliefert.

Adobe PhoneGap Build

PhoneGap Build ist ein Service um Apps, die auf Basis von HTML, CSS und JavaScript erstellt wurden, für verschiedene AppStores zu verpacken.

Links zum Thema

• Adobe Edge Tools
• Adobe Edge Animate
• Adobe Edge Reflow
• Adobe Edge Code
• Adobe Edge Inspect
• Adobe Edge Webfonts
• Adobe Edge Typekit
• Adobe Edge PhoneGap Build
• Brackets. Ein Open Source Code Editor fürs Web von Adobe – Heise Online
• Adobe Introduces Edge Web Tools – Web Pro News
• Adobe Edge: Does Adobe Finally Understand Developers? - Design Shack

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Es gibt Fragen die polarisieren. Apple oder Samsung? Coke oder Pepsi? Fireworks oder Photoshop? Oder vielleicht doch lieber InDesign? Ich bin der Meinung, man sollte das Tool nutzen, in dem man sich am wohlsten fühlt. Unabhängig davon ob das Programm ursprünglich für den Einsatz im Webdesign gedacht war und vorausgesetzt, dass die Qualität des Projekts nicht leidet. Doch warum schwören einige Webdesigner auf Photoshop und andere auf InDesign, Illustrator oder Fireworks? Ich habe die Webdesigner Ivo Mynttinen, David Hellmann und Christian Seitz gefragt und interessante Antworten erhalten. 

Bitte stelle dich unseren Lesern kurz vor und erzähle uns welche Art von Projekt du normalerweise bearbeitest

Ivo Mynttinen

Ich bin ein 20-jähriger User Interface Designer. Momentan wohne ich in Nürnberg. Seit etwa einem halben Jahr bin ich selbständig und entwerfe für meine Kunden (meist Startups aus der Bay-Area) innovative Designkonzepte für Webapps, Mac Apps und iOS Apps. Seitdem ich 15 bin experimentiere ich mit (damals noch Macromedia) Fireworks und konnte mir so ein sehr solides Wissen über mein favorisiertes Design-Tool, sowie einige andere Programme der Creative Suite aneignen.

David Hellmann

Ahoi! Ja namentlich nennt man mich David Hellmann und sonst bin ich im anonymen Internet meist unter dem Namem: davidhellmann zu finden! Wenn ich nicht vor einem Bildschirm sitze fahre ich oft ein wenig Rad. Früher BMX heute dann eher MTB.

Meistens gestalte ich Websites was für mich heißt, dass ich in Photoshop gestalte und teilweise später auch noch den HTML/CSS Part mit übernehme. Kommt aber immer auf das einzelne Projekte an. Eines meiner letzten Freelance Projekte war Deutsches Obst und Gemüse wo ich für den Designpart verantwortlich war: www.deutsches-obst-und-gemuese.de

Nett oder? :)

Christian Seitz

Hallo, ich heiße Christian Seitz und arbeite als freiberuflicher Grafik-Designer für Digital- und Printmedien. Mein Schwerpunkt liegt dabei auf umfangreicheren Publikationen wie Katalogen oder Magazinen im Printbereich. Nebenbei blogge ich auf herrseitz.de über Themen rund um Fotografie, Mountainbike, Skifahren und Workflows aus dem Mac-User-Alltag.

Hast du einen bestimmten gestalterischen Stil? Inwiefern unterstützt dich „dein“ Programm dabei?

Ivo Mynttinen

Wer ein wenig Zeit damit verbringt, sich meine Arbeiten auf meinem Portfolio anzusehen, wird schnell feststellen, dass ich stark darauf achte, Benutzeroberflächen sauber und einfach zu gestalten. Gerne verliere ich mich jedoch auch in Details, die sehr häufig das „gewisse Extra“ meiner Arbeiten ausmachen. Auch wenn es sich stark nach einem Klischee anhört, inspirieren mich die Designs von Apple, allerdings auch Arbeiten von Agenturen wie z.B. MetaLab oder Softfacade.

Fireworks bietet mir genügend Möglichkeiten, um solide Designs zu erstellen, eignet sich aber auch hervorragend dafür, mal eben ein erweitertes Mockup zu erstellen. Den größten Vorteil von Fireworks sehe ich allerdings darin, dass ich persönlich damit extrem viel Zeit sparen kann - gerade weil hier viele Dinge einfach anders angegangen werden als z.B. mit Photoshop.

David Hellmann

Ich glaube der ändert sich immer mal bzw. hängt auch das stark vom Projekt/Kunde ab. Da ich ja wie oben schon erwähnt Photoshop als MEIN Programm sehe kann ich nur sagen das ich mit Photoshop immer das Gefühl habe alles machen zu können. Egal ob clean oder verspielt. Ich finde in Photoshop einen weg. Bei anderen Programmen kam mir das nicht so vor. (Die gelbe Hölle!!! :)

Es wird nicht grundlos sein, dass wohl die meisten mit Photoshop arbeiten, oder?

Christian Seitz

Wenn mich das Briefing nicht in eine bestimmte stilistische Richtung lenkt, bin ich ein Fan von klarer, reduzierter und funktionaler Gestaltung, die durch gute Typographie, stimmige Proportionen und einem klaren Ordnungssystem – am Besten mit viel Weißraum – überzeugt.

Mein Programm der Wahl ist Adobe InDesign. Es kommt mir durch die Möglichkeit der einfachen Einrichtung auch komplexerer Rastersysteme in horizontaler als auch vertikaler Richtung entgegen. Ich weiß, dass ist nichts weltbewegendes und schon lange vorhanden, aber ich finde es immer wieder hilfreich beim Aufbau neuer Layouts. Überhaupt bin ich ein Fan des numerischen Gestaltens, sprich viele Objekte werden mit Hilfe der Koordinaten/Transformieren-Palette final platziert.

Wie ist es dazu gekommen, dass du dieses Programm nutzt?

Ivo Mynttinen

Fireworks war das erste „Bildbearbeitungs“-Programm, was mir in die Hände kam. Bereits nach den ersten Stunden konnte ich für damalige Verhältnisse gute Ergebnisse erzielen. Gerade die steile Lernkurve ist wohl einer der Gründe, weshalb ich nach wie vor Fireworks-Nutzer bin.

David Hellmann

Gruppenzwang! Klarer Fall. Ganz früher hatte ich noch PaintShop Pro 7 wenn ich mich recht erinnere. War eigentlich auch ganz cool. Aber sind wir ehrlich. Man kommt an Adobe Sachen einfach nicht vorbei im professionellen Umfeld. Und da Photoshop halt verbreiteter ist als andere Sachen bin ich schlussendlich auch dort gelandet. Bereut habe ich es nicht.

Christian Seitz

Ich arbeite am Liebsten mit Programmen, die ich gut und schnell und vor allem aus dem FF bedienen kann. Das ist bei mir mit InDesign der Fall. Meist muss es ja im Job schnell gehen und da finde ich das Umdenken von InDesign nach Photoshop – vor dem Hintergrund des Entwerfens und mit Deadlines im Nacken – eher störend.

Deshalb bin ich mehr froh als skeptisch, dass Adobe die Software immer mehr zum crossmedialen Layoutwerkzeug ausbaut. Kommt mir entgegen. Sehr.

Bezogen auf Webdesign - was sind für dich die Vorteile des Programms?

Ivo Mynttinen

Die Möglichkeit, alle Seiten eines Projekts unkompliziert in einer Datei zu bearbeiten und die Tatsache, dass in Fireworks fast ausschließlich mit Vektor-Elementen gearbeitet wird.

Ein weiterer Vorteil ist, dass Benutzeroberflächen für unterschiedliche Auflösungen (z.B. iPhone und iPad Apps) fast ohne nachträgliches Verbessern von Details skaliert werden können. Außerdem sagen mir die Layer-Styles sehr zu, welche sich 1:1 zu CSS3 konvertieren lassen.

David Hellmann

Wie oben geschrieben habe ich einfach das Gefühl an keine Grenzen zu stoßen bei dem was ich mache. Das ist für mich wichtig. Ein anderer wichtiger Punkt ist, dass ich mich wohl fühle mit dem Programm. Auch ich hatte das ein oder andere mal schon Fireworks auf, aber kam damit einfach nicht wirklich zurecht. Vielleicht auch eine Sache der Gewöhnung aber wer weiß, vielleicht sind wir auch einfach nicht für einander gemacht :)

Christian Seitz

Am Besten finde ich, mehrere Seiten mit unterschiedlichen Größen in einem Dokument anlegen zu können und bei einem Wechseln zwischen Print und Online nicht umdenken zu müssen.

Welche Webdesign-Aufgaben bewältigt das Programm nicht optimal?

Ivo Mynttinen

Sobald es darum geht, aufwendigere Illustrationen zu erstellen, ist man mit Photoshop eindeutig besser dran. Ich bin der Meinung, dass man mit Fireworks absolut alles machen kann, was auch in Photoshop geht - nur steigt der Aufwand enorm, wenn man beispielsweise detaillierte Icons erstellen möchte.

David Hellmann

Es sind eher so Kleinigkeiten… Die fehlende Möglichkeit, dass man den Eckradius von Vektor-Objekten nicht nachträglich ändern kann. Das sind zwar Kleinigkeiten, würden aber oft großes bewirken. Etwas sehr gutes gibt es seit CS6 ja nun endlich "Pixel Snapping"!!! :) Letztendlich wird jedes Programm immer irgendwelche Schwächen haben bzw. Sachen die man als nicht optimal empfindet. Aber das ist ja völlig normal.

Christian Seitz

Ich finde, den Export von Grafiken für die Umsetzung könnte man noch optimieren.

Was stört dich an anderen Programmen?

Ivo Mynttinen

Die direkte Konkurrenz Photoshop ist mir zu unflexibel und zu aufwendig. Sketch 2, ein relativ neues Programm, welches Fireworks sehr nahe kommt aber erfrischende Konzepte mit einbringt, die man in einem Adobe Programm wohl niemals erwarten darf, ist mir momentan noch zu instabil.
Eventuell werde ich, sobald sich das geändert hat, dennoch den Schritt gehen von Fireworks zu Sketch zu wechseln.

David Hellmann

Stören direkt nichts. Ich finde einfach ich hab mich nie damit wohl gefühlt wenn ich es genutzt habe. In Photoshop arbeitet man ja viel mit Ebenen in Fireworks sind diese zwar auch da aber haben da nicht so den Stellenwert wie in Photoshop. Klar, ein Fireworks Mensch der zu Photoshop kommt wird wohl das gleiche anders herum sagen. Für mich gibt es aktuell einfach keinen Grund auf ein anderes Programm zu wechseln.

Ach was mich bei Fireworks immer aufgeregt hat war, dass man die Werte (Breite einer Box z.B.) nicht mit den Pfeiltasten ändern konnte sondern immer tippen musste :)

Christian Seitz

Wie oben schon erwähnt, stört mich in erster Linie das Umdenken in der Bedienung. Wobei ich bei „anderen Programmen“ an Photoshop, Fireworks oder Illustrator denke. InDesign arbeitet objektorientiert, Photoshop eher ebenenorientiert. Hat beides seine Daseinsberechtigung. Aber ich kann – und hab's auch nicht wirklich intensiv probiert – auf Ebenenbasis nicht gestalten.

Illustrator ist InDesign noch am ähnlichsten – deshalb komm ich damit wahrscheinlich auch prima klar.

Zu Fireworks kann nicht besonders viel sagen. Hab ich nur mal oberflächlich probiert.

Nutzt du ergänzende Plugins, Tools oder andere Programme für die Erstellung deiner Designs? Wenn ja in welchen Bereichen?

Ivo Mynttinen

Ich verwende keine zusätzlichen Plugins. Für diverse Aufgaben nutze ich natürlich Photoshop und selten auch Illustrator.

David Hellmann

Photoshop Plugins:

• GuideGuide! Einfach genial!
• DevRocket ist auch ganz nett.
• Bjango Aktionen

Andere Apps:

• Pochade, ein globaler Colorpicker der sich in der Menüleister versteckt. Ist super!
• WhatFont: Super Chrome Plugin

Christian Seitz

Ja. Ich verwende zwar InDesign für die Layoutarbeit, aber ergänzenden Aufgaben, beispielsweise das Entwickeln von Buttons, Schriftzügen oder Icons mach' ich in Illustrator.
Bilder bearbeite, retuschiere oder optimiere ich in Photoshop und Text für Webseiten schreibe ich in iA Writer. In InDesign wird das dann alles vermixert. ;-)

Welche Features würden deinen Webdesign-Workflow beschleunigen? Was wünschst du dir für kommende Programmversionen?

Ivo Mynttinen

Mehr Stabilität, eine überarbeitete Benutzeroberfläche, bessere Gesten-Unterstützung sowie Optimierungen für Retina Screens wären ein Anfang. Leider hielt sich Adobe bei den letzten Major-Updates mit neuen Features immer stark zurück, weshalb ich relativ wenig Hoffnung habe, all diese Features in der nächsten Version zu sehen.

David Hellmann

• Die Möglichkeit Eckradien nachträglich zu ändern für Vektorobjekte.
• Eine Art Bibliothek in Photoshop wäre auch ganz cool denke ich. Sowas wie es in Flash gibt in der Art.
• Cloudsync für die Settings. Das wäre toll :) Auch das Mustern, Pinsel etc. alles in der Cloud abgelegt wird und man überall das gleiche findet.

Christian Seitz

Schwierige Frage. Ich komm' so eigentlich ganz gut zurecht. Was ich verbessern würde, wäre eventuell die Farbpalette bzw. das Farbraum-Management. Man kann im Moment noch ganz leicht RGB und CMYK Farben vermischen, was ich weder im Webdesign noch bei Print-Projekten sinnvoll finde. Die Exportfunktion für Grafiken würde ich verbessern oder sogar eine Slice-Funktion einführen.

Weitere Features würde ich mich im Moment gar nicht fordern trauen, da ich mich noch nicht mal richtig mit den ganzen neuen Features von InDesign CS6 auseinander gesetzt habe – ausgenommen die PDF-Formularfunktion. Die find ich schon erste Sahne. ;-)

Zum Thema

• A Real Web Design Application
• Creating Wireframes And Prototypes With InDesign – Smashing Magazine
• Infografik zur Kategorisierung der Adobe-Produkte - Interessant ist, dass Adobe sowohl Photoshop als auch Fireworks unter "Bildbearbeitung" einsortiert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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.

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.

Columnal

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

Fluid Grids

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

Online-Tools

This is responsive

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

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.

HTML5 Readiness

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

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.

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.

Tiny PNG

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

Pigdom

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

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.

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.

Mobile HTML5

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

Scripte

Spin.js

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

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.

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.

ResponsiveSlides.js

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

Blueberry

Blueberry ist ein auf jQuery basierender responsive Slider.

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.

jRumble

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

Animate.css

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

blur.js

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

list.js

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

Templates

Underscores

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

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit CSS Values hat Louis Lazaris eine neue Online-Referenz zum Thema CSS veröffentlicht. Wenn ihr wissen möchtet welche Werte für eine bestimmte CSS-Eigenschaft erlaubt sind, findet ihr nun hier eine schnelle und selbsterklärende Online-Hilfe. Die Website ist denkbar übersichtlich. Sie besteht aus einer Unterseite die über einen Volltext-Filter auf die relevanten Informationen reduziert werden kann.

Zum Thema

• CSS Values
• Introducing CSS Values - Impressive Webs

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mein Workflow bei der Umsetzung einer Website sieht normalerweise etwa so aus: Sobald ich das grobe HTML-Markup geschrieben habe, lege ich die CSS-Datei an und füge Style-Angaben hinzu. Dabei wechsle ich permanent zwischen dem Code-Editor, der Debug-Konsole des Browsers und dem Browser selbst. Ich schreibe einige Zeilen Code, speichere das Stylesheet, und überprüfe das Ergebnis im Browser. Dazu muss ich jedes Mal den Browser neu laden um die Änderungen auch sehen zu können. Und weil ich ungern Zeit verschwende, nutze ich ein Bookmarklet um die Seite immer automatisch aktuell zu halten. Das Tool ist zwar nicht gerade neu, aber dennoch ungemein praktisch.

Script oder Bookmarklet?

CSS refresh ist ein kleines JavaScript das die CSS-Datei einer Website automatisch aktualisiert sobald eine Änderung stattgefunden hat. Ihr könnt das Script entweder hier herunterladen und per script-Tag im Quellcode der Website einbinden, oder alternativ ein Bookmarklet verwenden.

<head>
   <link rel="stylesheet" type="text/css" href="css/site.css" />
   <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

Da das Tool funktioniert übrigens nur in einer Serverumgebung.

CSSrefresh uses a XMLHttpRequest to get the modification time of the CSS-files, therefore it only works in a server environment.

• CSS Refresh
• CSS-Refresh ohne Reload - Guide Muehlwitz
• CSS Refresh - Best Webdesign Tools

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Plugins und Scripte zum farbigen Strukturieren von Quellcode gibt es einige. Mit Prism ist ein weiteres Script erschienen, das im Vergleich zu den anderen mir bekannten Methoden einige Vorteile bietet. Ihr müsst beispielsweise keinen für das Plugin angepassten Quellcode verwenden, sondern werdet vielmehr gezwungen semantisch korrektes HTML5-Markup zu schreiben. Das Script lässt sich darüber hinaus kinderleicht anpassen, kommt in drei Designs daher und ist gerade einmal 1.5KB groß.

Wenn Ihr Prism verwenden möchtet müsst ihr lediglich das JavaScript- und das CSS-File im head einbinden. Anschließend definiert ihr die Sprache des jeweiligen Code-Snippets über das HTML5-Language-Attribut.

<pre><code class="language-css">p { color: red }</code></pre>

• Prism
• Introducing Prism – lea.verou.me

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Viele Webdesigner bzw. Frontend-Developer arbeiten immer weniger in Grafikprogrammen wie Photoshop oder Fireworks und wechseln bereits in einer sehr frühen Phase der Website-Erstellung in den Browser. Der Browser ist heute DIE neue Entwicklungsumgebung für Code und Grafik und das Stichwort in diesem Zusammenhang ist „Design in the Browser“. Cloud-Anwendungen und die integrierten Debug-Konsolen der Browser greifen uns dabei mächtig unter die Arme.
Heute möchte ich euch ein neues Photoshop-Plugin vorstellen, dass diese Entwicklung noch weiter beschleunigt: CSS3PS. Mit Hilfe des Plugins wandelt ihr Ebenenstile in CSS3-Code um. Ein Feature das ich mir bereits vor zwei Jahren auf der PhotoCon in München gewünscht habe ist somit endlich Realität geworden!

Wo finde ich das Plugin?

Das Plugin steht online als Download für die Photoshop-Versionen CS3, CS4, CS5 und CS6 kostenlos zur Verfügung. Nach dem Download installiert ihr das Plugin über den Extention-Manager von Adobe und startet Photoshop einmal neu. Anschließend findet ihr innerhalb von Photoshop unter „Fenster → Erweiterungen“ ein neues Bedienfeld namens „CSS3PS“.

Wie arbeite ich mit dem Plugin?

Das Plugin wandelt Ebenenstile und einige weitere Einstellungen wie die Größe eines Objekts oder die Abrundung der Ecken in CSS3-Code um. Erstellt zunächst ein beliebiges Objekt (z.B. ein Form-Objekt) und fügt anschließend Ebenenstile wie Konturen, Verläufe oder Schatten hinzu. Markiert die gewünschten Ebenen (es ist auch eine Mehrfachauswahl möglich) im Ebenen-Bedienfeld und klickt anschließend auf das „CSS3PS“-Logo im Bedienfeld des Plugins. Das Plugin stellt nun eine Verbindung zur Website her und wandelt die Stile in Code um. Als Ergebnis erhaltet ihr eine Vorschau und den CSS3-Code zum Download auf der Website.

Photoshop CS6-Plugin als Video

Ich habe ein kurzes Video erstellt in dem ich euch zeige, wie ihr mit Hilfe des Plugins Ebenenstile in CSS3-Code umwandelt. Zunächst erstellen wir ein simples Beispiel-Objekt, anschließend generieren wir den Code mit Hilfe des Plugins.

Links zum Thema

• Photoshop-Plugin CSS3PS - css3ps.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/07/photoshop-ebenenstile-als-css3-code-exportieren-css3ps/feed/ 15 http://blog.kulturbanause.de/2012/06/vom-design-zum-responsive-design-responsive-grid-system/ http://blog.kulturbanause.de/2012/06/vom-design-zum-responsive-design-responsive-grid-system/#comments Fri, 29 Jun 2012 09:48:00 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=8122 Das Responsive Grid System ist eine Zusammenstellung von CSS-Klassen die euch helfen eine Website um ein flexibles Raster zu ergänzen [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Das Responsive Grid System ist eine Zusammenstellung von CSS-Klassen die euch helfen eine Website um ein flexibles Raster zu ergänzen und die Seite somit für Smartphones und Tablets zu optimieren. Das System lässt sich auch noch nach der Gestaltungs- oder Coding-Phase anwenden und zudem muss die Anzahl der Rasterspalten nicht global für die gesamte Seite festgelegt werden. Ein interessanter Ansatz.

Was macht das Responsive Grid System zu etwas besonderem?

Normalerweise stellen Hilfsmittel für responsive Websites die Grundlage der konzeptionellen Planung der Website dar. Einerseits unterstützen diese Tools uns bei der Arbeit, andererseits wird man in bestimmten Bereichen oft ein wenig eingeschränkt. So wird beispielsweise ein vordefiniertes Framework verwendet oder die Gestaltung basiert auf einem generierten, flexiblen Gestaltungsraster an das man sich bei der Gestaltung halten sollte.

Das Responsive Grid System geht einen etwas anderen Weg. Es bildet nicht die Grundlage einer Planung sondern lässt sich nachträglich anwenden. Es ist also möglich eine bestehende Website um den „responsive“-Gedanken zu ergänzen, vorausgesetzt es wurden keine elementaren Regeln für die Erstellung flexibler Layouts missachtet. Das Responsive Grid System stellt dazu eine Sammlung an CSS-Klassen und Breakpoints (Media Queries), sowie einige mobile HTML-Basics zur Verfügung die in den eigenen Code übernommen werden können.

Wie funktioniert das Raster?

Das Responsive Grid System stellt verschiedene Klassen zur vertikalen Trennung des Layouts in Spalten, Klassen zur horizontalen Unterteilung in Zeilen und Klassen zur Gruppierung von Inhalten zur Verfügung. Diese Klassen werden anschließend auf das bestehende Layout angewendet, es muss also auch das HTML-Markup um die jeweiligen Klassen ergänzt werden.
Das Grid System bietet verschieden Dateien für verschiedene Arten von Rastern; angefangen bei einem zweispaltigen Design bis hin zu zwölf Spalten. Je nachdem welche Anzahl an Spalten ihr im Design verwendet, dient also eine andere CSS-Vorlage als Grundlage.

Da das System auch in horizontale Bereiche (z.B. Header, Content, Footer) unterteilen kann, ist es möglich in den verschiedenen Sektionen auch eine unterschiedliche Anzahl an Spalten zu definieren. Ihr solltet nur aufpassen, dass bei aller Freiheit nicht plötzlich die Vorteile eines durchdachten Rasters vernachlässigt werden.

Links

• Responsive Grid System - responsivegridsystem.com
• Responsive Grid System - A Quick Way To Create Responsive Websites - Web Resources Depot

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/06/vom-design-zum-responsive-design-responsive-grid-system/feed/ 7 http://blog.kulturbanause.de/2012/06/css-verlaufe-aus-bildern-generieren-css-gradient-finder/ http://blog.kulturbanause.de/2012/06/css-verlaufe-aus-bildern-generieren-css-gradient-finder/#comments Tue, 26 Jun 2012 09:53:00 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=8089 Mit dem Online Tool „CSS Gradient Finder“ könnt ihr auf CSS basierende, lineare Farbverläufe auf Grundlage eines Bildes automatisch erstellen [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Mit dem Online Tool „CSS Gradient Finder“ könnt ihr auf CSS basierende, lineare Farbverläufe auf Grundlage eines Bildes automatisch erstellen lassen.
Per Drag & Drop könnt ihr eine Grafik mit dem entsprechenden Verlauf in das Tool laden, anschließend erhaltet ihr als Ausgabe den entsprechenden CSS-Quellcode inkl. der verschiedenen Vendor-Prefixes für die unterschiedlichen Browser.

Grundsätzlich funktioniert das Tool mit linearen Verläufen einwandfrei, je nach Komplexität des Verlaufs sind allerdings leichte Unterschiede zwischen dem hochgeladenen Bild und dem generierten Verlauf zu erkennen. In der Beispiel-Galerie des „CSS Gradient Finders“ kann man das ebenfalls leicht erkennen.
Im Gegensatz zu vielen anderen Online-Tools steht beim CSS Gradient Finder auch die zum Einsatz kommende Technologie im Vordergrund. Auf GitHub und auf der Website selbst kann der Code eingesehen werden.

Der CSS Gradient Finder benötigt einen Browser mit Canvas-Unterstützung um zu funktionieren. Welche Browser das sind seht ihr hier (Alle außer IE < 9).

Ultimate CSS Gradient Generator als Alternative

Der Ultimate CSS Gradient Generator von Colorzilla kann übrigens mittlerweile auch Verläufe aus Bildern erstellen. Der importierte Verlauf lässt sich anschließend sogar noch über ein Bedienfeld anpassen oder korrigieren und der exportierte Quellcode ist Internet Explorer 9 kompatibel.

• CSS Gradient Finder
• CSS Gradient Finder auf GitHub
• Ultimate CSS Gradient Generator

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/06/css-verlaufe-aus-bildern-generieren-css-gradient-finder/feed/ 1 http://blog.kulturbanause.de/2012/06/responsify-it-responsive-grid-template/ http://blog.kulturbanause.de/2012/06/responsify-it-responsive-grid-template/#comments Tue, 12 Jun 2012 09:31:50 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=8042 Mit dem Online-Tool Responsify.it könnt ihr ein umfangreiches Template als Grundlage für eine responsive Website erstellen. Über die Eingabemaske lassen [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Mit dem Online-Tool Responsify.it könnt ihr ein umfangreiches Template als Grundlage für eine responsive Website erstellen. Über die Eingabemaske lassen sich verschiedene Breakpoints sowie die Anzahl der Spalten und der Abstand zwischen den Spalten einstellen. Die Wahl zwischen einem prozent- und einem pixelbasierten Raster habt ihr allerdings nicht, das Raster basiert immer auf flexiblen Spalten (was ja auch die schönere Variante ist).

Integrierte Viewport-Testumgebung

Nachdem ihr die Basiseinstellungen vorgenommen habt und verschiedene Breakpoints erstellt wurden könnt ihr das Raster direkt online testen. Über einen Button im Footer der Seite lässt sich der Viewport auf die drei prominentesten Darstellungsgrößen skalieren. Dabei orientiert sich der Viewport an den Abmessungen 480px (iPhone im Querformat), 768px (iPad im Hochformat) und 1200px (Notebook, Desktop etc.).

Download des Templates

Ihr könnt das gesamte Template als Download-Paket herunterladen. Das Paket enthält dann neben einer Grafik mit dem Raster auch eine index.html mit dem Basis-Quellcode und eine CSS-Datei mit den verschiedenen Media Queries. Zusätzlich enthält das Paket SCSS-Dateien und LESS-Dateien.

• Website von Responsify - responsify.it
• Online Generator - app.responsify.it

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/06/responsify-it-responsive-grid-template/feed/ 4 http://blog.kulturbanause.de/2012/04/css-arrow-please/ http://blog.kulturbanause.de/2012/04/css-arrow-please/#comments Mon, 23 Apr 2012 12:00:31 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7745 Mit dem Online-Generator „CSS Arrow Please“ lassen sich Tooltips oder Sprechblasen im Handumdrehen erstellen. Neben Größe und Position des Pfeils [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Mit dem Online-Generator „CSS Arrow Please“ lassen sich Tooltips oder Sprechblasen im Handumdrehen erstellen. Neben Größe und Position des Pfeils kann die Hintergrundfarbe des Basiselements sowie die Stärke und Farbe einer Umrandung eingestellt werden. Der technische Hintergrund solcher CSS-Pfeile ist zwar keinesfalls neu, der Generator erspart jedoch lästige Arbeitsschritte und macht die etwas abstrakte CSS-Technik gleichzeitig leichter verständlich.

• CSS Arrow Please!
• Geometrische Formen mit CSS
• Speech Bubble Arrows that Inherit Parent Color

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/04/css-arrow-please/feed/ 2 http://blog.kulturbanause.de/2012/04/adobe-shadow-im-praxistest/ http://blog.kulturbanause.de/2012/04/adobe-shadow-im-praxistest/#comments Tue, 10 Apr 2012 10:48:14 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7705 Adobe Shadow wurde vor einigen Wochen veröffentlicht und soll insbesondere Frontend-Entwicklern helfen Websites für verschiedene mobile Endgeräte, Displaygrößen etc. zu [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Adobe Shadow wurde vor einigen Wochen veröffentlicht und soll insbesondere Frontend-Entwicklern helfen Websites für verschiedene mobile Endgeräte, Displaygrößen etc. zu erstellen. Im Gegensatz zu allen anderen mir bekannten Tools simuliert Adobe Shadow die Ansicht nicht sondern synchronisiert den Entwicklungsstand der Website auf verschiedene Geräte. Dafür muss man die Geräte natürlich besitzen. Ich habe Adobe Shadow jetzt beim ersten echten Projekt praktisch eingesetzt und möchte euch meine Erfahrungen natürlich nicht vorenthalten.

Wichtiger Hinweis: Adobe Shadow wurde in Adobe Edge Inspect umbenannt. Neben einem neuen Icon und dem neuen Namen wurden die Funktionen jedoch beibehalten.

Wie funktioniert Adobe Shadow?

Adobe Shadow synchronisiert die Ansicht eines Computers auf die Bildschirme von anderen angeschlossenen Geräten wie Smartphones oder Tablets. Im Gegensatz zu einem Simulator, sieht man die Website daher exakt so, wie das jeweilige Gerät sie darstellt, also inkl. gerätespezifischer Eigenschaften und der Möglichkeit die Usability auf dem Touchpad direkt zu beurteilen und zu testen.

Für mich ist Adobe Shadow das erste Tool das den Test von Responsive Websites richtig angeht. Es gibt zwar viele sehr gute Simulatoren, aber der Test auf einem echten Gerät ist der einzige Weg ein verlässliches Ergebnis zu erhalten. Adobe Shadow simuliert nicht, das Tool hilft dabei den Workflow zu beschleunigen. Und für ein professionelles Ergebnis muss nun einmal auf einem Originalgerät getestet werden. Die diesbezügliche Kritik an Adobe Shadow kann ich daher in keinster Weise nachvollziehen.

Adobe Shadow einrichten

Zunächst muss Adobe Shadow auf jedem Gerät installiert werden. Zusätzlich müssen sich alle Geräte im selben Netzwerk befinden.

Aktuell bietet Adobe das Tool für Windows, Mac OSX, iOS, Android und als Google Chrome Extention an. Damit die Chrome-Extention funktioniert, muss das Hauptprogramm auf dem Computer im Hintergrund laufen.

• Adobe Shadow für Mac und Windows
• iOS-App
• Android-App
• Google Chrome Browser-Extention

Nach dem Start der jeweiligen Programme müssen die Geräte zunächst verbunden werden. Dazu generiert Shadow ein Passwort, welches dann auf den verbundenen Geräten eingegeben werden muss. Anschließend sieht man von welchem Gerät die Ansicht abhängig ist. Mit einem Tap auf den Namen gelangt ihr in den „Live-Modus“, der immer die aktuelle Browser-Ansicht des Hauptrechners zeigt. Natürlich exakt so wie das abhängige Gerät die Website nativ darstellt.

Responsive Webdesign mit Adobe Shadow

Hat man Adobe Shadow einmal eingerichtet ist das Tool eine echte Arbeitserleichterung. Alle Live-Websites oder die Entwicklungen in einer lokalen Serverumgebung (erst in einem kommenden Release!) werden auf die entsprechenden Geräte synchronisiert. Bei mir dauert es immer ca. eine Sekunde bis die Ansicht auf allen Geräten abgeglichen ist. Das ist zu verkraften, vielleicht geht es bei euch sogar schneller. Das ist wohl abhängig vom W-LAN.
Mit dem Code-Inspector (ähnlich Firebug) von Google Chrome kann ich auf dem Hauptrechner den Code live editieren und sehe die Änderungen dann direkt auf iPhone und iPad. Perfekt.

Leider ist Adobe Shadow (noch?) nicht in der Lage verschiedene Computer anzugleichen. Es funktioniert, zumindest bei mir, nur mit einem Hauptrechner und diversen mobilen Endgeräten. Ich fände es schön auch mehrere Desktop-Computer abgleichen zu können. Dann könnte man z.B. einen großen iMac und ein kleines Windows-Netbook parallel beurteilen.
Ein weiterer Nachteil des Tools sind die regelmäßigen Abstürze in der Synchronisierung. Die Programme laufen zwar noch – es wird allerdings nichts mehr synchronisiert. Um das Problem zu lösen musste ich dann die Anwendungen einmal neu starten. Auch dieses Problem ist zu verkraften – sollte allerdings dringend von Adobe behoben werden.

Fazit

Adobe Shadow ist für mich das erste Tool das die Arbeit mit verschiedenen mobilen Geräten professionell angeht. Klar, man benötigt alle Geräte auf denen man testen möchte – aber ich bin der Meinung, dass ein Profi, der mobile Websites erstellt und verkauft, hier investieren muss oder das eh bereits getan hat. Wer das nicht kann oder möchte muss dann zwangsläufig auf Simulatoren ausweichen.

Die Einrichtung von Adobe Shadow ist kinderleicht und die Arbeit wird enorm erleichtert. Einziges Manko ist aus meiner Sicht die nicht funktionierende Synchronisation verschiedener Desktop-Rechner, sowie die auftretenden Programmabstürze.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/04/adobe-shadow-im-praxistest/feed/ 14 http://blog.kulturbanause.de/2012/04/gridpak-responsive-grid-generator/ http://blog.kulturbanause.de/2012/04/gridpak-responsive-grid-generator/#comments Mon, 02 Apr 2012 07:19:58 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7638 Mit Gridpak wurde ein neues, sehr hilfreiches Tool zur Erstellung von flexiblen Gestaltungsrastern veröffentlicht. Gridpak bietet im Gegensatz zu anderen [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Mit Gridpak wurde ein neues, sehr hilfreiches Tool zur Erstellung von flexiblen Gestaltungsrastern veröffentlicht. Gridpak bietet im Gegensatz zu anderen Tools dieser Art keine vordefinierten Raster sondern unterstützt Webdesigner dabei eigene flexible Gestaltungsgrundlagen zu erstellen.
Neben der Gesamtbreite des Rasters, der Anzahl an Spalten, sowie dem Innen- Außenabstand könnt ihr mit Gridpak individuelle Breakpoints festlegen. Diese Breakpoints werden anschließend über CSS3 Media Queries angesprochen.

Was leistet Gridpak?

Die Bedienung von Gridpak ist absolut selbsterklärend. Nachdem ihr die gewünschten Einstellungen am Raster vorgenommen habt und die Breakpoints festgelegt sind könnt ihr euch ein umfangreiches Download-Paket herunterladen. Enthalten sind neben dem generierten Stylesheet auch LESS- und PNG-Grafiken, JavaScript-Files und ein Demo-Ordner.
Die JavaScript-Dateien dienen dazu das Raster während der Entwicklung der Website einzublenden: Mit der Taste G kann das Grid im Browser ein- und ausgeblendet werden.

Weiterführende Links

Folgende Links informieren sehr gut zum Thema Gridpak. Insbesondere der Smashing Magazine Artikel gibt interessante Einblicke in das Tool.

• gridpak.com
• gridpak.com/about
• coding.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/04/gridpak-responsive-grid-generator/feed/ 4 http://blog.kulturbanause.de/2012/04/browser-statistik-multi-screen-raster-978-grid-system/ http://blog.kulturbanause.de/2012/04/browser-statistik-multi-screen-raster-978-grid-system/#comments Mon, 02 Apr 2012 07:19:33 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7643 Hilfsmittel für Responsive- bzw. Multi-Screen-Design schießen ja im Moment wie Pilze aus dem Boden. Ich zeigt euch hier so viele [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Hilfsmittel für Responsive- bzw. Multi-Screen-Design schießen ja im Moment wie Pilze aus dem Boden. Ich zeigt euch hier so viele davon weil ich der Meinung bin, dass man nur dann das beste Tool finden kann wenn man auch eine Auswahl hat. Und abgesehen davon sind die Vorlieben und Anforderungen sehr individuell und man muss ganz einfach schauen welches Tool einem persönlich den Workflow am ehesten erleichtert.
Das 978 Grid System bietet ein flexibles Raster mit fünf vordefinierten Breakpoints. Mindestens genauso interessant sind jedoch die Browser-Statistiken die das Entwicklerteam als Grundlage für die sechs Breakpoint zu Rate gezogen hat.

Was leistet das 978 Grid System?

Das 978 Grid System bietet umfangreiche Downloads rund um die fünf festgelegten Media Queries (300px, 748px, 978px, 1218px, 1378px). Neben den erwarteten CSS-Dokumenten werden auch Photoshop-, Fireworks- oder OmniGraffle-Dokumente bereitgestellt.

Auf einer Unterseite des Projekts finden sich darüber hinaus interessante Browser-Statistiken. Für alle prominenten Browser und Betriebssysteme werden die Viewports (Breite und Höhe innerhalb des Browserfensters) aufgelistet. Auch der Falz wird berücksichtigt. Aus diesen Werten resultieren anschließend „sicherere“ Bereiche, die wiederum die Grundlage für die fünf Breakpoints des Rasters bilden

• 978.gs
• 978.gs/browsers
• 978.gs/downloads

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/04/browser-statistik-multi-screen-raster-978-grid-system/feed/ 4 http://blog.kulturbanause.de/2012/03/css-sprites-online-erstellen-spritepad/ http://blog.kulturbanause.de/2012/03/css-sprites-online-erstellen-spritepad/#comments Tue, 20 Mar 2012 08:10:08 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7579 Moderne Websites kommen um den Einsatz von CSS-Sprites nicht mehr herum. Um die Performance einer Seite zu verbessern, gehört die [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Moderne Websites kommen um den Einsatz von CSS-Sprites nicht mehr herum. Um die Performance einer Seite zu verbessern, gehört die Technologie längst zu den Basics. Leider ist es zeitaufwändig und lästig eine Sprite zu erstellen: Zunächst müssen die gewünschten Grafiken auf der Arbeitsfläche positioniert werden, anschließend werden die Abmessungen und Koordinaten in das CSS-Dokument übernommen.
Spritepad vereinfacht (wie auch andere Tools) die Arbeit mit Sprites. Im Gegensatz zu allen anderen mir bekannten Online-Anwendungen funktioniert jedoch bei Spritepad alles genau so wie man es sich wünscht.

Was macht Spritepad besser?

Viele Web-Dienste zur Erstellung von Sprites generieren die Grafik und den CSS-Code automatisch. Sprites lassen sich jedoch nicht vollständig automatisieren – häufig muss bei diesen Tools im nachhinein einiges korrigiert werden.

Andere Dienste wie Spritecow haben diese Fehlerquelle erkannt und nehmen dem Benutzer daher nicht alle Arbeitsschritte ab. Bei Spritecow muss die Grafik selbst erstellt werden, den passenden CSS-Code generiert anschließend der Dienst. Diese Arbeitsweise ist für mich der perfekte Weg – ich behalte die Kontrolle über alle wichtigen Arbeitsschritte, lästige Arbeiten werden mir abgenommen.

Spritepad kann beides. Per Drag and Drop positioniert ihr zunächst die Grafiken auf der flexiblen Arbeitsfläche. Spritepad generiert parallel den passenden CSS-Code und übernimmt dabei sogar die Dateinamen zur Benennung der CSS-Selektoren. Auch sich wiederholende Grafiken können berücksichtigt werden. Ein weiterer Pluspunkt ist, dass die Sprite-Dokumente online abgelegt und auch nachträglich noch ausgetauscht oder editiert werden können.

Wenn ihr mit der Sprite zufrieden seid, könnt ihr den Download starten und erhaltet anschließend ein Zip-Archiv mit einer PNG-Grafik und einem CSS-Dokument. Erfreulich ist auch, dass das Stylesheet sauber strukturiert ist und sogar einen Anflug von objektorientiertem CSS erkennen lässt.

.kulturbanause-logo, .gravatar{
  background: url(sprites.png) no-repeat;
}

.kulturbanause-logo{
  background-position: -18px -23px ;
  width: 140px;
  height: 140px;
}

.gravatar{
  background-position: -173px -68px ;
  width: 128px;
  height: 128px;
}

Automatische Ausrichtung für Premium User

Premium Usern steht das intelligente Hilfsmittel "Auto Alignment" zur Verfügung. Hierbei werden die Grafiken automatisch so angeordnet, dass möglichst wenig Platz verschwendet wird. Das wird mit Sicherheit einiges an wertvoller Arbeitszeit einsparen.

Die Macher von Spritepad bewerben Ihr Tool mit folgenden Worten:

With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.

• spritepad.wearekiss.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/03/css-sprites-online-erstellen-spritepad/feed/ 3 http://blog.kulturbanause.de/2012/03/responsinator-mobile-viewports-simulieren/ http://blog.kulturbanause.de/2012/03/responsinator-mobile-viewports-simulieren/#comments Tue, 20 Mar 2012 08:09:23 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7591 Der Responsinator ist ein weiteres Tools zur Simulation von Viewports für responsive Websites. Wie auch bei den meisten anderen Diensten [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Der Responsinator ist ein weiteres Tools zur Simulation von Viewports für responsive Websites. Wie auch bei den meisten anderen Diensten gebt ihr eine URL ein und erhaltet als Ausgabe die Ansicht der verschiedenen mobilen Endgeräte wie iPhone, Android oder Kindle. Innerhalb der Geräte lässt sich die Website zusätzlich scrollen, so dass ihr sowohl den Falz beurteilen, als auch die vollständige Website überprüfen könnt.

Responsive Websites mit dem Responsinator

Am Beispiel dieser Seite erzeugt der Responsinator folgende Ausgabe.

responsinator.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/03/responsinator-mobile-viewports-simulieren/feed/ 6 http://blog.kulturbanause.de/2012/03/flexible-jquery-slideshow-mit-generator-rhinoslider/ http://blog.kulturbanause.de/2012/03/flexible-jquery-slideshow-mit-generator-rhinoslider/#comments Wed, 07 Mar 2012 09:08:50 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7460 Vor einiger Zeit bin ich auf einen neuen jQuery-Slider aufmerksam gemacht worden den ich euch in diesem Beitrag kurz vorstellen [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Vor einiger Zeit bin ich auf einen neuen jQuery-Slider aufmerksam gemacht worden den ich euch in diesem Beitrag kurz vorstellen möchte: Den Rhinoslider. Im Gegensatz zu vielen anderen Slidern lässt sich der Rhinoslider unkompliziert und sehr flexibel individualisieren und überzeugt darüber hinaus durch einen Online-Generator mit Live-Preview.

Was sind die Vorteile des Rhinosliders?

Der Rhinoslider wirbt damit der „most flexible jQuery-Slider“ zu sein. Darauf möchte ich mich noch nicht festlegen. Fakt ist, dass sich die Slideshow unglaublich einfach an die eigenen Bedürfnisse anpassen lässt, nahezu keine JavaScript-Kenntnisse benötigt werden und neben Bildinhalten auch HTML-Content integriert werden kann.

Fast alle Eigenschaften des Sliders können beeinflusst werden und das sogar mit Hilfe eines praktischen Online-Generators. Welche Animation soll es sein? Welche Art der Navigation? Sollen Untertitel mit aufgenommen werden? Alle relevanten Optionen der Slideshow können mit Hilfe des Generators und der Live-Vorschau festgelegt werden. Das bereitgestellte Download-Paket enthält anschließend nur soviel Code wie für die gewählten Settings auch benötigt wird. Optimal!

Individuell festgelegte Einstellungen und gestaltete Designs lassen sich über einen Shortlink weitergeben oder mit der Community teilen und wer Lust hat noch tiefer in die Materie einzusteigen, freut sich bestimmt über die ausführliche Dokumentation.

Einzig eine fehlende responsive Unterstützung schränkt den Slider in seiner Flexibilität ein wenig ein – nach Rücksprache mit den Entwicklern wurde mir allerdings zugesichert, dass auch an diesem Feature gearbeitet wird.

rhinoslider.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/03/flexible-jquery-slideshow-mit-generator-rhinoslider/feed/ 8