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.

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′]

Bildschirm oder Druck

Nachdem ich einmal davon ausgehe, dass wir unsere Seiten für Bildschirme gestalten, möchte ich jene Einheiten ausschliessen, die für Bildschirme gar  nicht geeignet sind. Dazu gehören cm (Zentimeter), mm(Millimeter), in (Inch / Zoll) aber auch pt (Punkt = 1/72 Zoll) und pc (Pica = 12pt , 1/6 Zoll). Diese Masseinheiten sind vor allem für den Print Bereich interessant, aber nicht für das Screen Design. Ich möchte gleich vorweg die Frage beantworten, warum es im Web Design überhaupt diese Einheiten gibt. Die Antwort hier ist recht einfach. Man hat im Web nicht immer nur den Screen als Ausgabe Medium, sondern auch das Papier, nämlich dann, wenn die Inhalte gedruckt werden. Mit einer eigenen Abfrage im CSS kann man dann die Einheiten für Print Ausgabe verwenden.

Aber keine Sorge auch ohne die Print Einheiten bleiben uns genügend Einheiten über.

Wo verwendet man Größenangaben?

Bevor ich aber detaillierter die Einheiten erkläre, möchte ich noch kurz darauf eingehen, was alles mit Größenangaben versehen werden kann. Ich möchte dabei kurz auf die wichtigsten Elemente und deren Eigenschaften eingehen, damit ihr einen groben Überblickt habt, wo überall eine Größe angepasst werden kann.

Die Schriften

Beginnen wir einmal bei unseren Texten, dabei können wir die Größe unserer Schrift angeben. So bedeutet zum Beispiel eine Font Size von 16px, dass die Schrift 16 Pixel gross ist. Größenangaben bei Schriften enden aber nicht bei der Schriftgröße. Es gibt noch eine Reihe von weiteren Angaben, wie Zeilenhöhe, Einzug, Shadows, Abständen zwischen Wörtern und Buchstaben. Wir du siehts, kann selbst das Formatieren von Schriften sehr umfangreich sein.

Boxen

Neben den Schriften kann man alles, was die Form einer Box hat mit diversen Größenangaben versehen. Boxen sind im Prinzip alle Blockelemente und dazu gehören DIV Elemente, Absätze (p), Überschriften (h1 – h6) und einige mehr. Bei diesen Boxen können zuerst einmal die Ausdehnung in Breite und Höhe definieren werden, aber auch diverse Abstände (innen und aussen) sowie die Breite des Rahmens. Eine solche Box lässt sich natürlich auch auf der Webseite platzieren, wobei ebenfalls die CSS Einheiten für Größen eine Rolle spielen. Definiert sind diese Angaben übrigens im sogenannten Box-Modell. Eine Skizze davon ist hier abgebildet:

Eingeschränkt lassen sich einzelne Angaben auch bei Inline Elemente anwenden.

Diese grobe Übersicht soll einmal reichen um ein Grundwissen zu haben, was wir mit unseren Einheiten alles angeben können. Obwohl es im Detail natürlich noch wesentlich mehr Möglichkeiten gibt, läuft es im Grossen und Ganzen auf die Formatierung von Schriften und auf Eigenschaften des Box Models hinaus. Dieser Unterschied der beiden verschiednen Bereiche ist etwas später noch wichtig für uns.

So nun genug davon, was wir designen können, wir wollen ja den Unterschied der verschiedenen Einheiten wissen.

Absolute CSS Einheiten

Bei den Einheiten unterscheiden wir prinzipiell zwischen zwei Gruppen, den absoluten und den relativen Einheiten. Ich werde mich im ersten Schritt einmal den absoluten Einheiten widmen, da diese wesentlich einfacher zu verstehen sind und es auch nicht so viele davon gibt.

Das Pixel (px)

Beginnen wir einmal bei der am häufigsten verwendeten Einheit, dem Pixel (px). Diese Einheit stellt eine absolute Größe am Bildschirm dar. So wie wir in der Regel auch beim Speichern von Bildern für eine Webseite eine Größe in Pixel angeben, so können wir das mit CSS Einheiten auch tun.

