Beiträge zum Thema "CMS"

125 WordPress-Templates für ein Redesign mit validen Tricks und zahlreichen Grafiken

19.08.2010 um 13:41 | Kommentare: 0

Was geschieht, wenn eine Agentur für “Integriertes Kommunikationsdesign” einen Website-Entwurf macht, ich diesen dann webgerecht umsetzen darf, um danach alles auf WordPress zum Laufen zu bringen? Man arbeitet länger als erwartet und darf sich ausgiebig üben in problemlösendes Denken. ;-) Gemeint ist hier das bereits zweite Redesign unseres Kunden Brinkmann_Dewert. Mein erstes Redesign war mittlerweile fast 7 Jahre alt und es bestand das Bedürfnis nach etwas ganz Neuem.

Zuerst habe ich den Layout-Entwurf webkompatibel gemacht. Er brauchte eine dauerhafte Hauptnavigation und einen Footer, die im ursprünglichen Entwurf nicht vorgesehen waren. Zudem galt es, den Entwurf schmaler anzulegen, damit er unter 1024 Pixeln ohne horizontales Scrollen sichtbar sei. Dazu musste ich das Layoutraster durchschauen und die Elemente und Abstände neu berechnen. Eine halbe Seite Additionen von Kästen, Buttons und Abständen standen da als Selbstbriefing geschrieben, bevor ich auch nur eine Klasse CSS schrieb. ;-) .

Die zweite Herausforderung: In den Buttons und Kästen sollte die neue Schrift des Logos erscheinen. So musste ich also einen Großteil der zahlreichen Layoutelemente als Grafiken anlegen. So entstanden fast 200 Grafiken allein für das Layout - die über 40 Fotos, die ich teilweise recherchiert und ausgewählt habe, nicht mitgezählt (die Portraits und Fotos auf der Startseite hat ein echter Profi gemacht). CSS-technisch galt es, diese Grafik-Armada geschickt in den Hintergrund zu verbannen und gleichzeitig möglichst viel Editierbares in WordPress zu belassen. Deutlich macht das die Seite der Mitarbeiter. Dort kann der WP-Admin die in Hover-Bereichen liegenden Daten der Mitarbeiter ändern, ohne ins Template zu müssen, das gleiche gilt für die fachbezogenen Team-Seiten, die übrigens eine sehr schöne und zugleich nützliche Navigationsidee aus dem Büro Rempen zeigen.

Wie man sich beim Durchklicken der Site wird denken können, gab es einige CSS-Lösungen zu finden, die auch noch vom IE 6 verstanden werden sollten. So sollte sich zum Beispiel die Box mit den Home- und Zurück-Buttons nicht nur unabhängig von den eingepflegten Inhalten der Seite immer schön rechts unten anordnen (gut zu sehen auf der Seite Fachgebiete),  sondern auch vertikal und bündig mitwachsen auf Seiten, die längere Texte haben. Das ging nicht ohne valide Tricks und einigen Conditional Comments, aber - wie alles im Layout - ohne Javascript.

Desweiteren war bei der WordPress-Integration darauf zu achten, die weit über 2500 rechtsrelevanten Artikel, die das fleissige Anwaltsteam seit 2003 gepostet hat, mit ins neue Layout zu übernehmen oder andersherum, die Layoutvorlage behutsam und stimmig zu erweitern und unter Aktuelles erreich- und navigierbar zu machen. Webdesigner, die alltäglich mit WordPress zu tun haben, werden sicher eine Ahnung davon bekommen, welche Aufgabe es im Hinblick auf die unterschiedlichen Contentbereiche war, das Search-Template in den Griff zu bekommen. :-)

Ich möchte mich an dieser Stelle herzlichst bei Heinz Klein bedanken, der sich für mich und segert.net stark gemacht hat bei der Vergabe des Auftrags. Zudem hat er mich bei der Arbeit mit zahlreichen Anregungen begleitet und fleissig und erfolgreich den Großteil der Inhalte eingeflegt. 

ExpressionEngine 2.0 Public Beta

03.12.2009 um 20:09 | Kommentare: 0

Wie meldete heute das Blog von ExpressionEngine erfreut: ExpressionEngine 2.0 Public Beta, Now Live! Und alle ExpressionEngine-Fans freuen sich mit, denn dieser Versionssprung des genialen Content Management Systems wurde lange und sehnsüchtig erwartet und genauso lange angekündigt. Nun können sich alle Interessierten an einer Public Beta des CMS, die 30 Tage freigeschaltet bleibt, versuchen. Die zahlreichen Neuerungen fasst die folgende Site zusammen: Welcome to the ExpressionEngine 2.0 Public Beta Program!.

