Websites ohne HTML gestalten und �programmieren�

Ralf Turtschi Es war schon frü-her so, und daran hat sich bis heute nichts geändert: Komplexe IT wandelt sich zunehmend vom programmierten Code hin zu einer benutzerfreundlichen Anwendertechnologie, die weitgehend «an der Oberfläche» stattfindet. Denken wir an die ersten Computer, die durch Apples «what you see is what you get» abgelöst wurden. Nach und nach drängte die Technik immer mehr an die Oberfläche und wurde zunehmend auch für Laien über allgemein verständliche Tools wie Maus oder Touchscreen zugänglich.

Bezüglich Websitegestaltung findet gerade ein solcher Technologie­sprung statt. Einige Softwares versprechen Dinge, die vor fünf Jahren noch undenkbar waren. Und wie immer geht es bei Technikfragen um Marktbeherrschung und -durchdringung, um Einzel- oder Verbundlösungen, um Standards, um Finanzierungsmodelle – und über allem schwebt die Cloud.

Schlagworte ordnen

Eine gewisse Verwirrung ist bezüglich Webdesign festzustellen, da die Protagonisten des Verkaufs, der Beratung und Schulung mit immer neuen Schlagworten dafür sorgen, dass der Anwender bald nicht mehr weiss, wo ihm der Kopf steht, geschweige denn, wohin die Reise zukünftig gehen wird. Responsive Design, Fluid Design, agiles Publishing, Mobile Publishing, Publishing 3.0, Multichannel ­Publi­sh­­ing, Digital Publishing Suite, Crossmedia – nur um einige zu nennen. Als Autor und Herausgeber des crossmedialen Buchprojektes «Zeichen setzen!» erlebe ich in diesem Umfeld gerade, was Sache ist und was wohl Vision bleiben wird.

Vielleicht sollte man eine gesunde Distanz zum cool klingenden Marketingslang entwickeln. Ein Vergleich mit der Kosmetikbranche drängt sich auf, wo der Name «Seife» nahezu aus den Regalen verschwunden ist. Stattdessen versuchen wir den Nutzen von Produkten zu entschlüsseln, die etwa so heissen: sensitives Pfirsichbalsam mit tiefenwirksamem Antiage-Glättungstonikum.

Im Bereich Publishing stellt man eine analoge Entwicklung fest. Die Einheitsseife «Print» ist nicht mehr, es gibt viele Produkte für unterschied­liche Zwecke, die dann halt oft etwas schwurbelig daherkommen.

Nach meinen Erfahrungen wird es auch in absehbarer Zukunft nicht möglich sein, zum Beispiel einen einzigen Datensatz aufzubauen, und damit «alle Kanäle» zu bedienen.

Unsinnig deshalb, weil diese Kanäle nicht vergleichbar sind, Print ist nun einmal etwas anderes als Mobile, und ein Videoclip funktioniert ganz anders als ein interaktives 3D-Game. Selbst die Funktionalität eines Tablets lässt sich kaum über einen Datensatz bedienen, der von Print ausgeht. Es ist nur logisch, dass die «Ausgabekanäle» andere Datensätze benötigen, einer anderen Benutzerlogik folgen und einen anderen Anspruch auf Archivierung und Migration aufweisen.

Damit komme ich auf einen ganz wesentlichen Punkt. Eine unterschiedliche Struktur, Organisation und das Handling bedingen zwingend Zusatzaufwand mit entsprechenden Kostenfolgen. Somit kommen crossmediale Kampagnen oder «Ausgabe auf verschiedenen Kanälen» eher für grössere Unternehmen und Budgets infrage. Kleinere Firmen müssen mit ihrer Kommunikation schmaler durch, Cross­media bleibt oft auf der Strecke.

Eine Kooperation mit anderen Unternehmen kann ein Denkansatz sein. Alles andere bleibt ein Wunschtraum. Mit anderen Worten: Es ist oft nicht finanzierbar, von einem einzelnen Produkt (Beispiel Firmenprospekt) ein ganzes Arsenal an multimedial aufgebauten Schwesterprodukten (DPS, APP, Video, Social Media, YouTube) aufzubauen. Wenn der Aufwand für Print 100% beträgt, «lohnt» es sich kaum, für einige wenige zusätzliche Benutzer eine App oder ein digitales Magazin zu entwickeln, welches einen massiven Zusatzaufwand nach sich zieht. Crossmedia ist nicht nur eine Frage des Marketings und der Technik, sondern auch der sinnvollen Finanzierbarkeit.

Zurzeit sieht es danach aus, dass in der Me­dienvorstufe crossmediales Know-how aufgebaut wird, ohne dass kundenseitig zurzeit eine Nachfrage besteht. Eine sorgfältige Abwägung von Aufwand und Nutzen, die zu erreichenden Ziele und Werte vermindern das Risiko eines Abenteuers. Es bietet sich zudem die Chance, Kunden zu entwickeln und Gebiete zu besetzen, die bisher an die Kreativwirtschaft abgetreten werden mussten.

Websites und Responsive Design

Responsive Design ist in aller Munde. Gemeint ist, dass sich Inhalte dem entsprechenden Ausgabemedium anpassen, also hoch- oder querformatig in einer variablen Grösse. Typischerweise eine Website, die auf dem Desktop eine grosse Fülle an Informationen bereithält, auf dem Handy dann aber nur noch die zwingend notwendigen ohne Bannerwerbung. All das schaut zwar nett aus, aber braucht man es wirklich? Allein die Funktionalität «Responsive Design» bedeutet in der Praxis einen Mehrbetrag von einigen Tausend Franken. Ohne Programmierkenntnisse ist dies nicht zu bewerkstelligen, und für Websites von KMU ist der Mehrbetrag für Responsive Design ein verzichtbarer Luxus.

