Das Theme gleich anschauen
Das Theme im online-shop

Ende letzten Jahres habe ich auf jukemedia.de einen webshop eröffnet in welchem ich Contao-Themes zum Kauf anbiete. Nach einer ersten Anlaufphase geht es nun mit mit noch mehr themes weiter.

Bei dem neu eingestellten Theme ist an prominenter Stelle Platz für ein aussagekräftiges Bild, welches man mit einem Hingucker-Text und Link zum Weiterlesen bestücken kann. Das Theme ist zwar fix mit 960 Pixel, aber weil man das Bild auch gut gegen einen Contentslider austauschen kann, hielt ich eine fixe Breite für sinnvoller, denn: nicht jeder Slider kann sich auf flexible Breiten einstellen.

Weiterhin arbeitet das theme mit der contao-eigenen Möglichkeit das Framework in der zentralen Seitenvorlage fe_page um ein eigenen Layoutbereich zu erweitern. Das hat mehrere Gründe. Zum einen wird im theme eine Pulldown-Hauptnavigation mitgeliefert, die 3 Ebenen darstellen kann. Damit jedoch die ausklappbaren Untermenüebenen immer über dem zentralen Bild liegen, ist das Design stabiler, wenn der z-index von #header immer größer gewählt werden kann als das im eigenen Layoutbereich #subheader liegende Bild. Darüberhinaus kann #subheader – wie auf der Starsteite zu sehen – nicht nur mit einem Bild, sondern auch mit weiteren Inhaltselementen (hier: Spalten mit Links zum Weiterlesen) bestückt werden.

Klingt erstmal kompliziert, ist es aber im Grunde nicht und außerdem gibt’s zum theme wieder eine mehrseitige Anleitung so dass auch Newbies damit zurechtkommen sollten.
Im Fußbereich sind die Inhalte wieder via Spaltenset eingefügt.

Wer schon einmal mit Contao Benutzerrechte für eine Gruppe vergeben hat weiß, dass es die ellenlange Liste der Checkboxen in sich hat.
Nicht immer gelingt es auf Anhieb zu wissen, welches Funktion, deren Bearbeitungsrechte man entziehen möchte, gemeint ist. Und weil das so ist, führt oft kein Weg daran vorbei sich umständlich im Backend das entsprechende Element aufzurufen und nachzuschauen.
Passiert das bei einer Installation 4-6 Mal ist das nicht nur nervig sondern auch zeitaufwändig. Also hat sich Yanick Witschi von certo-net.ch gesagt: das ändere ich. Gesagt ist inzwischen getan und das Extension Repository um eine neue Erweiterung reicher. Und weil alle Erweiterungen von Yanick mit easy beginnen, heißt diese “easy_exclude“.

Wenn easy_exclude installiert ist, muss man nur noch die Benutzergruppe, deren Rechte man einstellen will, anlegen. Dann kann man z.B. in die Artikel gehen und sieht rechts oben eine neue Selectbox. Aus dieser wählt man die Benutzergruppe aus und hakt dann die Elemente, die die Mitglieder der Benutzergruppe nicht bearbeiten sollen, via checkbox einfach ab. Und schon ist das fertig.

Links

easy_exclude im Contao-Erweiterungskatalog
Video-Tutorial von Yanick

Links in Navigationsmodulen sollten idealerweise maximal 1-2 Wörter enthalten, die treffegnau beschreiben welcher Inhalt zu erwarten ist. In den meisten Fällen klappt das auch ganz gut, wenn es sich jedoch um erkärungsbedürftige Leistungen oder Produkte handelt, möchte man dem Benutzer mehr Hinweise geben. Basierend auf dem Blogartikel von Thomas Weitzel gibt es nun eine kleine aber feine Weiterentwicklung, die Tooltipps auch für Contao Navigationsmodule ermöglicht.

Eine Beispielinstallation, Download und eine Anleitung zum Nachbauen, habe ich auf meiner Contao-Spielwiese bereitgestellt.

Als Fortsetzung meiner kostenlosen themes für Contao habe ich für die im Core miteglieferte Inhaltsstruktur von music-academy ein neues Design erstellt. Es heißt schlicht und ergreifend Music-Acamdemy-003 und lässt sich wie die beiden ersten themes ebenso einfach installieren.

Runde Ecken, Farbverlauf und Schatten habe ich mit CSS3 realisiert, was jedoch etwas Pech für den InternetExplorer bedeutet, denn der unterstützt diese features bis einschließlich der Version 8 leider nicht. Mit einigen workarounds und den MS Filtern könnte man hier gewiss das eine oder andere simulieren. Ich bin jedoch der Ansicht, dass das Layout auch mit eckigen Kanten noch ganz passabel ausschaut und habe daher darauf verzichtet.

Demo, Download und Intallationshinweise jukemedia-music-academy 003

Contao ist multidomainfähig. Das ist praktisch, wenn man eine mehrsprachige Webseite aufsetzen möchte, denn man kann mit Contao alles in einer Installation pflegen. In der Seitenstruktur legt man pro Sprache mit ==> Seitentyp ==>Startpunkt einer neuen Webseite einen Seitenbaum an und kann dann in den Einstellungen zu dieser Seite (blaue Kugel, Bearbeiten Symbol) unter DNS z.B. für den englischen Sprachraum eine .com Domain einrichten.