ExpressionEngine: Argumente für Entscheider

15.07.2009 um 14:22 | Kommentare: 16

Der folgende Text spricht Entscheider an, die ein großes oder mehrere Webprojekte mit einem äusserst flexiblen, sehr sicherem und zugleich preisgünstigen Content Management System (in der Folge CMS) verwalten und pflegen wollen. Dazu möchte ich allgemeinverständlich und ohne technisches Kauderwelsch die Vorteile der Software ExpressionEngine auf den Punkt bringen.

Für die kostenpflichtigen Vollversionen von ExpressioEngine gibt es 2 Lizenzen. Die Lizenz für nicht-kommerzielle Sites kostet 99,95 Dollar, die Lizenz für kommerzielle Projekte beträgt 249,95 Dollar. Die Lizenzen sind zeitlich unbegrenzt gültig und berechtigen ein Jahr lang zu kostenfreien Updates. Eine Verlängerung der Update-Option kosten 39 Dollar im Jahr. Ein Vergleich der Lizenzen zeigt die Seite Pricing. Weiterführende Links:

Das Modul Bilder-Galerie in ExpressionEngine

20.06.2009 um 19:07 | Kommentare: 0

In den lizenzpflichtigen Versionen von ExpressionEngine ist ein Modul namens “Bilder-Galerie” enthalten. Das kann als vollwertiges Photoblog oder für Bilderarchive jeder Art eingesetzt werden. Ich habe es als Unterprojekt für unser ServiceBlog im Einsatz, um ausgewählte Serien von S/W-Fotos zu zeigen.

Menschen mit vielen Fotos werden sich über die Stapelverarbeitung freuen. Man lege seine Bilder nummeriert in ein - in den Einstellungen angegebenen - Verzeichnis. Zuvor bestimmt man Breite und Höhe der zu generierenden Thumbnails und bei Bedarf auch die Maße für mittelgroße Bilder. Danach startet man im Bereich “Stapel-Einträge” die Verarbeitung. Dabei wird jedes Bild in der Reihenfolge der Nummerierung (im Dateinamen einfach 01, 02 usw. eingeben) angezeigt, um den Titel anzupassen, eine Bildlegende zu formulieren oder zuvor selbstdefinierte Felder auszufüllen. So lassen sich in sehr kurzer Zeit komfortabel zahlreiche Fotoserien veröffentlichen.

Für unbedarfte User, die ihre Fotos direkt von der Digitalkamera auf den Server laden – Serverspace gibt es ja heutzutage nicht zu knapp, bietet das Modul “Bilder-Galerie” eine Bildbearbeitung namens “Toolbox”. Damit können große Fotos kleiner skaliert und sogar unter verschiedenen Seitenverhältnissen beschnitten werden. Auch Drehen lassen sich die Bilder nachträglich, falls welche auf dem Kopf stünden. ;) Zuguterletzt gibt man den Grad der Komprimierung an, um die Dateigröße zu variieren und schickt das Bild durch die Toolbox. Sie arbeitet, ohne zu murren. Es können wahlweise bereits veröffentlichte Bilder und die, die im Verzeichnis für die Stapelverabreitung liegen, bearbeitet werden.

image

Das mächtige Modul erlaubt indessen nicht nur die Verwaltung von zahlreichen Serien innerhalb einer Bildergalerie (Serien werden über Kategorien angelegt und verwaltet), die mit Hilfe der Templateverwaltung frei gestaltet werden kann. Es können auch mehrere Bildergalerien erstellt werden, so als würde man mehrere Weblogs betreiben. Das hat den Vorteil, dass man die zahlreichen Einstellungsmöglichkeiten für neue Galerien individuell anpassen kann. Sei es, um eine andere URL zu benutzen und kleinere Vorschaubilder zu definieren, sei es, um zusätzliche Felder zu bestimmen (z.B. für Tags oder SEO-Anforderungen) oder um ein komplett anderes Layout einzusetzen.

