Tools

Die Entwicklung moderner Websites wird immer komplexer und ohne die unzähligen Tools und Scripte würde die Umsetzung eines Projekts noch länger dauern. Gerade für lästigen Aufgaben werden praktische Tools entwickelt um dem Webdesigner unter die Arme zu greifen. Eine umfangreiche Liste aller uns bekannten Tools findest du übrigens auf Best Webdesign Tools.

Syntax Highlighting mit Prism

Prism Syntax Highlighter

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

Beitrag zu Ende lesen

Photoshop-Ebenenstile als CSS3-Code exportieren: CSS3PS

css3-photoshop-plugin-icon-logo

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!

Beitrag zu Ende lesen

Vom Design zum responsive Design: Responsive Grid System

reponsive-grid-system-logo

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.

Beitrag zu Ende lesen

CSS-Verläufe aus Bildern generieren: CSS Gradient Finder

css-3-logo-icon-gradient

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.

Beitrag zu Ende lesen

Responsify.it – Responsive Grid Template

responsify-logo-icon

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

Beitrag zu Ende lesen

CSS Arrow Please!

css-arrow-please-logo

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.

Beitrag zu Ende lesen

Adobe Edge Inspect (ehem. Shadow) im Praxistest

adobe-shadow-ios-icon

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.

Beitrag zu Ende lesen