Hört sich ganz einfach an, ist es im Grunde auch, berücksichtigen sollte man aber, dass sich die Übersetzung einer Seite meist nie nur allein auf die geschriebenen Artikel bezieht. Wenn man z.B. mit der deutschen Seite begonnen hat, gibt es neben der Navigation meist noch andere Module, in denen deutsche Sätze vorhanden sind und die ebenfalls übersetzt werden müssen.
Das ist an sich kein Problem, etwas unübersichtlich kann jedoch das Backend werden, wenn man in einem zweiten Schritt die in Deutsch angelegten Layouts für die jeweilige Sprache klont um anschließend an entsprechender Stelle die andersprachigen Module einzubauen.

Hat man z.B. eine 4-sprachige Webseite und für die deutsche Version schon 5-6 Layouts angelegt würden sich nach Adam Riese 4 x 6 = 24 Seitenlayouts ergeben. Werden später Module an eine andere Stelle verschoben, so summiert sich der Arbeitsaufwand gleich 4-fach, weil man diese Änderung synchron auch für die Webseiten in anderen Sprachen wiederholen muss.
Sinnvoller, so meine Überlegung, wäre es daher, wenn man umgekehrt denkt und nicht fragt welches Seitenlayout welche Module einbindet, sondern welches Modul auf welcher Seite erscheinen soll.
Um Seitenlayouts und unnötigerweise doppelt und dreifach geklonte Module einzusparen, bin ich auf Entdeckungsreise gegangen und habe Erstaunliches gefunden.

Keine doppelten Navigationsmodule mit der Erweiterung “changelanguage”

Beginnen wir mit dem meiner Meinung nach wichtigsten Erweiterung, das von Andreas Schempp entwickelte “changelanguage”.
http://www.contao.org/erweiterungsliste/view/changelanguage.10000009.de.html

Einmal installiert, legt man die Hauptdomain (z.B. im Seitenbaum den deutschen Startpunkt einer Webseite) fest und bestimmt, dass diese in Deutsch verfasste Seite die Fallbackseite ist. Das heißt: Wenn z.B. ein Browser mit der Länderkennung “Italien” oder vereinfacht ausgedrückt: wenn ein Italiener meine Seiten betritt und eine italienische Version nicht vorhanden ist, dann wird die deutsche Seite angezeigt.
Wenn ich hingegen eine zweisprachige Webseite mit einem deutschen und einem englischen Seitenbaum habe, dann wird die englische Seite angezeigt, wenn in der englischen Seitenstruktur in den Seiteneinstellungen bei “Sprache” das Länderkürzel “en” eingetragen wurde.

Das Schöne an dieser Erweiterung ist, dass zur Sprache der Hauptdomain (z.B. Deutsch) auf jeder Seite anklickbare Flaggen oder Links erscheinen für die weiteren verfügbaren Sprachen (z.B. Englisch, Französisch, Russisch) erscheinen und die Seite quasi “simultan” übersetzt wird.

Um die Erstellung eines andersprachigen Navigationsmenüs muss man sich nicht kümmern. Es müssen für die jeweils anderen Sprachen keine zusätzlichen Module in den anderen Sprachen angelegt werden. Im Seitenbaum der anderen Sprache erscheint nach Installation von changelanguage oben rechts ein neues Auswahlmenü mit der Überschrift “Fallback-Seite”. Befindet man sich beispielsweise im englischen Seitenbaum auf einer Seite namens “About us” würde man als Fallbacksseite im deutschen Seitenbaum dieser Seite die Seite “Über uns” zuordnen.

Und, was ich zunächst auch übersehen hatte: es ist an alles gedacht, denn es kann ja durchaus vorkommen, dass man einem englischen Publikum etwas anderes sagen möchte als einem deutschen und im englischen Seitenbaum mehr Seiten angelegt hat. In diesem Fall würde es keine Fallbackseite geben. In Quelltext geschaut erkennt man, dass dann der Link eine Klasse “nofallback” hat. Via CSS und display: none, kann man dann erreichen, dass auf Seiten, zu denen es keine Fallbackseite gibt die Flagge für die Übersetzung nicht erscheint.

Was jedoch noch offen ist, ist der umgekehrte Fall: in der Hauptsprache ist eine Seite vorhanden, die im es anderssprachigen Seitenbaum nicht gibt. Hier wäre es vielleicht eine Anregung die Erweiterung mit der Möglichkeit der Einrichtung einer Weiterleitungsseite auszustatten auf der man dann z.B. eintragen könnte: “this site is not available in english” … oder so.

Module und damit Layouts einsparen mit Insert-Tags

Die kleinen und fast unscheinbare Codeschnippsel der Inserttags sollte man nicht unterschätzen, denn sie haben es in sich. Mit Ihnen kann man allerlei anstellen, wer sie noch nicht kennen sollte, dem sei ein Blick in folgende Liste empfohlen: http://www.contao.org/inserttags.html

Und was kann man jetzt davon in mehrsprachigen Webseiten einsetzen?
Ein Fallbeispiel: Im deutschen Seitenbaum wurde ein Modul vom Typ “Eigener Code” erstellt und darin folgende Zeilen eingetragen:

“Bei Fragen und Problemen besuchen Sie doch einfach mal die freundliche Contao-Community. Hier werden Sie geholfen

Für die englische Ausgabe der Seite soll der Text wie folgt lauten:

“If you have any questions, don’t hesitate to visit the friendly Contao-community. Contao-community.org“

Nun könnte man eine Lösung sozusagen “zu Fuß” konstruieren, ein geklontes Layout anlegen und statt des deutschsprachigen Moduls an entsprechender Stelle das englischsprachige einsetzen.
Eleganter geht es aber mit dem Inserttag “iflng“. Angenommen das deutschsprachige Modul hätte die ID 10 und das englischsprachige Modul die ID12, legt man einfach ein weiteres Modul vom Typ “eigener Code” an und fügt folgende Zeilen ein