Pixel sind für den Designer meist eine angenehme Einheit, denn die Größe unserer Geräte in Pixel kennen wir annähernd und Designs werden im Grafikprogramm immer noch häufig mit einer fixen Pixelbreite erstellt. Wenn man also annimmt, dass der Bildschirm 1024 Pixel breit ist, dann kann man mit der Angabe von Pixel Werten im CSS den Platz gut aufteilen, bzw. hat man eine gute Vorstellung, wie viel Platz unsere Elemente auf der Seite einnehmen. Man sieht aber auch beim unten stehenden Beispiel das Problem der Breitenangaben in Pixel. Denn ist ein Gerät in der Breite kleiner, dann kann es sein, dass nur mehr ein Teil der Informationen am Bildschirm Platz hat.

Relative CSS Einheiten

Das vorhin angesprochene Problem mit den fixen Pixelgrößen kann durch die immer größer werdende Zahl an Geräten mit unterschiedlichen Bildschirm Größen mitunter recht unangenehm werden. Gerade bei Webseiten, die dem responsive Design Ansatz folgen kann man nicht mehr nur mit fixen Pixel Werten arbeiten. Dafür verwendet man relative Einheiten die verschiedene Eigenschaften unsere Ausgabe Geräte berücksichtigen. Aus diesem Grund werden und sollten diese relativen Einheiten verstärkter eingesetzt werden.

Prozent – %

Beginnen wir auch hier mit der wahrscheinlich bekanntesten relativen Einheit dem Prozent. Diese Einheit bei Block Elemente kann man sich recht gut vorstellen. Möchte man zwei Block Elemente nebeneinander haben, die gemeinsam die gesamte Breite des zur verfügung stehenden Platzes einnehmen, dann bekommt jedes der beiden Elemente eine Breite von 50%.

Will man 3 Elemente so aufteilen, dass ein Element die Hälfte des Platzes einnimmt und die anderen beiden sich die restlichen 50% gleichmässig aufteilen, dann vergibt man einmal 50% und zweimal 25%. Ich denke mit diesen beiden Beispielen sollte es recht klar werden, welchen Vorteil die relativen Prozent Angaben bei sich verändernden Breiten bietet. Denn egal wie breit der Schirm ist, die Verteilung ist immer die selbe.

Wie sieht es jetzt mit der Anwendung von Prozent bei Schriften aus? Prinzipiell kann man die % Angaben auch für Schriften verwenden. Dabei wird die Schrift relativ zur Schriftgröße des Eltern Elements dargestellt. Das bedeutet – ist die Schriftgröße des Eltern Element 16 Pixel, dann ergibt eine Angabe von 50% eine Schriftgröße von 8 Pixel.

em

Eine weitere relative Einheit, die im Verhalten zumindest bei der Größe der Schriften sehr nahe zur Prozent Angabe ist, ist die em Einheit. Ein em entspricht 100% der Schriftgröße der Schrift des Eltern Elements. Hat man keine verschachtelten Elemente mit unterschiedlichen Schriftgrößen, dann gilt die Schriftgröße des HTML Elements, welches ohne einer Angabe in der Regel 16 Pixel ist. Verwendet man die em Angabe 2em für einen Font, dann ist dieser 2 x 16 Pixel also 32 Pixel gross. Wie das aussieht, zeigt das folgende Beispiel:

HTML Code:

<p>Basis Font Size (16px)</p>
<p class="em200">Text 2em</p>
<p class="font32px">Text 32px</p>

CSS Code:

.em200 {font-size: 2em}
.font32px {font-size: 32px}

Bildschirm Ausgabe:

Verwendet man 0.5em dann ist die Schrift 0.5 x 16 Pixel also 8 Pixel gross.

HTML Code:

<p>Basis Font Size (16px)</p>
<p class="em050">Text 0.5em</p>
<p class="font8px">Text 8px</p>

CSS Code:

.em050 {font-size: 0.5em}
.font8px {font-size: 8px}

