Webdesign für Code-Muffel

Es gibt heute verschiedene Wege, um zu einem anständigen Webauftritt zu kommen, ohne auch nur den Hauch einer Ahnung von HTML, CSS und Co. zu haben. Wordpress oder Blogger etwa bieten Möglichkeiten, auch WYSIWYG-Editoren wie Microsoft Expression oder Adobe Contribute erlauben den relativ unkomplizierten Bau einfacher Auftritte, und dann finden sich noch Lösungen wie den Web-o-Mat bei Hostpoint und Tools wie iWeb für Macs, mit denen sich Webauftritte ohne grosse Mühen zusammenklicken lassen. All diese Lösungen setzen jedoch Templates voraus, damit die Sites erstellt werden können – entsprechend ist man an die verfügbaren Design-Vorlagen gebunden und der Individualität sind Grenzen gesetzt.


Einen relativ neuen Ansatz hat nun Adobe mit «Muse» (Codename) lanciert. Die Lösung ist im Herbst dieses Jahres als Beta erschienen und kann während dieser Beta-Phase kostenlos getestet werden. Mit «Muse» richtet sich Adobe explizit an Designer, die HTML-Websites publizieren wollen, ohne sich mit Code beschäftigen zu müssen. Im Gegensatz zu den verfügbaren, eingangs erwähnten Werkzeugen erlaubt es «Muse», Website-Designs nach dem eigenem Gusto zu erstellen. «Swiss IT Magazine» hat sich die «Muse»-Beta 3 im Detail angesehen und im Rahmen dieses Tests versucht, eine neue Website für eine Rockband zu bauen. Das Anforderungsprofil an diese Site: Sie sollte über eine News- und eine Konzert-Sektion verfügen, die man ohne grossen Aufwand aufdatieren kann, Videos abspielen und Bildergalerien anzeigen, Musik wiedergeben können und schliesslich auch Plattformen wie Facebook integrieren.

Lesen, dann loslegen

Nach dem Start von «Muse» erfolgt gleich einmal die erste kleine Ernüchterung: «Muse» braucht Einarbeitungszeit, und einige Vorkenntnisse in der Webentwicklung schaden keinesfalls. So muss man beispielsweise gleich zum Start bei den Seiteneinstellungen Werte wie Breite und minimale Höhe der Site, die Anzahl Spalten («Page Width», «Min Height», «Columns», «Column Width») und Werte wie «Gutter», «Margins» oder «Padding» eingeben. Wer nun nicht weiss, für was Gutter oder Padding steht, muss sich hier wohl oder übel mit einer Google-Suche helfen.

Sind die Grundeinstellungen einmal gemacht, findet man sich quasi auf einer optischen Sitemap wieder. Hier folgt dann der nächste Schritt: Das Erstellen einer Master-Seite, auf der sämtliche Elemente platziert werden, die auf jeder Seite des Webauftritts vorkommen sollen – sprich beispielsweise das Header- oder das Footer-Element oder das Hauptmenü. Das Platzieren von Elementen ist ein Kinderspiel. Bilder werden beliebig auf der Seite platziert, wobei es sich empfiehlt, zuerst das Grunddesign in einem Programm wie Photoshop oder Illustrator zu erstellen. Auch bei den Menübuttons kommt idealerweise Photoshop zum Einsatz, wo die Buttons und die verschiedenen Button-Zustände über Ebenen erstellt werden und dann über den Befehl «Place Photoshop Button» in die Seite integriert werden können. Ist die Master-Seite einmal erstellt, können mittles Knopfdruck neue Top- und Sub-Level-Seiten zur Sitemap hinzugefügt und eine Seitenstruktur erstellt werden. Um die einzelnen Seiten dann individuell mit Inhalten zu bestücken, genügt ein Doppelklick auf die jeweilige Seite in der Sitemap-Übersicht.

Interaktivität dank Widgets

Wer sich ein wenig mit Adobe-Programmen auskennt, für den ist das Platzieren von statischen Elementen wie Bildern und Text ein Kinderspiel. Positiv hervorzuheben ist dabei, dass «Muse» mittels automatisch erscheinenden Hilfslinien und Abstandsangaben hilft, die Elemente pixelgenau auf der Seite zu platzieren. Spannend wird es jedoch, wenn etwas raffiniertere Elemente integriert werden sollen – in unserem Beispiel Videos, Bildergalerien, Musik oder allenfalls gar eine News-Sektion, deren Inhalte idealerweise dynamisch geladen werden. «Muse» arbeitet hierbei mit Widgets. Das Programm bietet dazu eine (bislang noch kleine) Anzahl von mitgelieferten Widgets, beispielsweise für eine Bildergalerie, für eine Slideshow oder für einen ausklappbaren (jedoch statischen) Newstext. Daneben ist es aber auch möglich, via sogenanntem Arbitrary HTML verschiedensten Content zu der Seite hinzuzufügen – beispielsweise Youtube-Videos, Google Maps oder Picasa-Alben. Wie die Integration des Contents in der Praxis funktioniert, haben wir anhand unserer Website anhand mehrerer Beispiele aus verschiedenen Bereichen ausprobiert.