{{iflng::de}} {{insert_module::10}} {{iflng}} {{iflng::en}} {{insert_module::12}} {{iflng}}

Beweise gefällig? OK.
Hier erscheint das englische Modul
http://www.erweiterungen.jukemedia.de/index.php/home.html
und hier das deutsche
http://www.erweiterungen.jukemedia.de/index.php/inserttag-iflng.html

Beiden Seiten ist ein und das gleiche Seitenlayout zugeordnet.
Man kann das Ganze natürlich auch noch schlanker realisieren indem man nur ein Modul (Typ: Eigener Code) anlegt und Folgendes einträgt.

{iflng::de}}Bei Fragen und Problemen besuchen Sie doch einfach mal die freundliche Contao-Community. Hier werden Sie geholfen contao-community.de{{iflng}}
{{iflng::en}}If you have any questions, don't hesitate to visit the friendly Contao-community. contao-community.org{{iflng}}

Layouts sparen mit der Contentbox

Eine Webseite lebt nicht nur vom Design allein und auch nicht nur von der Technik. Um einen Besucher für sich zu gewinnen ist es – wie im richtigen Leben oft auch – eine Frage wie man Menschen anspricht, wie heißt es doch so schön: der Ton macht die Musik. Sehr beliebt sind daher die auf vielen Webseiten zu sehenden bedeutungsschwangeren Zitate bekannter Menschen, die eine gewisse Stimmung erzeugen und die – meiner Meinung nach – nur leider  zu oft und zu leichtsinnig verwendet werden, denn auch Zitate und Aphorismen unterliegen dem Urheberrecht, aber das ist eine andere Baustelle.

Nehmen wir mal an, wir haben eine Webseite mit mehreren Zitaten von unser aller Freund Goethe.

Startseite-de

Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen

Startseite-en

Even the stones that have been placed in one’s path can be made into something beautiful.

Produkte-de

Mit dem Wissen wächst der Zweifel.

Produkte-en

With konwledge doubt increases.

Nun könnte man sicherlich auch diese Zitate mit inserttags sprachabhängig anzeigen lassen, wenn jedoch zum Beispiel auf jeder zweiten Seite einer Installation ein anderes Zitat erscheinen soll, würde ich eher dazu tendieren die Erweiterung ContentBox von Christian Wenzel und Markus Mikereit | computino.de einzusetzen.

Am besten man beginnt nach der Installation zuerst damit ein Modul für die später zu erstellenden Contentboxen anzulegen. Dazu wie üblich ==>Module anklicken und ein Modul vom Typ  ==>Contentbox erstellen (zu finden unter “Verschiedenes”) und festlegen in welchem Layoutbereich das Modul angezeigt werden soll.

Wie man nach der Installation der Erweiterung unschwer erkennen kann, ist im Backend die Seitenleiste um einen Navigationspunkt reicher geworden. Klickt man auf den neuen Link “contentbox” kann man im weiteren Verlauf für jedes Zitat eine solche Box erstellen.

Die Verfahrensweise ist denkbar einfach: im Textfeld kann man das Zitat einfügen und anschließend in der Seitenbaum die Seiten auswählen, auf der das Zitat erscheinen soll. Im Auswahlfeld “Anzeigen in Modul” ist das zuvor erstellte Modul “Zitate” sichtbar und wird durch Klick der contentbox zugeordnet. In der Seitenvorlage muss man nun nur noch an geeigneter Stelle das Modul “zitate” unter “eigebundene Module” platzieren und der Fisch ist geputzt. Etwas tricky kann es werden wenn man z.B. im Laufe der Bearbeitung einer Webseite zunächst nur ein Zitat für alle Seiten eingefügt hat und erst später weitere Zitate einarbeitet. Dann darf man natürlich nicht vergessen die Haken beim ersten Zitat an entsprechender Stelle wieder herauszunehmen.

Layouts und Module sparen mit der Erweiterung z_modulealias

Ja, das Contao ER (extension repository) birgt so manche Schätze, die nur drauf warten gehoben zu werden. Dank Yanick von certo-net fand ich die von Webentwickler Andreas Schempp | iserv.ch schon vor längerer Zeit erstellte Erweiterung z_modulealias, mit der man ebenfalls den umgekehrten Weg beschreiten kann. Nicht dem Layout die Module zuordnen, sondern festlegen welche auf welchen Seiten erscheinen sollen.
Nach der Installation sind alle Module unter den Experten Einstellungen mit der zusätzlichen Auswahlliste “verknüpfte Seiten” ausgestattet.

Klick darauf öffnet den Seitenbaum aus welchem man dann ganz einfach die Seiten auswählt, auf denen das Modul erscheinen soll.

Netzwerken. Für mich manchmal ein Reizthema, denn egal ob Xing oder FB oder sonst wo – auf “ich möchte dein Freund” sein kann ich allergisch reagieren, wenn es dabei nur um eine verdeckte Kaltakquise geht. Die Menschen, mit denen ich netzwerke, möchte ich kennen. Natürlich geht das nicht bei jedem persönlich, aber mal was zusammen gearbeitet zu haben, sich vielleicht mal hier und da gegenseitig geholfen zu haben und ein Draht zueinander, so viel muss schon sein.

