Mein Webdesign-Workflow

Da es mich durchaus interessiert, wie andere Web-Entwickler arbeiten, möchte ich mal meinen Workflow hier erläutern. So hoffe ich auf viele Kommentare der Besucher um daraus noch einiges lernen zu können.

Die Erstellung einer Website erfolgt bei mir grob skizziert in 5 Stufen:

Mein Webdesign-Workflow
Mein Webdesign-Workflow

1. Design

Als Freelancer bekomme ich von den Werbeagenturen die Entwürfe der Einzelseiten meist als PDF-Datei oder direkt als Photoshop-Dateien. Hierbei muss ich die Seiten dann nur sinnvoll zerlegen und kann anschließend direkt mit der Umsetzung in (X)HTML / CSS / PHP fortfahren.

Bei Aufträgen, die ich für meine eigenen Kunden realisiere, entsteht der Entwurf entweder direkt in Photoshop oder in Rapidweaver.

Photoshop verwende ich, wenn die Vorstellungen bzgl. Struktur und Aussehen der Seiten sowohl beim Kunden als auch bei mir recht konkret sind. Schon beim Entwurf in Photoshop versuche ich mit einem Raster zu arbeiten, damit die spätere Umsetzung in HTML/CSS einfacher von der Hand geht. Das „960 Grid System“ Raster hat sich hier sehr gut bewährt und bringt auch eine Schablone für Photoshop mit.

Mein Webdesign-Workflow

Rapidweaver eignet sich dagegen sehr gut, wenn man sich über das generelle Aussehen noch nicht im klaren ist und mit mehreren Entwürfen die Richtung ausloten möchte. Mit Hilfe von diversen Templates und unglaublich vielen Einstellmöglichkeiten kann man dem Kunden diverse Vorschläge unterbreiten. Teilweise kann das Ergebnis aus dem Export des gewählten Entwurfs für die Programmierung sogar weiter verwendet werden. Das hängt natürlich davon ab, ob man eine statische Website erstellen muss oder ob es ein Content Management System wird oder ein Blog oder ein Web-Shop.

Mein Webdesign-Workflow

2. Programmierung

Den Quelltext von (X)HTML PHP und JavaScript erstelle ich mit dem Programm Coda. Ich hatte diverse Editoren getestet und teilweise jahrelang verwendet, bin am Ende aber mit Überzeugung bei Coda hängen geblieben. Es ist oft eine Sache des persönlichen Geschmacks und der Arbeitsweise, welcher Editor für den eigenen Workflow am besten geeignet ist. Mir gefällt an Coda die Art, wie Dateiverwaltung, FTP und Versionierung integriert und nutzbar sind. Durch sinnvolle Plugins lässt sich Coda weiter optimieren. Die „Tab-Completion“ entspricht am ehesten meinen Vorstellungen.

Mein Webdesign-Workflow

Für CSS gibt es meiner Meinung nach ein noch wesentlich besser geeignetes Programm: CSSEdit. Die Vorzüge und Unterschiede zu dem in Coda integrierten recht guten CSS-Editor aufzuführen, würde hier zu weit gehen. Sicher spielt hier auch wieder der persönliche Geschmack mit eine Rolle.

Mein Webdesign-Workflow

3. Browsertest

Während der Entwicklung wird das Ergebnis ständig im eingebauten Browser von Coda überprüft und in Firefox begutachtet. Die Entwicklerwerkzeuge „Web Developer“, Firebug“ und „FirePHP“ in Firefox sind bei der Entwicklung ungeheuer hilfreich. Speziell bei der Verwendung von CMS ist die Anpassung von vorhandenem Code an die aktuellen Bedürfnisse der Website anders fast nicht mehr denkbar.

In größeren Abständen wird die Website in allen auf dem Mac relevanten Browsern überprüft und der Quelltext ggf. angepasst. In der Regel passt hier aber alles.

4. IE-Test in VirtualBox

Für den Mac gibt es leider oder auch zum Glück keinen Internet-Explorer.
Damit man keinen separaten PC zum Testen einsetzen muss, wird Windows XP oder Windows 7 in der VirtualBox gestartet. Dort kann dann die Website im IE7 und IE8 aufgerufen und überprüft werden.
Sofern Anpassungen speziell für den IE erforderlich sind, wandern diese grundsätzlich in eine spezielle Datei, die nur vom IE aufgerufen wird, die anderen Browser also nicht beeinflusst.

5. FTP-Upload + Kundenfeedback

Solange eine Website noch nicht durch den Kunden frei gegeben wurde, liegt sie auf einen versteckten Bereich meines Webservers. Der Zugang zu diesem Bereich wird dem Kunden recht früh bekannt gegeben. So kann er schon während der Entwicklung im Bedarfsfall eingreifen und Änderungswünsche rechtzeitig mitteilen.

Der „normale“ Upload erfolgt direkt aus dem Editor Coda heraus. Wenn der in Coda eingebaute FTP-Client nicht ausreicht bzw. die Handhabung etwas aufwändiger gerät, bietet sich an, einen besonders pfiffigen FTP-Client zu verwenden: Transmit 4.0. Wenn man diverse FTP-Clients kennt und dann mal  Transmit in der neuen Version 4.0 testen konnte, wird sich fragen, wie man die ganze Zeit ohne ihn auskommen konnte. Unglaublich, wie man eine scheinbar so belanglose Anwendung zu so einen genialen Tool ausbauen kann.

Mein Webdesign-Workflow

Sobald die Website vom Kunden abgenommen ist, wird sie auf den Server des Kunden transferiert. Bei einer statischen Seite kann der gesamte Inhalt einfach von meinem Server auf den Server des Kunden kopiert werden. Hier macht Transmit 4.0 das Leben einfacher indem es den Transfer zwischen zwei Servern ermöglicht.  Bei CMS Systemen wird das Grundsystem auf dem Server des Kunden neu installiert und dann, je nach CMS, mit Export/Import gearbeitet oder ein Datenbankauszug transferiert und auf dem Zielsystem eingespielt.