Soll eine Website ohne Programmier-Kenntnisse gepflegt werden, kommt man um den Einsatz eines Content-Management-Systems (CMS) fast nicht herum. Content-Management-Systeme wie Wordpress oder Typo3 sind recht bekannt und weit verbreitet. Wordpress ist allerdings nicht für jedes Webprojekt geeignet. Auch beim Einsatz von Typo3 steht dem Entwickler zunächst etwas Arbeit bevor. Für den schnellen und einfachen Einsatz empfiehlt sich ein „leichtgewichtiges“ CMS, so wie etwa TYPOlight.

Das Content-Management-System TYPOlight erschien erstmals 2004. Der Name lässt annehmen, dass dieses CMS eine abgespeckte Version von Typo3 darstellt, dies ist allerdings nicht der Fall. TYPOlight ist ein komplett eigenständig entwickeltes System und keine Abspaltung oder eine Unter-Version eines anderen CMS. Bei TYPOlight handelt es sich um ein Backend-basiertes System. Die gesamte Administration der Seite und die Bearbeitung der jeweiligen Inhalte geschehen somit über eine spezielle Verwaltungsoberfläche. Wird eine Seite bearbeitet, kann das tatsächliche Erscheinungsbild, so wie es die Besucher später im Browser sehen, jederzeit über einen entsprechenden Button im Backend angezeigt werden.

Installation

Die Installation des Systems ist über das Installationsskript ein Kinderspiel. Insgesamt sind dazu nur sieben Schritte notwendig. Der erste und sicherlich wichtigste Schritt, ist die Vergabe eines neuen Passwortes für das Installations-Tool.

TYPOlight Installtool

Im zweiten Schritt verlangt das Installationsskript einen Sicherheitsschlüssel. Dieser Schlüssel wird bei TYPOlight zur verschlüsselten Datenspeicherung genutzt. Das entsprechende Feld muss allerdings nur ausgefüllt werden, wenn es bereits verschlüsselte Daten gibt. Wird das Feld bei der Installation leer gelassen, so generiert das Skript einen zufälligen Schlüssel.

Die nächsten drei Schritte befassen sich mit der Datenbank. Zunächst müssen selbstverständlich die Zugangsdaten zu der gewünschten MySQL-Datenbank eingegeben werden. Anschließend wird die Kollation - das heißt die Anordnung der Datenbanktabelle - festgelegt und dann die Tabellen für das CMS importiert.

Ist bereits ein Template für das System vorhanden, kann es nun ausgewählt und gespeichert werden. Vorteilhaft ist, dass von TYPOlight ein Default-Template (eine fiktive Music Academy) zum Antesten mitgeliefert wird.

Zum Schluss der Installation wird nur noch der eigene Administratoraccount angelegt. Das Content-Management-System ist nun bereits in vollem Umfang funktionsbereit.

TYPOlight Musterseite Music Academy

Erweiterungen und Templates

Natürlich lässt sich das Content-Management-System TYPOlight auch mit Plugins erweitern. Zwar ist die Fülle der angebotenen Erweiterungen bei weitem nicht so groß wie etwa bei Wordpress, dennoch lassen sich einige auf der Extensionseite von TYPOlight finden. Auch fertige Templates werden von den Herausgebern des CMS angeboten. Diese sind allerdings nicht kostenlos, sondern ab 49,00 Euro erhältlich. Kostenlose Templates lassen sich bisher leider nur vereinzelt etwa über Google finden.

Funktionsweise

Die Verwaltung der Webseite ist seitenbasiert und hierarchisch aufgebaut. So ist die Grundlage zum Einfügen von Inhalten eine Seitenabfolge, die je nach Wunsch unterschiedlich strukturiert werden kann. Der Inhalt einer Seite wird über so genannte Artikel gepflegt. Dabei können mehrere Artikel auf einer Seite eingefügt werden. Ein Artikel besteht wiederum aus einem oder mehreren Inhaltselementen wie beispielsweise Text, Aufzählungen, Tabellen, Akkordeon, Code, Bilder, Galerie, Formular oder sonstigen Modulen.

Auf Basis der zentralen Seitenstruktur ist das wichtigste Element des Content-Management-Systems das Zusammenspiel von Seiten, Artikeln, Inhaltselementen und Modulen. Besucher rufen grundsätzlich nur die Seiten der Website auf. Ein Aufruf von einzelnen Artikeln, die Bestandteil einer festen Seite sein müssen, ist hier im Gegensatz zu einem Node-basierten CMS nicht möglich.

Backend

Um das Backend von TYPOlight aufzurufen, muss ähnlich wie bei Wordpress und Typo3 ein bestimmter Ordner auf dem Webserver angesprochen werden. Hängt der Administrator /typolight an die URL der Webseite dran, gelangt dieser zum Login-Bereich. Dieser ist natürlich gegen Missbrauch geschützt. Auch dadurch, dass bei drei hintereinander falsch eingegebenen Passwörtern das jeweilige Konto für fünf Minuten gesperrt wird.

Das Backend von TYPOlight ist sehr übersichtlich gestaltet. Es unterteilt sich in zwei Bereiche, links die Navigation und rechts der jeweilige Bearbeitungsbereich. Die Navigation enthält nur die Punkte Inhalte, Layout, Benutzerverwaltung, System, Benutzerfunktionen. Somit ist auch die Navigation sehr schlicht und einfach gehalten.

Startseite vom Backend

Seitenlayouts

Artikel enthalten die jeweiligen Inhalte einer Seite. Das Seitenlayout hingegen legt fest, wie diese Inhalte dem Besucher der Webseite dargestellt werden. Das Design der Website entsteht hierbei durch eine Kombination aus Seitenlayouts und Stylesheets. Das CMS enthält von Haus aus ein integriertes CSS-Framework. Mit dem CSS-Framework-Builder ist es für Administratoren möglich, auch ohne tiefergehende HTML-Kenntnisse ein Layout zu erstellen.

Die Seitenlayouts bestimmen bei TYPOlight den eigentlichen Aufbau einer Seite, also etwa die Gesamtbreite, Anzahl Spalten oder welche Frontend-Module an welcher Stelle angezeigt werden sollen. So wird das Layout mit einigen Klicks nach und nach zusammen gestellt. Über dieses Verfahren können sogar ohne Programmierkenntnisse eigene Stylesheets, RSS- beziehungsweise Atom-Feeds oder die eigene Google Analytics ID und sonstiger beliebiger JavaScript-Code eingebunden werden.

Bearbeitung eines Seitenlayouts

Module

TYPOlight verfügt über eine Sammlung von fertigen Modulen, die in das Seitenlayout eingefügt werden können. So ist es etwa sehr einfach, ein Navigationsmenü, das aus der Seitenstruktur generiert wird, in die Seite einzubinden. Module können aber auch weitere Elemente wie eine Sitemap, ein Login-Formular, ein fertiges Formular zur Registrierung oder zur Bearbeitung von Benutzerdaten oder aber auch eine Suchmaschine, ein Flash-Film oder ein Zufallsbild sein. Natürlich ist es möglich, jedes Modul individuell mit einem Zugriffsschutz zu versehen.

Aber auch aufwändigere Module stehen für den sofortigen Einsatz zur Verfügung. Auf Wunsch kann ein komplettes News/Blog-Modul eingebunden werden. Dieses ist ein Teil der Core-Distribution und unterstützt eine Archivfunktionalität, Kategorien, Kommentare von Besuchern, hervorgehobene Beiträge und natürlich eine RSS- oder Atom-Feed-Funktion.

Auch das direkt in der Core-Distribution integrierte Newsletter-Modul ist sehr interessant. Es unterstützt nicht nur Abonnements über Double-Opt In sondern auch das Verschicken von Nachrichten im HTML- oder Textformat. Ist bereits eine bestehende Liste von E-Mailadressen vorhanden, so kann diese mit der fertigen Importfunktion als CSV-Datei importiert werden.

Übersicht Module

Neben der Blog- und Newsletter-Funktionalität steht dem Administrator auch die einfache Integration eines Kalenders bereit. Dabei unterstützt diese Funktion ganztägige Events, Events mit offenem Ende, mehrtägige Event und wiederholte Events. Auch hier ist möglich, einen eigenen RSS- oder Atom-Feed zu implementieren. Um die verschiedenen Events den Besuchern der Webseite zu präsentieren, stehen verschiedene Ansichten wie zum Beispiel Kalender, Mini-Kalender oder Eventliste zur Verfügung.

Rechteverwaltung

Das Content-Management-System verfügt über ein leistungsstarkes aber trotzdem leicht zu handhabendes Rechte-System. TYPOlight unterscheidet zwischen Mitgliedern und Benutzern, wobei Mitglieder Zugriff auf geschützte Bereiche im Frontend erhalten und Benutzer Zugriffsrechte im Backend.

Durch das aufwändige Rechtesystem kann der Zugriff bis ins kleinste Detail gesteuert werden. Auf diesem Wege ist es dem Administrator möglich, den Zugriff auf die verschiedenen Module sowie die einzelnen Formularfelder genau zu reglementieren. Zugriffsrechte können nicht nur auf Benutzerebenen vergeben werden, sondern auch für Gruppen. So können beispielsweise Redakteure nur Artikel erstellen und bearbeiten, nicht aber das Layout verändern.

Benutzerrechte bearbeiten

Sonstiges

Die Entwickler von TYPOlight haben auf eine Vielzahl verschiedener Aspekte geachtet. So sind beispielsweise sprechende URLs zur Steigerung der Suchmaschinenfreundlichkeit von Haus aus integriert.

Auch eine mehrsprachige Website lässt sich mit diesem CMS realisieren. Dazu wird die fertige Seitenstruktur mit den Inhalten in der Standardsprache, zum Beispiel Deutsch, kopiert. Anschließend werden alle Texte übersetzt. Das Content-Management-System liest beim Besuchen der Webseite die Browsersprache aus und leitet den Besucher automatisch auf die jeweilige Sprachversion um.

Fazit

Das Content-Management-System TYPOlight ist jedem zu empfehlen, der sich nicht mit tiefergehender Programmierung beschäftigen möchte. Die verschiedenen bereits komplett fertig eingerichteten Module können schnell und einfach mit wenigen Klicks auf die Website eingefügt und genutzt werden.