Von daher habe ich nicht so arg viele Netzwerkpartner, was u.U. auch daran liegen mag, dass ich eher ein Typ bin, den man ansprechen muss . Umgekehrt tut sich da nur in Ausnahmefällen was. Von einem, den ich gerne zu meinen Netzwerkpartnern zähle, möchte ich aber heute mal berichten und der Abwechslung halber in diesem Blog ein kleines Interview veröffentlichen. Die Rede ist von Thomas Weitzel, Webdesigner aus Stuttgart – www.weitzeldesign.com der hilfsbereit und stets freundlich im Contao-Forum zugegen ist und der mir in meinen Anfängen als auch heute noch schon so manch guten Tipp gegeben hat.

Meine erste Frage an dich Thomas.
Wann hast du Contao entdeckt, mit welchen Systemen hast du vorher gearbeitet und was hat dich bewogen dich näher mit Contao zu beschäftigen?

Hallo Jutta,
vielen Dank für die Einladung zu diesem Interview.
Ich habe Contao entdeckt, also es noch TYPOlight hieß. Das war im Herbst 2006, als ich wieder mal nach einer Phase von Test-Installationen verschiedenster OpenSource CM-Systeme, auf TYPOlight aufmerksam gemacht wurde. Zuvor hatte ich eine Zeit lang mit phpWCMS gearbeitet.
Neben dem visuellen Eindruck, den die damalige Website und das Backend des Systems machten, war die durchgängige und konsequente Bedienung überzeugend. Besonders die Möglichkeiten der granularen Rechtevergabe, schon in der damaligen Version TYPOlight 2.x integriert, war für mich eine “Befreiung” und ein Schritt weiter. Somit konnte man nicht nur selbst für Kunden die Inhalte der Website pflegen, sondern nun auch Kunden direkt mit dem System arbeiten lassen.
Weiterhin war für mich ausschlaggebend, dass die eingebrachten Vorschläge zur Verbesserung und Optimierung des CMS Anklang beim Entwickler fanden – und auch heute weiterhin finden.Zudem war sehr schnell klar: Hier musst du dich nicht ewig mit dem Bedienen des Systems beschäftigen, dafür aber um so mehr mit CSS, um zu guten Ergebnissen zu kommen. Der Abschied der Layouttabellen war eingeläutet…

Ja, Contao hat viele Vorteile und da du schon über 4 Jahre dabei bist, konntest du die rasante Entwicklung mit verfolgen. Wie sieht es heute bei dir mit der Erstellung von Webseiten aus? Hat sich deine Arbeitsweise durch Contao verändert?

Ja, die Arbeitsweise hat sich verändert. Besser gesagt in vielen Bereichen vereinfacht. Nicht, dass man sich nun etwas zusammen klickt, aber es bleibt aufgrund eines soliden Fundaments durch Contao mehr Zeit für Konzeption und Gestaltung. Auch durch die wachsende Anzahl an zusätzlichen Erweiterungen – Dank engagierten Entwicklern von Erweiterungen – lässt sich das CMS Contao an viele Bedürfnisse anpassen.

Ein Beispiel: Durch die konsequenten Vorgaben von CSS-IDs und -Klassen für Inhaltselemente und Module sind diese im Laufe der Zeit geläufig und die Umsetzung von Designs gelingt zügig.
Hat man das Grundprinzip von Contao verstanden, stehen viele Möglichkeiten einer erfolgreichen Umsetzung einer Website zur Verfügung.

Dass man erleichtert mehr Zeit hat sich um Konzept und Gestaltung zu kümmern und entspannter an die Umsetzung einer Seite herangehen kann, kann ich nur bestätigen. Dennoch: Jeder Weg beginnt mit einem ersten Schritt. Wie siehst du den Einstieg oder Umstieg auf Contao? Wie sollte jemand, der noch nicht mit dem System gearbeitet hat, am besten an die Sache ran gehen?

Prinzipiell: Geduld und Zeit mitbringen. Auch wenn man Contao entdeckt und gleich loslegen möchte, kann ich jedem den Tipp geben: Ausprobieren und lesen, lesen, lesen. Sei es im Forum mit vielen hilfreichen Köpfen, sei es die Online-Dokumentation oder die nun doch zahlreich erschienenen Bücher und Videos zu Contao.

Jeder hat eine andere Art und Weise, Neues aufzunehmen und zu lernen. Auch wenn man – wie ich zuvor – mit einem anderen CMS gearbeitet hat, ist die Lernkurve deswegen nicht zwingend flach.
Wichtig ist, sich mit den Methoden von Contao zu beschäftigen: Wie baut man ein Seitenlayout auf, was sind Module, was Erweiterungen. Dann bekommt man ein Gefühl und das notwendige Wissen, wie die Dinge zu “verdrahten” sind.
Seit der Einführung der Themes mit Contao 2.9 kann man sich auch eines der freien Themes installieren und anhand dieser den Aufbau studieren – oder die Beispiel-Installation mit dem Theme Music Academy.
Und man wird im Laufe der Zeit sicher noch das eine oder andere Highlight in Contao entdecken, mit dem das Erstellen und Bearbeiten von Websites einfacher und effizienter von der Hand geht.

Weil ich seinerzeit einfach ins kalte Wasser gesprungen bin und schon einen Auftrag hatte, aber das System noch nicht kannte, kann ich an dieser Stelle auch empfehlen, eine Investition in Form von einer bezahlten Schulung zu tätigen. Für mich war das vor 2 Jahren ein Turbo-Einstieg und Ausgaben, die sich bezahlt gemacht haben.
Thomas, wenn du Kunden am System schulst, wie gehst du dabei vor? Wo fängst du an und auf was legst du besonderen Wert?