Adobe Muse

Muse ist eine cloudbasierte Software, welche (ab CHF 21.60/Monat) abonniert werden muss. Adobe geht mit Muse einen neuen Weg der Websitegestaltung. Mit Muse kann man nicht responsive gestalten. Es gibt die Versionen Desktop, Tablet und Telefon. Alle drei sind aber nur teilweise miteinander verknüpft. Im Prinzip gestaltet man für alle drei eine unabhängige Oberfläche. Man kommt jedoch mit zwei Datensätzen aus. Derjenige für die Desktopversion kann auch Tabletbenützern zugemutet werden, der zweite Datensatz ist für die Telefonversion. Bei jeder Text- oder Bildänderung müssen beide Datensätze angepasst werden. Falls man eine zwei- oder dreisprachige Website ins Auge fasst, ist Muse wohl nicht das richtige Tool, denn Mutationen in vier oder mehr Datensätzen vorzunehmen, ist nicht zumutbar.

Mit Muse gestaltet man die Website auf der Oberfläche. Es muss kein einziger Code eingegeben werden. Man zieht wie in InDesign Bild- und Textboxen auf, man kann diese skalieren, einfärben und hat etwa dieselbe Handlungsfreiheit, wie man es in InDesign gewohnt ist.

Muse ist deshalb geradezu prädestiniert, in der Ausbildung als «Brückenlösung» vom Desktop-Publishing zum eigentlichen Webdesign eingesetzt zu werden.

Wer HTML beherrscht, ist im Vorteil, denn Muse verwehrt den Code nicht. HTML wird im Hintergrund erzeugt, wenn die Datei exportiert wird, um auf den Webserver zu gelangen. Ich kann nicht beurteilen, wie gut der Code ist, Profis mögen darüber die Nase rümpfen. Schliesslich kommt es aber nicht darauf an, was ein Tool nicht kann, sondern, ob man es vernünftig und ökonomisch einsetzen kann.

Gestalter oder Druckereien können heute eine kleine Website allein und ohne Webagentur im Rücken relativ günstig aufbauen. Und gewisse Mängel sind zumutbar. Wer «20 Minuten» liest, ärgert sich nicht über das fehlende Trennprogramm, und wer mailt, bemängelt fehlende Tabulatoren auch nicht.

Eine Website gestalten

Um Publisher-Lesern zu zeigen, wie Adobe Muse funktioniert, werde ich Schritt für Schritt beschreiben, wie man vorgeht. Dafür habe ich das Übungsbeispiel «Vengis Mineralquelle AG» mit frei erfundenen Gegebenheiten geschaffen. Dieses Beispiel wird voraussichtlich im Sommer auf der neuen Lernplattform (die vormalige Lern-Werkstatt) des VSD, Verband Schweizer Druckindustrie, erscheinen, mit allen Dateien und Templates, die dazugehören. Wer sich schon mal mit Muse vertraut machen möchte, kann die 30-Tage-Testversion herunterladen.

Planung Sitemap

Das A und O jeder Websitegestaltung ist die Sitemap (Strukturbaum). Diese ähnlich wie ein Organigramm aufgebaute Struktur der Website ist deshalb so wichtig, weil die Titel der einzelnen Seiten automatisch die Namensgebung der Navigation bedeuten. Eine gute Idee ist der Aufbau der Sitemap mittels Post-it-Zetteln, die sich leicht verschieben oder umgruppieren lassen. Mit Vorteil lässt man die Sitemap vom Auftraggeber unterzeichnen, nachträgliche Änderungen sind zwar möglich, können aber zu aufwendigen Übungen verkommen.

Planung Grundaufbau

Grundsätzlich gelten auch für die Website­gestaltung ähnliche Regeln, wie sie beim Aufbau eines Magazins gelten. Man verwendet dort mehrspaltige Satzspiegel, die in InDesign bei einem neuen Dokument oder auf der Musterseite festgelegt werden. Im Screendesign kann man mit Modulspalten ein Rastersystem aufbauen, mit dem man die unterschiedlichen Breiten der Ausgabegeräte bequem abdecken kann. Wir basieren auf einer Modulspalte von 30 Pixel, der Zwischenraum beträgt 10 Pixel. 30/10 wird in allen Ausgabegeräten durchgezogen, dies erlaubt, per copy/paste Elemente vom einen Design aufs andere zu übertragen. Wenn ein Bild in der Desktopversion 5 Modulspalten breit ist, kann es auch auf der Tabletversion in 5 Modulspalten unverändert eingesetzt werden.

Variabel sind die Randbereiche, die sich aus einem Rest links und rechts errechnen.

Die hier vorgestellten Templates sind im Downloadbereich des Publisher zu finden. Selbstverständlich können eigene Templates, die auf eigenen Massen basieren, erstellt werden. Es sei nicht behauptet, dass man mit Modulspalten arbeiten muss, sie sind lediglich eine gute Orientierungshilfe .

Mit diesen Templates lassen sich einfach Skizzen herstellen. Ein anderer Weg im Gestaltungsprozess ist die Gestaltung direkt in InDesign. Dafür muss man aber die entsprechenden Grundmasse kennen, denn in Muse wird alles in Pixel angegeben. Die entsprechenden Masse für die Desktop­ausgabe entnehmen Sie bitte den Site-Eigenschaften in der Abbildung rechts. Mit diesen Angaben wird das Vengis-Beispiel gestaltet.

Schlussbemerkung

Jede Software hat heute ihren spe­ziellen Einsatzbereich, so auch Adobe Muse. Gerade für Berufsleute und Unternehmen, die bisher mit Adobe Creative Suite unterwegs waren, bietet Muse die idealen Bedingungen, um im Bereich Screendesign verlorenes ­Terrain zurückzuerobern.