Bildschirm Ausgabe:

In beiden Fällen kann man die em Werte auch einfach in Prozent Werte umrechnen, denn 2em sind hier 200% und 0.5 entsprechen 50%.

Etwas anderes sieht es aus, wenn man em verwendet um damit Breiten und Höhen Angaben von Block Elementen zu definieren. Denn eine Breite von 10em bedeutet, wenn man von einer Basis Font Größe von 16px ausgeht, dass das Element 20 x 16 Pixel also 320 Pixel breit ist. Hier unterscheidet sich das Verhalten deutlich von der einer 20 Prozent Angabe, wie ich es weiter oben beschrieben habe. Das bedeutet also, dass bei Größenangaben bei Blockelementen em Werte nicht mit Prozent Werte gleichgesetzt werden können.

Die Breiten Angabe in em wird allerdings gerne bei Media Queries verwendet. Bei folgendem Beispiel wird die Media Query Regel bei 760 Pixel wirksam, wenn man von einem Basis Font von 16 Pixel ausgeht (760 / 16 = 47.5).

@media (max-width: 47.5em) {
  …
}

Wird in diesem Fall der Basis Font auf 20 Pixel verändert, dann wirkt die Media Query Regel erst ab 47.5 x 20 Pixel also 950 Pixel. Damit kann man, wenn es benötigt wird Media Query Angaben bezogen auf eine Basis Font Größe definieren. Auch wenn solche Angaben derzeit noch eher selten verwendet werden so haben diese durchaus bei manchen Anwendungsfällen ihre Vorteile.

Eine Anwendung in Zusammenhang mit Media Queries, ist die Änderung des Basis Fonts in Abhängigkeit von der Breite des Browser Fensters. Damit kann man zum Beispiel bei mobilen Geräten die Basis Font Size kleiner machen. Damit werden alle Standard oder mit em versehenen Schriften ebenfalls kleiner dargestellt.

HTML Code:

<h1>Media Query Font Test H1</h1>
<h2>Media Query Font Test H2</h2>
<p>Media Query Font Test P</p>
<p class=""em150>Media Query Font Test 1.5em</p>

CSS Code:

@media (max-width: 320px) {
  html { font-size: 12px; }
}
.em150 {font-size: 1.5em}

Bildschirm Ausgabe > 320px:

Bildschirm Ausgabe <= 320px:

Auch bei der Angabe von Abständen mittels Padding oder Margin, bietet sich der em Wert sehr gut an, denn hier kann man die Abstände abhängig von der Schrift definieren.

Um das Umrechnen zwischen Pixel, em und dem weiter unten noch erklärten rem zu erleichtern habe ich einen kleinen Pixel / em Umrechner erstellt, mit dem ihr einfach ausgehend von der Eingabe eines Basis Fonts entweder Pixel in em/rem oder em/rem in Pixel umrechnen könnt.

Den Rechner findet ihr auch ohne diesen Blog Artikel auf:

https://www.andreasstocker.at/css-px-em-konverter/

rem (root em)

Einen Nachteil, wird man beim Arbeiten mit em oder Prozent Werten allerdings bald feststellen. Da sich em und Prozent Angaben immer auf das Eltern Element beziehen, kann es sein, dass Schriften sich ein wenig „unberechenbar“ verhalten. Hat man zum Beispiel bei einem DIV Element eine CSS Angabe von 2 em definiert, dann werden alle Schriften bei einem Basis Font von 16 px nun 32 px gross. Hat man jetzt auch noch eine Überschrift innerhalb dieses DIV Block mit 1.5 em, dann ist diese Überschrift 32 px mal 1.5 also 48 Pixel gross. Das kann mitunter ein unerwünschtes Ergebnis sein.

