Egal welches Tool wir betrachten. Adobe Dreamweaver, Adobe Muse (mittlerweile aufgelassen), WordPress mit diversen Pagebuildern oder auch Tools wie Webflow, Pinegrow und BLOCS. Alle haben die Möglichkeit, dass damit Websites erstellt werden können.

Welches Programm ist aber jetzt die beste Wahl und warum gibt es überhaupt so viele verschiedene Lösungen?

Diese Fragen möchte ich dir mit meiner Artikel Serie, die mit diesem Beitrag, beginnt beantworten.

[toc]

Viele kennen mich wahrscheinlich durch meine Inhalte zum Thema Website Erstellung mit den Produkten Adobe Dreamweaver oder Adobe Muse.

Spätestens, seit Adobe Muse im Jahr 2018 von Adobe eingestellt wurde und dessen Support 2020 ausläuft, ist an vielen Stellen die Frage offen: was nehme ich jetzt? Am Markt gibt es kaum Vergleichbares, womit man durch freies Hin- und Herschieben von Elementen statische responsive Websites erzeugen kann.

Welche Tools für Webseiten Erstellung gibt es?

Sind CMS (Content Management System) Lösungen die richtige Wahl?

Ich verwende seit längerem CMS, wie z.B. Typo 3, Contao oder WordPress und bin damit auch sehr zufrieden. Für meine Kunden, die gerne selbst Hand anlegen wollen, biete ich vor allem Unterstützung im Bereich WordPress an.

Aber auch WordPress erzeugt bei vielen Website Betreibern immer mehr Unmut. Irgendwann bemerken sie, dass nicht alles so einfach ist, wie oftmals erzählt wird.

Damit endet die Auswahl an Lösungen noch nicht. Es gibt nicht nur die gerade genannten Tools, da sind noch einige mehr am Markt.

Ich verwende für eigene Projekte und als Empfehlung für meine KundInnen, die selbst Websites erstellen und betreiben wollen, immer öfter Alternativen zu den bereits genannten.

Dazu zählen Tools wie Webflow, Pinegrow und BLOCS. Aber wie schon erwähnt, zählt auch WordPress – im speziellen mit dem Pagebuilder Elementor – zu meinem Angebot.

Auf die Frage, was jetzt am besten verwendet werden soll, gibt es leider keine eindeutige Antwort. Zwar versuchen viele da draussen in der Internet Welt ihren Kunden einzureden, dass z.B. WordPress das einzig wahre Tool ist.

Aber ist das wirklich so?

Es ist richtig – WordPress ist einfach in wenigen Minuten installiert. Dann noch einige Erweiterungen dazu – geht auch ruck zuck. Schließlich noch ein Template auswählen und am Schluss mit eigenen Inhalten befüllen. Schon ist die eigene Website fertig. Alles kein Problem, oder?

Wenn die Welt so einfach wäre, dann würde ich mich freuen und ich könnte mir diesen Artikel sparen. Aber so ist es halt leider nicht. Warum manche gerade bei WordPress früher oder später die Erkenntnis erlangen, den falschen Weg gewählt zu haben, ist etwas komplexer und wird noch in einem eigenen Beitrag behandelt.

Übrigens – auch das Thema „Soll ich mit vorgefertigten Templates arbeiten?“ werde ich in einem eigenen Beitrag noch ausführlich besprechen.

Welches ist das beste Tool zum Webseiten erstellen?

Welches ist denn jetzt das ideale Tool zum Erstellen von Websites?

Bei dieser Frage kommt von mir in der Regel immer die Antwort – „Kommt darauf an …“.

Worauf es ankommt und was ich als Auswahl empfehle, darum geht es in diesem Beitrag, bzw. in dieser Beitragsserie.

Ich habe dabei neben einigen meiner Favoriten auch Tools ausgewählt, die am Markt recht beliebt sind.

Ich werde aber nicht nur eine Übersicht mit Vor- und Nachteilen zusammenstellen. Ich werde noch etwas weiter gehen.

Es geht vor allem darum, wie einfach man mit diesen Lösungen Websites erstellen und betreiben kann.

Ich spreche mit diesem Beitrag vor allem jene an, die für sich selbst, für ihr eigenes Unternehmen, für ihren Verein u.ä. eine Webseite erstellen wollen. Er ist weniger für Nerds und Freaks gedacht, die über ein ganz anderes technisches Basiswissen verfügen.

Im Vordergrund stehen Einfachheit, Flexibilität aber auch Sicherheit und Aufwand für den laufenden Betrieb.

Um den Unterschied bezüglich Einfachheit und Flexibilität bei der Erstellung beurteilen zu können, habe ich ein und dieselbe Webseite mit den verschiedenen Tools umgesetzt. Ich habe dafür die Seite, die in meinem Dreamweaver Kurs erstellt wird, als Basis hergenommen.

Die Erfahrungen, die ich dabei gemacht habe, möchte ich dir jetzt weitergeben. Damit bekommst du einmal eine Übersicht, was man mit den einzelnen Tools prinzipiell machen kann und wo die Grenzen liegen.

Zusätzlich gehe ich dann jeweils auf den Betrieb und die anfallenden Kosten ein. Beides Faktoren, die nicht unwichtig sind. Willst du dich selber darum kümmern oder am besten alles aus der Hand geben und deine Ruhe haben? Auch diese Frage spielt bei der Wahl des richtigen Tools eine entscheidende Rolle.

Bei der Software kannst du zwischen drei grundlegenden Typen unterscheiden:

Auf der einen Seite sind da Produkte für die Erstellung einer statischen Website. Auf der anderen Seite gibt es Websites, die mit einem CMS (Content Management System) betrieben werden.

Dazu kommen noch die diversen Baukastensysteme, die für mich keinem der beiden Bereiche so richtig zuzuordnen sind.

So, jetzt genug der einleitenden Worte; gehen wir über zu den Tools.

In diesem Beitrag will ich dir einmal vorstellen, was dich erwartet. Du bekommst eine Übersicht, welche Produkte ich mir mit dir gemeinsam ansehen will, und eine kurze Beschreibung zu den Tools, damit du sie besser einordnen kannst.

1. Adobe Dreamweaver

Fangen wir mit der Software an, mit der ich angefangen habe, Webseiten zu erstellen. Naja, nicht ganz richtig – ich habe zu Beginn meiner Webdesign Karriere im Jahr 1995 mit einem reinen Text Editor gearbeitet. Einfach deshalb, weil es kaum brauchbare Tools gab, und weil ich am Anfang Geld sparen wollte.

Schließlich gab es doch ein Produkt am Markt, das mich überzeugte. Es war von der Firma Macromedia und nannte sich Dreamweaver, bevor es dann vor vielen Jahren an die Firma Adobe verkauft wurde, die sich von nun an um die Weiterentwicklung kümmerte.

Dreamweaver ist eigentlich immer noch der Klassiker unter den Website Erstellungstools. Das Programm hat sicher auch eine so große Verbreitung, weil es Teil der Adobe Creative Cloud und daher in vielen Agenturen vertreten ist.

Die Unterstützung der Betriebssysteme Windows und MacOS ist sicher ein weiterer Grund für die Verbreitung.

Zudem haben alle anderen Nutzer der Creative Cloud von Adobe (Privat, EPU, KMU, Vereine, …) die Möglichkeit, auf dieses Tool zurückzugreifen, und tun dies auch.

Dreamweaver ist ein WYSIWYG (What you see is what you get) Editor. Das bedeutet, du siehst beim Erstellen der Webseite sofort, wie diese auch später im Browser aussehen wird. Zumindest annähernd.

Dreamweaver bietet aber noch mehr. Du kannst mit diesem Programm auch komplett auf den WYSIWYG Mode verzichten und den sehr guten Code Editor (Brackets) nutzen.

Man kann beide Optionen zugleich nutzen und im Split Modus in beiden Darstellungen arbeiten. Damit ist Adobe Dreamweaver sowohl für Designer als auch für Entwickler geeignet, die oftmals eine der beiden Darstellungsformen bevorzugen, trotzdem aber die Unterstützung der anderen Darstellung benötigen.

Ich nutzte das Tools selbst noch bei dem einen oder anderen Projekt und gebe mein Wissen bei On- und Offline Schulungen weiter.

Der Markt entwickelt sich weiter und es gibt mittlerweile Tools, die Dreamweaver in der Funktion überholt haben und auch vom Preis wesentlich attraktiver sind. Eines dieser Tools ist in meiner Übersicht – es handelt sich dabei um Pinegrow.

Link: https://www.adobe.com/de/products/dreamweaver.html

2. Webflow

Ich gebe es gleich zu – Webflow ist derzeit einer meiner Favoriten im Bereich Website Erstellung.

Mit Webflow kannst du deine Website einfach online bauen. Es handelt sich dabei aber nicht um eines der typischen Baukasten Systeme. Es ist mehr ein Webdesign Tool, mit dem man keinen Code angreifen muss.

Da du bei der visuellen Erstellung deiner Webseiten „normale“ Webtechniken benutzen kannst, sind dir beim Layout fast keine Grenzen gesetzt.

Beim Betrieb deiner Webflow Website hast du verschiedene Möglichkeiten. Die einfachste wäre, auch das Hosting von Webflow übernehmen zu lassen. Dann kannst du unter deiner eigenen Domain die Webseite direkt bei Webflow freischalten. Änderungen erstellst du zuerst in deinem internen Bereich und kannst sie dann bei Bedarf mit einem Klick freigeben.

Wenn du das Hosting nicht von Webflow haben möchtest, kannst du dir die fertige Website auch als ZIP File mit allen HTML, CSS und JavaScript Dateien herunterladen und auf deinem eigenen Webspace ablegen.

Das funktioniert sehr gut, solange du nicht irgendwelche dynamischen Elemente, wie Shop oder Blog, verwendest.

Zur Unterstützung bei der Erstellung gibt es eine Menge Templates, die man nicht nur für eigene Projekte verwenden, sondern von denen man sich auch Einiges abschauen kann.

Auch eine umfangreiche Sammlung an umgesetzten Projekten hilft dir Ideen sammeln, was man mit Webflow so alles verwirklichen kann.

Das Betriebssystem spielt bei der Erstellung von Webseiten mit Webflow keine große Rolle. Du benötigst einfach nur einen Browser und schon kannst du damit arbeiten.

Link: https://webflow.com/

3. WordPress und Elementor

Auch WordPress ist einer meiner Favoriten, um Webprojekte umzusetzen. Für die Gestaltung setzte ich dabei aktuell auf den Pagebuilder Elementor.

Genauer genommen ist Elementor auch ein Themebuilder, aber das ist an dieser Stelle jetzt nicht so wichtig.

Ich habe schon erwähnt, dass ich WordPress immer etwas kritisch gegenüber stehe. Denn es muss dir klar sein, dass der Einsatz von WordPress nicht immer so einfach ist, wie es auf den ersten Blick aussieht.