Für Fotoblogger ist zudem die Kommentarfunktion interessant, die auch abgestellt und mit Spamschutz via Captcha eingesetzt werden kann. Auch navigationstechnisch läßt das Modul kaum Wünsche offen. Die Fotoserien können auf einer Startseite mit Kurzbeschreibung und Anzahl der Bilder und Besucher gelistet werden. Für die Startseiten der Serien können die Anzahl der Reihen und Spalten für die Thumbnails frei gewählt werden. Zudem werden auf Wunsch die Thumbnails einer großen Bilderserie auf mehrere Seiten verteilt. In der Großansicht ist die Navigation von Bild zu Bild durch Vor- und Zurück-Links oder durch einen Klick auf das Bild möglich. Für eine verschacheltete Anordnung von Serien mit Unterserien steht eine Brotkrumennavigation zur Verfügung, auch können die Serien über ein Drop Down Menü direkt aufgerufen werden.

Fazit: Ein klasse Modul ganz im Stil der hohen Flexiblilität, die ExpressionEngine auszeichnet. Als ambitionierter Privatblogger mit Fotobergen, die sehnsüchtig auf die Präsentation in einer Webgalerie warten ;), lohnt sich eine Investition von 99 Dollar für die Lizenz “Personal” durchaus. Für Firmen wäre die “Bilder-Galerie” eine ernstzunehmende Option für den Aufbau eines Katalogs innerhalb eines hochflexiblen Content Management Systems.

CMS Made Simple im Schnelldurchgang

12.05.2009 um 13:38 | Kommentare: 3

Wie ich kürzlich berichtete, habe ich mich für ein Redesign auf einen autodidaktischen Crashkurs für das Content Management System CMS Made Simple eingelassen. Über meine Erfahrungen mit dieser Open Source Software berichte ich folgend.

Anfänglich fand ich keinen Weg, meinen CSS-Code (ohne Hacks) für die Navigation zu integrieren. Nach nervenaufreibenden Versuchen beschloß ich, mich Schritt für Schritt in eines der integrierten Menülayouts einzuarbeiten und die Strukturierung des CSS zu durchblicken. Als diese Hürde überwunden war, ging die weitere Layoutanpassung schnell voran. Ein integrierter MenüManager hilft dabei, die im CMS enthaltenen Navigationen als valide Templates zu verwalten und individuell anzupassen. Viele Anforderungen an Navigationen für kleine bis umfangreiche Websites lassen sich damit abdecken. Aber Vorsicht, in diesen Templates herrscht SMARTY und die CSS-Anweisungen sind darin eine unscheinbare Minderheit. ;-)

Schnell habe ich beim weiteren Ausprobieren komfortable Dinge entdeckt: Nutze Globale Inhaltsblöcke! Erstelle im Editor einen HTML-Footer mit Inhalt und speichere ihn als “globalen Inhaltsblock” ab. Lösche dann den Footer in Deinem Template und setze stattdessen einen Tag wie {global_content name=’footer’}.

Solche CMSms-Tags lassen sich als Platzhalter für viele Seitenelemente einsetzen: Für die Metatags, die Navigation, Stylesheets, Brotkrumennavi, für den Link zu einer druckfreundlichen Seite (die via CSS individuell angepasst werden kann) und viele mehr. Diese Tags muss man sich nicht im Netz zusammensuchen. Sie sind innerhalb des CMS aufgelistet und mit ihren Optionen erklärt. Wer ahnt, was möglich ist, wenn man das Prinzip „Tag“ ausreizt? ;-)

CMS Made Simple

Wer mehrere Layouts innerhalb einer Installation verwalten will, wird sich sicher über den integrierten ThemeManager freuen. Erstelle via Copy and Paste ein neues Template, weise dem Template ein zuvor erstelltes Stylesheet zu und exportiere danach das Layout mit Hilfe des ThemeManagers, um es in eine andere mit CMSms verwaltete Site zu importieren. Das zeigt eindrucksvoll, dass ein aktueller Reizbegriff wie „Manager“ durchaus positive Assoziationen wecken kann. ;-)

Templates

Erfreulich – sowohl für den Webdesigner wie auch für den Kunden – ist der leistungsstarke Editor namens TinyMCE, der im WYSIWYG-Modus zur Höchstform aufläuft, das heißt zuverlässig arbeitet. Mit ein paar Klicks kann sich der Kunde auch unterschiedliche Layouts für Unterseiten anlegen, wie die Seite Termine recht gut zeigt. Pfiffig ist auch, dass die internen Links aus einem Drop Down Menu gewählt werden können. Auch zahlreiche Sonderzeichen lassen sich via Klick einfügen. Beschränkt der Admin die Rechte des Nutzers auf den – frei konfigurierbaren – Editormodus, liegt der intuitiven Aneignung der Website-Pflege kaum ein Stein im Weg.