Das CMS erinnert an einen großen Baukasten, bei dem es allerhand verschiedene Bausteine gibt. Diese Bausteine muss der Administrator nur noch je nach Bedarf zusammensetzen.

(mm), (tm)

Verwandte Artikel

• Zimplit und Cushy CMS - Optimale Lösungen für kleine Websites? (0) €
• Wissen zum Mitnehmen: Wiki-to-Go (13)
• Wiki oder was? (0) €
• Website Baker CMS - flexibel und einfach zu bedienen (28)
• Webmaster: Mini CMS und Bandbreite (0)
• WebGUI CMS: Daumen hoch! (0) €
• WebEdition 6 - Profi-CMS kostenlos? (29)

von János Rácz

Vektorgrafiken haben in den vergangenen Jahren dank zahlreicher ambitionierter Designer für einiges Aufsehen gesorgt. Wir alle kennen solche extrem perfekten, unbegrenzt skalierbaren, photorealistischen Porträts und Objekte - außergewöhnliche Geduld, Arbeitseifer und hoch ausgereifte Zeichenprogramme machen das möglich.

Mit Illustrator & Co. müssen Sie nicht immer gleich ein photorealistisches Kunstwerk produzieren. Mit den einfachen Bausteinen der Vektorgrafik-Programme lassen sich durch die Wahl der richtigen Formen und Farben sehr leicht aussdrucksstarke Objekte komponieren.

Diese Kollektion abstrakter Vektorgraphiken präsentieren wir Ihnen als Inspiration und Anregung für frische Ideen zu Ihren künftigen Projekten. Falls Vektor-Design Neuland für Sie ist, das Sie schon seit langem gern erforschen wollten, werden Ihnen die Tutorials am Ende des Beitrages weiter helfen.

artificial flowers by LimKis

S by Mirousensei

Fruityshapes by Barbroute

elements of life by THENU

Composition #83 by PatrickGunderson

Vectorism Volume 7 by cranial-bore

comp slices by ---stress---origami samurai!

Orchids by liajedi

.TREE by na1981

Ili by NKeo

psychadelic vectors by hellron

Water by LimKis

Bokeh Background Vector by DragonArtz

Underwater by SpritzTheVik

Wallpaper: heartbeat by Torsten85

Vector Reallity by GraphicStreetRacer

Culture Mural Assignment by BlakliteGraphics

Big Bang Eyes by Flatau

Colorful Abstract Background Vector by DragonArtz

orange abstract vector by

Vector C4d2 .Png by holavengoaflotar

Bubbles by Dean-Site

.v.E.c.T.i.C. by wiwd

Kheops by isdoO

Flow by xJTRx

Abstract Flower Colors Full by abduzeedo

Evening Drift by zulu-eos

My First Abstract Art by Web Design Whim

.::I love U::. by suckerhead

Vector by Rosalily

Motif by liajedi

Bokeh Design Vector by DragonArtz

Save the castle... by sandergfx

Wizard Leaf by Adam Woodhouse

Confused Mind by Frank Bonilla Abstracts.tv

When Paint Comes Alive by XxMurderdollxX

Vector by hushed-words

Illustrator-Tutorials

Schritt-für-Schrittanleitungen für Adobe Illustrator CS4

50 excellente Tutorials (06/2009)

Illustrator-Tutorials im Netz - Vol. II (02/2008)

Illustrator-Tutorials im Netz - eine Übersicht (11/2007)

Wer Internetseiten erstellt, steht seit jeher vor der großen Herausforderung, die Inhalte für möglichst viele Browser und Systeme gleich aufzubereiten. Dank zunehmend einheitlicher Konventionen und CSS-Standards - vom Internet Explorer einmal abgesehen - hat sich dieses Problem trotz größerer Browser-Vielfalt relativiert.

Seitdem Internetseiten nicht nur per PC und Notebook aufgerufen werden können, sondern auch per Mobiltelefon und PDA, stehen Webdesigner vor neuen Herausforderungen. Wollen Website-Betreiber die wachsende Zahl der mobilen Surfer mit ihren kleinen Displays nicht durch ständiges Scrollen verärgern, sind sie gut beraten, Internetseiten speziell für dieses Medium aufzubereiten.

Die einfache Lösung

Dank Cascading Stylesheets ist es möglich, für verschiedene Ausgabemedien unterschiedliche Stylesheets einzubinden, wie es für den Druck einer Website schon lange üblich ist. Auf diese Art können Sie zusätzlich auch ein Stylesheet für ein mobiles Gerät referenzieren:

<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />

Vorteil: Diese Methode ist recht schnell und ohne größeren Aufwand realisierbar. Die Inhalte werden nur einmal angelegt und mithilfe separater CSS-Datein unterschiedlich dargestellt.

Nachteil: Die Inhalte lassen sich nur bedingt an mobile Geräte anpassen - zum Beispiel Bilddateien. Theoretisch lassen sich Bilder zwar auch per CSS kleiner darstellen. Allerdings wird immer das Bild in Originalgröße geladen. Wünschenwert wäre, dass für Mobilgeräte Bilder direkt in geringerer Dateigröße geladen werden. Das ist mit dieser Methode nicht möglich.

Die komplexere Lösung

Die Alternative zur CSS-Lösung besteht darin, eine spezielle Version der Website für Mobiltelefone anzubieten. Die meisten Anbieter, wie Tagesschau oder stern.de, haben sich für diese Variante entschieden. Statt nur die CSS-Datei zu wechseln, wird eine komplett eigene mobile Website angeboten, die man auch mit einem normalen Browser anschauen kann.

mobile Website von stern.de (mit fester Spaltenbreite)

Über eine Browser-Weiche wird zudem der automatische Wechsel zur Mobilversion ermöglicht, sodass man automatisch immer die passende Website angezeigt bekommt. Eine Browser-Weiche lässt sich bequem per PHP realisieren. Über die Funktion »get_browser()« lassen sich nicht nur verwendeter Browser und Version feststellen, sondern auch, ob es sich um ein mobiles Gerät handelt.

Den Browser per PHP ermitteln

Die Funktion »get_browser()« liefert einen Array zurück, der alle Informationen über den Browser enthält. Folgender Code macht den ausgelieferten Inhalt davon abhängig, ob es sich um ein so genanntes »mobile device« handelt:

<?
$browser = get_browser(null, true);
if ($browser["ismobiledevice"] == true) {
echo "mobile Inhalte";
} else {
echo "normale Inhalte";
}
?>

Es hat sich mittlerweile etabliert, mobile Websites über die Subdomain "m." erreichbar zu machen, zum Beispiel so: m.sueddeutsche.de.

Die mobile Website der Süddeutschen Zeitung

Genaue Anpassung mit WURFL

Wer seine mobile Website noch genauer an die mobilen Geräte anpassen möchte und daher mehr Informationen über die jeweiligen Geräte braucht, kann auf WURFL zurückgreifen.

WURFL steht für Wireless Universal Resource FiLe und ist ein Open-Source-Projekt. Bei WURFL handelt es sich um frei verfügbare XML-Datei zum Herunterladen. Diese Datei enthält für über 400 Mobilgeräte Informationen zur Auflösung der Displays sowie zu den unterstützten Bildformaten.

Darüber hinaus lassen sich über die XML-Datei Informationen zum Dateiformat der Klingeltöne bis hin zur Auflösung von Hintergrundbildern für das Display abfragen. Die bereitgestellten Informationen variieren von Modell zu Modell und geben teils eine sehr genaue Funktionsübersicht der Geräte wieder.

Die XML-Datei lässt sich mit einer beliebigen Programmiersprache, beispielsweise mit PHP, auslesen. So lassen sich mobile Websites ganz konkret auf einzelne Geräte abstimmen. Vor allem, wenn man spezielle Dienste wie den Download von Klingeltönen oder Hintergrundbildern anbietet, kann WURFL helfen, dem Besucher der Website direkt das richtige Format anzubieten.

Ausschnitt aus der WURFL-XML-Datei:

<device id="htc_x7500_ver1_subua" user_agent="HTC_X7500" fall_back="htc_x7500_ver1">
<group id="product_info">
<capability name="has_qwerty_keyboard" value="true"/>
<capability name="pointing_method" value="stylus"/>
<capability name="uaprof" value="http://www.htcmms.com.tw/gen/Athena-1.0.xml"/>
<capability name="model_name" value="Athena"/>
<capability name="brand_name" value="HTC"/>
<capability name="marketing_name" value="Advantage"/>
</group>
<group id="wml_ui">
<capability name="softkey_support" value="true"/>
<capability name="table_support" value="true"/>

XHTML und CSS für das mobile Web

Für die speziellen Amforderungen an das mobile Web haben sich mittlerweile auch speziell angepasste Versionen von XHTML und CSS entwickelt. Das XHTML Mobile Profile oder kurz XHTML MP wurde entwickelt von der Open Mobile Alliance (OMP). Dabei handelt es sich um einen Zusammenschluss von Dienstleistungs- und Produktanbieter aus dem Bereich Mobilfunk.

XHTML MP besteht aus den Elementen von XHTML-Basic sowie einigen zusätzlichen Elementen zur Textauszeichung sowie zur Gliederung von Formularen, wie man es bei XHTML auch kennt. Eine Anpassung von XHTML auf XHTML MP ist in der Regel also ohne großen Aufwand möglich. Folgender Doctype leitet ein XHTML-MP-Dokument ein:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Wireless CSS

Auch für CSS hat sich eine spezielle Variante für mobile Geräte entwickelt. Wireless CSS oder kurz WCSS heißt der Standard, der eine Teilmenge des CSS2-Standards ist, aber auch einige zusätzliche Möglichkeiten mitbringt. So lassen sich Eingabefelder mittels WCSS beispielsweise so einrichten, dass sie nur bestimmte Zeichen oder Zeichenfolgen zulassen. Bei folgendem Beispiel werden nur Buchstaben als Eingabe gestattet, wobei der erste Buchstabe ein Großbuchstabe sein muss:

<input type="text" style="-wap-input-format: 'A*a'"/>

Ein weiteres Beispiel, bei dem die Eingabe einer vierstelligen Zahl (etwa eine PIN) erforderlich ist:

<input type="text" style="-wap-input-format: 'NNNN'"/>

WCSS binden Sie ganz genau wie CSS ein: Entweder direkt über Inline-Tags im HTML-Element oder über eine separare CSS- beziehungsweise WCSS-Datei.