Erstens musst du dich regelmäßig um deine WordPress Installation kümmern und du musst darauf achten, nicht in den Plugin Installations Wahn zu verfallen. Denn ein Grossteil der Probleme, die man mit WordPress haben kann, kommt von Plugins, die nicht gut zusammenarbeiten oder vielleicht gar nicht mehr supported werden.

Wenn du aber weißt, worauf du dich einlässt und im Notfall auch jemanden an der Hand hast, der sich bei technischen Problemen um dein WordPress kümmert, dann steht auch einer Verwendung dieser Software nichts im Wege.

Worauf du beim Einsatz einer eigenen WordPress Website achten solltest, das erfährst du von mir noch in einem eigenen Beitrag.

Mit dem Elementor Pagebuilder hast du ein ausgereiftes und leistungsfähiges Plugin, um deine Layout Wünsche recht einfach Wirklichkeit werden zu lassen.

Das Elementor Pagebuilder Plugin ist genauso wie WordPress kostenlos erhältlich. Damit kannst du das komplette System theoretisch ohne weitere Zusatzkosten – abgesehen von den anfallenden Providerkosten – betreiben.

Allerdings gibt es von Elementor auch eine PRO Version, die dieses Tool noch um einige sehr praktische Funktionen erweitert. Ob man diese wirklich braucht, hängt sehr vom jeweiligen Projekt ab.

Link zu WordPress: https://wordpress.org/

Link zum Elementor Pagebuilder: https://elementor.com/

4. Pinegrow

Pinegrow ist für mich der bessere Dreamweaver. Es ist ein Tool, das – ähnlich wie Dreamweaver – darauf ausgelegt ist, Webseiten im WYSIWYG Verfahren zu erstellen und dabei die volle Kontrolle über den HTML und CSS Code zu haben.

Auch bei Pinegrow ist es notwendig, sich etwas intensiver mit der Software und der darunter liegenden Technik auseinander zu setzen.

Wenn du dazu bereit bist oder vielleicht schon mit Dreamweaver gearbeitet hast, dann solltest du diese Alternative durchaus einmal ins Auge fassen.

Der Vorteil: du erstellst schnelle und wartungsfreie Webseiten, hast aber trotzdem die volle Kontrolle über das Design.

Im Vergleich zu Dreamweaver unterstützt Pinegrow unterschiedliche Methoden um responsive Webseiten aufzubauen. Natürlich gehört das bekannte CSS Framework Bootstrap dazu, das ja auch von Dreamweaver unterstützt wird.

Pinegrow bietet aber auch einige Funktionen, die in Dreamweaver fehlen und aus meiner Sicht unbedingt notwendig wären.

So kann man mit Pinegrow seine Website in der Struktur planen und daraus die Navigation für die Website erstellen lassen. Ein Feature, das vor allem bei größeren Websites unbedingt notwendig ist.

Aber auch das Arbeiten im WYSIWYG Modus ist wesentlich einfacher, intuitiver und moderner.

Mit dem Erstellen von Websites endet die Funktion der Pinegrow Produkte aber nicht. Es gibt eine Version, mit der du aus den statisch erstellten Websites dein eigenes WordPress Theme machen kannst.

Damit kannst du deine individuellen Design Ideen direkt in WordPress bringen und benötigst keinen speziellen Themebuilder mehr.

Und dann ist auch noch das Thema Animationen abgedeckt; ähnlich einfach, wie die Erstellung, kannst du Animationen und damit Interaktivität in deine Website einbauen.

Ähnlich wie Dreamweaver ist Pinegrow für die Betriebssysteme Windows und MacOS verfügbar.

Bei den Kosten unterscheidet sich Pinegrow ein wenig von Dreamweaver. Es gibt kein Abo Modell. Für Pinegrow zahlst du jährlich eine Lizenz, wenn du regelmäßig Updates erhalten willst, was ich auf jeden Fall empfehlen würde. Wenn du nicht verlängern möchtest, dann kannst du das Programm trotzdem weiter nutzen.

Die Kosten dafür liegen in etwa bei 100 Euro, was meiner Ansicht nach ein fairer Preis ist. Verlängerungen gibt es dann meist wesentlich günstiger (oft nur 50 % vom Initialpreis).

Link: https://pinegrow.com/

5. BLOCS

BLOCS gehört zu den Programmen, mit denen statische Websites erstellt werden können. Dieses Tool würde ich am ehesten als Adobe Muse Nachfolger bezeichnen.

Ähnlich einfach zu bedienen, ist es damit möglich Websites mit Drag & Drop zu erstellen und dabei keine Berührung mit dem darunter liegenden Code haben zu müssen.

Sollte es doch mal notwendig sein, dann hast du im Gegensatz zu Muse sogar die Möglichkeit, den Code zu bearbeiten oder zu erweitern.

Selbstverständlich kannst du damit auch sehr einfach responsive Websites erstellen. Ich würde dir gar kein Tool vorstellen, mit dem das nicht möglich wäre.

Mit BLOCS kannst du die Struktur planen und daraus – wie von einem modernen Tool zu erwarten ist – eine Navigation erstellen lassen.

Das Ergebnis deiner Arbeit sind statische Webseiten, die du dann nur mehr auf deinen Webspace hochladen musst.

Von allen Tools, die ich getestet habe, kommt dieses am ehesten an Adobe Muse heran und zwar hinsichtlich der einfachen Bedingung und der Möglichkeit, statische Seiten zu erzeugen.

Einziger Nachteil dieses Tools ist, dass es nur für das MacOS Betriebssystem verfügbar ist. Windows User können dieses tolle Programm leider nicht nutzen.

Für BLOCS ist ein einmaliger Betrag fällig, der alle Updates innerhalb der aktuellen Release abdeckt. Für Upgrades auf eine neue Release gibt es dann meist günstige Upgrade Angebote.

Link: https://blocsapp.com/

6. WIX

WIX ist eines der typischen Baukastensysteme. Früher war ich ein großer Gegner dieser Tools. Mittlerweile haben sie sich aber stark weiterentwickelt und ich habe meine Meinung etwas geändert.

Da ich immer öfter die Frage gestellt bekomme, was ich von diesen Tools halte, habe ich zwei davon in meinen Test aufgenommen.

Auf der einen Seite ist das einmal WIX, und dann noch weiter unten erwähnt, Squarespace.

Die Entscheidung für diese beiden Tools ist eher durch mein Umfeld gefällt worden, da ich bei beiden Anwender kenne, die sehr zufrieden damit sind.

Das soll nicht bedeuten, dass andere Baukastensysteme schlechter sind. Hätte ich diese aber alle in meinen Test reingenommen, hätte das den Rahmen bei weitem gesprengt.

Baukastensysteme bauen meist darauf auf, dass du mit einer der vielen Vorlagen beginnst und diese an deine persönlichen Bedürfnisse anpasst.

Wenn du bei der Auswahl der Vorlagen einige wichtige Grundlagen beachtest, muss deren Verwendung nicht schlecht sein. Ich persönlich bin der Meinung, dass es besser ist, mit einem gut gestalteten und mit einer gewissen Sorgfalt ausgewählten Template zu arbeiten, als eine nicht responsive Website zu haben, die aussieht, als wäre sie aus den 1990er Jahren.

Auch sonst brauchen sich die Baukastensysteme in ihrer Funktion nicht vor den anderen Lösungen zu verstecken.

Du musst allerdings in Kauf nehmen, dass es mitunter Grenzen bei den Gestaltungsmöglichkeiten gibt, und auch damit leben können, dich in eine gewisse Abhängigkeit zu begeben. Wenn das kein Problem ist, dann solltest du auch diese Systeme in deine Wahlmöglichkeiten aufnehmen.

Link: https://de.wix.com/

7. Squarespace

Wie schon oben erwähnt, habe ich mich für zwei der am Markt befindlichen Baukastensysteme entschieden.

Auf der einen Seite WIX und dann eben Squarespace. Beide Lösungen sprechen unterschiedliche Zielgruppen an, was man schon bei den zur Auswahl stehenden Vorlagen sieht.

Im Prinzip gelten auch bei Squarespace ähnliche Argumente, wie bei WIX vorhin erwähnt.

Squarespace präsentiert sich etwas moderner und mit besseren Designs, WIX dafür etwas einfacher und flexibler.

Worin Unterschiede bestehen, wirst du dann bei meinen Detail Tests sehen.

Link: https://de.squarespace.com/

8. WordPress und DIVI

Über WordPress habe ich ja schon vorhin ausführlich gesprochen. Diese Argumente gelten für alle Lösungen, die technisch auf WordPress aufbauen.

Doch mit WordPress alleine hat man selten eine ausreichende Lösung. Man braucht in der Regel ein Theme oder eben einen Pagebuilder, um damit einfach seine Seiten erstellen zu können.

DIVI von Elegant Themes ist eine Lösung, die es schon sehr lange am Markt gibt und die sehr ausgereift ist.

Vor nicht allzu langer Zeit gab es ein großes Update, bei dem dieses Produkt wieder hinsichtlich seinen Funktionen und der Bedienung gegenüber moderneren Pagebuildern aufgeholt hat.

DIVI hat jetzt, wie auch Elementor, eine Themebuilder Funktion.

Ich selbst betreibe DIVI immer noch bei sehr vielen Kunden Projekten und kann darüber nicht wirklich viel Kritik üben.

Warum ich lieber mit Elementor arbeite, ist zum Teil auch eine persönliche Vorliebe. Es sind Funktionen und die Art damit zu arbeiten, die mir an Elementor besser gefallen.

DIVI ist aber ein solides und leistungsfähiges Tool und wird daher auch Bestandteil der Tests sein.

Was die Kosten betrifft, so ist DIVI nicht gratis verfügbar. Allerdings gibt es von DIVI im Gegensatz zu anderen Anbietern, wie etwa Elementor, auch eine Lifetime Version und das zu einem relativ günstigen Preis. Vor allem, wenn man an einen der Aktionstage, wie etwa am Cyber Monday kauft.

Link zu WordPress: https://wordpress.org/

Link zu DIVI: https://www.elegantthemes.com/

9. Brizy (WordPress oder Cloud Hosting)

Wie auch Elementor oder DIVI ist Brizy ein Pagebuilder, den man mit WordPress betreiben kann.

Brizy hat aber einen großen Unterschied. Du kannst eine Brizy Website auch ohne WordPress betreiben. Dazu kannst du dir einfach einen Zugang bei Brizy Cloud anlegen und dann deine Website von Brizy hosten lassen. In diesem Fall steht kein WordPress dahinter und auch die Wartung wird von Brizy übernommen.

Brizy kann aber noch mehr: du kannst die erstellen Webseiten als HTML und CSS exportieren und dann manuell auf deinen eigenen statischen Webspace ablegen. Zusätzlich kannst du deine in Brizy Cloud erstellten Seiten mit deinem Server automatisch synchronisieren.

Der Pagebuilder ist einfach und recht intuitiv bedienbar und am Projekt wird sehr aktiv gearbeitet.

Aktuell gibt es bei Brizy übrigens noch die Möglichkeit eines Lifetime Zugangs für die PRO Version. Damit kostet Brizy PRO einmalig 299.- statt jährlich 99.- für eine unlimitierte Anzahl an Websites – siehe https://www.brizy.io/brizy-pro-pricing/.