Auch eine falsche Verwendung, zum Beispiel direkt einem DIV Element eine solche CSS Eigenschaft zuzuordnen führt früher oder später zu Problemen. Werde bei einer solchen Angabe nur drei DIV Elemente verschachtelt, so hat ein ursprünglicher Basis Font im innersten Element nur mehr 2 Pixel (1.DIV: 16 durch 2 ist 8, 2.DIV: 8 durch 2 ist 4, 3.DIV: 4 durch 2 ist 2). Um das Problem besser zu sehen, habe ich die Basis Font Größe im folgenden Beispiel auf 32 Pixel gesetzt. In diesem Fall ist daher die Schrift innerhalb des DIV Elements 4 Pixel und damit kaum erkennbar.

HTML Code:

Basis Font Groesse normal
<div>
  <div>
    <div>
      Verschachtelte DIV Elemente mit em
    </div>
  </div>
</div>

CSS Code:

html { font-size: 32px; }

div {font-size: 0.5em}

Bildschirm Ausgabe:

Um dieses Problem zu beheben, wurde in CSS die Einheit rem eingeführt. Die Einheit rem bedeutet root em und bezieht sich immer auf den Root Basis Font, also jener der im HTML Element definiert oder standardmässig 16 Pixel ist. Das Beispiel von oben noch einmal mit der rem Einheit sieht schon wesentlich besser aus

HTML Code:

Basis Font Groesse normal
<div>
  <div>
    <div>
      Verschachtelte DIV Elemente mit em
    </div>
  </div>
</div>

CSS Code:

html { font-size: 32px; }

div {font-size: 0.5rem}

Bildschirm Ausgabe:

Was man beim Verwenden von rem Werten beachten sollte, ist dass beim Festlegen des Basis Fonts dies immer im HTML Element zu tun ist, denn nur dann hat es auch eine Auswirkung auf die Einheit rem.

Einen kleinen Nachteil in Zusammenhang mit rem gibt es allerdings, den rem funktioniert bei alten Browser nicht. Betroffen sind vor allem Browser von Microsoft, allem voran der IE8. Ab dem IE 11 wird rem komplett unterstützt. Dieses Problem wird allerdings in Zukunft immer geringer, da die betroffenen Browser zunehmend vom Aussterben bedroht sind.

Und es gibt noch mehr

Wenn man die CSS Spezifikationen durchliest, dann wird man feststellen, dass es noch mehr Einheiten in CSS gibt. Um den Artikel aber nicht unnötig kompliziert zu möchte ich die wichtigsten nur kurz in zwei Absätzen vorstellen.

Die Einheit ex, klingt recht ähnlich dem em und verhält sich auch recht ähnlich. Allerdings wird hier zur Berechnung die Größe des Buchstabens x des Basis Fonts herangezogen. Möchte man also seine Inhalte in bezug auf den Buchstaben x ausrichten, dann wäre diese Einheit die richtige Wahl. Ich persönlich habe diese Einheit noch nie verwendet und sehe auch kein wirkliches praktische Beispiel, wo ich das einsetzen könnte.

Die Einheiten vw, vh, vmin und vmax sind spezielle Größenangaben, die sich auf den Viewport des Browserfensters beziehen, damit kann man zum Beispiel Elemente, die immer so gross sind wie das aktuelle Browserfenster realisieren. Da dies aber ein völlig eigenständiges Thema ist, werde ich bei Interesse in einem eigenen Artikel darauf eingehen.

Zusammenfassung

Wie man in diesem Artikel gesehen hat, gibt es für CSS Einheiten keine Lösung die allgemein verwendet werden kann. Es hängt immer sehr davon ab, welche Elemente man formatieren möchte und ob man sich der Umgebung automatisch anpassen will oder nicht.

Von Pixel Werten wurde in der Vergangenheit oft abgeraten, da diese bei Browser Zoom nicht reagiert haben. Da dies bei den meisten Browser aber nicht mehr zutrifft, ist eine Verwendung von Pixel Werten nicht mehr so kritisch. Dennoch sollte man bei Schriftgrößen eher darüber nachdenken em oder rem zu verwenden.

Auch bei der Angabe der Ausdehnung von Block Elementen sind Pixel Werte durchaus noch üblich und haben ihre Berechtigung. Möchte man auf Gerätegrößen reagieren, dann wird man eher Prozentwerte verwenden. Die Verwendung von em und rem ist bei solchen Elementen eher unüblich.