Zunächst interessiert mich die Motivation und der Hintergrund einer Person, die eine Schulung wünscht. Bei Kunden, die im Rahmen eines Webprojektes eine Schulung buchen, liegt der Schwerpunkt in der Regel auf einer Schulung für Redakteure. Bei Personen, die Contao selbst administrieren möchten, greifen die Themen entsprechend detaillierter und tiefer.
Die Basis ist in der Regel ein kurzer Überblick über Contao, die Geschichte des CMS, die möglichen “Anlaufstellen” für Fragen wie das Forum oder das Wiki. Also eine Orientierung, wo man eigenständig Hilfe und Unterstützung finden kann – auch nach einer Schulung.

Je nach Hintergrundwissen und Erfahrung mit dem Medium Internet beginnt der Inhalt dann mit den Voraussetzungen, um Contao zu installieren – u.a. auch der geeigneten Hosterwahl.
Oft empfehle ich auch anhand eines konkreten Projektes eine Schulung, wo dann die Umsetzung eines Layouts in Contao anhand des Designs besprochen und umgesetzt wird. Hieraus ergeben sich dann in der Regel viele kleine, aber entscheidende Fragen, die bei einer erfolgreichen Umsetzung bedacht und berücksichtigt werden müssen.

Wie setze ich das Design / Layout nun um? Wie “zerlege”ich die Elemente in “Contao-Häppchen”?
Für welche Funktion benötige ich welches Modul und was muss ich dabei beachten?
Wichtig finde ich, dass die Atmosphäre stimmt und man sich auf die Person / Personen voll und konzentriert einlässt, und dass die Schulungsteilnehmer Zeit haben, sich mit Contao auseinander zu setzen und direkt Rückfragen stellen können. Je nach Anforderung und Hintergrundwissen der Person / Personen, versuche ich die Schulungen in mehrere Teile aufzuteilen. Meist “raucht” nach 4 intensiven Stunden der Kopf…

Ergänzt wird eine Schulung durch praxisnahe Tipps, seien es Empfehlungen für sinnvolle AddOns für den Firefox-Browser zur Entwicklung von Websites, Tipps zur Optimierung des Workflows sowie Checklisten, um wesentliche Punkte vor der Veröffentlichung einer Website zu kontrollieren.

Jeder hat ein Nähkästchen. Vielleicht magst du uns mit der Antwort auf die nächste Frage mal in deines schauen lassen. Wenn interessierte Kunden zu dir kommen und eine Webseite anfragen, was ist deiner Erfahrung nach das, was den meisten am wichtigsten ist?

Damit aus Anfragen Projekte und somit Kunden werden, kann ich aus langjähriger Erfahrung sagen, dass für ein erfolgreiches Projekt ein solides Konzept ein guter Start ist.
Anfragen lassen sich – meist – unterscheiden, ob eine intensivere Zusammenarbeit und ein gemeinsames Erarbeiten einer stimmigen Internetpräsenz die Ziele sind, oder ob es schlicht um Vergleichsangebote geht, und damit letztendlich der Preis für den Anfragenden entscheidend ist.

Je nachdem, wie sorgfältig eine Anfrage vorab recherchiert wurde, ist diese entsprechend schon präzise formuliert und im besten Fall besteht ein Pflichtenheft für die gewünschte Umsetzung.
Am wichtigsten sind in der Regel Budget- und Zeitrahmen für die Umsetzung sowie der Wunsch, später alles selbst machen zu können. In der Praxis hat sich gezeigt, dass gerade der letzte Punkt, die Website eigenständig zu pflegen, an Zeit- oder Wissensmangel vernachlässigt oder dann beauftragt wird. Je nach Firmengröße und Projektumfang sind am Anfang einer möglichen Zusammenarbeit auch Fragen nach dem beruflichen Hintergrund, dem Fachwissen – also den nachweisbaren Kompetenzen gefragt.

Eine Webseite ist ein Medium, welches viele Möglichkeiten bietet Informationen optimal zu präsentieren. Welche Rolle spielt deiner Meinung nach das Design?

“Man kann nicht nicht kommunizieren!” (Paul Watzlawick)

Wenn man sich dieser Tatsache bewusst ist, dann ist Design für die Wahrnehmung von Inhalten auf einer Website maßgeblich. Der Begriff des Design ist in Relation zum aktiven Umfeld zu definieren. Für viele ist das Design die Optik, das visuelle Erscheinungsbild, also auch dem Geschmack und dem gelernten Sehen und Bewerten des Betrachters unterworfen.
Meines Erachtens greift Design wesentlich weiter.

Es gibt neben dem visuellen Erscheinungsbild Orientierung und vermittelt auch nonverbale Aspekte der Wahrnehmung und damit einer Akzeptanz beim Betrachter / Besucher einer Website.
Design bedeutet im besten Fall nicht nur Form, Farben und Proportionen, sondern gleichfalls auch Struktur und Orientierung. Es transportiert eine Haltung. Design sollte aus dem “Inneren” entstehen.
Wie schaffe ich es, Aufmerksamkeit zu erzeugen, ohne mit “Blaskapellen” und “flimmerndem Gezappel” den Benutzer auf Inhalte aufmerksam zu machen?
Design muss zum Unternehmen passen. Und umgekehrt.

Man erkennt, ob ein Design passend gemacht wurde oder ob das, was gezeigt und präsentiert wird, eine Entwicklung hatte – und hat.
Folgt das Design einer Haltung, dann wird man nicht Trends hinterher jagen müssen und das Design muss nicht als “Lückenbüßer” für ein mangelndes Konzept herhalten. Oder ein nicht vorhandenes oder schlecht umgesetztes kaschieren.