Eine weitere zusätzliche Funktion von WCSS ist das Einbinden eines Lauftextes. Man kennt diese Funktion aus alten Zeiten des Internet Explorers. Wurde ein Lauftext beziehungsweise Marquees früher per HTML eingefügt, so geschieht das bei einer mobilen Website mittels Stylesheet. Der Einfachheit halber zeigen wir hier als Beispiel ein Inline-Tag:

<p style="display: -wap-marquee; -wap-marquee-dir: rtl; -wap-marquee-style: scroll">Dieser Text bewegt sich von rechts nach links.</p>

Wer ein Mobilgerät hat, welches WCSS unterstützt, wird bei diesem Code einen von rechts nach links laufenden Text sehen.

Was die Browser machen

Einer der verbreitetsten Browser für Mobilgeräte ist Opera. Da gibt es den Opera Mini für Mobiltelefone und PDAs und den Opera Mobile für Smartphones und Pocket PCs mit Windows Mobile, Symbian OS und Linux.

Opera Mini beziehungsweise Mobile sind auf vielen Geräten vorinstalliert. Opera nimmt somit eine Vorreiterrolle unter den Browsern für mobile Geräte ein. Opera war es auch, der das sogenannte Small Screen Rendering eingeführt hat. Durch diese Methode werden Internetseiten für Mobilgeräte optimiert dargestellt. Fotos werden verkleinert und alles wird in einer Spalte dargestellt. So lassen sich auch "normale" Websites auf den kleinen Displays darstellen.

Was bei der Darstellung nicht optimierter Seiten von Vorteil ist, wird bei Seiten, die speziell für mobile Geräte optimiert wurden, zum Nachteil. Denn das Small Screen Rendering ignoriert die Einstellungen, die das Stylesheet der Website vorgibt, und wählt immer das eigene Rendering. Selbst wenn bei der Stylesheet-Einbindung speziell das Medium "handheld" verwendet wird, ignoriert Opera diese Angaben.

Erst durch eine spezielle Meta-Angabe, die dem Browser mitteilt, dass es sich bei der Website um eine für Mobilgeräte optimierte Version handelt, verzichtet Opera auf den Einsatz des Small Screen Renderings:

<meta name="viewport" description="width=device-width, height=device-height" />

Die Meta-Angabe "viewport" wurde ursprünglich von Apple für dessen iPhone eingeführt. Damit lassen sich Angaben über den Viewpoint einer Seite festlegen. Über die Meta-Angabe lassen sich auch weitere Vorgaben machen, die in der Regel jedoch nur vom iPhone interpretiert werden. So lässt sich einstellen, ob der Benutzer die Website skalieren kann oder nicht:

<meta name="viewport" description="user-scalable=no" />

Mobiles Flash

Was für Browser gilt, gilt auch für Flash. Auch hier gibt es eine spezielle Version für Mobilgeräte, genannt Flash Lite. Es handelt sich bei Flash Lite um eine abgespeckte Version des Flash-Players, der eine wesentlich geringere Prozessorlast verursacht, dabei aber auch weniger Darstellungsmöglichkeiten besitzt. Filter, mit denen sich im normalen Flash Player zum Beispiel Unschärfe- und Glüheffekte darstellen lassen, werden von Flash Lite nicht unterstützt.

Grundsätzlich entspricht die aktuelle Flash-Lite-Version 3.1 aber der Flash-Player-Version 9. Flash-Lite-Inhalte lassen sich mit der normalen Flash-Software generieren. Zu beachten ist, dass einige mobile Geräte wie das iPhone und das neue iPad von Apple  ohne Flash Lite ausgeliefert werden. Dessen muss man sich bewusst sein, wenn man Flash-Inhalte für das mobile Web einsetzt.

Tipp: Ob ein Gerät Flash Lite unterstützt, lässt sich im Übrigen auch über WURFL feststellen.

Was noch zu beachten ist

Es gibt eine ganze Reihe von technischen Aspekten, die bei der Umsetzung einer mobilen Website zu beachten sind.

Gestaltung

Was die Gestaltung betrifft, sollte man beachten, dass aufgrund der kleinen Displays von mobilen Geräten eine Mehrspaltigkeit von Inhalten tabu ist. Auch auf eine feste Spaltenbreite sollte man verzichten, da die verschiedenen Smartphones und Pocket PCs sehr unterschiedliche Auflösungen haben und man bei einer festen Breite immer nur bei einer kleinen Anzahl von Geräten eine optimale Darstellung erwirkt.

Navigation

Die Navigation sollte am Seitenanfang stehen und aus wenigen Einträgen bestehen. Denn der Platz auf den kleinen Display ist kostbar. Insgesamt ist eine übersichtliche und reduzierte Darstellung von Navigation und Inhalt angebracht, damit der Besucher der Seite nicht den Überblick verliert.

Ladezeiten

Einige Netzanbieter verwenden Proxyserver, die Bilder und Grafiken stark komprimieren, um einem hohen Datenaufkommen beim Herunterladen von Webseiten entgegenzuwirken. So kann es passieren, dass Fotos mit einer schlechteren Qualität dargestellt werden. Auch Opera Mini bietet einen speziellen Proxyserver an, über den man Inhalte komprimiert empfangen und damit Datenaufkomen reduzieren kann.

Tipp für iPhone-Fans

Noch was für iPhone-Freunde: Mit dem iPhone lassen sich Links zu Websites auch auf dem Homescreen ablegen. Mit folgender Zeile – eingebunden ins HTML-Dokument – wird dann auch das passende Icon zu dem Link angezeigt:

<link rel="apple-touch-icon" href="/icon.png"/>

Das Icon sollte in der Größe 60 × 60 Pixel und als PNG abgepeichert werden.

Die Webdesigner der ersten Stunde haben sich noch einen Spaß daraus gemacht, die technischen Schwächen der einzelnen Browser gezielt auszunutzen, um Seitenentwürfe zu machen, die so eigentlich gar nicht möglich waren. Spätestens seit dem Markteintritt Microsofts Mitte der 1990er Jahre gehört das Cross-Browser-Testing zur festen Arbeitsroutine ambitionierter Seitengestalter. Kein Browser stellt Seiten so dar, wie der andere, die Betriebssysteme nutzen unterschiedliche Farbpaletten und letztlich gibt es jede Menge Bildschirme unterschiedlichster Auflösung auf dem Markt.

Das hat sich auch bis heute nicht geändert. Im Gegenteil. Mit dem iPhone ist ein neuer, sehr spezieller Client hinzu gekommen und nicht jeder will für das iPhone eine Browserweiche bauen und eigene Seiten pflegen. Auch die Netbooks mit ihren kleinen Bildschirmen beeinflussen die Seitendarstellung und eventuell auch deren Usability erheblich.

Acht Browser in einem

Die Vielfalt der möglichen Browser/Betriebssystem/PlugIn/Auflösungs-Kombinationen ist so groß geworden, dass es selbst größeren Agenturen kaum gelingt, ein gut ausgestattetes Testzentrum zu pflegen. In der Regel begnügt man sich mit einem Windows-PC und einem Mac, den Browsern Firefox, Safari und InternetExplorer und bei letzterem neben den aktuellen Versionen vor allem die Nummer 6, die sich als größter Hemmschuh des universellen Designs erwiesen hat.

Wer es nicht selbst machen will, nutzt Onlinedienste. Browsershots ist der bekannteste. In diesem offenen und kostenlosen Projekt werden Screenshots von Nutzern gemacht, die eben mit einer bestimmten Rechnerkonfiguration unterwegs sind. Das ergibt eine wahnsinnige Vielfalt möglicher Kombinationen. Leider dauert es recht lange, bis die Screens zur Verfügung stehen. Im praktischen Arbeitsalltag ist dieser Zeitverlust ein Problem.

Neben einer Reihe kostenpflichtiger Dienste bietet vor allem Adobe eine interessante Lösung an. Browserlab ist ebenfalls ein Online-basierter Screenshot-Service. Noch firmiert er als Beta-Version und steht kostenlos zur Verfügung. Man munkelt, er könnte fest mit den Anwendungen der heraufdämmernden Creative-Suite-5-Kollektion verknüpft werden.

Der Adobe-Dienst funktioniert schnell und fast fehlerlos. Im Test verweigerte er allerdings zweimal die Aktualisierung eines IE-Screenshots. Zu kritisieren ist, dass bislang nur 12 Browser-Plattform-Kombinationen zur Verfügung stehen. Es fehlen die Betriebssysteme Linux, Windows Vista und Windows 7. Außerdem fehlt die Möglichkeit, die Auflösung des Browserfensters zu limitieren.

Browserlab in der Praxis

Allerdings bietet Browserlab eine Reihe gut durchdachter Komfortfunktionen, die den Dienst recht nahtlos in den Gestaltungsablauf integrieren. Das beginnt mit dem One-Klick-Test.

Die Arbeit mit Browserlab startet nämlich mit dem Aufbau eines Browsersets. Das ist eine Auswahl an Browser-System-Kombinationen nach eigenem Gusto. Das kann von Kunde zu Kunde variieren.

Ist die Auswahl getroffen, so genügt die Eingabe der URL, um die jeweilige Seite zu testen. Die Browsersets bleiben im Account gespeichert und sind sofort nach dem LogIn abrufbar.

Browserlab überzeugt nicht nur in Puncto Schnelligkeit, sondern auch, was das Interface der Online-Anwendung angeht. Sie ist als Flash-Applikation realisiert und bietet neben einer sehr einfachen, transparenten Menüführung vor allem eine Handvoll Keyboard-Shortcuts für das schnelle Arbeiten.

Die Grundansicht der Screenshots ist eine Einzelansicht. Per Drop-Down-Menü wählt der Nutzer zwischen den verschiedenen Browsern und sieht bereits im offenen Menü, ob der Screenshot vorliegt oder nicht.

Drückt der Nutzer die „2“ präsentiert Browserlab eine Doppelfensteransicht für den direkten Vergleich zum Beispiel zwischen einem Referenzbrowser und den anderen Kandidaten.

Wenn Sie „Shift“ gedrückt halten, erscheint ein Geistermauszeiger, der exakt im zweiten Bild an der gleichen Stelle positioniert wird, wie der Originalmauszeiger im ersten