Will man bei Blockelementen diverse Abstände, also Margin, Border oder Padding angeben, dann sind Pixel oder em bzw. rem die richtige Wahl.

Ich denke ich konnte euch mit diesem Artikel einmal eine grobe Übersicht der zur Verfügung stehenden Einheiten geben um euch die Entscheidung in Zukunft etwas leichter zu machen.

Wie sieht es bisher mit euren praktischen Arbeiten aus – welche Erfahrung habt ihr mit dem Einsatz der verschiedenen CSS Einheiten gemacht? Schreibt mir doch einmal eure Erfahrungen und Vorgehensweisen in den Kommentarbereich.

Ihr findet alle 4 Teile in meinem Youtube Channel.

Teil 3 – Inhalte einfügen

Der dritte Teil der Serie widmet sich dem Einfügen der Inhalte. Dabei werden verschiedene Inhaltstypen eingefügt. Angefangen bei einem normalen Bild, über responsive Images bis zur responsive Navigation, die in der mobilen Variante das allseits bekannte Ausklapp Menü darstellt.

Teil 3: Responsive Design mit Dreamweaver CC 2015 und Bootstrap

Teil 4: Inhalte formatieren

Im abschliessenden vierten Teil geht es primär darum, die eingefügten Inhalte zu formatieren. Dabei wird gezeigt, wie man mit dem CSS Designer von Dreamweaver neue Regeln erstellt. Es wird aber auch gezeigt, wie man bestehende Bootstrap Regeln verändert, bzw. im Vorfeld herausfinden, welche Regeln überhaupt geändert werden müssen. Weiters gehe ich darauf ein, Regeln nur bei bestimmten Bildschirm Breiten wirken zu lassen.

Teil 4: Responsive Design mit Dreamweaver CC 2015 und Bootstrap

Wie schon im letzten Post erwähnt, könnt ihr auch bei meiner Kursplattform unter http://www.webdesign-coach.com vorbeisehen. Dort werde ich noch im Sommer meinen Dreamweaver Kurs starten. Als besonderen Bonus, bekommen alle, die sich im Juli zum Newsletter anmelden den Kurs nach Fertigstellung kostenlos zu Verfügung gestellt.

Ich würde mich auch freuen, wenn Ihr meine Facebook Page besucht und die Seite mit “Gefällt mir” markiert

Schreibt mir doch bitte ein Kommentar, wie ihr die neuen Funktionen zum Thema responsive Design in Dreamweaver findet und ob euch die Tutorials geholfen haben. Welche Infos zum Thema Dreamweaver würdet ihr noch benötigen?

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

Nachdem, wie in meinem letzten Artikel schon erwähnt, die Art responsive Websites in Dreamweaver zu erstellen komplett geändert wurde, war es Zeit meine Video Tutorials auf den neuesten Stand zu bringen. Die Tutorial Serie „Responsive Design mit Dreamweaver CC 2015 und Bootstrap“ besteht aus insgesamt 4 Teilen.

Teil 1 und Teil 2 habe ich jetzt online gestellt.

Da noch nicht alle User mit responsive Gridsystemen und Bootstrap vertraut sind, gehe ich im ersten Teil auf dieses Thema ein. Hier wird kurz erklärt, was Gridsysteme und im speziellen responsive Gridsysteme sind und wie diese mit Bootstrap umgesetzt werden.

Diesen ersten Teil findet ihr in meinem Youtube Channel oder unter folgendem Link:

Teil 1: Responsive Design mit Dreamweaver CC 2015 und Bootstrap

Wenn Ihr diesen Teil durch habt oder bereits die Grundlagen von responsive Gridsystemen und Bootstrap bekannt sind, dann geht es im zweiten Teil zum praktischen Einsatz in Dreamweaver. Wichtig für diese praktische Umsetzung ist, dass ihr bereits die neueste Version CC 2015 verwendet, denn in den Vorgängerversionen wird noch ein anderes System verwendet.