Letztendlich ist es, so würde ich es nennen, die Idee dessen, was ein Unternehmen kommunizieren möchte und wie man im Webdesign auch nonverbale Kanäle nutzt um über das Kognitive hinaus den Besuchern auch auf der Gefühlsebene Signale zu schicken. Manche Kunden wissen sehr zielstrebig wie Sie sich präsentieren möchten, anderen muss man helfen und erst noch eine Idee finden oder eine Idee entwickeln. Was tust du, wenn du mal keinen Aufhänger hast, wenn dir so gar nichts einfallen will und die Idee fehlt. Wie findest du trotz Zeitdruck trotzdem ein stimmiges Design?

Abschalten, etwas anderes machen. Den Gedanken wieder mehr Raum geben – auch dann, wenn es gefühlt genau das Verkehrte zu sein scheint.
Es ist wie mit der Fotografie: Zu nah dran ermöglicht keinen Fokus mehr.

Oft gibt das Thema, das Produkt oder eine Dienstleistung schon eine Richtung vor, so dass ich dann gerne Assoziationen dazu bilde – auf sprachlicher Ebene. Stichworte aufschreiben, die einem zum Thema einfallen. Und nicht bewerten, nur notieren. Die Bewertung folgt später. Auch eine Einschränkung der Möglichkeiten – das Setzen von Rahmenbedingungen – gibt neue Ansätze für eine Umsetzung frei.
Und wenn ein Designkonzept einmal den geplanten Zeitrahmen sprengt, dann kommuniziert man dies klar und direkt. Gestaltungsprozesse kann man steuern und planen, aber sollte sie nie erzwingen wollen. Nicht zuletzt hängt der Erfolg eines Designentwurfs auch vom Kunden ab; der offen ist für Gestaltungsvorschläge, der sich mit seinem Feedback konstruktiv einbringt und sich zu einem guten, gemeinsamen Ergebnis aktiv mit einbringt.

Es gäbe sicherlich noch eine Reihe von löchernden Fragen, die man hier stellen könnte. Ich meine jedoch die wesentlichsten Punkte angestubbst zu haben und würde die Kommentarfunktion einfach mal offen lassen für diejenigen, die vielleicht nochmal tiefer nachhaken möchten.
Ich danke dir, lieber Thomas, für deine Auskunftsbereitschaft, die informativen Antworten und überhaupt, dass du hier mitgemacht hast.

—
foto: istockphoto.com

Um es vorneweg zu sagen: irgendwie komme ich gar nicht mehr dazu hier nochmal einen längeren Artikel zu schreiben, es sind eben doch richtige Zeitfresser. Ich bin aber noch da und nach wie vor engagiert in Sachen Webdesign. Deswegen heute einfach mal was Kürzeres.

Ich habe nicht mehr viele Webseiten mit einem fluiden Layout aber bei einer Kundeninstallation war noch eines vorhanden. Und genau bei dieser Webseite hatte ich nach ca. 2,5 Jahren die bis dahin in Eigenregie gepflegte Webseite upzudaten und auf Vordermann zu bringen. Solche Arbeiten mache ich auch sehr gerne, vor allem wenn sich viel “Staub” ;-) angesammelt hat. Da kommt die Hausfrau in mir raus. Ist doch schön, wenn alles wieder blitzblank geputzt ist. Aber nun will ich nich weiter um den heißen Brei herumreden.

In besagter Webseite ist die Contao-Core eigene Galerie eingebaut und wie man weiß, benutzt sie zur Darstellung der Bilder eine Tabelle. Punkt. In einem Layout jedoch, was sich der Breite des Viewports anpasst ist eine Tabelle nicht die beste Lösung, weshalb ich mich auf die Suche nach einer listenbasierten Alternative gemacht hatte und leider nicht fündig geworden war. Also hieß es Ärmel hochkrempeln und das Template selber umbauen.

Ganz ohne Hilfe habe ich das nicht geschafft, aber im Forum gab es tatkräftige Unterstützung.
Das Ergebnis unserer Arbeit habe ich auf meiner Spielwiese erweiterungen.jukemedia.de ausführlich beschrieben.

Wer mag kann ja mal reinschauen oder sich auch den thread im Forum durchlesen.
Eine gute Beschreibung findet sich auch bei Thomas Weitzel | think-contao.de

Wer selbständig ist braucht sie, wer Unternehmer ist, braucht sie und wer Freiberufler ist, braucht auch. Sie besteht im einfachsten Fall aus 3 Teilen und wenn es etwas mehr sein darf auch aus 4 oder 5. Manchmal ist sie bunt, manchmal edel, manchmal funky und immer mehr oder weniger kreativ.

Von wem hier die Rede ist? Nein, hier ist nicht die Rede von der Kaffeemaschine, sondern von der Geschäftsaustattung. Erstellt vom Grafiker des Vertrauens und ehrlich, ich mag Print. Seit der Erfindung des Internets hat sich jedoch noch ein weiteres Medium dazu gesellt und das so erfolgreich, dass man sich die Webseite als schon gar nicht mehr wegdenken kann.

Und so passiert es nicht selten, dass Kunden, die bei einem Grafiker eine Geschäftsausstattung in Auftrag gegeben haben, auch für Erstellung einer Webseite angefragt werden. Nun hat zwar fast jeder Grafikmensch gute Ideen und Ansätze für die Gestaltung einer Webseite, aber die Umsetzung ist doch für einige? viele? ein Buch mit sieben Siegeln.

Mache ich das auch richtig? Kann ein Webdesigner überhaupt was damit anfangen? Lässt sich das in eine Webseite umsetzen? Ohne Praxiserfahrung kann ich gut verstehen, dass so manch eine(r) respektvoll Abstand hält – aber ich sage: nur Mut, mit ein paar richtigen Inputs kannst auch du eine umsetzbare Webdesignvorlage erstellen und alles wird gut.