Äusserst einfach funktionierte dabei das Einbinden eines einfachen Widgets – im konkreten Fall eines MP3-Players der Schweizer Musikplattform Restorm.com. Hier muss lediglich der per Knopfdruck in Restorm erstellte Code in «Muse» über den Befehl «Insert HTML» in die Seite kopiert werden, und das Widget ist in den eigenen Auftritt integriert. Ähnlich einfach ist die Integration des Meldungs-Streams aus einem Facebook-Auftritt. Facebook bietet in seiner Developer-Sektion eine Reihe sogenannter Social-Plug-ins – unter anderem auch die sogenannte Like-Box. Diese zeigt nebst dem Meldungs-Stream auch gleich die Anzahl Fans oder Freunde des Facebook-Auftritts und einen Like-Button. Nach der Eingabe einiger Parameter, etwa der Breite der Box, wird auch hier auf Knopfdruck ein Stück HTML-Code ausgespuckt, der ganz einfach in «Muse» eingefügt werden kann und fertig ist die Facebook-Integration. Etwas komplizierter wird es dann, wenn man beispielsweise Youtube-Videos oder ein Foto-Album von Picasa jeweils als Lightbox auf der eigenen Seite darstellen will. «Muse» bietet dazu zwar wie erwähnt das Widget «Lightbox Display», das via Drag and Drop auf die Seite gezogen und angepasst werden kann. Für dieses Anpassen jedoch musste das Online-Tutorial zu Rate gezogen beziehungsweise gepröbelt werden, um zu verstehen, was die Aufgaben von «Trigger Containern» und «Target Containern» etc. sind und in welches Element der HTML-Code denn nun genau eingefügt werden muss. Nicht endgültig geklärt wurde dabei jedoch die Frage, warum man den Youtube-Code beispielsweise in den Trigger-Container, einen Picasa-Code aber in den Target-Container kopieren muss. Doch mit etwas ausprobieren und Geduld kommt man ans Ziel, und einmal geschafft, ist auch die Integration externer Inhalte in ein Lightbox-Element durchaus komfortabel und führt zu einem hübschen Endergebnis.

CMS? Fehlanzeige

Ein wenig umständlich wird es dann bei einer News-Seite, die dynamisch befüllt werden soll. «Muse» sieht aktuell die Integration einer Art CMS-System (in welcher Form auch immer) nicht vor. Entsprechend muss man sich mit statischem Content begnügen, bei dem die ganze Seite bei Änderungsbedarf in «Muse» selbst (oder einem anderen Editor) geändert und wieder auf den Webserver geladen wird – nicht wirklich befriedigend. Wir haben uns deshalb nach einem Workaround umgesehen und diesen via Blogger gefunden. Für unsere dynamische News-Sektion haben wir einen Auftritt beim Google-Blog-Service Blogger erstellt und diesen soweit angepasst und auf die eigentlichen Meldungen reduziert, dass er optisch in unsere Website passt. Hat man den Blogger-Auftritt erst einmal soweit, kann er unkompliziert mittels iFrame in «Muse» eingebunden werden. Mit diesem Workaround kann neuer Content ganz einfach in Blogger erfasst werden – was ziemlich komfortabel von der Hand geht – und wird dann dynamisch in unsere «Muse»-Website geladen. Ein Nachteil bei dem ganzen Prozedere ist, dass die Blogger-Seite nur begrenzt an das Design unserer «Muse»-Seite angepasst werden kann. Wer sich etwas mit CSS auskennt, kann zwar weitergehende Anpassungen vornehmen – doch wer sich mit CSS auskennt, wird vielleicht nicht unbedingt mit «Muse» arbeiten. Auf jeden Fall ist der Umweg via Blogger einfacher, als jedes Mal die eigentliche Webseite vom Server zu laden, zu bearbeiten und wieder hochzuladen. Die Beispiele zeigen, was alles durch die Einbindung von Arbitrary HTML möglich ist. Die Möglichkeiten sind dabei beinahe unbeschränkt, egal ob man Google-Karten, Twitter- und RSS-Feeds oder Börsenkurse einbinden möchte.

Hübsch in jedem Browser