In diesem Teil zeige ich euch, wie ihr ein komplett neues Projekt anlegt, das Layout mittels Bootstrap Gridsystem zusammenstellt und wie das Layout an unterschiedliche Device Größen angepasst wird.

Auch dieses Video findet ihr in meinem Youtube Channel oder unter folgendem Link:

Teil 2: Responsive Design mit Dreamweaver CC 2015 und Bootstrap

Ich wünsche euch viel Spass und Erfolg mit der den ersten Schritten und ich würde mich über eure Kommentare freuen, wie ihr die Videos findet und ob euch diese weitergeholfen haben.

Die restlichen 2 Teile in denen ich euch zeige, wie Inhalte eingefügt und formatiert werden, folgen diese Woche.

Wenn ihr übrigens noch mehr zu dem Thema wissen wollte, dann meldet euch bei meiner Kursplattform unter http://www.webdesign-coach.com zum Kursnewsletter an.

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

Dreamweaver hat für responsive Websites bisher immer eine eigene CSS Datei erstellt in der alle Regeln über Position und Größe der Elemente bei unterschiedlichen Breiten definiert waren. Eine Wiederverwendung der CSS Datei für andere Seiten im selben Projekt war nur schwer möglich. Scheinbar hat Adobe erkannt, dass dieser Weg dringend verbessert werden musste. Das Ergebnis ist nun in der aktuellen Version Dreamweaver CC.2015 zu sehen.

Hier wird ein Standard Framework nämlich Twitter Bootstrap für das responsive Design verwendet. Wer jetzt denkt, die Flexibilität des alten responsive Systems zu verlieren, der irrt, denn es sind weiterhin individuelle Media Queries möglich und in Dreamweaver kann man die Spalten des Bootstrap Frameworks auch noch anpassen. Wenn man also mit 12 Spalten nicht zu recht kommt, dann kann man zum Beispiel auch 16 verwenden. Alle notwendigen Klassen für die Spalten Elemente werden dann bereitgestellt.

Das Erstellen von responsive Websites mit Dreamweaver war schon mit den CS Versionen möglich. Dies habe ich auch schon in meinen Video Tutorials gezeigt (Responsive Websites mit Dreamweaver erstellen). Doch so richtig brauchbar war dieses Feature vor allem bei größeren Websites nicht wirklich. Bei der Cloud Version bis CC.2014 wurde die ganze Angelegenheit noch schlimmer, denn hier konnte man nicht einmal mehr per Drag and Drop Elemente in eine responsive Site ziehen.

Ich möchte euch in diesem Beitrag kurz die neuen responsive Funktionen vorstellen. Ein Video zu diesem Thema folgt in Kürze.

Was ist Bootstrap

Bevor ich beginne, möchte ich noch ganz kurz erklären, was Bootstrap ist, da vielleicht noch nicht alle Leser dieses Framework kennen.

Bei Bootstrap handelt es sich um ein HTML / CSS Framework, mit dem man sehr einfach responsive Webseiten erstellen kann. Das ist aber noch nicht alles. Das Framework hat eine Menge Komponenten eingebaut, die man einfach durch anwenden von bestehenden CSS Regeln einfügen kann. So gibt es Navigationen, Buttons, Formulare, Modal Effekte, Carousels und vieles, vieles mehr.

All diese Komponenten lassen sich ebenfalls mit der neuen Dreamweaver Funktion per Drag and Drop einfügen. Im Vordergrund dieses Artikels steht aber das Erstellen eines responsive Layouts mit Dreamweaver und Bootstrap.

Responsive Bootstrap Seite mit Dreamweaver CC.2015 erstellen

Wie in nur 4 Schritten eine responsive Bootstrap Seite in Dreamweaver 2015 erstellt werden kann zeige ich euch jetzt.

1. Erstellen einer neuen Bootstrap Seite