Und so wie ich bei größeren Drucksachen immer einen professionellen Grafiker ins Boot holen würde, so tun es auch Grafiker, die auch bei mir zuweilen nach einer Kooperation anfragen.
Aber gerne doch. Ich finde, dass so etwas befruchtend für beide Seiten sein kann und empfinde durchaus Freude an so einer Zusammenarbeit.
Und damit es etwas leichter wird, hier mal ein paar Tipps vorab, wie ihr an den Entwurf einer Webseite herangehen könnt.

Das Zauberwort heißt: Raster.

Es ist nicht auf jeder Webseite so, aber von meiner eigenen Arbeit weiß ich, dass Raster einem die Arbeit ungemein erleichtern können. Modelle dafür gibt es auch für Webseiten eine ganze Reihe, die besten Erfahrungen habe ich jedoch mit dem 960pixel.Grid gemacht.

Das 960-Pixel-Grid

Raster sind aus dem Printbereich bekannt und wenn es auch kritische Stimmen gibt, die einem Raster immer Einfallslosigkeit unterstellen, einen Grund warum sie im Print seit jeher angewendet werden, wird es bestimmt haben. Webseiten sollten zwar auch grafisch ansprechend gestaltet sein, aber über die Kunst des ersten Augenblicks hinaus ist die gute Erfassbarkeit der Inhalte auf den meisten Webseiten wichtiger, als die Zurschaustellung eines Designersahneschnittchens, preisgekrönt oder nicht.

Kürzere Zeilenlängen und das wohlproportionierte Aufteilen von Inhalten sind mit einem Raster wie 960 Pixel sehr gut möglich und von daher bin ich ein absoluter Fan von Rasterlayouts geworden.

960 Pixel ist die Breite des Bereiches, der später die Inhalte aufnimmt (#wrapper). Er sitzt mittig und lässt auch bei Monitorauflösungen von 1024px noch ausreichend Luft drumherum. Aber nicht nur das, denn 960 ist eine Zahl, die durch sehr viele andere teilbar ist : 2, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 und 480. Wenn man nun z.B: für ein 4-spaltiges Layout 960 durch 4 teilt, weiß man, dass jede Spalte 240Pixel breit ist. Daraus kann man sich dann im PS ein Raster anlegen und erhält – unter Einhaltung des Rasters – immer gute Proportionen.

960 Grid System
Auf der Seite befindet sich ein Downlaod Link, welcher zahlreiche Vorlagen für alle möglichen Anwendungen enthält als da wären: Illustrator (ai), Photoshop (psd), viso, indesign, coreldraw, omnigraffle, pdf und mehr.

Contao und 960-Pixel-Grid

Als Webdesignerin, bin ich – nach einigen Um- und Irrwegen – vor 2 Jahren bei Contao (fka Typolight) gelandet und ich kann sagen, dass dieses Framework-CMS optimal mit 960Pixel arbeiten kann. Deswegen sind auf diesem Raster erstellte Designvorlagen gut umzusetzen. Grafikdesigner, die das Prinzip des Rasters verstanden haben, müssen keine Angst mehr vor Kunden haben, die nach einer Webseite fragen. Halte dich an das Raster und die meisten Probleme gibt es dann nicht mehr.

Wie das Framework die Arbeit unterstützt

Das Content-Management-System Contao ist ein Framework und als ich seinerzeit begann mich mit dem System vertraut zu machen, musste ich auch erst einmal verstehen was das ist, denn Wordpress z.B. ist kein Framework. Wie der Name wörtlich übersetzt schon sagt: Framework = Rahmenwerk und dasheißt, dass das System einen stabilen Rahmen vorgibt, der das Erstellen von Webseiten einfach schneller und damit effizienter macht. Diesen Rahmen kann man im Administrationsbereich auf die gewünschte Breite einstellen, beim 960-Pixel-Grid würde man also 960 Pixel eingeben und die Option “zentriert” angeben. Und bevor jetzt ein Aufschrei kommt, man kann naürlich auch Breitenangaben in Prozent oder em machen – wer will ;-) und manchmal auch “wer kann”.

Layoutbereiche

