ImpressPages: Webseiten per Drag & Drop erstellen

Flexibles Arbeiten mit Inhaltsblöcken

ImpressPages ist ein Open Source Content Management System, welches sich durch seinen Drag & Drop-Ansatz deutlich von anderen CMS abhebt. Die Macher von ImpressPages bezeichnen ihr Produkt selbst als ein CMS mit Drag & Drop Interface. Das macht die Handhabung, insbesondere das Einfügen von neuem Content sehr einfach. Auch der Administrationsbereich ist sehr benutzerfreundlich gestaltet.

Open Source CMS ImpressPages

Impress Pages ist unter der GNU GPL Lizenz erschienen, ist also kostenlos einsetzbar. Das Kernentwicklerteam kommt aus Litauen. Das noch vergleichsweise junge Projekt ImpressPages hat es mittlerweile auf die Version 2 gebracht, wobei Erweiterungen für die 1er Version nicht mit der aktuellen 2er-Serie kompatibel sind. An den Coredateien ist beim Übergang von Hauptversion 1 auf 2 viel geändert worden.

Das Drag & Drop–Prinzip in ImpressPages

Quelle: ImpresspagesDer wesentliche Unterschied zu einem Open Source CMS wie Joomla! oder TYPO3 ist, dass der Fokus nicht darauf liegt, möglichst viele Beiträge wie etwa Artikel, die zu 80 Prozent aus Text und zu weiteren 20 Prozent aus Grafiken, Bildern oder Skizzen bestehen, zu verwalten. Bei ImpressPages geht es eher um die inhaltliche Gestaltung der Webseite an sich.

 

Der Ansatz bei ImpressPages ist daher mit einem Website-Baukasten-System vergleichbar: Es geht darum, Inhalte in eine Vorlage einzubringen, so dass sich der Redakteur/Contentersteller nicht mit der technischen Ebene beschäftigen muss. Im Unterschied zu einem klassischen CMS entscheidet aber der Contentersteller, an welcher Stelle das Inhaltselement erscheint.

Die Inhaltsblöcke in ImpressPages

Entsprechend sind die Inhalte bei ImpressPages nicht in Artikel, Kategorien oder Bereichen organisiert. Stattdessen kann der Redakteur aus verschiedenen Typen auswählen. Häufig gebrauchte Inhaltselemente sind in ImpressPages Überschriften und Textblöcke, eine Kombination aus Text und Bild im Block, ein Bildelement und eine Bildergalerie. Diese werden in einer Menüzeile im Backend symbolisch dargestellt. Darunter befindet sich das Editorfenster, das im WYSIWYG-Modus (What-You-See-Is-What-You-Get) die Bearbeitung der jeweiligen Einzelseite möglich macht.

 

Wenn man ein weiteres Element auf eine Webseite bringen möchte, zieht man mit der Maus das passende Symbol, zum Beispiel das Textblock-Symbol an die Stelle, an der es auf der Seite erscheinen soll. Nach dieser Aktion erscheint an dieser Stelle ein Platzhalter, der zur Eingabe des eigentlichen Contents auffordert. Im Textblockbeispiel öffnet sich ein Texteditor, wie man ihn auch aus anderen Open Source CMS kennt und ermöglicht die Eingabe des Textes.

Bei ImpressPages kommt als Eingabeeditor standardmäßig TinyMCE zum Einsatz. Damit lassen sich Tabellen formatieren, Schriftstile anpassen, die Ausrichtung verändern oder auch Einfüge- und Kopieraufgaben lösen. Wenn der Text fertig eingegeben ist, klickt man noch auf „Confirm“, so dass die Änderungen übernommen werden.

Für Überschriften gibt es einen eigenen Inhaltstyp, der auch eine Abstufung der Überschriften in <h1> bis <h3> zulässt. Diese Trennung zur Texteingabe ist auch sinnvoll, um dem User anzuhalten, die semantisch bedeutsame Auszeichnung der Überschriften im Auge zu behalten.

Contentblöcke unfallfrei platzieren

Die Contentblöcke lassen sich dort platzieren, wo dies im Template grundsätzlich vorgesehen ist. Bei einem zweispaltigen Template lassen sich die Blöcke also beispielsweise im zentralen Bereich verankern oder in der linken Spalte. Sie „rasten“ an der Stelle ein, an der die Maustaste losgelassen wird. Dass Blöcke übereinander platziert werden, damit sie sich ganz oder teilweise überdecken, ist nicht möglich. Blöcke, die bereits darunter liegen, werden beim Versuch, den neuen Block darüber zu legen, nach unten verschoben. So liegen die Blöcke am Ende nicht beliebig auf der Seite, sondern werden vom Template nach vorgesehenem Schema angeordnet.

 