Brizy ist damit eine Lösung, die vielfältige Optionen für den Betrieb deiner erstellten Website anbietet.

Link: https://www.brizy.io/

Brizy für WordPress: https://www.brizy.io/download-brizy/

Brizy mit Hosting: https://www.brizy.cloud/

10. sitejet.io

Sitejet behauptet von sich selbst, eine Adobe Muse Alternative zu sein.

Eigentlich habe ich nicht vorgehabt, dieses Tool in meine Vergleiche mit aufzunehmen. Aber wenn ein Unternehmen eine solche Behauptung aufstellt, dann muss diese auch überprüft werden.

Sitejet hat viel Ähnlichkeit mit Webflow, hat aber aus meiner Sicht nicht dieselbe Verbreitung – zumindest, wenn man sich an vorhandenen Beiträgen und Tutorials im Internet orientiert.

Im Gegensatz zu Webflow ist Sitejet mehr auf die Arbeit in Agenturen ausgelegt. Das sieht man schon am Workflow, den sie beim Erstellen von Websites zu Verfügung stellen. Auf die Verwaltung von Projekten und die Kommunikation im Team und mit dem Kunden wird viel Wert gelegt.

Den Eindruck, dass man als „normaler“ Kunde nicht so erwünscht ist, hat man auch, wenn man Anfragen an Sitejet stellt. Ich habe noch nie ein Unternehmen erlebt, das so ignorant und überheblich auf Anfragen reagiert.

Man könnte annehmen, dass man bezüglich Kommunikation mit einem Unternehmen aus dem deutschsprachigen Raum, wie Sitejet, besser bedient ist, aber das war zumindest bei mir nicht der Fall.

Aber egal, es soll ja das Tool im Vordergrund stehen. Vielleicht war ich auch nur zur falschen Zeit an der falschen Stelle.

Mit Sitejet kannst du online im Browser deine Webseiten erstellen und dann entweder von Sitejet hosten lassen oder die HTML und alle verbundenen Files herunterladen, um diese dann auf deinen eigenen Webspace hochzuladen.

Mit Drag & Drop werden verschiedene Elemente zu deiner Seite hinzugefügt, deren Eigenschaften dann vielfältig verändert werden können.

Der Designer der Seite hat bei den Elementen die Möglichkeit, anzugeben, ob die Inhalte dieser Bereiche von Usern mit Editor Rechten bearbeitet werden können. Auch daran erkennt man die Ausrichtung auf Agenturen, die ja nicht wollen, dass Kunden alles uneingeschränkt verändern können.

Mehrsprachigkeit und E-Commerce Funktionalitäten runden die Palette dieses Tools ab.

Bezüglich der Preise gibt es drei Pläne. Ab der zweiten Stufe hast du die Möglichkeit, deine Website als ZIP File zu exportieren und selbst zu hosten.

Bei jedem Plan ist bereits das Hosting für eine Website inkludiert und es kann relativ günstig das Hosting für weitere Websites dazu gekauft werden.

Link: https://www.sitejet.io/de

Bereit für die Tests

So, das waren einmal die 10 verschiedenen Tools, die ich jetzt schrittweise im Detail testen werde um herauszufinden, wie einfach, schnell und flexibel eine Website damit umgesetzt werden kann.

Ich werde dabei vor allem darauf Wert legen, herauszufinden, wie weit diese Programme eine Alternative zu Lösungen bieten, die du bereits kennst oder auch schon verwendest.

Wenn du einen Tipp für mich hast, worauf ich bei meinen Test noch achten sollte, dann schreibe mir bitte ein Kommentar unter diesen Beitrag.

Ich möchte dir diese Funktion an einem einfachen Beispiel zeigen. Im Prinzip funktioniert es aber bei komplexen Seiten genau so.

In diesem Beispiel, habe ich ein graues Rechteck, das durch CSS Regeln einen Roll Over Effekt bekommt und dabei die Farbe langsam wechselt.

Ich habe zum einfacheren Verständnis diesen Artikel in mehrere Bereiche aufgeteilt.

1. Im ersten Teil erstellen wir unsere Beispiel Seite.
2. Danach sehen wir uns an, wir wir den Klassen oder ID Namen von den eingefügten Elementen ermitteln können.
3. Anschliessend sehen wir uns an, wie wir CSS Regeln in Adobe Muse einfügen können.
4. Zum Schluss werde ich dir noch zeigen, wie du deinem Element eine eigene CSS Klasse zuweisen kannst, damit du nicht von den durchnummerierten IDs von Adobe Muse abhängig bist, die sich theoretisch beim Arbeiten an der Seite auch wieder ändern könnten.

Am Ende des Artikels solltest du in der Lage sein diese Strategie auf dein eigenes Projekt anwenden zu können.

1. Erstellen der Beispiel Seite

Für dieses Beispiel möchte ich der Einfachheit wegen eine Seite mit einer fixen Größe erstellen und auf eine responsive Seite verzichten. Prinzipiell, gilt das System aber genau so für responsive Muse Seiten.

Für unsere Beispiel Seite zeichnen wir im linken oberen Bereich ein Rechteck und geben diesem eine Farbe. Bei mir ist es ein Grau mit dem Farbwert #AAAAAA. Das ganze sieht dann so aus:

2. CSS ID ermitteln

Nachdem wir unsere einfache Beispielseite erstellt haben, ermitteln wir im nächsten Schritt die CSS ID, die wir dann weiter unten anpassen müssen. Um eine CSS ID zu ermitteln, öffnen wir die Website am besten in der Browser Vorschau. Fast jeder Browser bietet die Möglichkeit mittels der Entwicklerwerkzeuge Teile einer Website genauer zu untersuchen. Die folgenden Screenshots habe ich mit dem Chrome Browser gemacht.

Wenn die Seite im Chrome Browser geöffnet ist, dann kann man sein Wunsch Objekt auf der Seite mit der rechten Maustaste anklicken und wählt aus dem erscheinenden Menü die Zeile „Untersuchen“ aus.

Jetzt sollte sich unterhalb (manchmal auch seitlich) die Entwickler Konsole öffnen. Man sieht links unten einen Teil des Quell Codes und rechts diverse CSS Regeln. Wenn wir das gewünschte Objekt vorhin korrekt ausgewählt haben, dann sollte der Bereich auch schon im Quelltext markiert sein.

Ist die Auswahl nicht korrekt, dann kann man das jederzeit mit dem kleinen Pfeil links oben in der Entwickler Konsole nachholen. Dazu den Pfeil anklicken – dieser wird dann blau und mit dem Mauszeiger über die Webseite fahren. Dabei das gewünschte Objekt auswählen. Jetzt ist auf der einen Seite der Quellcode des Objektes markiert und man sieht aber auch eine Kurzversion beim Objekt selbst. Wie es bei mir aussieht, kann man im folgenden Screenshot sehen:

Man sieht in diesem Bild, dass mein Element die ID u102 hat (div#u102 …). Diese ID merken wir uns und wechseln jetzt wieder zu Muse um nun die CSS Regel für dieses Element einzufügen.

3. CSS Regeln in Adobe Muse einfügen

Jetzt kommt der eigentlich Hack, denn wir müssen in Muse eine CSS Regel einfügen. Leider gibt es dafür aber keinen offiziell vorgesehenen Weg. Nachdem man aber die Eigenschaften einer Seite in Muse verändern kann, nutzen wir genau dies um die CSS Regeln einzufügen.

Dazu wählen wir bei unserer aktiven Seite im Menü den Punkt „Seite“ -> „Seiteneigenschaften“ aus:

Wenn wir das getan haben, müssen wir nur noch den Tab „Metadaten“ auswählen und können dann anschliessend im Bereich „HTML für <head>“ unsere CSS Regel eintragen.

Als Beispiel, habe ich eine Regel genommen, die mein graues Rechteck grün anzeigt und das mit einem Fade Effekt, der 2 Sekunden dauert. Dabei fügt man einfach folgenden Code in den entsprechenden Bereich ein. Achtung du musst an dieser Stelle natürlich deine zuvor ermittelte ID eintragen. In meinem Fall ist es #u102

 <style> 
     #u102:hover  { 
         background-color :  #00FF00 ; 
         -webkit-transition :   :  background-color 2s ; 
         transition :  background-color 2s ; 
     } 
 </style>

Das war es dann auch schon. Wir können das „Seiteneigenschaften“ Fenster mit „OK“ wieder schliessen und dann in die Muse Vorschau wechseln oder die Seite im Browser anzeigen lassen.

Wenn wir in meinem Beispiel die Maus über das Rechteck bewegen, dann sehen wir, wie sich die Farbe langsam von grau zu grün verändert und auch wieder zurückgeht, wenn die Maus das Rechteck verlässt. Damit kann gezeigt werden, dass unsere eingebaute CSS Regel funktioniert.

Eigentlich funktioniert damit bereits alles und wir wären bereits fertig. Ich möchte aber noch eine kleine Zugabe machen und zeigen, wie man selbst Klassennamen vergeben kann. Damit erspart man sich das ermitteln der IDs im Browser und kann bestimmte Effekte sogar öfter anwenden. Weiters ist man auch unabhängig von Muse, da wir nie sicher sein können, dass Muse beim Bearbeiten der Seite die ID nicht aus irgendeinen Grund verändert.

4. Eigene Klassennamen vergeben

Um einen eigenen Klassennamen zu vergeben nutzen wir die Funktion der Grafikstile. Dazu markieren wir unser Objekt, dem wir eine Klasse zuweisen wollen. Das ist in meinem Beispiel wieder das Rechteck.

Die Grafikstile findet ihr entweder auf der rechten Seite oder über das Menü „Fenster“ -> „Grafikstile“. Wenn dieses Fenster aktiviert ist, dann sollte das so aussehen:

Jetzt müssen wir nur noch für unser gewähltes Objekt einen neuen Grafikstil erstellen. Das machen wir mit dem Symbol in der unteren Leiste der Grafikstile.

Es wird damit eine neue Zeile mit der Bezeichnung „Format“ angelegt. Diese benennen wir noch um in einen Namen unserer Wahl. Da dieser gewählte Name dann unserem Klassennamen entspricht, würde ich empfehlen diesen komplett klein zu schreiben. In meinem Beispiel habe ich den Klassennamen einfach „rechteck“ genannt.

Jetzt gehen wir nochmal auf unsere Seiteneigenschaften und verändern den Code für die CSS Eigenschaften ein wenig, damit unser Klassenname auch verwendet wird.

<style> 
     .rechteck:hover  { 
         background-color :  #00FF00 ; 
         -webkit-transition :   :  background-color 2s ; 
         transition :  background-color 2s ; 
     } 
 </style>

Wenn wir uns jetzt die Seite in der Vorschau oder im Browser ansehen, dann sollte der Effekt wieder funktionieren. Wenn wir wollen, dann können wir auch im Browser mit „Untersuchen“ das Rechteck ansehen, um zu sehen, dass dieses nun zusätzlich den Klassennamen bekommen hat.