Ist die Seite einmal fertig gebaut, können auf Wunsch noch Meta-Daten eingegeben werden, was über den Menüpunkt «Page Properties» ganz einfach funktioniert und dabei noch gut erklärt ist. Ebenfalls kann noch ein Favicon (das kleine Bildchen, das in der Adresszeile des Browsers angezeigt wird, definiert werden), und dann steht dem Export der Seite eigentlich nichts mehr im Wege. Hierzu gibt es zwei Möglichkeiten. Man kann die Site als HTML exportieren und via FTP auf einen Webserver laden. Oder man wählt den Menüpunkt «Publish», über den die Site auf Adobes Business-Catalyst-Plattform geladen wird. Dabei handelt es sich um Adobes hauseigene, allerdings kostenpflichtig (ab 20 Dollar pro Monat) Hosting-Plattform. Business Catalyst sieht auch Content-Management-Funktionen vor, und es wird spekuliert, dass «Muse» über kurz oder lang mit diesen Funktionen zusammenspielen wird und dann auch dynamische «Muse»-Seiten möglich werden – was sicher ein enormer Gewinn wäre. FFZur Qualität des HTML- beziehungsweise CSS-Codes (übrigens HTML5 und CSS3), den «Muse» ausgibt, soviel: Die während des Tests erstellte Website sieht sowohl im Internet Explorer 9 als auch in den neuesten Versionen von Firefox und Chrome tadellos aus und wird ohne Fehler dargestellt – womit das wichtigste Kriterium erfüllt ist. Wir haben den Code zudem einem professionellen Webentwickler zur Ansicht vorgelegt, und das Fazit fällt grundsätzlich positiv auf. Sicher sei beispielsweise die Formatierung des Codes noch optimierungswürdig, doch das sei bei solchen Tools üblich. Jedoch sei der Code ziemlich sauber dokumentiert und man finde sich zurecht, ausserdem sei er relativ schlank und man finde beispielsweise nicht etliche Formatierungen, die sich gegenseitig aufheben, nur weil beispielsweise die Farbe einer Schrift ein paar Mal geändert wurde. Alles in allem wird der Code, den «Muse» generiert, als «nicht grundlegend schlecht» beurteilt – was aus dem Munde eines Entwicklers angesichts eines WYSIWYG-Tools wohl schon eine hohe Auszeichnung ist.
^
Letzter Punkt: Der Preis. Die Beta von «Muse» kann gratis genutzt werden. Für die finale Version will Adobe dann Geld sehen, wobei die Software nur im Subscription-Modell zu haben sein wird. Die endgültigen Preise stehen zwar noch aus, doch Adobe gibt an, dass die Lösung auf Monatsbasis rund 20 Dollar, auf Jahresbasis 180 Dollar kosten wird. Im Rahmen dieses Tests haben wir mit der Beta 3 gearbeitet. Inzwischen ist die Beta 4 verfügbar, mit der das Programm unter anderem auch in Deutsch erschienen ist, ausserdem wurde an den Ladezeiten von «Muse»-Sites, gearbeitet, ein Mini-Webserver ist hinzugekommen und zahlreiche Detaillverbesserungen wurden vorgenommen.

Do-it-yourself-Alternative

Mit «Muse» eröffnen sich spannende Möglichkeiten für jemanden, der zu einem Webauftritt kommen will, ohne sich mit HTML und CSS auseinandersetzen zu müssen. Der grösste Wermutstropfen ist sicherlich die fehlende Möglichkeit der Datenbankanbindung beziehungsweise die Tatsache, dass dynamisch eigentlich kein Content (oder wenn, dann nur über Umwege) eingebunden werden kann. Auch sonst ist vieles nur über Umwege möglich, beispielsweise das Einbinden von Formularen. Doch man kann es auch anders sehen: Über Widgets, iFrames und andere Codeschnippsel ist es extrem einfach, externen Content einzubinden und fast alles ist möglich. Stellt sich noch die Frage, für wen sich «Muse» eignet. Sicherlich für Designer, die bereits Adobe-Produkte wie Indesign kennen, selbst Sites erstellen wollen und dabei nicht an Templates gebunden sein möchten. Aber auch ein kleines KMU, das mit einem statischen Auftritt zufrieden ist und sich selbst darum kümmern will, sollte sich die Lösung einmal genauer anschauen. Vorstellbar ist es aber auch, dass ein Unternehmen mit «Muse» eine attraktive Micro-Site – etwa für das Promoten eines Events – erstellt, ohne dabei an die Gestaltungsfesseln des Firmenwebauftritts (und dessen Entwickler) gebunden zu sein.


Aufgrund des Beta-Status (Bugs haben wir zwar praktisch keine gefunden) verzichten wir auf eine Wertung. Bleibt abzuwarten, ob Adobe die finale Version noch ausbaut, eventuell mehr vorgefertigte Widgets hinzufügt und auch noch Anstrengungen in Richtung dynamischer Content vornimmt. (mw)