Ein Contentplatzhalter wird per Drag &amp; Drop an seinen Platz geschoben. Danach kann der Benutzer die Inhalte eingeben. Änderungen an den Inhaltselementen sind so jederzeit sehr einfach möglich. Um die Änderungen im offenen Web sichtbar zu machen, muss der Benutzer abschließend noch &quot;Publish&quot; klicken.

Entsprechend verfährt man, wenn es darum geht, Bilder, Bildergalerien oder auch eine Tabelle in die Seite einzubauen. Dieser Prozess geht Dank Drag & Drop sehr leicht von der Hand. So gelingt es, in recht kurzer Zeit eine Website mit funktionierender Struktur und stringentem Design aufzubauen.

Auf den ersten Blick mag man erstaunt sein, wie stark die Eingabemöglichkeiten für Textstile im Editor reduziert sind. Eine Möglichkeit, die Farben auszuwählen, gibt es standardmässig nicht. ImpressPages möchte mit solchen Restriktionen dafür sorgen, dass inhaltliche und formelle Konventionen, die an Webseite gestellt werden, automatisch eingehalten werden. Insbesondere User, die sich nicht mit Fragen der Informationsarchitektur oder Designgrundregeln beschäftigen wollen, können mit ImpressPages eine Website produzieren, die die aktuellen Konventionen zumindest im Grundsatz beachtet.

ImpressPages bringt von Haus aus einige oft verwendete Schemata für typische Inhalte als Contentblöcke mit. Beispiele dafür sind eine Logo- und Bildergalierie, die auf geschäftlich orientierten Seiten oft zum Einsatz kommen.

Wer eigene Codefragmente platzieren will, kann dies mit dem Schema für den HTML-Inhaltsblock tun. Damit lassen sich typische Inkludierungen wie Affiliate- oder Adscripts realisieren. Optional können Sie für einzufügende HTML-Fragmente die Einstellung „Escape“ nutzen, um potentiell problematische HTML-Zeichen mit den korrekten Entitäten zu ersetzen.

Änderungen werden als Vorschau im Bearbeitungsbereich gezeigt. Mit dem Klick auf „Publish“ werden die Änderungen in die Live-Version übernommen.

Extensions nachrüstbar

Auch einige Inhalte, die mehr Interaktivität und Features bereit stellen, sind standardmäßig in ImpressPages implementiert. Eine Möglichkeit, eine Datei herunterladen zu können, lässt sich ebenso schnell einfügen wie eine Tabelle, eine Newsletteranmeldung, eine FAQ-Liste oder ein Kontaktformular.

Weitere Features lassen sich als sogenannte Extensions nachrüsten. Zum Katalog der inzwischen verfügbaren Extensions finden sich eine Slideshow und Slider, Rollenmanagement für User und sogar eine einfache Checkout-Funktion, die sich mit beliebigen Textblöcken verknüpfen lässt, indem man beliebig „Kaufen“-Buttons einfügt. So kann man einfache Bestellprozesse abbilden. Die Anbindung an PayPal oder Google Checkout übernimmt die Extension.

Mittels Modulen kann der Funktionsumfang von ImpressPages erweitert werden.

Wichtig ist, dass man das Besucherverhalten auf einer Website tracken kann. Für die Zielgruppe von ImpressPages bieten sich dafür Tools wie Piwik oder Google Analytics an. Zumindest für das Hinzufügen des obligatorischen Javascriptcodes von Google Analytics gibt es eine Extension, die Änderungen am Theme-File erspart.

Layout: Templates heißen „Themes“

Das Design – und damit ist sowohl das Gesamtbild der Webseite als auch die Umsetzung der Navigation, die Festlegung von Schrifttypen- und größen sowie der Textstile gemeint – wird durch ein Template festgelegt. Bei ImpressPages heißen die Templates „Theme“.

Um schnell zu Ergebnissen zu kommen, können neue Webseiten mit einem von zur Zeit fünf offiziellen Standardtemplates, die frei verfügbar sind, begonnen werden. Da ImpressPages ein immer noch vergleichsweise neues CMS-Projekt ist, ist die Anzahl der Templates und der Variationen überschaubar. Kommerzielle Themes kosten um die 30 US-Dollar und decken einige gängige Dienstleistungsbereiche ab.

Eigene Templates erstellen

Eigene Themes zu generieren, erfordert einiges Einarbeiten in die Struktur und das Zusammenwirken von Header-, Content- und Footerbereichen sowie der Einbindung von CSS. Man ist zunächst gut beraten, ein einfaches Standard-Theme zu kopieren und ausgehend davon dann die eigenen Ideen umzusetzen.