Du siehst also, dass es gar nicht so schwer ist, Adobe Muse Inhalte mit eigenen CSS Regeln anzupassen, wenn man die richtigen Stellen kennt.

[thrive_leads id=’2675′]

Wie alles andere bei Muse, kann man sein responsive Layout völlig befreit von irgendwelchen Grid Systemen einfach mit Drag and Drop erstellen.

Wie gut das ganze funktioniert und ob es praktisch brauchbar ist, habe ich mir angesehen und in diesem Artikel zusammen gefasst. Leider ist nicht alles Gold was glänzt und daher werden in diesem Artikel auch ein wenig die Einschränkungen und Nachteile beleuchtet.

Adobe hat mittlerweile die Version 2015.2 um Juni 2016 freigegeben, die einige Kritikpunkte, die ich in diesem Beitrag erwähnen wollte behoben hat. Das heisst, dieser Artikel geht auf die aktuelle Version vom Juni 2016 ein und wird daher auch etwas weniger kritisch sein, als ursprünglich geplant.

Um zu sehen, wie schnell sich ein responsive Layout mit Adobe Muse umsetzen lässt, habe ich mein responsive Beispiel, dass ich mit Dreamweaver gemacht habe als Test mit Muse realisiert. Ich habe dabei das Design gewählt, dass ich auch in meinen Dreamweaver Tutorials schon verwendet habe.

Responsive Design mit Dreamweaver CC 2015 und Bootstrap Tutorials – Teil 1 und 2

Responsive Design mit Dreamweaver CC 2015 und Bootstrap Tutorials – Teil 3 und 4

Ich habe mir vor der Umsetzung nur kurz die wichtigsten Tutorials von Adobe angesehen. Diese haben beschrieben, wie man responsive Elemente fixiert, skaliert und Breakpoints erstellt. Mit diesem Wissen habe ich dann begonnen das Beispiel zu bauen. Ein klein wenig braucht man um festzustellen, wann man welche Elemente wie verankern muss, aber nach einigen Tests hat man das schnell herausgefunden.

Ein neues Projekt erstellen

Bei der Erstellung eines neuen Muse Projektes hat man jetzt die Wahl zwischen „Variable Breite“ und „Feste Breite“. Auswählen sollte man für ein echtes flüssiges responsive Layout „Variable Breite“. Kommt man mit der Variablen Breite nicht zurecht, dann kann man auch feste Breite auswählen. Bei dieser Wahl springt dann das Layout bei den definierten Haltepunkten um und passt sich zwischen den Haltepunkten nicht laufend an. Hat man „Variable Breite“ ausgewählt, dann kann man noch die maximale Seitenbreite eingeben. Das bedeutet, wenn das Browserfenster breiter ist, dann wird die Seite trotzdem nicht weiter ausgedehnt. Ich lasse einmal die Standardeinstellung von 960. Der Wert lässt sich ja jederzeit verändern.

Im ersten Schritt habe ich die Seite mit den bestehenden Bildmaterialen und Texten im Desktop Layout zusammengestellt. Das geht, wie in Muse üblich in wenigen Minuten. Der Kopfbereich mit dem Logo und dem Menü wurde wie vorgesehen in einer Masterpage erstellt und der Rest auf einer normalen Seite. Um das Menü automatisch erstellen zu lassen, wurden noch die notwendigen leeren Seiten im Planungsmodus erstellt.

Elemente verankern

Jetzt wurde es aber spannend. Wie verhält es sich jetzt mit dem responsive Layout? Zuerst einmal probieren, was passiert, wenn man die Seite kleiner macht. Wie erwartet, drängen sich die Inhalte im Content Bereich immer mehr zusammen, bis diese irgendwann nicht mehr gut lesbar sind. Ausserdem stelle ich fest, dass das Logo über den linken Rand raus wandert, wie am folgenden Bild zu sehen ist.

Es ist also die erste Anpassung notwendig. Um zu verhindern, dass Elemente in der Gegend herumwandern, kann man diese auf der Seite fixieren oder auch verankern, wie Adobe es in Muse nennt. Um das machen zu können, ist zu dem bisher schon bekannten Verankern Symbol noch ein weiteres hinzugekommen. Beide sind im Bild hier ersichtlich. Bisher wurde „Verankern“ verwendet um Elemente im Browser also zum Beispiel für den Kopf oder Fussbereich zu fixieren. Das neue Symbol legt fest, wonach sich Elemente ausrichten sollen, wenn die Seite in der Breite verändert wird.

Unser Logo werden wir, wie im Bild ersichtlich ist links fixieren und das Menü rechts.

Ist die Masterseite fertig gestellt, dann müssen wir selbiges auch bei den eigentlichen Inhaltsseiten durchführen.

Dabei habe ich allerdings festgestellt, dass zu voreiliges fixieren nicht immer hilfreich ist. Ich habe zum Beispiel das grosse Bild unterhalb des Header Bereiches in der Mitte fixiert und musste dann feststellen, dass beim Verkleinern der Seite ein Abstand zwischen dem Bild und den darunter liegenden Überschriften entsteht. Auch dieses Problem ist in einem Bild am besten darstellbar:

In meinem Fall konnte ich die Fixierung wegnehmen, da diese keine Auswirkung hatte und das Bild trotzdem in der Mitte bleibt da es sich in der Größe automatisch anpasst. Wie man allerdings wirklich vorgeht, wenn man eine Fixierung benötigt und sich der Abstand in der Höhe nicht ändern soll ist mir nicht so recht klar. Die Dokumentation von Adobe schweigt zu diesem Thema. Ich ordne das einmal unter den noch zu behebenden Kinderkrankheiten ein.

Skalierung von Elementen

Ich habe oben erwähnt, dass sich das Problem bei mir nicht ausgewirkt hat, da sich das Bild in der Größe automatisch angepasst hat. Diese zweite wichtige Funktion neben der Verankerung möchte ich jetzt noch erklären.

Verändert man die Breite der Seite im Browser, dann haben die darin befindlichen Elemente zwei Möglichkeiten um komplett auf der Seite dargestellt zu werden.

1. Die Größe der Elemente kann gleich bleiben und das Layout wird nur durch verändern der Abstände zwischen den Elementen angepasst.

2. Die Elemente passen sich ebenfalls in der Größe an und werden bei kleiner werdender Breite ebenfalls kleiner. Man spricht hier von responsive Breite.

Diese Eigenschaft lässt sich bei Adobe Muse bei jedem Element bestimmen. Dafür gibt es neben der Verankern Eigenschaft noch die Skalieren Eigenschaft. Die zur Verfügung stehenden Auswahl Möglichkeiten sind im folgenden Bild erkennbar.

Bei „Ohne“ wird keine Anpassung vorgenommen und das Element zum Beispiel das Bild bleibt immer in der Originalgröße. Wird die Seite kleiner als das Bild, dann wird auch nur mehr ein Teil davon im sichtbaren Browser Fenster dargestellt. Bei Bildern hat man zusätzlich noch die Auswahl „Responsive Breite und Höhe“. Wird die Seite verkleinert, dann wird das Bild proportional kleiner. Die Auswahl „Responsive Breite“ macht bei einem Bild nicht wirklich Sinn, da es sonst verzerrt dargestellt werden würde. Aus diesem Grund, kann diese erst gar nicht ausgewählt werden. Bei Textfeldern oder Rechtecken, stehen auch „Responsive Breite“ und „An Browserbreite anpassen“ zur Verfügung.

In meinem Beispiel habe ich sowohl das Logo links oben, als auch das Menü rechts nicht responsive gemacht, da ich nicht möchte, dass sich diese beiden Elemente anpassen. Die Texte und Bilder im Content Bereich sind fast alle mit einer responsive Breite und Höhe versehen worden. Eine Ausnahme stellen hier meine Icons dar, die ich ebenfalls nicht anpassen wollte.

Mit diesen Funktionen hat man schon einmal die wichtigsten Werkzeuge um bei einem flüssigen responsive Layout die Anordnung und das Verhalten der Element zu bestimmen.

Haltepunkte, das Herzstück responsiver Webseiten

Irgendwann reicht aber auch das nicht mehr aus und die Elemente der Seite müssen anders dargestellt werden, da diese einfach nicht mehr gut wahrnehmbar sind. Ein Beispiel sind die vier Service Elemente in meinem Layout. Die Spalten werden ab einer gewissen Breite so eng, dass die Texte nicht mehr wirklich angenehm lesbar sind, wie im folgenden Bild erkennbar ist.

Um das Problem zu beheben, ordnet man die Elemente ab einer bestimmten Breite anders an. Diesen Punkt nennt man in der Fachsprache Breakpoint oder wie Adobe es in der deutschen Version von Muse nennt – „Haltepunkt“. Man definiert also in Muse diesen Punkt und kann dann die Elemente so anordnen, dass diese wieder gut lesbar sind.

Der erste Schritt ist also die Definition dieses Haltepunktes. Dazu ändert man die Breite der Seite in der Entwurf Ansicht soweit, bis man eine Änderung haben möchte. Jetzt hat man die Möglichkeit auf das Plus Symbol, das sich bei mir etwa bei 650px befindet zu klicken.

Hat man das gemacht, dann sieht man den neuen Haltepunkt in der Leiste dargestellt.

Wie man erkennen kann, habe ich diesen nicht genau getroffen. Das ist aber kein Problem, denn mit einem Doppelklick auf den Haltepunkt kann man alle Eigenschaft leicht anpassen. Auch die Farbe, wie dieser oben in der Leiste dargestellt wird, lässt sich auf Wunsch verändern.

Ein einfacher Klick in auf die entsprechende Farbe in der Leiste lässt Muse zu diesem Haltepunkt springen. Jetzt lassen sich die Elemente auf der Seite beliebig anordnen. In meinem Beispiel werde ich die vier Elemente nicht mehr in einer Reihe nebeneinander anordnen, sondern ein zwei Reihen zu je 2 Elementen.

Das Ganze sieht dann so aus:

Wenn die Seite noch weiter verkleinert wird und auch diese Darstellung nicht mehr gut aussieht, dann kann man einen weiteren Haltepunkt definieren und die Element dort zum Beispiel alle untereinander darstellen.

Was ich in meinem Beispiel mit drei verschiedenen Layout Varianten gezeigt habe, lässt sich natürlich mit beliebig vielen Breakpoints durchführen. Welche Breakpoints man am besten wo setzen sollte, darauf werde ich weiter unten noch eingehen.

Freie Anordnung der Elemente

Jetzt möchte ich zu einer Eigenschaft von Adobe Muse kommen, die so recht einzigartig oder zumindest selten in responsive Website Tools zu finden ist. Es handelt sich dabei um die völlig freie Anordnung der Elemente auf der Webseite bei jedem Breakpoint. In den meisten Tools muss man bedingt durch die eingesetzten responsive Frameworks die Elemente so nehmen, wie diese der Reihe nach kommen. Ich kann also bei den Breakpoints die Reihenfolge und Anordnung nicht beliebig verändern. Der Bereich „Service 4“ in meinem Beispiel musste immer an letzter Stelle stehen.