Der Editor von CMS Made Simple

Ob ich den Editor für die Inhalte einsetze oder als Gestalter das CSS und (X)HTML bearbeite, beide Arbeiten haben eine Kleinigkeit gemeinsam: Beim „Zwischenspeichern“ von Templates oder Inhalten bleibt der Editor dort, wo zuletzt die Schreibmarke stand. Nervtötendes Scrollen – vor allen, wenn die Seiten lang sind – fällt also weg.

Ein Bug des Editors trübt die Freude beträchtlich. Das wird beim Einfügen von Bildern aus der “Bildverwaltung” deutlich: Es fehlt oft das Icon für “Durchsuchen”, so dass der Pfad für ein Bild per Hand eingetragen werden muss (wer hat solche Pfade im Kopf?). Mit etwas Vorbereitung und Copy and Paste ginge das „Bild einfügen“ auch, würde aber für weniger ambitionierte Anwender ein großes Hindernis sein. Vielleicht gibt es aber in der vor kurzem erschienenen Version 1.5.4 (das ich noch nicht installiert habe) eine Bereinigung des Fehlers.

Noch ein Wort zum WYSIWYG-Editor TinyMCE: Der Admin kann ihn für seine Schützlinge konfigurieren. So läßt sich z.B. eine Werkzeugleiste freischalten, die das Einbinden von Tabellen für den Content erlaubt.

Website-Pflegende, die häufig neue Seiten anlegen, werden sich freuen, wenn Ihnen der Admin sinnvolle “Seitenvorgaben” eingestellt hat, die in jeder neuen Seite standardmässig ausgegeben werden. Das können Metatags und Layoutelemente oder diverse Optionen sein, so z.B. ob die Seite in den seiteninternen Suchergebnissen (yep, eine leicht zu aktivierende Suche gibt es auch) erscheinen oder im Menü angezeigt werden darf.

Seiten in CMS Made Simple

Wird eine neue Seite erstellt, läßt sie sich individuell und suchmaschinenfreundlich einrichten. Trage „Seitenspezifische Meta-Daten“ ein, bestimme ein „Titel-Attribut“ und lege eine Ziffer für den „Tab-Index“ fest, bestimme den Eigentümer der Seite und überlege Dir einen passenden “Seiten-Alias” für suchmaschinenfreundliche, sprechende URLs. Ich habe längst nicht alle Einstellungen ausprobiert. Hier gilt: Nicht kleckern, experimentieren!

Ich habe das oben vorgestellte Redesign im Großen und Ganzen local erstellt und war gespannt, ob die Übertragung auf den Server der Kundin so problemlos funktionieren würde, wie es der Support beschreibt. Und in der Tat, wer sich an die Vorgehensweise hält, die Serverpfade etc. kennt und ein wenig mit PHPMyAdmin zurechtkommt, wird mit der Übertragung keine Probleme haben.

Zuguterletzt war ich gespannt, ob CMS Made Simple auch valides (X)HTML und CSS ausgeben würde. Nach einigen seltsamen Fehlern, die der Editor TinyMCE erzeugt hat (wahrscheinlich durch das Copy and Paste beim Inhalte einpflegen) gaben die Validatoren grünes Licht. ;-)

Fazit: CMS Made Simple eignet sich sehr gut für kleine bis mittelgroße Websites, die unabhängig von einem Webdesigner gepflegt und über mehrere Menüebenen erweitert werden können. Die Lernkurve für den Kunden ist recht niedrig, so dass aufwendige Schulungen wegfallen. Ein paar Lernvideos oder Support via Telefon würden reichen, wenn sich der Anwender nicht wie ein mittelprächtiger DAU anstellt. Ambitionierte Anwender wären in der Lage, auch unterschiedliche Layouts für verschiedene Inhalte einzupflegen. Zudem gibt es auch einen deutschsprachigen Supportbereich und das Forum der Community. Fragende sind dort sicher willkommen und Helfende erst recht.

Zum Seitenanfang

Tags:  CMS CMS Made Simple Content Management System CSS ExpressionEngine Redesign Suchmaschinenoptimierung Tag-Cloud Tagging Webdesign WordPress