Wenn man ein neues HTML Dokument in DW CC.2015 erstellt, dann hat man jetzt die Möglichkeit zwischen keinem und dem Bootstrap Framework zu wählen [1]. Kein Framework ist wie schon in der Vergangenheit ein normales HTML Dokument, bei Bootstrap werden automatisch die entsprechenden CSS und JS Dateien verknüpft, die für die Verwendung notwendig sind.

Im nächsten Schritt [2] gibt man an, ob man eine komplett neue Seite erstellt oder ob man schon eine Bootstrap Datei im Ordner hat. Dies kommt meist dann vor, wenn man im Projekt eine weitere Seite erstellen will.

Man kann auch noch eigene CSS Dateien [3], die zum Beispiel schon Layout Regeln beinhalten angeben.

Bei „Anpassen“ hat Adobe eine sehr interessante Variante eingefügt. Damit kann nämlich das Bootstrap Framework angepasst werden. Passen die 12 Spalten zum Beispiel nicht oder man möchte andere Breakpoints verwenden – hier ist die Gelegenheit Anpassungen vorzunehmen. Wählt man hier zum Beispiel 16 Spalten aus, dann stehen auch die entsprechend erweiterten CSS Klassen zur Verfügung.

Mit „Erstellen“ werden dann nach einem Hinweis die notwendigen Daten in den Projekt Folder kopiert und das Erstellen der Inhalte kann beginnen.

Hackt man übrigens bei „Entwurf“ die Checkbox an, dann bekommt man das HTML Dokument nicht ganz leer, sondern schon mit etwas Demo Inhalt befüllt.

2. Einfügen der Bootstrap Komponenten

Nun kann man das Einfügen Fenster aktivieren und man sieht bei der Drop Down Auswahl, dass es eine zusätzliche Auswahl gibt. Mit „Bootstrap-Komponenten“ werden einem alle notwendigen Elemente bereitgestellt.

Mit Drag & Drop kann man die benötigten Elemente in das Arbeitsfenster ziehen. Die Live View, die meiner Meinung nach in den vorigen CC Versionen zum Teil sehr unbrauchbar war, hat sich nun ebenfalls stark verbessert.

Um neue Inhalte zu erstellen zieht man zuerst ein „Container“ oder „Container-fluid“ Element auf die Arbeitsfläche.

Jetzt kommt im nächsten Schritt das Row Element dran. Da mit diesem aber auch automatisch schon Spalten Elemente hinzugefügt werden, sollte man auch gleich ein Media Query auswählen für das später Spalten Definitionen gemacht werden sollen.

Die Auswahl erfolgt einfach mittels der Balken über der Arbeitsfläche.

In meinem Fall ist oben die Tablet Auflösung (sm) ausgewählt. Es gibt übrigens folgende vier Möglichkeiten:
xs (extra small) – entspricht einem Smartphone,
sm (small) – entspricht einem Tablet,
md (medium) – entspricht einem Desktop Rechner und
lg (large) – entspricht einem grossen Desktop Rechner

Hat man also die Größe ausgewählt und das Row Element per Drag & Drop in den Container gezogen, gibt es noch die Frage nach den Spalten, die dann mit dem Row Element automatisch eingefügt werden.

Es wurde jetzt eine Reihe mit 3 Elemente eingefügt, von denen jedes eine Klasse „.col-sm-4“ zugewiesen hat. Das bedeutet, dass in der Tablett Auflösung ein Spalten Element 4 Grid Spalten breit ist.

Wir haben damit 3 Elemente (Spalten die wir oben angegeben haben) mit jeweils 4 Grid Spalten Breite. Das ergibt 12 Grid Spalten (3 x 4), was unserer Auswahl beim Erstellen des Dokuments entspricht.

3. Anpassen der Element Größen

Möchte ich die Breite der einzelnen Spalten verändern – zum Beispiel eine schmale erste Spalte und dann zwei gleich Breite Spalten, dann gibt es 2 Möglichkeiten. Ich könnte entweder die Klassen Namen von jedem Element ändern, zum Beispiel auf col-sm-2, col-sm-5 und col-sm-5 (ergibt auch wieder 12 = 2 + 5 + 5) oder aber auch mit dem Anfasser für die Spaltenbreite vergrößern oder verkleinern.