Scrollt der Nutzer nun das rechte von beiden Fenstern, so wird das linke mitgezogen. Zieht er die Maus über den Bildschirm und drückt dabei die Shift-Taste, erscheint über dem anderen Screenshot ein Geistermauszeiger. Damit lässt sich trefflich die absolute Positionierung bestimmter Elemente überprüfen. Und auch die Bildschirmlupe arbeitet für beide Ansichten simultan.

Wer es ganz genau haben will, dem sei die Taste „3“ angeraten. Sie öffnet den dritten Ansichtsmodus nämlich die „Zwiebelschichten“.

In der Zwiebelschichten-Ansicht erkennt man selbst feinste Unterschiede in der Darstellung

Animateure kennen das, ein Zustand wird halbtransparent über einen anderen gelegt, um die Unterschiede der beiden zu identifizieren. Ein Schieberegler im Kopf der Seite bestimmt die Deckkraft des oberen Screenshots und so erkennt der Designer selbst feinste Differenzen.

In der Zwiebelschichten-Ansicht erkennt man selbst feinste Unterschiede in der Darstellung.

Links zum Artikel

• Für Dreamweaver-Benutzer: Die Verknüpfung zu Browserlab lässt sich bereits heute fest integrieren
• Browsertests bei Dr. Web

(mm), (tm), (sl)

Es gibt wohl kaum einen Bereich, der sich so schnell weiterentwickelt, wie die Programmierung von Webseiten und Internetauftritten. Wer als Webdesigner einen Auftrag erhält, wird daher immer nach Inspirationen suchen, und gewisse Effekte, Strukturen oder Skripte übernehmen. Dies führt naturgemäß dazu, dass fast jeder Mediengestalter irgendwann über eine mehr oder weniger identische Kopie einer eigenen Kreation stolpert. Die Fragen nach dem urheberrechtlichen Schutz von solchen Werken kann derzeit weder von Laien noch von auf Medienrecht spezialisierten Anwälten zuverlässig und eindeutig beantwortet werden. Ein Überblick über die Thematik kann als erste Anleitung dienen und viel Ärger ersparen.

Homepage als Werk im Sinne des Urhebergesetzes (UrhG)

Grundsätzlich ist eine Homepage als fertiges, sichtbares Produkt nicht unmittelbar dem Urheberschutz unterstellt. Dies liegt daran, dass das Urhebergesetz (UrhG) nur solche Werke schütz, die auf einer persönlichen geistigen Schöpfung beruhen.

Eine Internetseite ist demgegenüber nur ein abstraktes Produkt mehrerer (eventuell geschützter) Zeichen, die durch einen Browser zusammengefügt, sichtbar gemacht werden. Ob die der Homepage zugrunde liegenden Quellecodes als Datenbanken Schutz genießen ist hiervon unabhängig nach § 4 Abs.2 UrhG zu beurteilen. Dieses Zusammenspiel zwischen Quellcode, Darstellung und Effekt führt im Wesentlichen zu den aktuellen Schwierigkeiten bei der Beurteilung des urheberrechtlichen Schutzumfangs bei Webseiten.

Die Homepage als Computerprogramm nach § 69 a UrhG

Die sich aufdrängende Alternative eine Homepage dem Schutz des UrhG zu unterstellen, ist daher sie als das anzusehen, was sie aufgrund ihrer funktionalen Herkunft ist: ein Computerprogramm.

