PSDtoHTML

Unter diesem eher sperrigen Titel verbirgt sich der Kern meiner technischen Kompetenz. Aus einem vorgegebenen Screendesign (PSD, Photoshop-Datei, Photoshop ist das Standard-Programm der Gestalter) erstelle ich die Dateien, die dem Browser mitteilen, wie die Website aussehen und reagieren soll (HTML, Hyper Text Markup Language, enthält die strukturierten Inhalte und Verweise auf Hilfsdateien). Diese Tätigkeit ist mittlerweise ziemlich spezialisiert und steht im zeitlichen und organisatorischen Ablauf zwischen Graphiker und Programmierer.

Bei dieser Arbeit ist es besonders wichtig, die sichtbare Struktur der Website in einzelne, in sich geschlossene Bereiche aufzuteilen, die möglichst einfach miteinander kombinierbar sind. Das bezieht sich sowohl auf die optische Gestaltung als auch auf die Inhalte der Website. Wenn ich meine Arbeit gut erledigt habe, ist der Programmierer in der Lage die in Datenbanken abgespeicherten Inhalte mit minimalem Zusatzaufwand auszuliefern.

Ablauf

Prüfung des Screendesigns

Wenn man als »HTML-Coder« nicht das Erstellen des Screendesigns begleitet hat, wird man erst einmal prüfen, inwieweit das Screendesign technisch korrekt ist. Sind die Vorgaben hinsichtlich Darstellungsbreite und -höhe eingehalten worden? Sind die einzelnen Elemente die in der Inventarliste enthalten sind umgesetzt? Ist das Bildmaterial in geeigneter Form vorhanden? Ist die Typographie durchdekliniert? Ist die Navigation in der ganzen Tiefe vollständig durchgestaltet?

Aufbau von Außen nach Innen

In aller Regel baut man eine HTML-Struktur von außen nach innen auf. Schon hier ist es manchmal wichtig den kompletten Umfang der verschiedenen Seitentypen zu kennen. Schaden tut es eigentlich nie. Die HTML-Struktur wird dann erst einmal ganz altmodisch als statisches HTML aufgebaut, eine Seite, eine Datei. Jetzt wird auch deutlich, warum nicht unbedingt die Zahl der späteren Seiten, sondern die Zahl der verschiedenen Seitentypen den Aufwand beim PSDtoHTML bestimmen. Was hier nicht als Seitentyp vorliegt kann später auch nicht mit den entsprechenden Inhalten gefüllt werden, ob es nun eine Seite pro Typ oder 1000 Seiten pro Typ sind ist im Ergebnis egal.

Leistungstest für das Design: Die Arbeit mit realen Inhalten

Wichtig ist es bereits in diesem Stadium mit realen Inhalten zu arbeiten. Eine reine Textseite wird also mit realem Text gefüllt, eine Produktseite mit einem realen Produkt. Auch die Manipulation der Darstellung (z.B. Auf- und Zuklappen einzelner Bereiche) wird in der Regel bereits komplett umgesetzt. Eine wichtige Aufgabe besteht auch darin in dieser Phase die Leistungsfähigkeit des Design auszutesten.

Die einzelnen Seiten werden dann auf einem Webserver dem Auftraggeber, dem Designer und eventuell dem Programmierer zur Verfügung gestellt. Die Startseite (Homepage) oft als letzte, auch wenn sich das erst einmal seltsam anhören mag. Für den HTML-Coder und alle die nach ihm kommen ist die Startseite die uninteressanteste Seite von allen. Sie weicht häufig völlig vom Rest der Seiten ab und ist ein Unikat. Während für einen reibungslosen Einbau der Seiten in das CMS es möglichst wichtig, ist die häufig benötigten Seitentypen möglichst früh fertigzustellen, reicht es für die Homepage auch noch wen man später anfängt. Dann nämlich, wenn der Programmierer die häufig gebrauchten Seitentypen verarbeitet.

Testen, testen, testen

Designer neigen dazu bei der Gestaltung vom besten Fall auszugehen: Inhalte sind vollständig und werden so gesetzt, dass sie gut aussehen. Die Aufgabe des HTML-Coders ist nun auszutesten, wie sich das Design verhält, wenn beispielsweise die Produktbeschreibungen umfangreicher ausfallen oder statt aus drei Sätzen auch einmal nur aus einem Wort bestehen.

Nun kann man sagen, dass man die Texte halt so schreibt, dass sie passen. Das wird bei ein paar Seiten immer machbar sein, sobald aber die Zahl der Seiten im dreistelligen Bereich liegt und man für jeder der Seiten, die beispielsweise bereits in einer Produktdatenbank liegen, einen neuen Textbaustein mit passender Länge bereitstellen muss, wird klar, dass es einfacher oder zumindest billiger wäre, das Design anzupassen.

In dieser Projektphase zeigt sich dann auch erstmals, ob das Konzept der Website gut im Sinne von handwerklich vollständig war. Daher kommt diesem Arbeitsschritt auch eine besondere Bedeutung zu. Noch ist es relativ einfach, Änderungen an der Gestaltung oder Ergänzungen von Seitentypen oder einzelnen Bestandteilen vorzunehmen.

Einbau der HTML-Struktur in die Maschine

Jetzt zeigt sich, ob der HTML-Coder seine Arbeit ordentlich erledigt hat. Die statischen HTML-Seiten werden nun wieder in kleine Bausteine zerschnitten und in das CMS oder das individuell programmierte Hilfssystem eingebaut. Dieser Aufwand ist mehr oder minder gross, meist eher mehr als minder. Zwar lassen sich auch noch in den zerschnittenen HTML-Häppchen des Systems Änderungen und Ergänzungen vornehmen, aber nicht mehr so einfach und effizient wie an den kompletten Seiten.

Wenn alles klappt drückt man dann auf einen Kopf und staunt. In aller Regel wird man dann feststellen, dass der Test mit realen Daten zwar gut und schön war, der eine oder andere Artikel aber den gesetzten Rahmen trotzdem sprengt oder auch einmal zusammensacken lässt. Nun ist abschließendes Feintuning angesagt, teilweise wird man versuchen die Inhalte anzupassen, teilweise wird man auch am HTML Änderungen vornehmen müssen.

Beispiele

Unter dem Stichwort »PSDtoHTML« finden Sie Beispiele für durch mich gesetzte Screendesigns.

nach oben