Bei Muse ist das allerdings anders. Hier kann man die Reihenfolge bei jedem Haltepunkt beliebig verändern. Es könnten also die Inhalte von Service 4 ganz am Anfang der untereinander angeordneten Element stehen. Das macht zwar hier keinen Sinn, kann aber durchaus hilfreich sein, wenn man an Inhalte denkt, die in Spalten angeordnet sind und aus optischen Gründen eine bestimmte Anordnung der Spalten hat, obwohl die logische Reihenfolge des Lesens eine andere wäre.

Adobe Muse CC bietet damit dem Designer Möglichkeiten, die sich diese schon lange gewünscht haben.

Doch ACHTUNG! Wird Muse also Prototyping Tool verwendet um die Funktion eines responsive Layouts im Browser zu zeigen und die Seite wird dann aber „traditionell“ umgesetzt, so kann das zu Problemen führen. Wie oben schon erwähnt, ist es mit verschiedenen responsive Frameworks nicht so einfach möglich die Reihenfolge von Elementen zu ändern. Das bedeutet, der Prototyp würde die Inhalte so darstellen, wie sie später nicht wirklich umgesetzt werden können. Ausserdem muss man auch ein wenig im Gridsystem denken.

Das ist der Grund, warum ich jedem Designer empfehle sich mit den grundlegenden Techniken des responsive Designs auseinander zusetzen um beurteilen zu können ob der erstellte HTML Prototyp sich auch praktisch realisieren lässt.

Werden aber die mit Muse erstellen Seiten nicht als Prototyp erstellt sondern wirklich ins Internet gestellt, dann kann man die Vorteile der freien Anordnung natürlich problemlos verwenden.

Wo sollen Breakpoints gesetzt werden und wie viele?

Wie sieht es aber jetzt mit den Breakpoints aus. Weiter oben habe ich erwähnt, dass man beliebig viele Breakpoints setzen kann. Aber welche Anzahl ist wirklich sinnvoll und wo sollte man diese Breakpoints wirklich setzen?

Eine Zeit lang war es üblich, für verschiedene Smartphone Größen einen Breakpoint zu setzen. Das ist aber heute weder sinnvoll noch möglich, da es immer mehr Geräte mit unterschiedlichen Bildschirm Auflösungen gibt. Man beschränkt sich daher eher auf typische Größen der verschiedenen Geräte Typen. Dabei ist es üblich ein Layout für Mobile, eines für Tablets und eines für Desktops zu erstellen. Mitunter auch noch für große Desktop Bildschirme.