Variante 1: Klassen Namen ändern

Variante 2: Spalten Größe mit Anfasser ändern

Nun kann ich mit der nächsten Zeile (row) weitermachen. Möchte ich in einer Reihe die Elemente für andere Größen auch anders anordnen, dann haben wir wieder zwei Möglichkeiten.

In der 1. Variante wird der entsprechenden Spalte eine weitere CSS Klasse hinzugefügt. Nehmen wir an, wir haben für die Tablet Auflösung 4 Elemente nebeneinander (4 x col-sm-3) und wollen in der Smartphone Variante 2 Elemente nebeneinander haben dafür aber in 2 Reihen. Um das zu erreichen geben wir jedem Element mit dem + zusätzlich die Klasse col-xs-6.

Das bedeutet, dass jedes Element in der Smartphone Auflösung (xs) nun 6 Grid Spalten breit ist. Daher passen nur mehr 2 Elemente (2 x 6 = 12) in eine Reihe. Die anderen Elemente, also ebenfalls 2 werden darunter und nebeneinander angeordnet. Das Ganze sieht dann so aus:

Tablet:

Smartphone:

Wie schon oben beschrieben, kann man die Spalten Elemente mit dem Anfasser an der rechten Seite in der Größe verändern. Um damit automatisch die gewünschten Klassen hinzuzufügen, muss man nur mittels der Media Query Balken (Klick auf den grünen Balken) in die gewünschte Größe wechseln und dann dort die Spalten vergrößern.

Das machen wir für alle 4 Elemente (Breite auf 6 Einheiten vergrößern) und schon sind die Klassen automatisch hinzugefügt.

Das kann man nun in gleicher Weise für alle anderen Auflösungen und Reihen wiederholen. Recht rasch hat man damit ein responsive Layout mit Bootstrap erstellt ohne wirklich im HTML Code arbeiten zu müssen.

4. Inhalte und Feintuning

Als letzten Schritt kann man jetzt die Inhalte in die Spalten Elemente einfügen und noch die eine oder andere CSS Formatierung, wie zum Beispiel Ausrichtung, Abstände, Farben und Schriften durchführen.

Ich werde diese Beschreibung in den nächsten Tagen in einem Video Tutorial nochmals genauer erklären. Ich hoffe aber ich habe euch damit einen Einblick in die wahrscheinlich wichtigste Änderung bei Dreamweaver 2015 gegeben.

Wie findest du diese neue responsive Funktion in Dreamweaver? Schreib mit doch bitte ein kurzes Kommentar dazu.

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

Mit Adobe Dreamweaver ist dies bereits seit einiger Zeit möglich. Wie es genau funktioniert zeige ich in meinem 2 teiligen Videotraining.

Die Erstellung der responsive Webseiten erfolgt mit einem flüssigen Rasterlayout, welches für 3 Screengrößen (Smartphone, Tablet und Desktop) eingerichtet wird. Die Spalten (Anzahl und Breite) lassen sich für jede Größe individuell konfigurieren. Das Verhalten (Position und Größe) der einzelnen Blöcke lässt sich ganz leicht mit der Maus zusammenbauen.

In dem 2 teiligen Videotutorial zeige ich wie von Grund auf eine responsive Webseite erstellt wird und  im Laufe des Tutorials eine komplette Seite entsteht.

Im ersten Teil werden die Grundlagen von responsive Webdesign mit Dreamweaver erklärt. Es wird ein Grundlayout für alle drei Darstellungen erstellt und der Content für unsere Website eingefügt.

Der zweite Teil beschäftigt sich damit, wie das vorhin erstellte Grundlayout mittels CSS zur fertigen Webseite wird.

Ich wünsche euch viel Spass und Erfolg mit diesen Video Tutorials.

Videos auf Youtube:

http://youtu.be/0AvitaxQoRw

http://youtu.be/-pCQkqsCdhU

Mein Video Tutorial Kanal:

https://www.youtube.com/user/asvideotrainings