Ein großer Vorteil bei ImpressPages ist, dass die Themes in der Komplexität nicht mit den Templates von Joomla! oder gar TYPO3 vergleichbar sind. Webdesigner, die auf Grundlage von HTML, CSS und Javascript entwickeln, kommen mit grundsätzlichen PHP-Kenntnissen vergleichsweise schnell zu einer Umsetzung eines eigenen Designs, wenn sie auf eines der mitgelieferten Grund-Themes aufsetzen und diese weiterentwicklen.

Andererseits sind aber auch deutlich komplexere Templates denkbar. Der Developer muss sich dann mit dem Widget- und Modulkonzept auseinandersetzen.

Seitenverwaltung über Menümanagement

Die Seitenverwaltung ist eng an die Menüstruktur gekoppelt. Neue Seiten erzeugt man, indem man in der hierarchisch aufgebauten Navigation an gewünschter Stelle eine neue Einzelseite hinzufügt, die Seite benennt und einige Zusatzinformationen eingibt. Solche „Pages“ können auch Inhalte einer anderen Seite zeigen oder auf eine externe Website verweisen.

SEO-Unterstützung in ImpressPages

Um möglichst Suchmaschinenfreundlich zu sein, kann man pro Seite einen Titel, Meta Keywords und eine Metadesciption eingeben. Außerdem lässt sich ein vom eigentlichen Seitentitel abweichender Seitenname für die URL angeben. Aus der Menüstruktur werden dann auch die Pfade für die URL geformt, wobei leider das Sprachkürzel DE – für „deutsch“ – mitverarbeitet wird: Als Ergebnis liefert ImpressPages also standardmäßig URLs der Form „domain.cc/de/top/impressum/“

Multilinguale Websites

Die Möglichkeit, mehrsprachige Websites zu erzeugen, ist mit ImpressPages wiederum schon vom Start weg gegeben. Im Konfigurationsmenü können weitere Sprachen hinzugefügt werden. ImpressPages bildet dann die Struktur der vorhandenen Website noch einmal ab. Es wird also ein weiterer, allerdings leerer „Hauptast“ erzeugt, in dem der Content in der neuen Sprache eingegeben werden muss.

Eine „Defaultsprache“ gibt es in diesem Sinne nicht. Die zweite oder dritte Sprache sind also keine Versionen der defaultmäßigen Struktur, sondern ein eigener „Branch“. Das bedeutet: Wenn also etwa englischer Content hinzugefügt wird, muss man im deutschen Ast auch einen entsprechenden Block in deutscher Sprache anlegen. Damit leidet die Übersichtlichkeit über die Contents in den verschiedenen Sprachen. Andererseits erhöht dieses Prinzip die Flexibilität. Man kann auf Englisch zum Beispiel ganz andere Contents bereitstellen als in der deutschen Version der Website.

Weitere Sprachen für das Backend, das mit der Grundinstallation auf Englisch ausgeliefert wird, kann der Seitenbetreiber per Languagefiles nachladen.

Oft steht man vor der Aufgabe, zu einem Domainnamen wie „domain.de“ den deutschen Content zu zeigen, während man unter „domain.com“ vielleicht die englische Version per Default anzeigen lassen will. Eine Domainauswertung nimmt ImpressPages nicht vor. Dies müsste man über die .htaccess-Datei mit einem Redirect realisieren. Das Positive daran ist, die Steuerung der Frontendsprache gelingt komplett parameterfrei und den fremdsprachigen Entsprechungen der Contentseiten kann ein Seitentitel und damit ein URL-Text in der richtigen Sprache mitgegeben werden.

Die technische Basis von ImpressPages

• Plattform/en (Client/Server): Bedienung mit dem Browser (aktuelle Versionen der Browser Firefox, Google Chrome, Internet Explorer und Safari mit aktiviertem Javascript, Cookiezulassung) / Server: Windows, Mac OS X, Linux
• Datenbank/en: MySQL 5 oder höher
• Skripsprache/n: PHP 5.3.3 oder höher mit den Modulen GD library und Freetype-Unterstützung, PDO, mbstring, curl, json (normalerweise Standardkonfiguration bei den meisten Hostern)
• Web- und Applikationsserver: Apache Webserver mit aktiviertem Mod-Rewrite und mehr als 30 MB freiem Speicherplatz

Für wen ImpressPages geeignet ist

Charmant an ImpressPages ist, dass das CMS schon in der Grundinstallation wichtige Funktionen mitbringt, die man bei anderen Systemen zusätzlich als Extension, Modul oder Plugin nachinstallieren muss. ImpressPages hat vom Start weg eine sprachspezifische Newsletterfunktion, eine Suchfunktion und ein Rechtemanagement an Bord. Damit können weitere Administratoren eingerichtet werden, die dann nur auf festgelegte Bereiche Zugriff haben.