Weiterhin gibt es feste Layoutbereiche als da wären:
- der Header (‘header) : beeinhaltet z.B. Hauptnavigation, kleine Nebennavigation, Logo, Adresse, Kundenlogin, Suchfunktion …
- der Container (#container) mit den drei Hauptspalten: links, rechts, Mitte (#left, #right, #main)
- der Fußbereich (#footer)

Auf einen Blick: die Contao-Grundlayouts

Von links nach rechts:
- Ohne Kopfzeile (header), ohne Fußzeile (footer), ohne Seitenspalten (left und right)
- Mit Kopf- und Fußzeile aber ohne Seitenspalten
- Mit Kopf- und Fußzeile und Seitenspalte links
- Mit Kopf- und Fußzeile und Seitenspalte rechts
- Mit Kopf- und Fußzeile und Seitenspalte rechts + links

Und dazwischen gibt es dann noch Variationen, die wahlweise eingestellt werden können wie z.B. mit Kopfzeile aber ohne Fußzeile, ohne Kopfzeile und ohne Fußzeile aber mit beiden Seitenspalten usw.

Eigene Layoutbereiche

Viele sagen ja, dass sie eigene Layoubereich noch nie gebraucht haben. Das kann ich für mich nicht bestätigen, ich mache oft davon Gebrauch und gehe manchmal sogar noch einen Schritt weiter. Eigene Layoutbereiche können ohne Änderung der zentralen Seitenvorlage angesiedelt werden:

- Nach dem Header
- Über der Hauptspalte
- Über der Fußzeile

Standardmäßig ist die Entscheidung wo eigene Layoutbereich positioniert werden sollen immer eine entweder – oder Entscheidung. Entweder ich positioniere unter der Kopfzeile oder über der Fußspalte oder in der Hauptspalte. Aber Contao wäre nicht Contao, wenn man nicht auch das ändern könnte. Über Änderungen am Code der zentralen Seitenvorlage kann man auch ein sowohl unter der Kopfzeile als auch über der Fußzeile erstellen – in welcher Kombination auch immer, es geht.

Exoten

Etwas CSS-Erfahrung braucht es wenn man aus dem Framework ausbrechen und z.B. Seitenspalten bis an den oberen Rand der Kopfzeile hochziehen möchte. Aber das könnt ihr getrost demjenigen überlassen, der euer Design umsetzt – oder: css lernen und selber machen.

Und jetzt wieder Grid

Anhand der Bilder kann man sehen, dass ich bei den hier vogestellten Grundlayouts von 4 Spalten ausgegangen bin. Bei 960 Pixel ist der Abstand des Hauptrasters dann 240 Pixel und das kleinteiligere Raster entspricht 16 Spalten mit je 60 Pixeln. Du kannst aber ebensogut 960 durch 12, 15 oder 20 teilen und dir dein eigenes Raster schaffen. Über eine der pfiffigsten Erweiterungen, die es für Contao gibt (subcolumns), kann das Raster auch innerhalb des Textbereiches fortgesetzt werden, so dass man praktische und lesbare Text- oder Bildpäckchen bauen kann.

Beispiel:

Downloads

• Als erstes sei nochmal auf den Download bei 960-Grid-System hingewiesen. Der Download enthält einige Dateien, die ihr im Photoshop verwenden könnt.
• Eine weitere photoshop-Vorlage fand ich auf designified.com

So, dann hoffe ich, dass ich Grafikern, die bisher noch nicht oder nicht so gerne mit dem Web gearbeitet haben, ein paar Hilfestellungen geben konnte und vielleicht sogar ein bisschen Lust es mal auszuprobieren. Wenn man das Grid verstanden hat, kommt es nur noch auf deine Kreativität und deinem Gestaltungswillen an.

Have fun!

–

foto: istockphoto.com

Es begann vor ca. 3 Jahren hier in diesem Blog mit Designideen, die ich im Rahmen einer Weihnachtsaktion zum Besten gegeben habe. Dagmar und Michael Lalk, erfahrene Shopbetreiber aus Hamburg, wünschten sich ein moderneres Design und eine verbesserte Technik für ihre Internetshops. Und so kamen wir zusammen. Inzwischen sind wir ein eingespieltes Team bestehend aus den beiden Auftraggebern, Mathias Bank und meiner Wenigkeit. Mathias ist für die reibungslose Funktionalität und Suchmaschinenoptimierung seiner selbst entwickelten Shopsoftware zuständig und ich für das Design wobei wir beide in Sachen CSS-Umsetzung ähnlich stark sind, was in der Zusammenarbeit einfach Spaß macht. Jeder weiß genau von was der andere redet, kann Probleme erkennen, gemeinsam diskutieren wir über Alternativen und lernen ganz nebenbei immer noch etwas dazu.

Das Grundlayout ist bisher bei allen drei shops das gleiche, nur die Farbgebung und die Gestaltung ist immer wieder eine andere. Mit 1a-Diamantscheiben ist nun eine Blau-Variante hinzugekommen, die, wie ich finde, gut zum Inhalt passt.

Shop besuchen : 1a-Diamantscheiben.de

Es ist soweit. Vor ein paar Tagen hatte ich ja schon vom Contao free themes month berichtet. Ausgerufen wurde selbiger weil die neue Version von Contao (fka Typolight) nun auch einen Theme-Manager hat, mit welchem die Styles, Module, Templates, Bilder und Seitenvorlagen eines Designs exportiert und einfach in andere Installationen übertragen werden können. Viele haben genau darauf schon lange gewartet und damit das Austesten auch Spaß macht, aht eigentlich nur noch eines gefehlt: Themes nämlich ;-)

Aus diesem Grund habe auch ich mich entschlossen ein schon länger gehegtes Vorhaben endlich in die Tat umzusetzen und ein erstes, frei verfügbares Theme für Contao zu erstellen. Es basiert auf den Inhalten vom bekannten “Music Academy” Theme, welches ja im Download-Paket von Contao mitgeliefert wird. Jeder, der noch nie mit dem System gearbeitet hat, sollte Music Academy einfach mal installieren. Beim Durchlaufen der Installation ist das ja nur 1 Klick mehr und funktioniert in aller Regel ohne Probleme.

Aber nun zu meinem Theme, das insgesamt einfach gehalten ist damit auch Anfänger damit zurechtkommen. Es gibt jedoch auch eine zweite Version, bei der muss man allerdings ein paar Einstellungen vornehmen – nicht schwierig wie ich finde, aber wer noch nie mit dem System gearbeitet hat, sollte vielleicht erstmal die erste, einfachere Version benutzen.

Lange Rede, kurzer Sinn. Alles weitere erfahrt ihr im Contao Team Blog bzw. auf meiner Hauptseite:

Download: www.jukemedia.de/contao-free-templates.html
Demo:
music academy jukemedia 001
music academy jukemedia 002

Fragen, Anregungen, Huldigungen und Kritik bitte hier in diesem Blog.