Da responsive Webseiten in den meisten Fällen mit responsive Frameworks wie zum Beispiel Bootstrap (http://getbootstrap.com/css/#grid) umgesetzt werden, verwendet man die Breakpoints, die diese Tools bereitstellen. Bei Bootstrap wären das:

– Mobile <768px
– Tablets  ab 768px
– Desktops ab 992px
– Grosse Desktops ab 1200px

Man sieht also an der Liste, dass man mit insgesamt 4 Haltepunkten auskommt. Das war allerdings nur ein Beispiel. Andere Frameworks haben etwas andere Breakpoints. Gemeinsam haben die meisten allerdings, wie oben schon erwähnt, dass die Breakpoints für Mobile, Tablet, Desktop und eventuell grosser Desktop definiert werden.

Ist es jetzt sinnvoll diese Werte in Muse zu übernehmen? Die Antwort darauf ist nicht ganz so einfach, denn es kommt wie so oft darauf an. Aber auf was kommt es an?

Wie bereits erwähnt, wird Muse gerne verwendet um HTML Prototypen für Web Projekte zu erstellen. Wenn man das macht, dann sollte man natürlich die Breakpoints des Frameworks verwenden, das später zum Einsatz kommt. Wenn man das nicht genau weiss, dann ist es ratsam die Person zu fragen, die später diese Umsetzung macht. Im Zweifelsfall würde ich die oben aufgelisteten Werte von Bootstrap verwenden.

Wird das Projekt allerdings mit Adobe Muse gestaltet und dann auch direkt ins Web gestellt, dann ist man bei den Breakpoints völlig frei. Es macht wenig Sinn einen von den oben aufgelisteten Werten zu verwenden wenn er nicht unbedingt notwendig ist. Eine schöne Regel für responsive Webdesign Breakpoints sagt, dass man einen Breakpoint dann setzen sollte, wenn das Layout Schwierigkeiten macht. Das bedeutet, wenn Elemente sich überlappen oder wenn Inhalte nicht mehr wie gewünscht wahrgenommen werden können, dann sollte man einen Breakpoint setzen. So einfach ist die Entscheidung.

Diese Regel gilt übrigens nicht nur für Muse, sondern ist eine generelle Empfehlung im responsive Design. Nur praktisch ist das eben auf Grund des Einsatzes von verschiedenen Frameworks nur schwer möglich.

Weiters sollte man daraus nicht schliessen, dass man für jedes Element, das sich auf einer Seite befindet bei Notwendigkeit einen Breakpoint setzen soll. Das kann im schlimmsten Fall dazu führen, dass in kurzen Abständen solche Haltepunkte verwendet werden und die Anzahl extrem hoch wird. Also ein wenig vorausschauen und damit ein sparsamer Umgang mit Breakpoints ist schon empfehlenswert.

Haltepunkte können in Adobe Muse übrigens bei Masterseiten unabhängig von den normalen Seiten gesetzt werden. Das bedeutet, dass die Masterseiten komplett andere Haltepunkte haben könnte als die normalen Seiten.

Ausblenden von Elementen

Kehren wir zurück zu Muse. Wir wissen jetzt, wie Haltepunkte gesetzt werden und dass man die Anordnung der Elemente bei jedem Haltepunkt frei verändern kann. Was aber kann man noch verändern?

Zuerst kann man nicht erwünschte Inhalte ausblenden. Man darf diese aber nicht so einfach durch löschen des Elements am Haltepunkt entfernen, da dieses sonst generell entfernt werden und damit an allen Haltepunkten weg sind. Um also ein Element bei einer bestimmten Größe nicht anzuzeigen, kann man mit einem rechts Klick auf das Element das Menü öffnen und den Menüpunkt „Im Haltepunkt ausblenden“ auswählen. Es geht übrigens auch der umgekehrte Weg, in dem man das Element bei allen anderen Größen ausblendet und im aktuellen sieht.

Möchte man ein ausgeblendetes Element wieder anzeigen, dann wählt man in der entsprechenden Breakpoint Ansicht die Ebenen aus und kann in der linken Spalte das Element durch setzen eines Punktes wieder einblenden. Auf diese Art und Weise kann man übrigens Elemente auch ausblenden, es wird also nicht unbedingt das Menü benötigt.

Formatieren von Texten im responsive Layout

Ein weitere sehr praktische Funktion, ist die Formatierung von Texten. Mit dem folgenden Icon in der Werkzeugleiste kann man angeben wo die Texte formatiert werden sollen.

Es gibt dabei die Auswahl zwischen „Text auf aktuellen Haltepunkt formatieren“ – linkes Symbol oder „Text auf allen Haltepunkten formatieren“ – rechtes Symbol. Damit kann man bei jedem Breakpoint auch individuell den Text formatieren, wie zum Beispiel die Größe anzupassen.

Jene, die Adobe Muse bereits kennen, werden wahrscheinlich fragen, ob es auch möglich ist Texte bei verschiednen Haltepunkten Absatz- oder Zeichenformaten zu formatieren. Ja es ist möglich. Man definiert dazu zum Beispiel zwei verschiedene Absatzformate. Nennen wir das eine „H1 Desktop“ und das andere „H1 Tablet“. In unserem Desktop Haltepunkt verbinden wir die Überschrift mit dem Absatzformat „H1 Desktop“ und im Tablet Haltepunkt verbinden wir die Überschrift mit dem Haltepunkt „H1 Tablet“. Wenn man Texte bei den Haltepunkte so formatiert, dann benötigt man das Text Icon für die Haltepunkte übrigens nicht.

Was brachte der Juni Neues?

Vertikales Verschiebe Werkzeug

Wenn man mit der ersten responsive Version (Februar 2016) von Adobe Muse gearbeitet hat, dann ist man sehr schnell genervt, wenn man es darum geht die Elemente bei den Breakpoints neu anzuordnen. Es war nicht wirklich einfach mehrere Elemente nach unten zu verschieben um einen Bereich frei zu machen oder nach oben zu verschieben um Lücken zu schliessen. Gerade bei langen Seiten war es mühsam erst alle Elemente markieren zu müssen um diese dann verschieben zu können.

Um hier das Leben zu erleichtern, hat Adobe in der Version 2015.2 vom Juni 2016 ist ein neues sehr hilfreiches Tool eingeführt, dass Vertikale Verschiebe Werkzeug.

Mit diesem Werkzeug kann man alle Elemente die sich auf der Seite unterhalb der Linie befinden nach unten oder nach oben verschieben. Um das Werkzeug zu aktivieren, reicht es einfach ein Element zu markieren. Es erscheint dann auf der linken Seite ein Symbol mit einem blauen Doppelpfeil. Diesen kann man nun mit der Maus nach oben oder unten verschieben.

Bildlaufeffekte funktionieren wieder

Als Adobe im Februar die erste Muse Version mit responsive Design Funktion freigegeben hat, wurde man bald enttäuscht. Der recht nette Bildlaufeffekt, mit dem Elemente beim Scrollen im Browser animiert werden konnten, lies sich nicht mit responsive Webseiten kombinieren. Diese Einschränkung wurde nun mit der letzen Version vom Juni 2016 behoben. Fügt man jetzt einen Haltepunkt mit „Fester Breite“ ein, dann kann man auch die Bildlaufeffekte wieder verwenden.

Code Qualität

Für mich als Web Entwickler ist immer interessant, wie die Code Qualität bei Drag&Drop Design Tools aussieht.

Ich muss sagen, auf den ersten Blick war ich etwas geschockt. Ich habe eine Menge HTML DIV Elemente entdeckt, die in mir auf den ersten schnellen Blick den Eindruckt erweckten, dass Inhalte auf der Seite mehrfach vorhanden sind.

Für jeden Breakpoint gibt einen Block, in dem die komplette Struktur der Seite abgebildet ist. Was auf den ersten Blick aussieht, also ob alles mehrfach vorhanden ist, stellt sich auf den zweiten Blick nicht ganz so schlimm heraus. Es ist zwar richtig, dass alle Element Container mehrfach vorhanden sind, nur sind diese nicht wirklich mit Inhalten gefüllt. Es befinden sich lediglich Platzhalter Kommentare statt der echten Inhalte in den Containern. Die echten Inhalte sind nur im aktiven Breakpoint Container.

Wir das Browserfenster nun verkleinert und einer der Haltepunkte erreicht, dann kopiert ein JavaScript die echten Inhalte an die entsprechenden Stellen die durch Platzhalter markiert sind.

Ganz optimal ist diese Lösung meiner Meinung nach nicht, aber das ist der Preis, den man für ein visuell responsive Design zahlt. Den größten Nachteil, sehe ich darin, dass JavaScript benötigt wird, damit das responsive Design im Browser funktioniert. Schaltet man JavaScript aus, dann sieht man am Schirm nicht mehr sehr viel, es gibt also kein Fallback im Falle von fehlender JavaScript Funktionalität.

Durch das mehrfache vorhanden sein der kompletten Seitenstruktur, wird auch der Code unnötig groß und komplex. Um so mehr ein Grund darauf zu achten, nicht zu viele Breakpoints einzufügen, da jeder zusätzliche Breakpoint einen solchen Block hinzufügt.

Kritikpunkte

Komplexer Code und JavaScript notwendig

Bei der Code Qualität habe ich bereits erwähnt, dass JavaScript beim User unbedingt notwendig ist um die Seite darzustellen. Ausserdem ist der Code durch das mehrfache einfügen der kompletten Seitenstruktur unnötig komplex und groß. Das sind Dinge, für die man zahlt, wenn man eben seine responsive Webseiten mit einem Drag&Drop erstellt.

Fehlendes Mobile Menü

Ein weiterer Kritikpunkt ist für mich immer noch die fehlende Möglichkeit einfach mobile Menüs zu erstellen. Ich meine damit das oft verwendete Hamburger Menü. Für das sonst bei mobilen Webseiten übliche Ausklappmenü erkennbar an den 3 Strichen gibt es zwar Workarounds mit Hilfe des Accordion Widgets.  Das ist aber doch mit einigen Aufwand und Know How verbunden.

Probleme mit vertikalen Abständen

Ich habe weiter oben schon erwähnt, dass es bei fixierten Elementen zu unschönen vertikalen Abständen kommt. Bis jetzt habe ich keine Lösung gefunden, dieses Verhalten zu verhindern, ausser die Fixierung zu entfernen.

Entwurf entspricht nicht der Vorschau und echter Website

Etwas störender finde ich, dass das Ergebnis in der Muse Vorschau und im Browser nicht immer dem entspricht, was man im Entwurf gestaltet. Inhalte sind manchmal um einiges neben der geplanten Position angeordnet. Besonders nervend ist dabei, dass man das Problem nur schwer beheben kann, denn man hat keine andere Möglichkeit Inhalte zu positionieren, als im Entwurfsmodus.

Mangelnde Barrierefreiheit bei Adobe Muse

Der letzte Kritikpunkt ist für mich persönlich der schwerwiegendste. Dieser lässt mich darüber nachdenken, ob die mit der aktuellen Version von Adobe Muse CC erstellten Webseiten überhaupt für den produktiven Einsatz geeignet sind. Es geht dabei um die Barrierefreiheit der erstellten Webseiten.

Adobe behauptet auf seiner Website, dass Muse alle Kriterien für barrierefreie Webseiten erfüllt. Ich bin da allerdings anderer Meinung, den es lässt sich in Muse nicht bestimmen, in welcher Reihenfolge die Inhalte angeordnet werden. Das wiederum hat zur Folge, dass einem blinden User die Inhalte völlig durcheinander vorgelesen oder dargestellt werden. Damit wird das Arbeiten mit einer von Muse erstellten Seite für blinde User fast unmöglich gemacht.

Da dieses Thema doch etwas umfangreicher ist, werde ich in einem eigenen Artikel noch etwas näher darauf eingehen und auch die Stellungnahme von Adobe zu diesem Thema vorstellen.

Responsive Design mit Muse in der Übersicht

Abschliessend möchte ich noch einmal kurz die wichtigsten responsive Funktionen von Muse zusammenfassen.

1. Beim Start eines neuen Projektes kann man jetzt zwischen Variabler Breite (echtes fluid responsive Design) und Fester Breite wählen.

2. Objekte lassen sich auf der Seite an drei verschiedenen Positionen, nämlich links, mittig oder rechts anordnen.

3. Die Größe der Elemente kann sich in der Breite oder Höhe anpassen oder auch in einer fixen Größe bleiben.

4. Breakpoints oder auch Haltepunkte genannt lassen sich beliebig definieren.

5. Elemente können bei jedem Haltepunkt frei angeordnet werden.

6. Auch Textformatierungen können bei jedem Breakpoint unterschiedlich formatiert werden.

7. Elemente können bei verschiedenen Breakpoints ausgeblendet werden.

8. Bildlaufeffekte können verwendet werden, wenn man Haltepunkte mit einer festen Breite verwendet.

Fazit

Adobe hat mit der neuen Version von Muse sicher eine Variante geschaffen um responsive Design so einfach wie nie zu realisieren und das ohne irgendwelche technischen Details kennen zu müssen und völlig befreit von sonst üblicherweise verwendeten Gridsystemen.

Wenn man einmal die wichtigsten Funktionen soweit kennt, dann geht einem die Arbeit wirklich sehr flott von der Hand. Mein Beispiel, dass ich mit Muse umgesetzt habe, war in einer halben Stunde umgesetzt.

Es muss aber auch gesagt werden, dass nicht alles Gold ist was glänzt. Die neue Version von Adobe Muse CC hat noch so seine Kinderkrankheiten, obwohl mit der Version 2015.2 (Juni 2016) einige davon schon behoben sind.

Zumindest lassen sich jetzt auch in responsive Layouts wieder Bildlaufeffekte verwenden. Das war mit der Version 2015.1 noch nicht möglich. Das musste man sich für eines von beiden entscheiden.

Auch das umständliche Verschieben von mehreren Inhaltselementen unterhalb eines bestimmten Bereiches wurde mit der letzten Version vom Juni 2016 mit dem vertikalen Verschiebe Werkzeug gut gelöst. Das war einer der Punkte, die mich bei der Februar Version am meisten  genervt haben.

Was für mich aber noch überbleibt, ist das Problem, dass Layout in der Vorschau und im Browser manchmal nicht so aussehen, wie in der Entwurfsansicht.

Auch das Verhalten der unterschiedlichen Höhenverschiebung bei Elementen, die ursprünglich in einer Linie waren ist etwas unangenehm.

Eines der größten Probleme bei den neuen Muse Versionen sehe ich aber im Bereich der Barrierefreiheit. Es lässt sich bei Muse nicht die Reihenfolge der Content Elemente bestimmen, was beim Vorlesen mit Screenreadern zu recht wirren Ausgaben führen kann und damit blinde User  stark benachteiligt. Zu diesem Thema gibt es noch eine ausführlichere Info in meinem nächsten Blogbeitrag.

Trotz dieser Einschränkung werde ich persönlich Adobe Muse CC zumindest als HTML Prototyping Tool verwenden. Den mit kaum einem anderen Tool konnte ich so schnell einen responsive Prototypen umsetzen. Mal sehen, ob es sich auch bald wieder für einen echten produktiven Einsatz eignet.

Zum Schluss würde mich noch interessieren, wie Du Muse findest und einsetzt. Bist Du an weiteren Muse Inhalten oder auch an kostenlosen Youtube Videos zu Muse interessiert?

Schreib mir doch einfach ein paar Zeilen in den Kommentarbereich.

[thrive_leads id=’2675′]

Mit Muse ist es recht einfach ohne HTML und CSS Wissen eine attraktive Website zu erstellen. Muse selbst habe ich schon in meinem Artikel – Adobe Muse – eine Alternative zu Dreamweaver? – vorgestellt. Aber wie sieht es mit der laufenden Wartung von Inhalten aus? Benötige ich dazu immer Adobe Muse, können meine Kunden Inhalte selbst ändern? Die Antwort darauf ist – man benötigt kein Muse um Inhalte zu ändern. Alles geht einfach über eine Weboberfläche.

Ich zeige euch in diesem Beitrag in 5 Schritten, wie man beginnend bei der Erstellung bis zur Synchronisierung der Online und Offline Inhalte Muse als CMS verwenden kann.

1. Schritt – Seite erstellen

Bevor wir beginnen die Seiten zu erstellen, werfen wir einmal einen Blick in die Seiteneigenschaften. Hier muss man im Reiter Erweitert die Checkbox bei „Bearbeiten im Browser ermöglichen“ aktivieren.

Für den ersten Schritt habe ich eine beliebige Seite mit Adobe Muse erstellt. Um die verschiedenen Funktionen zeigen zu können habe ich eine Website bestehend aus insgesamt 4 Seiten erstellt. Auf dieser gibt es unterschiedlichen Text und auch verschiedene Arten von Bildern. Um zu zeigen, dass auch verschiedene Device Größen gewartet werden können, habe ich auch eine Phone Variante angelegt. Die Struktur der Seite ist hier abgebildet.

Auf der Seite gibt es oben die Navigation und auf der rechten Seite eine Überschrift mit einem Text darunter. Der Text beinhaltet 2 Formatierungen. Einmal einen fett geschriebenen Text und einmal einen Text in einer anderen Farbe.

Auf der linken Seite gibt es drei verschiedene Varianten vom Bildern. Beim ersten Bild wurde ein Rechteck erstellt und das Bild als Hintergrund in dieses Rechteck eingefügt. Beim Bild daneben, handelt es sich um ein normales Bild ohne Effekte und beim ganz rechten Bild wurde ein Schein Effekt angewendet. Diese drei Varianten habe ich erstellt um zu zeigen, welche Arten von Bildern sich bearbeiten lassen und welche nicht.

Die fertige Seite sieht dann wie folgt aus:

2. Schritt – Hochladen der Website

Wenn die Seite fertig ist, müssen wir diese zu unserem Webhost hochladen. Dafür verwenden wir den FTP Zugang, den wir von unserem Provider bekommen haben. Um das Hochladen zu starten, rufen wir über

Datei > Auf FTP Host hochladen

die entsprechende Funktion auf.

Im ersten Fenster geben wir den Servernamen, den Usernamen und das Passwort ein. Damit die Sync Funktion der Online und Offline Inhalte verwendet werden kann, muss man noch die Checkbox bei „Anmeldedaten speichern“ aktivieren

Im nächsten Schritt erfolgt die Eingabe der URL unter der die Seite erreichbar ist. In meinem Fall, habe ich die URL http://demo.andreasstocker.at/ eingerichtet. Beim Hochladen kann man entweder „nur geänderte Dateien“ oder „Alle Dateien“ angeben.

Es dauert jetzt einige Sekunden – je nach Menge der Inhalte und die Seite wurde ins Internet übertragen. Nach dem Upload der Inhalte wird die Seite automatisch im Browser aufgerufen.

3. Schritt – Login in Adobe inbrowserediting

Nachdem wir die Seite jetzt im Internet aufrufen können, ist es auch möglich diese zu editieren. Dazu rufen wir im Browser folgende URL auf:

https://inbrowserediting.adobe.com/login/

In dem Textfeld geben wir die Domain unserer Seite ein. Also in meinem Fall demo.andreasstocker.at

Jetzt werden wir aufgefordert unsere Zugangsdaten einzugeben. Hier verwendet man die selben Daten, wie sie auch bei Adobe Muse zum FTP Upload der Seiten angegeben wurden. Wenn möglich empfehle ich aus Sicherheitsgründen einen eigenen FTP Account für die Online Wartung anzulegen – ist aber nicht unbedingt notwendig.

4. Schritt – Online editieren der Inhalte

Es dauert nun einige Sekunden und man sieht die aktuelle Muse Website. Fährt man jetzt mit der Maus über die verschiedenen Inhalte, so erscheint unterhalb ein Button zum Bearbeiten des Inhaltes. Im Beispiel unten könnte nun die Überschrift bearbeitet werden.

Es ist aber leider nicht möglich alle Inhalte über dieses Tool zu bearbeiten. Auf der einen Seite sind das natürlich Inhalte wie die Navigation, die vom System automatisch erzeugt werden, aber auf der anderen Seite kann man auch verschiedene Arten von Bildern nicht bearbeiten. Im folgenden Screenshot habe ich alle Inhalte grün eingerahmt, die man bearbeiten kann und mit rot all jene Inhalte, die man nicht bearbeiten kann. Zu den Problemen zählen vor allem Bilder, die als Background Image eingefügt werden und auf der anderen Seite all jene Bilder, die in Muse mit einem Effekt versehen wurden.

Will man jetzt einen Inhalt bearbeiten, dann klickt man einfach auf den „Bearbeiten“ Button und schon sieht man das entsprechende Eingabefeld vor sich. Hier kann man jetzt die Inhalte ändern. Es ist nur möglich den Text selbst zu ändern, nicht jedoch die Formatierung. Allerdings kann man bestehende oder neue Textinhalte mit einem Link verknüpfen. Links können sowohl externe Seiten, interne Seiten oder auch Inhalte sein, die man hochladen kann. Damit kann man zum Beispiel recht leicht ein PDF hochladen und zum Download anbieten.
In meinem Beispiel habe ich eine neue Zeile mit dem Inhalt „Diese Zeile wurde über das Web hinzugefügt.“ eingegeben.

Klickt man auf den Aktualisieren Button, dann verschwindet das Eingabefenster wieder und der Inhalt auf der Seite wurde verändert.

Auf die selbe Art, kann man auch Bilder verändern. Einfach den „Bearbeiten“ Button unter dem Bild anklicken und man kommt in das entsprechende Eingabefeld. Bilder können entweder vom Webspace oder von der lokal Platte verwendet werden.

Hat man auch noch andere Device Größen, dann kann man links oben im Drop Down Menü das gewünschte Gerät auswählen und auch diese Inhalte bearbeiten. Wenn man verknüpfte Textfelder verwendet, dann ist es natürlich nicht notwendig alle Geräte einzeln zu bearbeiten. Die Inhalte werden in diesem Fall automatisch übernommen.

Hat man alle gewünschten Änderungen vorgenommen, dann ist es wichtig den grünen Aktualisieren Button links unten anzuklicken. Tut man das nicht, sind alle Änderungen weg.

Auf die selbe Art und Weise kann man jede andere Seite bearbeiten. Einfach mittels der Menüleiste zur entsprechenden Seite wechseln und los geht es. Hat man alle Inhalte erfolgreich verändert, dann kann man sich aus dem Edit Tool wieder abmelden (rechts oben beim Zahnrad).

5. Schritt – Synchronisieren mit MUSE

Es ist auf der einen Seite schön, dass man online die mit Muse erstellten Seiten bearbeiten kann, aber was ist, wenn man etwas am Design verändern möchte. Wie kommen die online geänderten Inhalte wieder in unsere Muse Datei, damit wir mit dem aktuellsten Datenbestand arbeiten können?

Dieses Problem ist sehr einfach zu lösen. Hat man Muse beendet, so muss man das Projekt einfach neu laden. Muse überprüft jetzt automatisch die Online Version und meldet sich, wenn es Inhalte gibt, die synchronisiert werden müssen. Man kann diesen Test auch manuell über

Datei > Synchronisierung mit Webversion

aufrufen.

Stellt Muse eine Änderung fest, dann erscheint ein Hinweis, wie im Screenshot unten zu sehen. Hier ist unsere zusätzliche Zeile zu sehen. Mann kann nun auf „In Muse zusammenführen“ klicken und die online Inhalte wandern in das Muse Projekt. Möchte man die Inhalte nicht übernehmen, dann genügt ein Klick auf „Nicht zusammenführen“. Will man jetzt gar nichts machen dann ist Abbrechen die richtige Wahl.

Hat man alle Inhalte erfolgreich synchronisiert, dann sieht man alle Online Änderungen auch im lokalen Muse Projekt. Das ganze funktioniert übrigens auch, wenn man sowohl lokal als auch Online Inhalte geändert hat. Dann muss man sich entscheiden, welcher Inhalt gelten soll.

Ich denke das Adobe mit diesen Online Edit Funktionen ein oftmals notwendiges CMS nicht mehr notwendig macht, vor allem dann, wenn es darum geht schnell nur bestehende Text und Bild Inhalte zu verändern. Will man neue Inhalte hinzufügen, dann ist das mit Muse allerdings derzeit nur eingeschränkt möglich, da man nur bestehende Text oder Bild Bereiche verändern und erweitern kann.

[thrive_leads id=’2675′]

Ich würde mich übrigens freuen,
wenn Du auch meine Facebook Seite
besuchst und mein Fan wirst.

Einer der wesentlichsten Unterschiede ist, dass Muse ist im Gegensatz zu Dreamweaver ein echtes WYSIWYG Tool ist, bei dem man seine Website mit Drag an Drop zusammen bauen kann. Man hat dabei keinerlei Berührung mit HTML, CSS und Java Script. Ist ein solches Tool aber wirklich für den praktischen Einsatz brauchbar und wie sieht es hier mit der Unterstützung mobiler Geräte aus? Diese Fragen werde ich in diesem Artikel beantworten.

Ich selbst bin eher der Typ, der Webseiten gerne noch direkt mit HTML Code erstellt. Aber moderne Tools nehmen einem diese Arbeit immer mehr ab. So ist es auch mit Dreamweaver fast nicht mehr notwendig mit HTML und CSS direkt zu arbeiten. Der Code wird im grossen und ganzen vom Programm erstellt. Dennoch ist es manchmal notwendig sich damit auskennen. Denn wenn man ein Element nicht mehr in der Ansicht selektieren oder bearbeiten kann, dann muss man in den Code eingreifen oder im DOM Baum zumindest die richtige Stelle finden. Auch für das Formatieren mittels CSS sollte man zumindest in der Lage sein die Selektoren bestehend aus Tags, Klassen und IDs angeben zu können. Auch dafür ist ein Grundverständnis für HTML notwendig.

Und jetzt soll es Tools geben, wo man dies alles nicht mehr benötigt, nein anders noch es gibt Tools, wie Adobe Muse, die einem nicht einmal die Möglichkeit geben auf HTML und CSS zuzugreifen. Alles wird vom Programm automatisch im Hintergrund erledigt. Kann man damit wirklich professionelle Websites erstellen? Diese Frage habe ich mir in der Vergangenheit oft gestellt, denn mit den ganzen Baukasten Systemen habe ich schon eher negative Erfahrungen gemacht.

Der beste Weg sich so eine Frage zu beantworten, ist es so ein Tool selbst einmal zu probieren. Aber so richtig beantworten kann man die Frage natürlich erst, wenn man das auch in einem realen Projekt probiert. Am Anfang dachte ich mir, das ich mal den Prototypen mit Muse erstelle. Die „echte“ Seite kann ich dann immer noch wie gewohnt umsetzen. Gleich beim Start gelangt man in die Planungsansicht, die einem vor dem Design in Muse dazu zwingt sich einmal die Struktur und die groben Inhalte zu überlegen.

Mockups und Prototypen sollten im modernen Webdesign Prozess eh nicht mehr ausschliesslich in Photoshop & Co, sondern als sogenannte HTML Prototypen erstellt werden.
Aus dieser Idee wurde dann aber doch nichts, denn der in Muse erstellte Prototyp wurde dann nach einigen Anpassungen auch Online gestellt und hat mir damit die Arbeit erspart die Seite noch einmal mit einem anderen Tool umzusetzen.

Das ganze ist aber nicht geschehen, weil ich zu bequem war die Arbeit nochmals zu machen, sondern weil es einfach nicht notwendig war. Zugegeben, es hat sich dabei um ein kleines Projekt mit etwa 6 Seiten gehandelt.

Von der Positionierung im Workflow ist übrigens Muse dem Adobe Tool InDesign gleichzusetzen. Nur dass InDesign für den Print Bereich gedacht ist und Muse für den Web Bereich. Das merkt man auch an den ähnlichen Kommandios, so werden Inhalte wie bei Illustrator mit CMD-D oder CTRL-D eingefügt. Betrachtet man im Vergleich den Print und Web Workflow, dann werden Photoshop (Pixel) und Illustrator (Vektor) für die Erzeugung der Bilder verwendet. Zusammengesetzt werden die Seiten dann im Print Bereich mit InDesign und für das Web mit Muse oder Dreamweaver. Das Ergebnis ist dann im Print z.B. ein PDF und im Web eine oder mehrere HTML Seiten.

Responsive Websites mit Muse

Wie sieht es aber mit der Qualität des Codes und der mobilen Optimierung aus. Wie ich schon in meinem Artikel Warum mobile Websites gerade jetzt wichtig sind dargestellt habe, ist es auch aus Suchmaschinen Sicht extrem wichtig eine mobile taugliche Website zu haben.

Bei Muse hat man die Möglichkeit insgesamt 3 Device Größen (Desktop, Tablet und Telefon) zu erzeugen. Dabei stellt man sinnvollerweise eine der drei Varianten fertig und erstellt dann die anderen. Bei der Erstellung der anderen Devices kann man bestimmte Eigenschaften der anderen Größe zum Beispiel die Seitenstruktur kopieren.

Was allerdings nicht kopiert wird sind die Seiteninhalte. Die muss man, wenn gewünscht manuell kopieren. War es in den ersten Versionen von Muse nicht möglich Inhalte zwischen den verschiedenen Geräte Größen zu verknüpfen, so geht das mittlerweile recht gut. Man muss allerdings beachten, daß man innerhalb eines Textblocks keine Formatierungen zum Beispiel Schriftgrößen mischt.

Die obige Erläuterung zu den anderen Devices zeigt schon, daß wir bei Muse kein echtes responsive Design erzeugen, sondern für alle 3 Größen unterschiedliche Seiten anlegen. Das kann jetzt für den Benutzer und den Designer Vor- und Nachteile haben. Ich werde in einem späteren Beitrag noch etwas näher auf die verschiedenen Arten der Anpassung von Websites für andere Geräte Größen eingehen. Einer der Nachteile ist, daß die Seiten für jede Geräteart neu zusammengestellt werden muss. Das kann aber auch gleich als Vorteil genutzt werden, denn vielleicht möchte man ja den mobile User gar nicht mit allen Inhalten der Desktop Version beglücken. Sollten Elemente wieder verwendet werden, dann sollte man auf jeden Fall auf die Verknüpfung der Inhalte achten, den sonst wird die Wartung der Inhalte zum Chaos.

Einer der Vorteile ist auch, dass die Elemente für verschiedene Geräte völlig unterschiedlich angeordnet werden können, was bei echten responsive Seite nicht immer so leicht möglich ist. Auch die Optimierung der Inhalte zum Beispiel bei Bildern lässt sich dabei besser realisieren.

Die erstellten mobilen Seiten sind auf jeden Fall Google tauglich, denn bei den Tests haben die Seiten das Google „Gütesiegel“ erhalten.

Der HTML Code

Wie sieht es aber jetzt mit dem erzeugten Code aus. Für mich, der gerne einen möglichst übersichtlichen und kompakten Code schreibt, ist natürlich das Ergebnis von Muse nicht ganz so optimal. Es wird für fast jedes Element ein eigens DIV mit einer eigenen ID erzeugt. Für jede ID muss dann auch eine eigene CSS Regel angelegt werden. Hat man mehrere Seiten, dann werden diese Regeln leider nicht wieder verwendet.

Man kann das Ergebnis jedoch wesentlich verbessern in dem man darauf achtet Zeichen-, Absatz- und Grafik Formate zu verwenden, denn das vermindert die erstellten CSS Regeln erheblich. Diese Formate werden dann entweder einem bestimmten Tag zum Beispiel h1 für die Überschrift erster Ordnung oder einer Klasse zugewiesen, die dann an verschiedenen Stellen verwendet wird. Statt also jede Überschrift manuell zu formatieren, legt man eine Regel für die Überschrift fest und weisst sie dann den Elemente zu. Sollte eigentlich selbstverständlich sein, denn wenn man HTML und CSS Code schreibt, macht man es ja auch nicht anders. Eigenartigerweise wird das aber bei Muse oft vergessen. Der Vorteil dieser Methode ist natürlich, dass ich das Aussehen eines solchen Elements einmal verändere und es für alle vorkommenden Elemente angepasst wird. Klassen werden übrigens schon übergreifend zwischen den Seiten verwendet.

Schriften in Muse

Positiv muss man sagen, dass Muse wirklich HTML Code schreibt sprich Texte als solche in die Seite einfügt und korrekt positioniert. Es wird also nicht einfach versucht Inhalte durch Bilder zu ersetzten. Muse generiert zwar aus Schriften, die keine Systemschriften und auch keine Webfonts sind automatisch Bilder und ersetzt diese durch den Text, das ist aber eher zur Sicherheit, damit das Layout wie gewünscht aussieht. Diese Konvertierung wird aber nicht einfach versteckt im Hintergrund durchgeführt, sondern es wird durch ein kleines Icon darauf hingewiesen.

Der Designer hat nun die Möglichkeit die entsprechende Schrift durch Webfonts zu ersetzen. Der Einsatz von Webfonts in Muse ist übrigens recht einfach möglich. Es können entweder die kostenlosen Schriften von Adobes Edge Web Fonts, die in der Cloud Mitgliedschaft enthaltenen Typekit Fonts oder selbst gehostet Webfonts verwendet werden. Über Umwege lassen sich auch Google Web Fonts einbinden. Von den Typekit Fonts würde ich persönlich eher abraten, da diese nur solange verfügbar sind, solange man für die Cloud Mitgliedschaft bezahlt. Wird die Mitgliedschaft eingestellt, dann sind auch die Schriften für die Website nicht mehr verfügbar und werden durch eine Standardschrift ersetzt.

Weitere hilfreiche Features und Funktionen

Vergleicht man Muse mit Dreamweaver, dann findet man in diesem Programm einige Funktionen, die man sich auch in Dreamweaver wünschen würde.

Gleich beim Projektstart landet man auf der Planungs Übersicht, wo man die Website Struktur in einem Baumdiagramm erstellen kann. Dies hilft nicht nur, die Seiten übersichtlich zu verwalten, sondern auch um später daraus automatisch Menüs zu erzeugen.

Die Musterseiten, von denen man beliebig viele anlegen kann, lassen sich den einzelnen Seiten zuweisen und haben den Vorteil, dass wieder verwendbare Inhalte , wie Kopfbereiche, Footer, Hintergründe usw. in eine eigene Seite ausgelagert werden, die dann mit den eigentlichen Seiten kombiniert werden. Das System der Musterseiten ist recht flexibel. So lässt sich bei jeder Seite bestimmen, welche Musterseiten angewendet werden. Musterseiten können übrigens selbst auch wieder Musterseiten haben, womit sich eine Verschachtelung erzeugen lässt.

Für das Erstellen stehen verschiedene Bibliotheks Elemente zur Verfügung.

Hat man das Projekt abgeschlossen, dann reicht ein Klick aus und die Inhalte werden automatisch auf mittels FTP aus den Webspace übertragen.

Parallax Effekte

Einer der aktuellen Trends im Webdesign ist der Einsatz von Parallax Effekten. Das sind Effekte bei denen sich die Elemente auf einer Seite in unterschiedlichen Geschwindigkeiten bewegen (zum Beispiel beim scrollen) und dadurch einen 3D Effekt erzeugen. Wenn diese nicht übertrieben eingesetzt werden, dann kann man damit recht attraktive Effekte erzeugen. Mit Muse ist es sehr leicht diese hinzuzufügen ohne sich mit komplizieren Code auseinander setzen zu müssen.

Zusammenarbeit mit anderen Adobe Produkten

Die Zusammenarbeit mit anderen Adobe Produkten, wie zum Beispiel Adobe Edge Animate funktioniert wunderbar. Einfach das Package, das mit Edge Animate generiert werden kann und Muse einfügen und das war es. Die eingefügten Animationen lassen sich sogar mit den oben erwähnten Parallax Funktionen steuern.

Eigenen HTML Code oder Java Script einbinden

Wie ich anfangs erwähnt habe, ist Muse nicht gerade ideal dafür geeignet eigenen HTML oder Java Script Code einzufügen. Allerdings ist dies nicht ganz unmöglich. Wenn man weiss wie, dann kann man über „Objekt -> HTML“ HTML oder Java Script Code einfügen. Will man Code in den Head Bereich einer Seite einfügen, dann ist das über die Seiten Eigenschaften ebenfalls möglich. Muse ist zwar nicht dafür vorgesehen, selbst HTML, CSS und Java Script einzufügen, aber mit den erwähnten Möglichkeiten geht das recht einfach.

Will man hier mehr, dann kann man sich – vorausgesetzt man weiss wie – auch selbst Bibliotheken schreiben.

Einsatz als CMS Template

Wie Anfangs schon erwähnt, ist Muse nicht ideal dafür geeignet Templates für CMS zu erstellen. Es gibt aber bereits einige Ansätze dazu um dies zu realisieren. So habe ich selbst schon einmal das Plugin zum Erstellen von Contao Templates erfolgreich ausprobiert, allerdings muss ich auch sagen, dass ich derzeit damit kein Projekt umsetzen würde.

Muse hat seine Stärken als Standalone System. Allerdings hat man in Muse bereits ein kleines CMS eingebaut. Wenn die Seiten online sind, dann kann man die Inhalte auch Online ändern und muss dabei kein Muse besitzen.

Anfangs habe ich diese Funktion beim Upload zum Adobe einen Business Catalyst Webspace gesehen, dann aber festgestellt, dass dies bei jedem Webspace, der über FTP erreichbar ist funktioniert. Damit kann man seinen Kunden eine Website übergeben, wo die Inhalte sogar selbst gewartet werden können.

Änderungen im Code möglich?

Nachdem Muse ja normalen HTML Code erzeugt müsste es doch auch möglich sein diesen selbst zu verändern. Ja das ist richtig, das ist sehr leicht möglich. Allerdings hat die Sache dann den Nachteil, daß die Website nicht mehr mit Muse weiterbearbeitet werden kann, denn die Änderungen im HTML Code können nicht mehr zurück in die Muse Datei gelangen.

Fazit

Wofür ist Muse jetzt wirklich geeignet und wo würde ich Muse im Web Design Bereich positionieren.

1. Wenn man bisher noch keine Ahnung von HTML & Co hat und rasch zu ansprechenden Ergebnissen kommen möchte dann ist MUSE sehr gut geeignet. Es ist auch ideal dafür geeignet in den Bereich Web Design hinein zu schnuppern und zu sehen was möglich und nicht möglich ist. Zum Lernen also wesentlich besser geeignet als sich direkt mit den Techniken des Web auseinander setzen zu müssen.

2. Muse ist sehr gut für kleinere Web Projekte geeignet. Kommt man mit den integrierten Effekten aus, dann kann man mit Muse recht einfach und rasch Projekte umsetzen. Sollten die integrierten Effekte nicht ausreichen, dann kann man auch noch viele verfügbare externe Bibliotheken einbinden, die sowohl kostenlos, also auch kostenpflichtig angeboten werden.

3. Man muss sich beim Einsatz von Muse bewusst sein, daß der Einfachheit auf echtes responsive Design verzichtet und Webseiten mit fixen Breiten erstellen werden, was natürlich einfacher ist als ein flüssiges Layout zu generieren. Layouts für andere Gerätegrößen müssen wie schon erwähnt extra erzeugt werden, was auch etwas Mehraufwand bedeutet.

4. Die fehlende Möglichkeit einfach CMS Templates zu erzeugen schränken Muse auf statische Web Projekte ein. Auch wenn es, wie im Artikel erwähnt bereits Ansätze gibt, Muse Webseiten in Templates umzuwandeln ist dies eher nicht wirklich optimal.

5. Muse ist sehr gut dafür geeignet um HTML Prototypen zu erstellen. Die Zeiten wo für jede Webseite ein Photoshop Dokument erzeugt wird, sollten eigentlich im modernen Webdesign Workflow vorbei sein. Viel zu aufwendig ist es hier Änderungen einzuarbeiten und auf responsive Ansprüche einzugehen. In Muse lassen sich diese statischen Webdesigns in echte Webseiten umsetzen und bieten damit die Möglichkeit Seiten wirklich im Browser und auf verschiednen Geräten ansehen zu können. Verwendet man die Format Funktion von Muse, dann sind Änderungen einfach und schnell einzuarbeiten.

Beschäftigt man sich etwas näher mit Muse, dann entdeckt man viele Dinge die mit diesem Programm möglich sind. Wenn man also die beschriebenen Vor- und Nachteile von Muse kennt und sich mit den möglichen Einsatz Bereichen etwas auseinander setzt, dann kann man Muse durchaus für das eine oder andere Projekt gut verwenden.

Interessiert es euch mehr über Muse zu erfahren? Dann schreibt mir doch bitte ein kurzes Kommentar. Ich werde bei Interesse in Zukunft mehr Informationen als Beiträge oder mittels Videos zur Verfügung stellen.

[thrive_leads id=’2675′]

Ich würde mich übrigens freuen,
wenn Du auch meine Facebook Seite
besuchst und mein Fan wirst.