Seit der Version 2.1 ist eine Frontend-User-Registrierung und eine Userverwaltung im Kern von ImpressPages implementiert. Die Aktivierung über die Layout-Datei ist aber recht kompliziert und überfordert HTML/PHP-ferne Zielgruppen.

Für Webdesigner, die vor der Aufgabe stehen, Websites für Dienstleister umzusetzen und dafür nur ein kleines bis mittelgroßes Budget zur Verfügung haben, ist ImpressPages eine gute Alternative zur Generierung der Seiten. Dies gilt auch dann, wenn der Kunde, der selbst keine HTML- oder CSS-Skills hat, kleinere inhaltliche Änderungen selbst umsetzen möchte. Diese Websites zeichnen sich dadurch aus, dass eher viel statischer Content (Firmenphilosophie, Produkt- oder Dienstleistungsdarstellung) mit relativ wenig aktuellen Content mit „Verfalldatum“ wie Firmenjubiläum oder Seminartermine ergänzt wird.

ImpressPages vs. klassisches CMS

Die Frage, ob es sich bei ImpressPages um ein „echtes“ CMS handelt, ist berechtigt, wenn man eine enge Definition von CMS anlegt. Immerhin ist die Trennung von Inhalt und Aussehen bei ImpressPages konsequent umgesetzt und auch ungeübte Anwender, die nicht mit HTML und CSS entwickeln wollen, können ohne Probleme eine Website erstellen, die mit den Funktionen ausgestattet ist, die Webuser heute erwarten. Nicht zu unterschätzen ist die durch die Architektur angelegte Flexibilität von ImpressPages. Sollte die Entwicklercommunity aktiv werden, dürfen wir auf mehr spannende Features hoffen.

Zones und Templates

Etwas verwirrend ist die Unterteilung in „Zones“. Mit „Zones“ bezeichnet ImpressPages die typischen Funktionsbereiche einer Website. Dazu gehören der obere Menübereich, die linke Navigation, die Suche, die Sitemap und Spezialfunktionen wie die RSS-Feed-Generierung und das Newsletter-Feature.

Die Zones-Administration ist für User mit der Rolle &quot;Developer&quot; zugänglich. Für Autoren und Content Manager kann der Zugriff darauf gesperrt werden.

Jeder Zone kann ein Template zugewiesen werden. Über ein Menü im Backend kann man neue Zones definieren. Der normale User auf Editor-Level, der schnell eine Seite aufbauen oder ändern will, wird aber damit nicht konfrontiert werden, denn auch in diesen Bereichen ist die Bedienung intuitiv möglich.

Es sind die Widgets, die den verschiedenen Zones Leben einhauchen: Mit den Widgets sind Editorfunktionen wie Texteingabe/Textänderung oder Videoeinbettung realisiert. Damit kann ImpressPages von Developern nahezu beliebig erweitert werden.

ImpressPages eignet sich nicht für…

Mit ImpressPages gelingt das Aufsetzen einer eigenen Website genau so schnell wie mit WordPress. Vergleichbar ist auch die Zeit, die man für die Installation und die Einarbeitung brauchen wird. Das System loggt alle wesentlichen Aktivitäten mit und legt auch einen Cache an, um Seitenzugriffe zu beschleunigen.

Eher ungeeignet erscheint ImpressPages für sehr große, portalartige Seiten, an denen viele Beteiligte mit unterschiedlichen Funktionen und Berechtigungen mitarbeiten. In solchen Szenarien muss man an Möglichkeiten wie Workflowmanagement vorsehen, die mit ImpressPages noch nicht praxistauglich möglich sind.

Voraussetzungen für den Einsatz von ImpressPages

ImpressPages setzt einen Webhosting-Provider voraus, der den Apache-Webserver einsetzt und PHP in der Version 5.3 sowie MySQL 5 unterstützt. Die mod-rewrite-Funktion sollte zugelassen sein. Die PHP-Bibliotheken GDLib, PDO, mbstring und curl müssen vorfügbar sein. ImpressPages benötigt etwa 30 MB des Webspace.

Ausblick

Für die Zukunft wird ImpressPages das Thema mobile Nutzung und Responsives Design aufnehmen müssen. Konkurrenzsysteme wie Joomla! oder WordPress sind hier wesentlich weiter. Da aber ImpressPages wesentlich schlanker ist als die Konkurrenten, könnte man sich sogar Apps für Smartphones und Tablets von ImpressPages vorstellen, mit denen nicht auch die Contenterstellung möglich ist.