Ein solches ist ausdrücklich in den Gesetzestext aufgenommen worden. Die bislang doch eher seltene Rechtsprechung zu dem Thema hat dies allerdings anders gesehen. So hat das Oberlandesgericht Rostock mit Urteil vom 27. Juni 2007 (Az. 2 W 12/07) festgestellt, dass eine „HTML-Site“ zwar eine in sich abgeschlossene Einheit von Befehlen in der HTML-Sprache ("Tags“) sei; Andererseits komme ihr lediglich eine beschreibende Funktion zu, da sie lediglich dazu diene dem Browser die Darstellung der Inhalte zu ermöglichen. Ihr fehle damit die Ausdrucksform des originären HTML-Codes, welcher in der Homepage lediglich eine dienende, beschreibende Funktion einnehme.

Die Homepage als Sprachwerk nach § 2 Abs. 2 Nr. 1 UrhG

Eine weitere Möglichkeit urheberrechtlichen Schutz für Webseiten zu beanspruchen, besteht in der Heranziehung ihrer sprachlichen und textlichen Elemente. Hier hat ebenfalls das OLG Rostock entschieden und festgestellt, dass jedenfalls solche Homepages unter den Schutz von Sprachwerken nach § 2 Abs.2 Nr.1 UrhG fallen, die suchmaschinenoptimiert erstellt und dadurch eine besondere Schöpfungshöhe aufweisen. Die Benutzung von Meta-Tags führe nämlich dazu, dass Suchmaschinen die Internetseite in ihren Ergebnislisten in Spitzenpositionen aufführten. Die hierzu notwendige sprachliche Ausfüllung in Text, Meta-Keywords und Beschreibung erfordere besondere Kenntnisse, die die hinreichende urheberrechtliche Schöpfungshöhe erreiche ( OLG Rostock, Az. 2 W 12/07).

Die Homepage als Werk der angewandten Kunst oder als Multimediawerk

Möglich, wenn auch bislang von der Rechtsprechung nie angenommen, wäre es eine besonders aufwändige, auch künstlerisch auffällige Webseite als ein Werk der angewandten Kunst (§ 2 Abs. 1 Nr. 4 UrhG) oder als Multimediawerk (§ 2 Abs. 1 Nr. 6, 2. Alt. UrhG) anzusehen. Denn für den Betrachter dürfte es heute keinen Unterschied mehr machen, ob ein Kunstwerk auf Papier, als begehbares Kunstobjekt ("Installation") oder eben in Form einer Webseite, die ich virtuelle betreten kann.

Nach der Rechtsprechung des Landgerichts München wird dies in den meisten Fällen jedoch nicht anerkannt werden, da die Gerichte hier offenbar davon ausgehen, dass die Gestaltung der Webseiten nicht über das hinausgehe, was bei ordnungsgemäßer Erstellung eines Werbeauftritts im Internet handwerklich zu leisten ist. In einfachen Worten heisst dies: Die Erstellung einer Webseite ist keine Kunst. Wenn der Gestalter nicht wesentlich verschiedene oder neuartige Methoden zur Gestaltung seiner Seite verwendet, kann er somit auch nicht über die Schwelle des technisch Üblichen hinauskommen. Nur wenn der Designer Handgriffe anlegt, die ein durchschnittlicher Webdesigner nicht beherrscht, kann er die Grenze zu einer Werk der angewandten Kunst oder einem Multimediawerk überschreiten.

Dass diese Formel schon deswegen nicht hilfreich ist, weil sich die technische Weiterentwicklung im Bereich Webdesign monatlich, ja täglich vollzieht, dürfte offensichtlich sein. In der Regel wird man daher eine Homepage nicht als derartige Werke ansehen können.

Wettbewerbsrechtlicher Leistungsschutz von Webseiten

Einen ergänzenden Schutz gegen Design- oder Contentklau kann sich aber auch aus wettbewerbsrechtlichen Grundsätzen ergeben, sofern die Webseite nicht über die erforderliche künstlerische Schöpfungshöhe verfügt.

So entschied etwa das Landgericht Köln in seinem Urteil vom 20.07.2007 (Az. 28 O 798/04), dass die Übernahme von fremdem Content unter dem Gesichtpunkt des ergänzenden wettbewerbsrechtlichen Leistungsschutzes unzulässig sein kann, auch wenn die übernommenen Texte und Werbebanner mangels Schöpfungshöhe nicht urheberrechtlich geschützt sind. Dies setzt freilich ein Erzeugnis voraus, dessen konkrete Ausgestaltung oder bestimmte einzelne Merkmale geeignet sind, die angesprochenen Verkehrskreise auf seine betriebliche Herkunft oder auf seine Besonderheiten hinzuweisen.

Das bedeutet: wenn ein Wettbewerber („geschäftlicher Bereich“) ein prägendes Design, die charakteristischen Slogans oder auffallende Werbebanner derart übernimmt, dass der 0815-Internetuser von einer Identität des Seiteninhabers ausgeht, ist kann ein Unterlassungsanspruch gegeben sein.

Fazit

Webseiten sind grundsätzlich dem urheberrechtlichen Schutz zugänglich. Im Gegensatz zu herkömmlichen Werken der Literatur, oder bildenden Kunst, wird hier die erforderliche Schöpfungshöhe nur in seltenen Fällen angenommen. Offensichtlich beruht diese Auffassung auf einer Verkennung der für das Webdesign notwendigen Fertigkeiten. Folglich kann urheberrechtlicher Schutz für eine Webseite erst dann beansprucht werden, wenn deren Gestaltung einen besonderen Wiedererkennungswert aufweist, etwa durch dessen Layout, Farbgebung oder textliche Gestaltung. Auch scheint die Rechtsprechung zumindest der suchmaschinenoptimierenden Gestaltung von Homepages urheberrechtlichen Wert zuzuerkennen.

Zusammengefasst gelten folgende 5 Maximen, an die sich jeder Webdesigner halten sollte:

1. Das was technisch auch ein Jedermann kann, ist nicht schützfähig.
2. Suchmaschinenoptimierte Internet-Auftritte sind regelmäßig urheberrechtlich geschützt
3. Inhalte (Fotos, Grafiken, Animationen, Tabellen, Texte) sind losgelöst von dem Schutz der gesamten Homepage schutzfähig.
4. Das reine Design (Liniengebung, Layout, Farbe, Struktur) ist als solches nur dann geschützt, wenn besonders individuelle und prägende Faktoren hinzutreten.
5. Unveränderte Übernahmen sollten möglichst unterbleiben, da jedenfalls im geschäftlichen Bereich wettbewerbsrechtliche Unterlassungsansprüche bestehen können.

Falls Sie jemals eine E-Commerce-Website erstellt haben, wissen Sie wie viel Arbeit das ist. Selbst dann, wenn Sie eines der gängigen Shop-Systeme wie Magento, OpenCart oder osCommerce benutzen, haben Sie noch genug damit zu tun, eine individuelle und verkaufsfördernde Oberfläche zu schaffen, Produktfotos zu bearbeiten und auf ebenso interessante wie browser-übergreifende Weise einzubinden. Ganz abgesehen von der zeitraubenden Aufgabe, die Website bekannt zu machen und Ihre Produkte zu bewerben.

Individuelle Icons zu erstellen, wäre bei all dem zu viel verlangt. Aus diesem Grund gibt es hunderte von Icon-Sammlungen, frei verfügbar oder käuflich, die Sie für Ihre E-Commerce-Seite einsetzen können.

Diese Liste zeigt Ihnen mehr als 800 freie und exklusive E-Commerce-Icons. Mit dem Download dieser Buttons können Sie eine Menge Zeit sparen. Sie brauchen sich nicht um das Design der vielen Symbole und Schaltflächen zu kümmern, die für eine gute Konversionsrate in jedem Webshop unerlässlich sind. Nutzen Sie einfach diese Sammlung zeitgeistiger Icons professioneller Designer, die sich auf diese Aufgabe spezialisiert haben.

Freie E-Commerce-Icons (300+ Symbole)

Die fünf Icons dieser Sammlung sind frei zum privaten und kommerziellen Gebrauch.

Kreditkarten-Icons fürs Web

Dieses Set aus  5 Icons beinhaltet Schaltfläche mit Symbolen verschiedener Kreditkarten und Zahlungsmöglichkeiten - unerlässlich für jede eCommerce-Website, wenn Sie Ihre Umsätze steigern möchten. Die Sammlung ist frei zum privaten und kommerziellen Gebrauch.

Warenkorb-Symbole

Diese Sammlung bietet  6 Icons mit Körben und Einkaufswägen. Die Symbole sind für alle Projekte frei verwendbar und stehen im EPS-Format zum Herunterladen bereit.

Freie E-Commerce-Icons

Eine recht umfangreiche Kollektion aus 32 Icons rund ums Thema E-Commerce beinhaltet dieses Set. Auch die Bandbreite der Dateiformate ist groß: Die Schaltflächen sind in den Dateiformaten .ico, .png und .icns verfügbar und absolut frei!

Symbole für Geld und Zahlungsmittel

DIese 10 Icons sind nur zum persönlichen Gebrauch frei, als Hingucker auf einer privaten Website oder Rundbrief fürs Ehrenamt sind jedoch äußerst nett und frei verfügbar. Erhältlich als .ico-, .png- and .icn-Datei.

Symbole für den Abschluss und die Abwicklung einer Transaktion

Diese 6 Symbole sind uneingeschränkt in privaten und kommerziellen Projekten verwendbar. Sie dürfen sogar weiterbearbeitet werden.

Die Speckyboy-Sammlung für  Zahlungsmittel

Diese Hochglanzssammlung bietet 6 Icons für Zahlungsmittel in acht verschiedenen Größe - perfekt für nahezu jeden Stil von Webdesign. Die Sammlung ist frei verfügbar für persönlichen und kommerziellen Gebrauch.

20 freie Icons für Zahlungsarten

Falls Sie bisher noch nicht fündig wurden - hier ist eine weitere Sammlung mit 20 Symbolen für Zahlungsarten. Von der American Express über MasterCard und PayPal bis hin zu Visa und wirecard ist so ziemlich alles dabei. Die Sammlung ist absolut frei verwendbar!

E-Commerce Icons in Grüngrau

Eine Sammlung mit  5 Icons für den E-Commerce inklusive Kundenservice. Die Sammlung ist frei verfügbar für persönlichen und kommerziellen Gebrauch.

Farbige Symbole

Eine farbenfrohe Sammlung von insgesamt 20 Icons, die vom Einkaufswagen über Symbole für Neues, MP3 bis hin zu Statistik bietet dieses absolut frei verfügbare Set so ziemlich alles.

Warenkorbsymbol

Warenkorb solo - 1 Icon in diversen Größen als PNG-Datei; frei für privaten und kommerziellen Gebrauch.

200 Free Exclusive Icons: Siena

Die zur persönlichen und kommerziellen Nutzung frei verfügbare Icon-Sammlung Siena ist brandneu und beinhaltet 200 Symbole in 6 verschiedenen Auflösungen. Es gibt sie auch als Vektorgrafiken.

Premium E-Commerce Icons (500+ Icons)

Shopping Icons ($5 USD)

Mit diesen 5 Icons in verschiedenen Größen geben Sie Ihrer E-Commerce-Website einen guten Start.

Symbole für Internetauftritte von Freelancern und Selbstständigen ($17 USD)

Freelancer aufgepasst: 226 Icons für Websites von Freelancern - einschließlich Symbolen für Rechnungen, Geld, Bloggs, E-Commerce und Bildergallerien.

E-Commerce-Schaltflächen im Web-2.0-Stil ($5 USD)

9 verschiedene Icons in 9 verschiedenen Farbkombinationen - Sie haben die Auswahl unter 81 Icons.

Envato: Icon-Sammlung Nummer 9 ($7 USD)

Attraktives Bündel aus 12 Icons, in verschiedenen Formaten für den Einsatz in Webdesign, Multimedia- und Printproduktionen.

Shopping Icons

Diese Sammlung von 12 icons bietet neben den üblichen Symbolen auch Icons für Neues, Angebote und Schnäppchen.

Schlichte Shopping-Serie ($10 USD)

24 Icons mit Spiegelungen - ideal for E-Commerce-Seiten mit dunklem Hintergrund. Die Symbole sind in verschiedenen Formaten zu haben, darunter .ai, .eps, .psd und .jpg.

Farbige und schimmernde Icons für E-Commerce ($7 USD)

Dieser Satz aus insgesamt 12 Icons für den E-Commerce bietet neben den üblichen Themen auch Illustrationen für den Versand.

Universell einsetzbare Icons (20 iStockphoto Credits)

Eine Sammlung aus 16 Icons rund ums Online-Shopping - erhältlich als Vektorgrafik und PNG-Datei.

Rote Serie (14 iStockphoto Credits)

Serie in Rot mit verschiedenen Symbolen fürs Online-Shopping. 12 Icons, erhältlich als Vektoren.

Shopping-Set (14 iStockphoto Credits)

12 weitere Icons für Shopping-Portale - ebenfalls als Vektorgrafik.

Shopping Icons (15 iStockphoto Credits)

Schön gezeichnet - Vektorsammlung aus 12 Icons für Online-Shopping.

Shopping Icons - Serie "Soothe" (14 iStockphoto Credits)

Diese Sammlung von 12 Icons, die sowohl im JPG-Format wie auch als Illustrator-Dateien (10 und CS2) verfügbar sind, darf nachbearbeitet werden.

Online-Shopping Set - trendy (15 iStockphoto Credits)

Umfassende Sammlung mit 16 Icons für Online-Shopping und Rabattierung.

Online-Shopping Icons im naturnahen Design (10 iStockphoto Credits)

Eine Sammlung von Vektorgrafiken im grün angehauchten Web-2.0-Stil mit insgesamt 16 Icons.

Icons für Online-Shops (14 iStockphoto Credits)

Eine Nutzungsgebühr-freie Sammlung von 15 Symbolen für Online-Shopping, erhältlich als Vektor-Grafik oder im JPG-Format.

Shopping und Marketing Icons (14 iStockphoto Credits)

Eine der wenigen Sammlungen in solidem Schwarzweiß-Stil. Der Satz umfasst 16 Icons.

(mm), (sl)

Wie in einem anderen Beitrag bereits beschrieben wurde, bieten QR-Codes die Möglichkeit, eine komfortable Brücke zwischen Printmedien und dem mobilen Internet zu schlagen. Ohne mühsames Eintippen von Internetadressen lassen sich via Smartphone Internetseiten aufrufen, E-Mails und SMS schreiben sowie Kontaktdaten ins Telefon aufnehmen.

Einfach "scannen" und lossurfen - der kostenfreie Reader von BeeTagg macht's möglich.

Anhand einiger konkreter Beispiele präsentieren wir Ihnen die vielfältigen Kommunikations- und Werbemöglichkeiten, die mit QR-Codes möglich sind.

QR-Codes auf Visitenkarten

Mit QR-Codes lassen sich nicht nur URLs, E-Mail-Adressen und Telefonnummern kodieren, sondern auch ganze Visitenkarten in der Form von vCards. Das vCard-Format ermöglicht es, Kontaktdaten einer Person in einer Datei zu speichern und beispielsweise zu versenden. Es wird zum Beispiel eingesetzt, um Kontaktdaten einer Person per E-Mail zu versenden. Die meisten QR-Code-Reader können das vCard-Format lesen und die Kontaktdaten als Eintrag in das Telefonbuch des Mobiltelefons übernehmen.

So bietet es sich an, einen QR-Code mit vCard auf Visitenkarten abzudrucken. So können die Kontaktinformationen bequem mit dem Telefon eingelesen werden. Das fehlerfreie Abtippen bleibt dem Empfänger der Visitenkarte somit erspart.

Viele QR-Code-Generatoren bieten die Möglichkeit, auch vCards zu generieren. Dabei müssen dann die entsprechenden Kontaktdaten wie Name, Telefon, E-Mail-Adresse in ein Formular eingegeben werden. Komfortabler geht es jedoch auch:

Dieser QR-Code-Generator bietet an, einfach eine vCard hochzuladen und daraus direkt den QR-Code zu generieren. Gerade wenn man mehrere QR-Codes generieren möchte, zum Beispiel für die Mitarbeiter einer Firma. bietet sich diese Möglichkeit an.

QR-Code-Generator: Übersichtlich gestaltet, einfach zu handhaben

QR-Codes als Werbemedium

Auch wenn man QR-Codes auf Visitenkarten mittlerweile häufiger findet, das zurzeit verbreitetste Einsatzgebiet von QR-Codes ist wohl die Werbung. Hier findet man QR-Codes auf Anzeigen und Plakaten. In der Regel führt der QR-Code auf eine mobile Website, auf der dann ein Produkt oder eine Dienstleistung beworben wird. Werbemacher bedienen sich auch hierzulande immer öfter dieser Form der Werbung. So konnte man in der Vergangenheit unter anderem QR-Codes auf Anzeigen der Telekom oder der Sparkasse sehen.

Hierbei handelt es sich um jedoch nur um klassische Verlinkungen auf eine Website. Lediglich die Tatsache, dass QR-Codes in Deutschland und Europa noch recht neu sind, macht diese Form der Werbung zu etwas Besonderem. Sollten sich QR-Codes als Massenmedium durchsetzen, werden ausgefallenere Einsatzgebiete der QR-Codes gefragt sein, um noch Aufsehen damit zu erregen.

Mit QR-Codes neue Wege gehen

Dass man mit QR-Codes auch jenseits des klassischen Einsatzgebietes interessante und neue Wege gehen kann, hat unter anderem die Modekette H&M bewiesen. Auf Kleidungsstücken der Marke sind QR-Codes eingenäht worden, über die man Zugriff auf einen Gutschein hat. Mit diesem Gutschein gab es dann beim nächsten Einkauf Rabatt. Mit der Idee des Gutscheins lassen sich natürlich auch Gewinnspiele realisieren. In dem QR-Code können zum Beispiel Losnummern oder Lösungswörter für Rätsel kodiert werden.

Ein ähnliches Prinzip hat auch die Tourismusregion Salzkammergut in Österreich als Grundlage für eine QR-Code-Schnitzeljagd gehabt. Die klassische Grundidee der Schnitzeljagd wurde beibehalten. Es gilt, einen bestimmten geografischen Punkt zu erreichen, um von dort Hinweise auf den nächsten Punkt zu bekommen. Die Hinweise werden in QR-Codes, die auf Plakaten an den jeweiligen Punkten vorzufinden sind, kodiert.

Die genannten Beispiele mit den Gutscheinen und der Schnitzeljagd funktionieren im Übrigen auch ganz ohne Internet – lassen sich doch in QR-Codes auch einfache Texte kodieren, die vom Reader auf dem Mobiltelefon angezeigt werden.

Mit QR-Codes mehr Service anbieten

Die Möglichkeiten der QR-Codes sind also lange noch nicht ausgeschöpft. Und dass mehr damit möglich ist, als sie in der Werbung zu nutzen, ist nicht nur schön zu wissen, sondern auch wichtig für die Akzeptanz von QR-Codes. Einige Unternehmen haben dies erkannt und nutzen QR-Codes, um Produkten und Dienstleistungen einen Mehrwert zu verschaffen.

Gerade im öffentlichen Personennahverkehr scheint sich in Deutschland der QR-Codes allmählich durchzusetzen. Neben dem Rhein-Main-Verkehrsverbund, der Stuttgarter Straßenbahnen AG nutzen auch die Berliner Verkehrsbetriebe QR-Codes als zusätzlichen Service für ihre Kunden. Auf den Fahrplanaushängen, die an den Haltestellen vorzufinden sind, sind zusätzlich QR-Codes angebracht, über welche die Kunden zum Beispiel über Verspätungen und den aktuellen Standort informiert werden.

Auch für Zustazinformationen zu Produkten lassen sich QR-Codes gut einsetzen. Die Firma Henkel hat auf einige ihrer Waschmittelprodukte QR-Codes angebracht, über die sich Informationen zum richtigen Einsatz des Waschmittels einsehen lassen. Auch die japanischen McDonald's-Filialen haben QR-Codes im Einsatz. Sie finden sich ebenfalls auf den Verpackungen der Produkte und informieren über den Nährwertgehalt der einzelnen Burger, Nuggets und Co.

QR-Codes in der Kunst

Die QR-Codes haben es mittlerweile sogar in die Kunst geschafft. Weltweit gibt es zwar noch nicht viele Kunstschaffende, die sich mit QR-Codes in ihren Werken auseinandersetzen. Aber sollten sich QR-Codes etablieren, wird die Zahl sicher wachsen. In Deutschland hat sich der Künstler Frank Haase aus Hemer einen Namen mit QR-Art gemacht – so der Name der neuen Kunstart.

Mit den QR-Codes schafft der Künstler ein Werk, welches auf zwei Ebenen besteht. Da ist zum einen das gemalte Bild, wie man es aus der Kunst seit Jahrtausenden kennt, und zum anderen eine mobile Website, auf der man unter anderem ein animiertes Bild findet, welches die zweite Ebene darstellt. Der QR-Code, der zu der Website führt, ist Teil des gemalten Werkes.

Alvaro Barata: QR_Colors

Das Besondere dabei ist, dass sich die zweite Ebene dieser Werke ständig ändern kann. Während das Gemalte, das irgendwo in einer Galerie oder einem Büro hängt, unveränderbar ist, lässt sich die mobile Website, die ja Teil des Werkes ist, ständig vom Künstler verändern und sorgt dafür, dass das Kunstwerk als solches sich einem stetigem Wandel unterzieht.

(tm), (mm),

Schnell können CSS-Dateien ziemlich unübersichtlich werden, es wird hier und da nur eine Kleinigkeit geändert und schon hat man den Überblick verloren. So wird beispielsweise mehrmals die Eigenschaft margin-top zugewiesen und der Wert dadurch einfach überschrieben. Das verursacht oft überflüssigen und nutzlosen Code, der sich selbst mit firebug oder ähnlichen Tools nur noch schwer warten lässt.

Mehrmals zugewiesene Eigenschaften werden einfach überschrieben, dies kann sehr praktisch sein, aber auch die Suche nach der Eigenschaft, die die gewünschte Darstellung nun “wirklich“ bewirkt, deutlich eschweren. Da CSS-Dateien mit über 1000 Zeilen und etlichen Hacks keine Seltenheit sind, lässt sich eine gewisse Unübersichtlichkeit natürlich nicht immer vermeiden, jedoch kann der Code durch Kurzschreibweisen deutlich optimiert werden. Die Vorteile liegen auf der Hand:

• übersichtlicher
• einfacher zu warten
• Doppelzuweisungen können einfacher/schneller erkannt und vermieden werden
• geringere Dateigröße.

Bei den heutzutage üblichen Bandbreiten sieht vielleicht nicht jeder einen Sinn in der Einsparung von einigen Bytes an einer CSS-Datei, aber spätestens nach dem bekannt wurde, dass die Ladezeit zu einem Ranking-Faktor für google werden soll, macht jede Einsparung Sinn.

Für Kurzschreibweisen sind nicht immer alle Werte notwendig, werden Sie nicht gesetzt, so wird ein Standardwert zugewiesen.

Ich habe zwei Cheatsheets erstellt, die hoffentlich für den einen oder anderen hilfreich sind. Eine ausführliche Version mit allen genannten Schreibweisen (ohne Farben) und eine „CheatCard“, die einfach nur die Kurzschreibweisen enthält.

Border

Eine der gängigsten Kurzschreibweisen ist die Eigenschaft border. Mit ihr lassen sich border-width, border-style und border-color auf einmal zuweisen.

Eigenschaften:

border-width: 1px;
border-style: solid;
border-color: #FF0000;

Kurzschreibweise:

border: 1px solid #FF0000;

Standardwerte:

border-width: medium;
border-style: none;
border-color: #000000; /*Browser abhängig, meist schwarz*/

margin

Für margin lassen sich alle vier Werte top, right, bottom und left nacheinander zuweisen. Die Werte werden in der Reihenfolge 1. oben, 2. rechts, 3. unten und 4. links interpretiert.

Eigenschaften:

margin-top: 1px;
margin-bottom: 2px;
margin-right: 3px;
margin-left: 4px;

Kurzschreibweisen:

1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links

margin: 1px 3px 2px 4px;

1px nach oben, 3px nach links und rechts, 2px nach unten

margin: 1px 3px 2px;

1px nach unten und oben, 3px nach links und rechts

margin: 1px 3px;

1px nach oben, unten, rechts und links

margin: 1px;

Standardwerte

0

Padding

Für padding verhält sich das ebenso.

Eigenschaften:

padding-top: 1px;
padding-bottom: 2px;
padding-right: 3px;
padding-left: 4px;

Kurzschreibweisen:

1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links

padding: 1px 3px 2px 4px;

1px nach oben, 3px nach links und rechts, 2px nach unten

padding: 1px 3px 2px;

1px nach unten und oben, 3px nach links und rechts

padding: 1px 3px;

1px nach oben, unten, rechts und links

padding: 1px;

Standardwerte:

0

Background

Dass sich über background die Hintergundfarbe und das Hintergrundbild festlegen lässt, ist sicher jedem bekannt, aber dass ist noch lange nicht alles. Backgound-Attachement ist vielleicht nicht jedem geläufig, es legt fest, ob das Hintergrundbild seinen festen Platz behält oder mit-scrollt.

Eigenschaften:

background-color: #FF0000;
background-image: url(../img/background.png);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: center;

Kurzschreibweise:

background:#FF0000 url(../img/background.png) fixed repeat-x center;

Standardwerte:

background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left; /*0% 0% */
background-attachment: scroll;

font

Mit font lässt sich sicher am meisten einsparen, jedoch wirkt es auch am unübersichtlichsten, auf den ersten Blick, wie ich zumindest finde. Auf den zweiten Blick jedoch offenbart es Schrift-Eigenschaften die oft überhaupt nicht berücksichtigt werden, wie zum Beispiel die Zeilenhöhe (line-height).

Eigenschaften:

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 2em;
line-height: 1em;
font-family: Arial Sans-serif;

Kurzschreibweise:

font: italic small-caps bold 2em/1em Arial Sans-serif;

Standardwerte:

font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
line-height: normal;
font-family: ; /*Browser abhängig*/

list-style

Bisher waren die Kurzschreibweisen relativ weit verbreitet und auch bekannt, aber auch listen lassen sich kürzer stylen.

Eigenschaften:

list-style-type: square;
list-style-position: inside;
list-style-image: url(../img/list-style.png);

Kurzschreibweise:

list-style: square inside url(../img/list-style.png);

Standardwerte:

list-style-type: disc;
list-style-position: outside;
list-style-image: none;

Der direkte Vergleich

Um den Unterschied zu verdeutlichen, habe ich zwei CSS-Dateien angelegt,  jeweils in Kurzschreibweise und Normalschreibweise.

Alle Werte mit Leerzeichen und Umbrüchen
Gezählt mit notepad++

Hexadezimalfarben

Zum Schluss möchte ich noch auf die Kurzschreibweise für Hexadezimalfarben eingehen, die natürlich die Kurzschreibweisen für background und border ideal ergänzen. Als kleine Einführung, eine “Hexadezimalfarbe” besteht aus 6 Zeichen, jeweils zwei für die Grundfarben Rot, Grün und Blau.

color: #RRGGBB;

Sind nun, wie in diesem Beispiel zwei Zeichen einer Grundfarbe gleich, so kann diese ein zu einem Zeichen zusammengefasst werden.

color: #RGB;

Diese Möglichkeit der Farbangabe muss allerdings nicht immer die kürzeste sein, so ist zum Beispiel der Farbname „red“ um eine Stelle kürzer als die kurze Hexadezimal-Variante, da bei ihr noch eine Raute vorangestellt werden muss.
Welche Variante für die jeweilige Farbe die beste/kürzeste ist, muss deshalb individuell entschieden werden.
Farbtabellen gibt es im Web zur Genüge in allen Variationen, deshalb möchte ich hier nur ein paar Beispiele nennen:

(tm), (mm), (sl)

von Nousheen Aquil

Farben und Strukturen ohne eigentliche Aussage oder Sinnhaftigkeit zu einem ausdruckstarken Bild zu komponieren, das ist die Kunst der abstrakten Fotografie. Kein Wunder, dass diese Form der Fotografie auf verschiedene Leute ganz unterschiedlich wirkt, weil jeder und jede in den Kompositionen etwas anderes sieht und wahrnimmt. Abstrakte Bilder können im Vergleich zur gegenständlichen Fotografie stärker inspirieren und die Fantasie anregen, wenn es darum geht, Texturen und Farben für eigenes Design zu kreiern.

Wir haben Ihnen hier eine Liste beeindruckender und ästhetischer Beispiele abstrakter Fotografie zusammengestellt. Wir hoffen, dass Ihnen diese Sammlung gefällt. Posten Sie uns Ihre Meinung.

Lavendelhimmel

Spiralen

Morgenhimmel in Sicherheitsverwahrung

Wendeltreppe

David Kozlowski: Farbige Kreise und Adern in grün, hellgrün, gelb und lila

Sophie Connolly, Foto

Die Urspünge des Abstrakten

Parallelen

Reflektionen - 163

Abstraktes in schwarz, blau und weiß

Zwischen Blau und Gelb

Oliver Bauer, Assamstadt

Abstrakt

Stiftholz

Das möchte ich jetzt nicht wiederholen ...

Abstrakt

Sophie Conolly

Wellenlinien

Auf der Suche nach dem Ende ...

LED-Lichter abstrakt

Pixelschieberei

Erster Versuch

Wellen aus gelbem Papier

3 in 3

Treibholz

Ton und Licht

Seifenblasen

Regelmäßige Unregelmäßigkeit

Gefangen

... und noch eine Treppe

Abstrakte Diagonale

Friedrichshafen

Die Welt im Wasserglas

Bananenstaude - Detail

Alge an Granit

David Kozlowski,  Abstraktes Foto in rot, orange und grün

Killer-Kommando

Heimtextilien abstrakt

Pusteblume

Löwenzahn, die Zweite

Tauwerk

Abstraktes aus der Abwrack-Ära

Morgentau auf Herbstlaub

Pinsel mit Pfiff

(mm),

YUI - dahinter verbirgt sich die Yahoo! User Interface Library - ist wahrscheinlich vielen von Ihnen bekannt. Sicherlich werden Sie dabei hauptsächlich an ein Javascript-Framework denken. Und in der Tat ist YUI, das mittlerweile in der Version 3 vorliegt, ein Bolide auf diesem Gebiet. Fast unscheinbar und möglicherweise unbemerkt, verbirgt sich in YUI auch ein kleines, aber nicht unfeines CSS Grid Framework, dem ich diesen Artikel widmen will.

Mitautor Rene Schmidt sprach bereits vor einigen Jahren von einem AJAX-Riesen, als er sich YUI ausführlich anschaute. Mittlerweile wurde nahezu der gesamte Core neu programmiert und als Version 3 im September 2009 in die freie Wildbahn gebracht. Die Änderungen sind so weitgehend, dass man erneut eine mehrteilige Artikelserie zum Thema auflegen könnte. YUI, die Yahoo! User Interface Library steht unter einer BSD-Lizenz (Berkeley Software Distribution), was sogar das Forking erlaubt. Und sie ist die Bibliothek, die das Yahoo-Webangebot motorisiert.

Die YUI 3 CSS Komponenten

Nach Entwickleraussage wurde mehr der Vollständigkeit halber in YUI ein CSS Framework integriert. Irgendwo gehört es halt zum ganzheitlichen Anspruch der Library. Das CSS Framework besteht aus vier Komponenten: Base, Reset, Fonts und Grids.

Base ist optional, wird also nicht unbedingt benötigt, um die anderen Komponenten zu verwenden. Dennoch ist der Einsatz sinnvoll, sorgt Base doch für ein konsistentes Grundstyling der HTML-Elemente. Umgekehrt ist Base von Fonts abhängig, da es die dort definierten Proportionen übernimmt.

Reset bereitet den Boden für Base, respektive jedes andere customed styling und gehört in der ein oder anderen Form ohnehin zum Fundament eines jeden CSS. Anstelle des CSS Reset aus dem YUI kann prinzipiell auch das bekannte CSS Reset von Eric Meyer eingesetzt werden. Wer darauf schwört, bitte.

Fonts ist das Stylesheet, auf dem alles basiert. Fonts wird für Base, vor allem aber für Grids benötigt, damit dem Layout die korrekten Breiten für em zugrundegelegt werden können. Fonts definiert eine Standardschriftart (Arial) mit einer Standardschriftgröße (13px) und setzt so den Indexwert für etwaige Umrechnungen, die dann in % angegeben werden müssen. So wären 11px entsprechend als 85% zu deklarieren.

Grids bietet einen rasterorientierten Gestaltungsrahmen, vom Ansatz her vergleichbar mit 960.gs oder Blueprint. Zwar wird diese Komponente als deprecated, nicht weiterentwickelt bezeichnet, wofür es auch eine wenig aussagekräftige Begründung gibt. Dennoch findet sie sich, entgegen den Ankündigungen, in deutlich veränderter Form zwar, aber jedenfalls im finalen YUI 3 Downloadpaket wieder und die ebenso angekündigte komplette technische Neuentwicklung ist auch weiterhin nicht in Sicht. Aus diesen Gründen und auch aufgrund der zuverlässigen Funktionalität spricht nichts gegen einen Einsatz von Grids.

Grids unterstützt das Standardlayout heutiger Wald- und Wiesen-Websites mit seiner Unterteilung in wrapper, header, body und footer, bewältigt aber auch anspruchsvollere Aufgaben. Innerhalb des body kann eine Sidebar mit dem Effekt, dass das Div die gesamte Höhe des Body belegt und/oder Content-Divs definiert werden.

Dabei ist es möglich, inklusive Sidebar bis zu fünf Spalten pro Reihe zu erstellen. Durch das Hinzufügen weiterer Zeilen (Rows) mit anderer Spaltenaufteilung lassen sich so auch komplexeste Gridlayouts basteln. Dies realisiert Grids durch entsprechend vordefinierte Klassen, worin sich letztlich auch die Limitierungen des Frameworks zeigen.

Dafür, dass diese im Standardlayout vermutlich kaum spürbar werden, sorgt  das flexible Konzept der Seitenaufteilung. Anders als bei anderen Frameworks ist man hinsichtlich der Gesamtbreite der Seite nicht auf fixe Größen oder den gesamten Screen beschränkt. Vielmehr akzeptiert YUI CSS alle Werte zwischen 0 und 100 Prozent sowie entsprechende Pixelangaben. Weiterhin ist es möglich, innerhalb der Spaltendivs weitere Spalten zu definieren, was zwar zu einer erheblichen und schwer zu pflegenden Verschachtelungshierarchie führt, aber zumindest möglich ist.

Letztlich ist zu sagen, dass mit YUI CSS fast jedes denkbare Gridlayout erzeugt werden kann. Worauf das Framework allerdings nicht out of the box vorbereitet ist, sind Layouts mit mehreren Sidebars, wie sie beispielsweise bei manchen 3-spaltigen Layouts üblich sind. Zwar können entsprechende Container definiert werden, jedoch kann es nur eine sich über den gesamten Body erstreckende Sidebar geben. Das Problem tritt allerdings nur dann auf, wenn Sie im Layout mehr als eine Zeile (Row) benötigen und lässt sich durch Anpassungen im Markup natürlich auch beheben, wozu solide Kenntnisse vonnöten sind. Im Grunde werden hier bereits die Grenzen des Frameworks überschritten. Anfänger lassen von solchen Versuchen am Besten die Finger.

In nur geringfügig eingeschränkter Art und Weise lassen sich mit dem YUI CSS Grid Builder Layouts visuell zusammen klicken. Aus meiner Sicht ein prinzipiell gutes Werkzeug, unabhängig von den Vorkenntnissen. Immerhin lassen sich so die wesentlichen Grobteile des Rasterlayouts in ansonsten nicht zu erreichender Geschwindigkeit bauen.

Die Toolbox des Grid Builder

Um überhaupt einen einigermaßen zuverlässigen Eindruck vom Ergebnis erhalten zu können, fügt der Grid Builder den obligatorischen Lorem Ipsum ein, bietet jedoch beim Codeexport die Möglichkeit, den Blindtext raus zu lassen und stattdessen einen "your data goes here"-Kommentar zu erhalten, was sicherlich das Erkennen der Strukturen erheblich vereinfacht.

Achtung: Im Umgang mit dem Grid Builder ist zu beachten, dass dieser auf YUI 2.x basiert. Wollen Sie den Grids Builder verwenden, müssen Sie sich auch das YUI 2 CSS Framework herunter laden. Von 2 nach 3 wurde bereits an der Grids-Basis gearbeitet, so dass der durch den Builder erzeugte Code nicht mit den CSS-Files aus YUI 3 funktioniert, auch wenn der Builder-Link durch die Verwendung einer 3 anderes suggeriert: http://developer.yahoo.com/yui/3/cssgrids/builder/

Um zu schauen, ob das wirklich alles so einfach und prima funktioniert, baue ich folgend die Startseite des Dr. Web Magazin unter Verwendung des YUI CSS nach.

Praxistest: Dr. Web Optik mit dem YUI CSS Framework

Unter der URL http://yui.akuefi.de/ steht das zugegebenermaßen ziemlich unspektakuläre Ergebnis meiner folgenden Bemühungen zur Ansicht bereit. So bin ich vorgegangen:

Zunächst erstelle ich einen Projektordner. Ich nenne ihn yuicss und verknüpfe ihn mit der Subdomain "yui.ahuefi.de". In diesem Verzeichnis lege ich eine index.html, sowie die Ordner css, img und js an. Js brauchen wir für das Beispiel nicht, aber vielleicht wollen Sie sich im Nachgang unbedingt auch noch in die YUI Javascript Komponenten stürzen.

Hernach lade ich von Dr. Web ein paar Grafiken herunter und speichere sie in das Verzeichnis img. Der Einfachheit halber habe ich den Plus-Login rechts oben, sowie die rechte Sidebar per Screenshot als Grafik gesichert und ebenfalls dort abgelegt.

Das YUI CSS, namentlich die vier Dateien fonts-min.css, reset-min.css, base-min.css und grids-min.css, lege ich im Unterordner 960 innerhalb des Ordners yuicss ab, mein eigenes Stylesheet drweb.css eine Ebene höher. So kann man nicht versehentlich an den Originalen des YUI CSS rumfummeln.

In der index.html verknüpfe ich nun im Head die Stylesheets.

Gridbuilder - Mit YUI 3 CSS unbrauchbar

Um zu schauen, inwieweit es vielleicht einfacher ist, den generierten Code auf YUI2-Basis an 3 anzupassen, anstatt alles von Hand zu schreiben, baue ich mir nun mit dem YUI CSS Grid Builder ein Layout zusammen, dass in etwa passend sein müsste.

Zunächst macht der Grid Builder einen hervorragenden Eindruck. Wenn er nur nicht auf YUI 2 basierte...

Allerdings tritt schnell Ernüchterung ein. Yahoo hat nicht nur die Bezeichner umbenannt, sondern ist auch komplett von IDs auf Klassen umgestiegen und hat verschiedene Elemente komplett entfernt beziehungsweise teils durch andere ersetzt. Der Code aus dem Builder ist total unbrauchbar. Sehen wir es positiv: Man arbeitet offenbar bereits aktiv an einer Änderung der Grids-Komponente ...

Gehen wir das Layout grob konzeptionell an. Wir benötigen einen Header mit dem Logo und dem Login rechts. Dann brauchen wir einen Container mit der Hauptnavigationsleiste über die gesamte Screenbreite, woran sich drei Container mit dem dreispaltigen Hauptlayout anschließen. Unten schließt ein Footer die Seite ab.

Das YUI CSS Framework ist vom Ansatz her vergleichbar mit der Vorgehensweise beim Layouten eines Printproduktes wie mit InDesign. Zunächst wird die Seite eingerichtet, dann wird ein Grobtemplate eingerichtet und danach werden die Inhaltsblöcke auf der Seite verteilt und - soweit nötig - ineinander verschachtelt.

Auf diese Weise entstehen im Grunde unnötig viele Container, die lediglich dem Zweck dienen, Eigenschaften auf die untergeordneten Container zu vererben. Kritiker werden nicht zu Unrecht sagen, dass diese Verwendung von p sich nicht sonderlich von der mittlerweile verpönten Verwendung von Tabellen als Layoutelement unterscheidet. In der Tat wird es in einem komplexen Layout schon nach kurzer Zeit unübersichtlich. Ohne Editor mit Codecollapsing sind Sie verloren.

Positiv zu erwähnen ist die Umstellung der Layoutdefinitionen im Framework von ID auf Class. Nicht nur, dass eine ID pro Seite nur einmal vorkommen darf und so wiederholte Verwendungen desselben Layouts unnötig erschwert bis unmöglich waren. Auch ein einigermaßen semantisches Markup ist natürlich nicht möglich, wenn das Framework IDs mit kryptischen Buchstabenkombinationen vorgibt. Abgesehen davon, dass der Code deutlich besser lesbar ist, wenn man der linken Sidebar auch die ID sidebar_links verpassen kann.

Die wesentlichen Klassen des YUI CSS

Bevor wir nun Dr. Web ins YUI CSS zwingen, schauen wir uns die wesentlichen Klassen an, mit denen wir es im weiteren Verlauf zu tun bekommen werden.

.yui-d: Diese Klasse definiert die Gesamtseitenbreite, wird daher logischerweise direkt zu Beginn des Body gesetzt und erst am Ende wieder geschlossen. Es sei denn, man wollte mit mehreren Seitenbreiten auf der gleichen Seite arbeiten, was auch geht, aber nur in den wenigsten Anwendungsfällen wohl Sinn machen dürfte. -d steht übrigens für Document. Ganz so kryptisch ist das Markup also nicht.

.yui-t: YUI verfügt über verschiedene vorgefertigte Templates, die im Wesentlichen dazu dienen, die Position und Größe der Sidebar zu definieren. Da die klassische Sidebar über die gesamte Seitenhöhe gehen soll, muss YUI eine außerhalb des Gridkonzeptes liegende Lösung anbieten. Ansonsten sind Gridunits nämlich immer nur so hoch wie der höchste Content in der jeweiligen Row. - t steht, Sie ahnen es bereits, für Template. yui-t kann zur Anwendung kommen, auch mehrmals pro Seite, muss aber nicht.

.yui-b und .yui-main: Mit der Klasse yui-b werden die Inhaltsblöcke versehen. Das -b steht entsprechend für Block. Über yui-main wird innerhalb des Grids gesteuert, welcher Block den größeren Layoutanteil ausfüllen soll. Auf diese Weise ist es nicht erforderlich, in einem 2/3 zu 1/3 Grid den Teil, der 2/3 einnehmen soll, auch im Markup zuvorderst zu stellen.

.yui-g: -g steht für Grid und stellt zusammen mit yui-u den Kern des Gridsystems dar. yui-g bezeichnet einen Container, der im Standard zwei Units (yui-u) enthalten kann. Ohne Zusätze führt die Verwendung von yui-g dazu, dass sich zwei Units in einem -g den Platz hälftig teilen. Ähnlich wie bei -d und -t gibt es hier Weiterungen, mit deren Hilfe man unproblematisch asymmetrische Teilungen hinbekommt. So führt .yui-gc beispielsweise zu einer 2/3 zu 1/3 Teilung. Nutzt man yui-g direkt als Inhaltscontainer, erstreckt er sich über die volle definierte Seitenbreite.

.yui-u: Innerhalb der yui-g Divs existieren die Units, die Inhaltseinheiten. Ähnlich wie in der Blockdefinition kann man hier außerhalb der Markupreihenfolge Units unter Verwendung des Attributs first (div.yui-u first) den ersten Platz in der Reihe zuweisen. Anders als bei -main ist das Setzen von yui-u first verpflichtend, da sich ansonsten immer die größere Unit nach vorn setzt. Units können auch wieder Grids enthalten, allerdings mit der weiter unten genannten Einschränkung.

Der Seitenaufbau

Diese wenigen Kenntnisse reichen aus, um ans Layout zu gehen. Das Musterprojekt können Sie unter http://yui.akuefi.de/ besuchen. Den Quelltext der Beispielseite können Sie hier als Rar-komprimiertes File herunter laden.

Nach der Philosophie des YUI CSS beginnen wir also mit der Definition der Gesamtseitenbreite. Dazu legen wir im Body ein Div mit einer Class entsprechend der folgenden Tabelle an:

Dr. Web verwendet eine 100%-Breite. Ich verwende im Beispiel daher die korrespondierende Klasse yui-d0. Um sicher zu stellen, dass der Header und die Hauptnavigation korrekt dargestellt werden, setze ich nun die Klasse yui-main, einen ersten Block, sowie ein erstes Grid über die gesamte Breite. Das wiederhole ich für die obere Navigationsleiste und schließe die Blocks, sowie das Main-Div ab.

Da ich eine linke und rechte Sidebar benötige, überlege ich zunächst, auf ein Template zu verzichten und stattdessen mehrere yui-g ineinander zu verschachteln. Schnell stelle ich fest:

Ein Nesting dergestalt, dass man zunächst in der Div yui-u first ein Div yui-gf (1/4 zu 3/4) definiert, um dann in der zweiten Unit (yui-u) ein Div yui-ge (3/4 zu 1/4) anzulegen und so in Summe ein 1/4 zu 1/2 zu 1/4 zu erreichen ist nicht möglich. Das Nesting von yui-gx in yui-gx führt dazu, dass immer die Eigenschaften des ersten yui-gx auf alle weiteren vererbt werden. Verschachteln der yui-g ist also möglich, um beispielsweise vierspaltige Layouts zu erreichen, aber immer nur unter Beibehaltung der zuerst gewählten Konvention. Auf diese Weise kann das dreispaltige Dr. Web Layout also nicht erstellt werden.

Damit wird klar, dass das Dr. Web Layout mit YUI CSS nicht sachgerecht umgesetzt werden kann, bräuchte es doch zwei Sidebars. So kann das Layout nur existieren, wenn keine weiteren Rows erforderlich würden. Diese würden nämlich die rechte Sidebar kappen, respektive inhaltslos bleiben.

Um wenigstens optisch das Layout nachzubilden, setze ich das Template .yui-t1 ein, was eine Sidebar links mit einer Größe von 160 Pixeln definiert. Danach definiere ich einen Inhaltsblock mit dem Sidebarcontent. Den verbleibenden Platz teile ich unter Verwendung von .yui-ge in 3/4 zu 1/4 auf. Dabei erhält der Textpart den Zusatz .yui-u first.

Zu guter Letzt verwende ich noch ein .yui-g als Inhaltscontainer für den Footer.  Fertig ist das Grundlayout.

Fazit: Das Gridskonzept im neuen YUI 3 CSS unterscheidet sich grundlegend von YUI 2 CSS und ist dabei relativ rudimentär dokumentiert. Zwar ist das Prinzip leicht zu erfassen, jedoch werden genau so schnell auch die Limitierungen offenbar, will man nicht tief in die CSS-Kiste greifen.

Als Gridsystem eignen sich daher, nicht zuletzt aufgrund eingängigerer Konzepte, andere Frameworks, wie etwa Blueprint oder 960.gs besser. Allerdings würde man YUI unrecht tun, wenn man es auf die Gridkomponente, die überdies als deprecated bezeichnet wird, reduzierte. YUI ist in vorderster Linie als Javascript-Framework gedacht und besitzt in seinem CSS auch typografische Komponenten, die anderen Systemen wiederum abgehen.

(sl), (mm),