Arbeitsablauf im Webdesign

Das WebsiteBaker Template

F├╝r die Umsetzung des Layouts beginne ich meist mit einem wei├čen leeren Blatt Papier. Hier werden zun├Ąchst skizzenhaft die einzelnen Elemente der neuen Website mit Bleistift gezeichnet. Die Idee zu dieser Vorgehensweise stammt aus dem Buch Gelungenes Webdesign von Jason Beaird.

Das Erstellen der Vorlagen geschieht durch das Ändern der Datein info.php, index.php und des entsprechenden Stylesheets in einem komfortablen Editor. Ich selbst verwende hier phpDesigner.
In der info.php werden die Anzahl der ben├Âtigten Navigationsmen├╝s (meist zwei) und die Anzahl der Inhaltsbl├Âcke festgelegt. Mit der index.php wird das grunds├Ątzliche Layout der Website erstellt - also Header oben, Footer unten, Sidebar mit Navigation links, Contentbox in der Mitte usw.
Hier ist bereits jetzt darauf zu achten, dass das Ganze nicht ausufert. Oftmals l├Ą├čt sich durch einen kleinen Trick so mancher div-Container einsparen, was der Semantik zugute kommt.

Da es oft nicht bei einem Template bleibt werden sich wiederholende Elemente in externe PHP-Dateien ausgelagert. Diese werden dann an entsprechender Stelle per include bzw include_once eingef├╝gt. Auch der Einsatz von WebsiteBaker Droplets (z.B. f├╝r die Suchbox) hat sich f├╝r eine bessere ├ťbersicht bew├Ąhrt.
Das konkrete Aussehen und die Positionierung der Elemente erfolgt im Stylesheet. Das fertige Template wird anschlie├čend gezippt um in WebsiteBaker installiert werden zu k├Ânnen.

Mit der Installation des Templates erfolgt auch die Installation der Module f├╝r die vom Kunden gew├╝nschten Funktionen der Website. Auch hier werden die Stylesheets entsprechend angepasst.
Die Website selbst befindet sich zu diesem Zeitpunkt auf einem mit XAMPP erstellten Testserver. So k├Ânnen weitere ├änderungen an allen Dateien sofort umgesetzt und beobachtet werden.

Inhalte einf├╝gen

Bei nahezu jedem neuen Auftrag komme ich immer wieder zum gleichen Punkt, dass ein Layout f├╝r eine Webseite um die Inhalte entsteht und nicht umgekehrt. Sind also bereits Texte bereit gestellt erleichtert das die Arbeit ungemein. Anderenfalls muss das Droplet namens Lorem herhalten.

Bei den Bildern steht oft noch viel Klickarbeit bevor. Denn diese m├╝ssen zun├Ąchst f├╝r das Web aufbereitet werden. In den meisten F├Ąllen bedeutet das die Skalierung auf die Ma├če von 640x480 Pixel. Das ist meiner Meinung nach eine Gr├Â├če, die v├Âllig ausreicht. Mit der Skalierung erfolgt eine weitere Optimierung der Bilder. Mit dem RIOT-Plugin - z.B. in IrfanView l├Ą├čt sich die Komprimierung f├╝r GIFs, PNGs und JPGs ohne starke Verluste an der Qualit├Ąt nochmals erh├Âhen. Bei etwaigen Bildergalerien macht sich dies in einer verbesserten Ladezeit bemerkbar.

Hochladen des Prototypen

Sind alle Text und Bilder eingef├╝gt erfolgt die Feinjustierung. Analog der Erstellung eines Dokuments in einem Office-Programm erfolgt die Formatierung eben erst nach dem Einf├╝gen der Texte und Bilder. Im FCK-Editor bietet sich hier z.B. die Formatierung mittels Subtemplates an. So kann eine Inhaltsbox noch einmal geteilt werden, was der ├ťbersicht und Lesbarkeit zugute kommt.

Ist alles fertig wird der Prototyp der Website auf einer Subdomain installiert. Der entsprechende Link wird dem Kunden per E-Mail zugesandt. Nun hat der Kunde die M├Âglichkeit sich die neue Website anzuschauen und auszuprobieren.

Ab hier werden erste Tests und Analysen bez├╝glich Nutzerfreundlichkeit (Usability), Zug├Ąnglichkeit (Accessibility) und Suchmaschinenoptimierung (SEO) durchgef├╝hrt.

Diskussion und Einweisung ins CMS

Da sich zu diesem Zeitpunkt die Website noch im Status des Prototypen befindet gibt es jede Menge Diskussionsstoff ├╝ber das Aussehen oder funktionale Belange.

Die Einweisung in das CMS erfolgt in der Regel telefonisch. Denn hier geht es in erster Linie um das Bearbeiten der Inhalte und weniger um eine Programmierschulung.

Im Fall von Websitebaker geht es also darum wie neue Bilder hochgeladen bzw. bestehende Bilder ge├Ąndert oder gel├Âscht werden. Da die Toolbars des FCK-Editor denen von Textverarbeitungsprogrammen ├Ąhnlich sind ist die Unterweisung hier denkbar einfach.

Launch der Website

Mit dem Upload zum Server bzw. Hoster des Kunden und dem Start der Website sind noch weitere Arbeiten verbunden. Dazu z├Ąhlen die Erstellung einer Robots-TXT und Google-Sitemap und die Anmeldung der Website in den Google-Webmastertools.

Danach erfolgt noch die Einbindung des Tracking-Codes f├╝r die Website, welcher nat├╝rlich anonymisiert ist.

Nachdem die Website online gestellt ist erfolgen erneute Tests und Analysen auf Nutzerfreundlichkeit (Usability), Zug├Ąnglichkeit (Accessibility) und Suchmaschinenoptimierung (SEO).

Wartung und Pflege

Das auch die in jeder Hinsicht optimierte Website kein Selbstl├Ąufer ist sollte sich mittlerweile herum gesprochen haben.

Die Aktualisierung der Website betrifft nicht nur die Texte und Bilder. Die Software des CMS darf von Updates nicht ausgeschlossen werden. Es liegt nahe, dass sich der Webdesigner darum k├╝mmert. Oft wird dazu ein Wartungsvertrag angeboten, der den Inhaber der Website an den Webdesigner bzw. Agentur bindet.

Ich selbst bevorzuge eine j├Ąhrliche Pauschale welche an die Gr├Â├če und somit an den Umfang der zu erwartenden Arbeiten angepasst wird. So bleiben Webseiten-Inhaber und Webseiten-Betreuer flexibel.