Skip to main content

Alles neu macht der Mai!

Ein eingefleischter Projektmanager würde "Soft-Relaunch" dazu sagen. Aber auch ohne Buzzwords zu bemühen erkennt das geschulte Auge, dass sich auf der Zensations Website etwas getan hat. Und für alle die das auch tatsächlich interessiert, hier eine kleine Zusammenfassung.
Vorsicht - technisch!

New Button

Neben dem obligatorischen Umstieg auf Drupal 7 war es uns vor allem ein Anliegen, das Erstellen von Inhalten zu vereinfachen. Nach etlichen grauen Haaren, die uns diverse WYSIWYG-Tools beschert haben, entschlossen wir uns auf eine Kombination aus dem Editor Markitup von Jay Salvat und John Gruber's Markdown umzusteigen. Eine Lösung die wir auch unseren Kunden wärmstens empfehlen.

What you need is what you get

Zu diesem Zweck wurde die vorhandene Basis von Markdown Extra um einige Syntaxelemente erweitert. Diese erlauben es, einfach mit Drupal internen Image Styles im Inhalt zu arbeiten. Außerdem können Videos aus diversen Plattformen wie Youtube oder Vimeo schnell und einfach eingebettet werden. Das ist jedoch nichts, was ein CKEditor oder TinyMCE nicht genauso zustande bringen würden. Warum also etwas anderes?

Der zeitliche Aufwand, den man mit dem Erstellen von Inhalten, Platzieren von Bildern und Formatieren von Text verbringt, ist oftmals unverhältnismäßig hoch und das Ergebnis meist suboptimal. Visuelle Editoren produzieren selten einen sauberen HTML Code und Anwender ohne technisches Vorwissen sind oft nicht imstande das eigenständig wieder zu bereinigen. Das resultiert in div-Elementen die mit inline Styles zu Überschriften vergewaltigt werden. Oder auch Bildauflösungen, die weit höher sind als notwendig und Phantomelemente, die noch irgendwo in der Seite herumschwirren, obwohl sie eigentlich nicht mehr gebraucht werden. Und all das hat direkten negativen Einfluss auf Ladegeschwindigkeit und Suchmaschinenakzeptanz der Seite.

Ein Eingabesystem wie Markdown garantiert, dass Otto Normalverbraucher sich auf das Wesentliche konzentriert. Nämlich Inhalte erstellen. Gleichzeitig wird dafür gesorgt, dass das Produkt technisch sauber und das Layout konsistent bleibt. Vor allem gerade diese strikte Trennung von Inhalt und Layout ist wichtig. Denn Desktopbildschirme sind längst nicht mehr die einzigen Schnittstellen zum World Wide Web.

Adaptive Design

Auch unter dem Begriff Responsive Design bekannt (CSSWizardry bringt an der Stelle gute Argumente warum "adaptive" korrekt ist). Darunter versteht man eine Technik, Webseitenlayouts so zu entwerfen, dass sie sich unabhängig vom Endgerät - sei es ein Cinema Display, Tablet oder Smartphone - von ihrer besten Seite zeigen. Auf Basis von CSS Media Queries werden schon im Stylesheet die Regeln definiert, wie sich die Seite auf kleineren Bildschirmen zu verhalten hat. Damit wird auch klar, warum bei der Erstellung von Inhalten strikt auf Stilelemente verzichtet wird. Man müsste die Arbeit nämlich für jedes Endgerät wiederholen.

Die neue Zensations Website wurde anhand des Less Frameworks für Smartphones und Tablets optimiert. Die Chance ist groß, dass Sie eines von beiden gerade zur Hand haben. Probieren Sie's einfach aus!

Bilder waren gestern - CSS3

Mobile Endgeräte änderten die Spielregeln jedoch nicht nur im Bezug auf Layout und Bildschirmauflösung. Ladegeschwindigkeit hat in mobilen Netzwerken einen völlig neuen Stellenwert. Und man will dem geneigten Nutzer ja nicht zumuten, für jede abgerundete Ecke im Layout ein eigenes Bild laden zu müssen.

Zum Glück ist CSS3 inzwischen durchaus einsetzbar. Oft mit HTML5 in einen Topf geworfen ist Version 3 der Cascading Style Sheets natürlich ein Standard, der für sich alleine steht. Von nun an ist es auch möglich, visuelle Effekte wie runde Ecken, Verläufe, Schatten, geometrische Transformationen und animierte Übergänge direkt im Stylesheet zu definieren. Das spart Bandbreite, Kosten bei der Entwicklung, späteren Anpassungen und - last but not least - auch Google interessiert sich für Ladegeschwindigkeit.

Leider kann man ältere Browser, die diese Features noch nicht unterstützen, schlecht einfach ignorieren. Dafür gibt es aber eine Reihe von nützlichen Polyfills die, mit ein wenig Geschick in der Anwendung, einiges aufholen.

Die Effekte auf dieser Seite werden im Internet Explorer 6 bis 8 beispielsweise mithilfe von CSS3 Pie dargestellt. Um den Entwicklungsaufwand der CSS Stylesheets gering zu halten, wurde ein Drupal Modul entwickelt, welches ein Arbeiten rein mit CSS3 Stylesheets ermöglicht, da es die Direktiven für einzelne Browser und CSS Pie automatisch anfügt. Eine erste Version ist auf unserem Github Account verfügbar. Sie erhebt keinen Anspruch auf Vollständigkeit, aber über Feedback würden wir uns freuen.

Wird nicht veröffentlicht