Internet Magazin Responsive Webdesign (Vorschau)

3/13 

Knowhow für Web-Profis 

€ 4,50 

Österreich € 5,10 

BeNeLux € 5,10 

Italien € 6,00 

Spanien € 6,00 

Schweiz sfr 9,00 

Griechenland € 7,00 

www.internet-magazin.de 

WebDesign 

Off-Canvas-Layouts 

Kleiner Bildschirm, viel Inhalt: 

Effekte zum Einblenden 

Kommt jetzt CSS4? 

Auf einen Blick: Alle Neuerungen 

und Erweiterungen 

Websites 

in der Cloud 

Hosting mit Google 

Drive Site Publishing 

Webbusiness 

Shop-Tuning 

Ihr Webbusiness mit Wordpress 

erfolgreich managen 

Mobiles SEO 

Mit diesen Tools und Techniken 

optimieren Sie für Google und Co. 

NEU: Zum Sammeln! 

Mini-CMS 

Kleiner Aufwand – große Wirkung: 

Websites erstellen mit Citus 

Responsive 

Webdesign 

Die besten Frameworks: 

320 and Up 

Bootstrap 

Foundation 

Quick Reference Guide 

Social Media 

Teil 6 in diesem Heft 

Cheat 

Sheet

Hetzner Online unterstützt mit der 

Verwendung von 100% regenerativem 

Strom aktiv den Umweltschutz. 

Entscheiden Sie sich gemeinsam 

mit uns für eine saubere Zukunft.

editorial 

verlost 

Bücher zu gewinnen! 

Semantische Suche 

Das Social-Media-Highlight zu Beginn des Jahres 2013 war sicherlich 

die Einführung der „Graph Search“ von Facebook. Damit soll 

die weltweite Community zur Datenbank werden und die semantische 

Suchfunktion dazu beitragen, dass unter anderem Orte, Fotos, 

Gruppen, Beiträge, Personen, Seiten und Freundschaften schnell 

auffindbar sind. Diese Informationen werden dann übersichtlich aufbereitet, 

zentral bereitgestellt und so miteinander verknüpft, dass 

konditionale Bedingungen interpretierbar sind. Für Online-Händler 

werden die Likes und Kommentare der Facebook-Nutzer damit noch 

wichtiger. Und bei ihnen geht es zukünftig auch nicht mehr nur um 

die bloße Präsenz und die Verbreitung von Werbebotschaften in den 

sozialen Netzwerken, sondern verstärkt um die Interaktion mit den 

Usern, um hohe Reichweiten zu schaffen. 

Neben der Nutzung der Social Networks ist für den Marketingerfolg 

eines Unternehmens nach wie vor auch die Auffindbarkeit in 

Suchmaschinen wichtig und damit die Optimierung ebendieser. Da 

mobile Geräte immer größere Bedeutung erlangen, ist mobiles SEO 

als neuer Trend im Webbusiness zu verstehen. Ab Seite 60 berichten 

wir in dieser Ausgabe über die besten Tools und Praktiken, mit denen 

Sie mobile Besucher auf Ihre Website locken. 

Viel Spaß beim Lesen dieser Ausgabe wünscht 

Haben Sie sich auch schon einmal 

gefragt, weshalb manche 

Websites erfolgreich sind und 

andere nicht? Wie sorgen Sie 

dafür, dass Ihr Auftritt im 

Web gefunden und wahrgenommen 

wird und an den 

richtigen Stellen beworben 

wird? Suchmaschinen-Optimierung, Usability, 

Online-Marketing und Nutzung von Social 

Media sind die vier großen Themenkomplexe, 

wenn es darum geht, mehr Besucher auf die 

eigene Website zu locken und mehr Traffic beziehungsweise 

Umsatz zu generieren. Das Buch 

„Erfolgreiche Websites” (Galileo Computing, 

ISBN 978-3-8362-1871-9, 34,90 Euro) 

gibt Antworten auf die großen Fragen der Verbesserung 

des eigenen Webauftritts. 

Die Analyse der Online-Kanäle mit 

Web Analytics ist mittlerweile in 

den meisten Firmen Standard. Zugleich 

können über Business Intelligence 

wichtige Kenntnisse gewonnen 

werden. Im Buch „Future Digital 

Business” (mitp-Verlag, ISBN 978- 

3-8266-9233-8, 34,95 Euro) geht 

es darum zu zeigen, wie diese beiden Analysewerkzeuge 

in Kombination miteinander zu 

wertvollen Erkenntnissen führen können, um 

sowohl lang- als auch kurzfristige strategische 

Entscheidungen zu treffen. 

Daniela Schrank 

Chefredakteurin 

dschrank@wekanet.de 

Machen Sie mit bei unserer Verlosung und gewinnen 

Sie jeweils drei Exemplare unter 

www.internet-magazin.de/verlosung 

www.internet-magazin.de 3

Service | Inhalt 

3/13 

Responsive Layout 

Inzwischen gibt es eine Reihe von Responsive Frameworks – aber 

welches eignet sich wofür? Und was sind die wichtigsten Vor- und 

Nachteile der einzelnen Frameworks? 

S. 16 

Off-Canvas-Layouts 

Häufig werden Layoutkomponenten bei 

einem Responsive Layout auf schmalen 

Bildschirmen untereinander dargestellt. 

Eine interessante Alternative dazu ist 

Off-Canvas: Hier sind Inhalte außerhalb 

des sichtbaren Bereichs platziert und 

werden erst bei Bedarf eingeblendet. 

Ein schicker Effekt – der Workshop zeigt, 

wie es geht. 

S. 24 

AKTUELLES 

News & Trends 6 

World Hosting Days 2013 12 

Trackback 14 

Spannende, interessante und witzige Fundstücke 

aus dem Web 

SPECIAL 

Responsive Layout 16 

Die besten Frameworks 

WEBDESIGN 

Off-Canvas-Layouts 24 

Schicke Einblendeffekte 

Viel Neues bei CSS 32 

Aktuelle Standards 

Webentwicklung 

Frontend-Entwicklung 36 

Tools für jeden Einsatz 

Social Media Cheat Sheet 40 

Serie: Quick Reference Guide 

Cloud-Hosting 46 

Google Drive Site Publishing 

Citus CMS 52 

Kleiner Aufwand – große Wirkung 

Webbusiness 

Shop-Tuning 56 

Mit Wordpress den Verkauf ankurbeln 

SEO für mobile Websites 60 

Erfolgreiche Suchmaschinenoptimierung 

Networking mit System 64 

Business Relationship Management 

Provider-Porträt 70 

Deutsche Telekom 

4 0313 internet magazin

Inhalt | Service 

Frontend-Entwicklung 

Es herrscht wahrlich kein Mangel an 

Werkzeugen für die Entwicklung und 

Pflege von Internetseiten. Nur sollte 

das Tool auch zum eigenen Arbeitsstil 

passen. Wir haben uns für Sie auf dem 

Markt umgesehen und präsentieren 

Werkzeuge für jede Anforderung. 

S. 36 

Wordpress-Shop 

Wer mit Wordpress bereits ein eigenes 

Blog betreibt oder seinen 

Internetauftritt pflegt, möchte 

damit vielleicht auch möchte darüber 

vielleicht auch Waren zum 

Verkauf anbieten. Shop-Plug-ins 

machen das möglich. 

S. 56 

Cloud-Hosting 

Mit Drive Site Publishing möchte 

Google das Webhosting neu erfinden. 

Wir zeigen, was Sie mit einem 

kostenlosen Google-Drive-Account 

jetzt schon alles anstellen können. 

S. 46 

TIPPS & TRICKS 

Online-Recht. ...........68 

• Fragliche Entscheidungen 

iOS. ..................71 

• Debugging mit Safari Web Inspector 

• Apple Xcode 

• „ Smarte” App-Banner 

Javascript ..............72 

• Performance optimieren 

• Zusammenfügen von Zeichenketten 

• Schleifen und Iterationen 

• Zugriff auf Objekteigenschaften 

• Feldabfragen wiederverwendbar machen 

• Ereignisauswertung beschleunigen 

• Snippets in Chrome ausführen 

CSS. ..................72 

• Responsives Video 

• Selektoren wählen 

• Floats abschließen 

HTML5 ................74 

• Das placeholder-Attribut 

Website-Branding ........78 

• Favicons per Vorschau erstellen 

Internet Explorer. ........78 

• Entwicklungswerkzeuge 

Mobiles SEO 

Suchmaschinenoptimierung zählt 

zu den wichtigsten Voraussetzungen 

für den Erfolg einer mobilen Website. 

Internet Magazin beleuchtet 

bewährte SEO-Praktiken, -Tools 

und Techniken, die Ihrer Website 

die so begehrten mobilen Besucher 

bescheren. 

S. 60 

SERVICE 

Editorial . . . . . . . . . . . . . . . . . 3 

Branchenverzeichnis . . . . . . . 79 

Impressum . . . . . . . . . . . . . . 82 

Vorschau . . . . . . . . . . . . . . . . 82 


Aktuelles | News 

Urheberrecht 

Facebook: Abmahnung wegen 

Vorschaubild 

Werden Links via Facebook geteilt, 

zeigt das soziale Netzwerk neben 

einem Textschnipsel auch ein 

kleines Vorschaubild an. Das allerdings 

kann problematisch sein, 

denn auch diese Bilder unterliegen 

dem Urheberrecht. Im Auftrag 

einer Fotografin mahnte die Berliner 

Kanzlei Pixel.law im Januar 

die Betreiber von gewerblichen 

Facebook-Seiten wegen eines solchen 

Urheberrechtsverstoßes ab. 

Gefordert wurden die Abgabe einer 

Unterlassungserklärung, 1.200 

Euro Schadensersatz und Anwaltskosten 

von knapp 550 Euro. Laut 

Frank Weiß von Weiß & Partner, 

der einige Betroffene vertritt, käme 

man kaum umhin, „einen Urheberrechtsverstoß 

in Bezug auf das 

bei Facebook angezeigte Miniaturbild 

zu bejahen“. Zweifel gebe es 

lediglich bezüglich der Höhe des 

Schadensersatzes und der entstandenen 

Rechtsanwaltskosten. Weiß 

rät, bei Verlinkungen über Facebook 

das Häkchen bei „Kein Miniaturbild“ 

zu setzen, um den Link 

ganz sicher ohne Bild zu setzen. 

Nur wer wirklich sicherstellen könne, 

dass er über die Rechte an dem 

Bild auf der Ursprungsseite verfügt, 

sollte das Miniaturbild anzeigen 

lassen. Das gilt natürlich nicht nur 

für Facebook, 

sondern auch 

für andere 

soziale Netzwerke 

wie 

Google+ oder 

Xing, die ebenfalls die Vorschau 

eines Bildes von verlinkten Websites 

anzeigen. 

www.anwalt-fotorecht-berlin.de 

www.ratgeberrecht.eu 

1&1 

Web-Analyse per App 

Für den Zugriff auf Website-Statistiken bietet 

1&1 seit Kurzem eine App für Android 

und iOS an. Diese ist bei Google Play 

und iTunes unter dem Namen „1&1 Web 

Analyse“ zu finden und kann kostenlos 

heruntergeladen werden. Sie liefert die 

üblichen Informationen zu Seitenaufrufen, 

Besuchen und Besucherquellen, wie man 

das von Webanalyse-Lösungen kennt. Tiefer 

gehende Informationen fehlen jedoch, im 

Control Center von 1&1 sind wesentlich 

ausführlichere Daten zu finden. Zudem lässt 

sich das Zahlenmaterial nicht für einen bestimmten Monat 

oder gar eine frei definierbare Zeitspanne anzeigen, 

sondern nur für die vorgegebenen Zeiträume von sieben, 

30 und 360 Tagen. Für einen schnellen Blick, wie sich der 

Traffic entwickelt, eignet sich die App aber allemal. 

www.1und1.de 

W3C 

HTML5 ist komplett 

Das W3C hat erklärt, die Spezifikationen für HTML5 

und Canvas 2D seien komplett; beide wurden in den 

Stand einer »Candidate Recommendation« gehoben. 

Das bedeutet: Alle neuen Features sind an Bord, nun 

geht es vor allem darum, Erfahrungen mit der Implementierung 

zu sammeln, bevor die 

Standards als W3C-Empfehlung vorgeschlagen 

werden. Das soll aber 

frühestens Mitte 2014 geschehen. 

Unterdessen haben die Arbeiten 

an HTML5.1 begonnen, für das ein 

erster Entwurf veröffentlicht wurde, 

der aber noch keine größeren Neuerungen enthält. 

Geplant sind unter anderem Verbesserungen bei der 

Untertitelung von Videos, bei der Nutzung von Iframes 

und beim Einsatz von Formularen, etwa Autovervollständigung 

und Rechtschreibkorrektur. 

w3.org 


News | Aktuelles 

Microsoft 

Expression-Reihe wird eingestellt 

Microsoft räumt bei seinen Developer-Tools 

auf und stellt die Weiterentwicklung 

der Expression-Reihe 

ein. Expression Blend, mit dem sich 

Bedienoberflächen gestalten lassen, 

soll künftig unter dem Namen Blend 

als Erweiterung für Visual Studio 

2012 zu haben sein, eine Preview 

ist bereits verfügbar. Der Verkauf von 

Expression Studio wird ebenso eingestellt 

wie der von Expression Design 

und Expression Web, die man beide 

jedoch zum kostenlosen Download 

anbietet. Die Gratisversionen von 

Grafikprogramm und Webeditor 

besitzen dieselben Funktionen wie 

die bisherigen Bezahlausgaben, für 

sie gibt es allerdings keinen Support. 

Mobile Web 

Apple vor Android 

Die Bezahlausgaben werden dagegen 

wie geplant bis zum Ende des 

Produktlebenszyklus 

unterstützt. Im Falle von 

Expression Studio 4, Expression 

Design 4 und 

Expression Web 4 läuft 

der Mainstream-Support 

bis Anfang September 

2015, der Extended 

Support bis Anfang 

September 2020. Einzig 

der Expression Encoder 4 Pro 

soll weiterhin verkauft werden, 

die abgespeckte Version Expression 

Encoder 4 steht nach wie vor 

kostenlos bereit. 

www.microsoft.com/expression/ 

Waren Mobilgeräte zu Anfang 2012 noch für 

8,2 Prozent aller Webseitenaufrufe verantwortlich, 

so stieg ihr Anteil zum Jahresende 

auf 13,0 Prozent. Das geht aus der aktuellen 

Statistik von Webtrekk für das vierte Quartal 

2012 hervor. Für die meisten mobilen Aufrufe 

zeichnen weiterhin 

Apple-Geräte verantwortlich, 

allerdings gab 

es im Jahresverlauf eine 

deutliche Verschiebung 

zugunsten des iPads. 

Während das iPhone 

stark einbüßte, schob 

sich das Tablet vorbei. 

Gemeinsam kommen 

die Apple-Geräte iPad, 

iPhone und iPod auf 

einen beachtlichen 

Marktanteil von 67,4 

Prozent (minus 0,4 Prozentpunkte). 

Android-Smartphones und Android-Tablets 

bringen es auf 21,3 Prozent, 

wobei mehr als die Hälfte dieser Seitenaufrufe 

über Geräte aus Samsungs Galaxy-Reihe 

erfolgte (10,9 Prozent). 

www.webtrekk.com 

• • • Ticker • • • 

■ EU-weites Gütesiegel 

Bislang bot Trusted Shops 

sein Gütesiegel nur in einigen 

europäischen Ländern 

an, nun ist es in allen EU- 

Staaten verfügbar. Dabei 

orientiert man sich an der 

für 2014 geplanten Verbraucherrichtlinie, 

die einen einheitlichen 

Standard für Gütesiegel-Anbieter 

schaffen soll. 

www.trustedshops.de 

■ PDFs ohne Plug-In 

Firefox soll PDF-Dokumente 

künftig ohne Plug-In darstellen. 

Dafür wird die Javascript- 

Bibliothek PDF.js eingesetzt, 

die vor ein paar Monaten 

schon mal in die Aurora-Version 

von Firefox 15 eingebaut, 

dann aber entfernt wurde. 

Nun hält man sie für stabil 

genug, um im Browser zu 

verbleiben, denn bei der im 

Januar veröffentlichten Beta 

von Firefox 19 war sie über die 

Aurora-Phase hinaus an Bord. 

www.mozilla.org 

mozillalabs.com/pdfjs/ 

■ Domain-Tool für Startups 

Damit Startups schon in der 

Anfangsphase ein breit aufgestelltes 

Domainportfolio anlegen 

können, lockt InternetX 

mit Sonderkonditionen. So 

verzichtet man auf die Setup- 

Gebühr von 49 Euro für das 

Aufsetzen des Domain-Management-Tools 

AutoDNS 3.0. 

und hilft beim Erstellen einer 

Domainstrategie. 

www.internetx.com 



Lycos 

Comeback mit neuer Suchmaschine 

Domainfactory 

Feature-Upgrade für ein Jahr 

In den 90ern war Lycos neben 

Yahoo und Altavista eine der bekanntesten 

Suchmaschinen, 

doch 

mit dem Aufstieg 

von Google begann 

der Abstieg von Lycos. Das Portal 

konzentrierte sich eher auf Inhalte 

denn die Suche und wechselte 

mehrmals den Besitzer. Der europäische 

Ableger wurde aufgelöst. 

In den USA hat man allerdings 

noch eine größere Nutzerbasis 

und will diese Marktposition nun 

mit einer neuen Suchmaschine 

stärken. Momentan wird die Suche 

auf dem Portal noch von Yahoo 

gestellt, doch 

eine eigene Suche 

ist geplant, wie 

CEO Rob Balazy 

dem US-Weblog „The Next Web“ 

verriet. Diese soll Inhalte in aufbereiteter 

Form anzeigen und es dem 

Nutzer so ersparen, auf unzählige 

Links zu klicken. Einen Termin für 

den Start der neuen Lycos-Suche 

nannte Balazy allerdings nicht. 

www.lycos.com 

thenextweb.com 

Bis Ende März bietet Domainfactory seine Managed 

Hosting-Pro-Pakete mit zahlreichen Zusatz-Features 

an, die üblicherweise kostenpflichtig sind, im Rahmen 

der Aktion jedoch ein Jahr lang ohne Aufpreis genutzt 

werden können. So verdoppelt man den Speicherplatz 

für Website und Mails von jeweils 50 auf 100 GByte. 

Teilten sich bislang 27 Kunden einen CPU-Kern, so 

sind es nun nur noch 13. Auch der PremiumVIP-Service, 

der sonst mit 10 Euro pro Monat berechnet wird, 

steht ein Jahr lang gratis bereit. Er bietet eine gesonderte 

0800-Nummer und Mail-Adresse für Support- 

Anfragen, die bevorzugt bearbeitet werden. Die Aktion 

kann sowohl von Neu- als auch Bestandskunden in 

Anspruch genommen werden. Eine einmalige Einrichtungsgebühr 

fällt auch für Neukunden nicht an. 

www.df.eu 

BVDW 

Einkaufen im Web 

Laut dem Bundesverband Digitale Wirtschaft (BVDW) erledigen deutsche 

Internetnutzer bereits 25 Prozent ihrer Einkäufe online. Damit liegen 

sie deutlich über dem europäischen Schnitt, denn europaweit erfolgen 

nur 18 Prozent aller Einkäufe über das Web. Und egal ob Online- oder 

Offline-Einkauf: Zu Beginn steht fast immer die Recherche im Internet. 

98 Prozent der Internetnutzer informieren sich vor dem Kauf online über 

Produkte und Dienstleistungen. 

www.bvdw.org 

Apache 

Flex wird Top-Level-Projekt 

Das einst von Adobe entwickelte und mittlerweile 

bei der Apache Software Foundation untergekommene 

Flex-Framework, ist dem Inkubator entwachsen 

und residiert nun als Top-Level-Projekt 

unter dem Apache-Dach. Dort angekommen hat 

man Version 4.9.0 veröffentlicht, die den Flash 

Player 10.2 bis 11.5 unterstützt und einen neuen SDK-Installer 

mitbringt. Dazu gibt es einige neue Klassen für die Formatierung 

und Validierung von Code. Auch das Text Layout Framework (TLF) 

und das Test-Framework Mustela wurden aktualisiert. 

flex.apache.org 

Werbung 

Online boomt 

Der deutsche Werbemarkt stagniert 

laut einer Analyse von Mindshare. 

Im vergangenen Jahr betrug das 

Wachstum nur magere 0,5 Prozent. 

Die große Ausnahme: Online-Werbung. 

Hier lag das Plus der Agentur 

zufolge zwischen zwölf und 15 

Prozent. „Digitale Kanäle sind die 

alleinigen Profiteure bei den Mediainvestments“, 

fasst Mindshare-CEO 

Christof Baron zusammen. 

Die Aussichten für 2013 seien eher 

trübe, das Konjunkturbarometer stehe 

auf Stagnation, lautet der Ausblick 

für dieses Jahr. Selbst der Online- 

Werbemarkt wird sich abkühlen, was 

aber immerhin noch ein Wachstum 

von zehn Prozent bedeutet. Wachstumstreiber 

sind die Bereiche Social 

Media, Mobile und Video. 

www.mindshare.de 


News | Aktuelles 

CMS Garden 

Content-Management-Systeme auf der Cebit 

Zahlreiche freie Content-Management-Systeme 

präsentieren sich 

auf der Cebit (5. bis 9. März) mit 

einem gemeinsamen Stand, darunter 

Wordpress, Typo3, Joomla, 

Drupal, Contao und Plone. Im CMS Garden in Halle 

6 wollen sie ihre Stärken und Besonderheiten in den 

Vordergrund stellen und in einer CMS-Competition 

gegeneinander antreten. In dieser soll eine bestimmte 

Aufgabe vor Publikum mit allen Systemen umgesetzt 

werden. Derzeit sucht man noch nach Sponsoren, 

ebenso nach Helfern für die Organisation und Durchführung 

des Messeauftritts. 

www.cmsgarden.org 

Wikipedia 

Ausgaben von 27 Millionen Dollar 

Die Wikimedia Foundation hat ihren 

Jahresbericht für das vom Juli 2011 bis 

Juni 2012 laufende Geschäftsjahr vorgelegt. 

Die Organisation, die mit der Wikipedia 

die fünftgrößte Website der Welt 

betreibt, die es in diesem Zeitraum auf 

durchschnittlich 19 Milliarden Seitenaufrufe 

pro Monate brachte, gab gut 29 Millionen 

Dollar aus, etwa für die Gehälter 

der rund 125 Mitarbeiter und die Weiterentwicklung 

der Software. Hier war vor 

allem der neue Visual Editor ein größerer 

Kostenblock, der in diesem Jahr eingeführt 

werden soll und das Bearbeiten der 

Artikel ermöglicht, ohne sich mit 

Markup-Befehlen herumschlagen 

zu müssen. In der englischsprachigen 

Wikipedia ist seit Dezember 

vergangenen Jahres eine Alpha 

verfügbar. Finanziell steht die Wikimedia 

Foundation gut da, denn den 

Ausgaben stehen Einnahmen von 

38,5 Millionen Dollar gegenüber; 

der Löwenanteil, fast 36 Millionen 

Dollar, kam über Spenden zusammen. 

Mehr als 1,13 Millionen Menschen 

spendeten, die Zahl der Großspender, 

die 1.000 Dollar und mehr gaben, blieb 

jedoch überschaubar und passt im Jahresbericht 

auf etwa eine A4-Seite. 

wikimediafoundation.org 

Host Europe 

Business-Cloud kurzzeitig billiger 

Bis zum 28. Februar verlangt Host Europe 

für die Basiskonfiguration seiner Dedicated 

Private Cloud nur 599 statt 967 Euro pro 

Monat. Dafür gibt es zwei Dell Poweredge 

R420 mit Quadcore-Prozessoren aus Intels Xeon-Reihe und jeweils 4 

GByte Arbeitsspeicher sowie Lizenzen für VMware vSphere und vCenter, 

Managed Switching zwischen den beiden Servern und deren redundante 

Anbindung an ein SAN. Mit seiner Business-Cloud will Host Europe es 

Unternehmen erleichtern, ihre dedizierten Server in einer virtuellen Umgebung 

zu konsolidieren. Statt unzählige physikalische Server zu verwalten, 

sollen Unternehmen nach Bedarf virtuelle Server in Betrieb nehmen 

und deren Leistung dynamisch anpassen können. 

www.hosteurope.de 

Drupal 

CKEditor statt Aloha 

Eigentlich wollten die Drupal-Entwickler in Version 

8 ihres CMS auf Aloha als WYSIWYG-Editor setzen, 

doch nun hat man sich für CKEditor entschieden. Der 

Wechsel erfolgte, nachdem es einige Probleme 

mit Aloha gab und die Macher des CKEditor 

sich als Alternative anboten. Zudem sei 

CKEditor das erwachsenere System, schreibt 

Chefentwickler Dries Buytaert. Mehrere Tage 

lang sammelte man Pro und Contra für die beiden Editoren 

und diskutierte anschließend mehrere Wochen 

darüber, ehe man sich zum Wechsel entschloss. 

drupal.org 

buytaert.net 



Moonbase 

Animationen per Plug-and-Play 

Jake Lodwick, seines Zeichens 

Mitbegründer des Videoportals 

Vimeo, ist mit einer neuen Firma 

namens Elepath am Start, deren 

erstes Projekt Moonbase ist, ein 

Dienst, der Animationen auf Basis 

von HTML5 erstellt, ohne dass 

man sich mit HTML und Javascript 

auskennen muss. In wenigen Sekunden 

sind Texte, Bilder und Bewegungen 

zusammengeklickt und 

die Animation fertig zum Einbau in 

eine Website. Ausprobieren kann 

man Moonbase ohne Anmeldung, 

erst zum Speichern oder Veröffentlichen 

der Animation wird ein Account 

benötigt. 

Gegenüber The Verge sagte Lodwick, 

dass HTML5-Anmationen 

zwar ein schöner Ersatz für Flash- 

Animationen seien, es fehle aber 

noch an einem Authoring-Tool 

wie Flash CS6. Daher müsse man 

derzeit noch alles von Grund auf 

coden, doch Leute, die das richtig 

gut können, seien selten. Die 

Welt brauche ein einfach zu benutzendes 

Authoring-Tool - und 

das sei eben Moonbase. 

moonbase.com 

1blu 

Neue virtuelle 

Server 

1blu hat seine virtuellen Server renoviert 

und ihnen eine höhere Leistung 

verpasst – die Preise bleiben 

unverändert. So kostet das kleinste 

Angebot, der 1blu-vServer LP weiterhin 

7,90 Euro pro Monat, bietet 

aber 2 GByte garantierten Arbeitsspeicher 

und maximal 4 GByte. 

Der Speicherplatz wächst auf 80 

GByte und es gibt neuerdings zwei 

IP-Adressen. Am anderen Ende der 

Leistungsskala rangiert der 1bluvServer 

8P, der nun auf maximal 

48 GByte RAM zugreifen kann, wovon 

ihm 24 GByte immer zur Verfügung 

stehen. Er bringt jetzt 800 

GByte Speicherplatz mit und sechs 

IP-Adressen. 

www.1blu.de 

Dart 

Zweiter Meilenstein 

Google hat den zweiten Meilenstein seiner Web- 

Programmiersprache Dart vorgestellt. Diese erzeugt 

nun kompakteren Javascript-Code, indem nicht benötigte 

Klassen im DOM einfach weggelassen werden 

und der Minifier aggressiver arbeitet. Ersteres 

geschieht automatisch, Letzteres setzt den Aufruf mit 

--minify voraus. Darüber hinaus wurden die Core- 

Bibliotheken überarbeitet und unterstützen nun Getter 

und Setter. Einige Namen wurden vereinfacht, um 

der Dart-Namensgebung besser zu entsprechen, aus 

DOMURL wurde beispielsweise Url und aus inner- 

HTML wurde innerHtml. Und zu guter Letzt wird SSL 

unterstützt, um beispielsweise via HTTPS auf andere 

Webservices zuzugreifen. Der dazu gehörende Editor 

unterstützt nun Themes und bringt ein GUI für pubspec.yaml 

mit, der Datei, in der die Abhängigkeiten 

eines Pakets deklariert sind. 

www.dartlang.org 

Browser-Editor 

Codemirror 3.0 ist da 

Die Javascript-Komponente Codemirror liegt in Version 

3.0 vor. Mit dieser lassen sich nun beliebige Schriftarten 

nutzen und Textbereiche als read-only oder atomic markieren, 

so dass der Cursor sie wie ein einzelnes Zeichen 

überspringt. Widgets können nun zwischen den Zeilen 

eingefügt werden. Dazu gibt es Verbesserungen bei von 

rechts nach links laufenden Sprachen, beim Event Handling 

und der Add-on-API. CodeMirror unterstützt HTML, 

CSS, Javascript, PHP, Perl, Python und SQL. Der Editor 

wird unter anderem von Adobe in Brackets (brackets.io) 

und von GitHub in der Android-App eingesetzt. 

codemirror.net 


„Meine Empfehlung. 

Denn dieses Paket 

enthält viel Leistung 

zu einem top Preis!“ 

Homepage Power 

1blu-Homepage Power 

> 2 Inklusiv-Domains 

> 2 GB Webspace 

> Unbegrenzter Traffic 

> 200 E-Mail-Adressen 

> 5 GB E-Mail-Speicher 

> Joomla, Wordpress, Typo3 vorinstalliert 

> Wertvolle Inklusiv-Software 

> 5 FTP-Zugänge 

> 10 MySQL-Datenbanken, PHP5 

> Telefon- und E-Mail-Support 

3,90 ¤ 

1,- 

¤ /Monat* 

Angebot bis 28.02.2013! 

* Preis/Monat inkl. 19% MwSt. Angebot verfügbar ab Anfang Februar 2013 (Näheres unter www.1blu.de). Einrichtungsgebühr jeweils einmalig 9,90 €. 

Bei Bestellung bis 28.02.2013 1blu-Homepage Power für 1,- €/Monat für die jeweils erste Vertragslaufzeit von 12 Monaten, danach regulärer Preis von 

3,90 €/Monat. Verträge jeweils jederzeit kündbar mit einem Monat Frist zum Vertragsende. Bei Software-Bestellung 7,90 € Versandkosten. 

** Preis/Monat inkl. 19% MwSt. Einrichtungsgebühr 1blu-Drive jeweils einmalig 9,90 € bei einer Vertragslaufzeit von 1 Monat, keine Einrichtungsgebühr 

bei einer Vertragslaufzeit von 12 Monaten. Verträge jeweils jederzeit kündbar mit einem Monat Frist zum Vertragsende. ende. 

030 - 20 18 10 00 | www.1blu.de 

1blu-Drive 

> Ihre Daten in der Cloud! 

> Komfortabler Online-Speicher 

> 25 GB nur 1,90 ¤/Monat** 

www.1blu.de/drive

Aktuelles | World Hosting Days 2013 

Weltgrößte Hosting- und 

Cloud-Messe WHD.global 

Wo sich normalerweise Karussells drehen, dreht sich 

im März wieder drei Tage lang alles um Serverhardware, 

Virtualisierung und Anti-Spam-Lösungen. Und 

das Beste: Für unsere Leser ist der Eintritt frei! 

sign und Dell als Diamond-Plus-Partner. 

Aber auch viele andere renommierte 

Marken, darunter HP, OnApp, Parallels, 

finden sich unter den rund 100 WHD- 

Partnern. Auf der Hauptbühne namens 

main.FORUM werden bedeutende Vordenker 

der Hostingwelt das Wort erhalten. 

Alle interessierten Vertreter der Hosting- 

und Internetbranche können sich 

ab sofort unter www.worldhostingdays. 

com als Teilnehmer registrieren. 

Freier Eintritt für Sie! 

Im Normalfall kostet ein Standardticket 

349 Euro, für VIP-Tickets mit vielen exklusiven 

Privilegien werden 999 Euro 

berechnet. Die Tickets beinhalten jeweils 

den Eintritt an allen Messetagen inklusive 

erstklassigem Catering und umfang- 

Daten und Fakten 

»»Mit mehr als 4.200 Besuchern aus 

Europa, Amerika und Asien ist die 

WHD.global das größte Hosting- 

Event der Welt. 

»»Mehr als 55 Prozent der Besucher 

kamen 2012aus der Führungsebene. 

»»Alle WHD-Events sind anbieterunabhängig, 

sodass sie über große 

Glaubwürdigkeit und Akzeptanz 

verfügen. 

»»86 Prozent der letztjährigen Besucher 

bewerteten die Qualität des 

Events als „Exzellent“ oder „Sehr gut“. 

»»82 Prozent der letztjährigen Besucher 

wollen 2013 wieder teilnehmen. 

Vom 19. bis 21. März findet im Europa- 

Park in Rust erneut die größte B2B- 

Messe der Hosting- und Cloud-Branche, 

die WHD.global, statt. Gut 4.200 internationale 

Experten besuchten das Event 

im Jahr 2012 und rund 100 Aussteller 

demonstrierten ihre aktuellen Lösungen. 

In der entspannten Atmosphäre eines 

Freizeitparks erleben die WHD-Besucher 

eine besondere Mischung aus Business, 

Information, Networking und Spaß. Das 

Konzept umfasst sowohl eine Fachmesse 

als auch Vorträge von Hosting-Pionieren 

sowie aufwändig organisierte Social 

Events. Darüber hinaus können die Teilnehmer 

in den Pausen die eine oder andere 

Achterbahnfahrt unternehmen. Zu 

den Ausstellern der Fachmesse hosting. 

FAIR gehören bekannte Größen wie Verireichem 

Rahmenprogramm. Für Leser des 

Internet Magazins ist der Eintritt frei. Registrieren 

Sie sich dazu bis zum 8. März 

2013 unter www.worldhostingdays.com/ 

de/visitors-registration.php mit dem Code 

"M6S4JQ89". Der Code gilt für die Standardteilnahme 

und beinhaltet ein kostenloses 

Shuttle von Offenburg HBF. Sie 

sparen 349 Euro! 

Wann? 19. – 21. März 2013 

Wo? Europa-Park-Straße 2 

77977 Rust/Deutschland 

Kontakt: info@worldhostingdays.com 


Voll dicke Technik. Kleiner Preis. 

Die STRATO ServerCloud. 

DAS IST CLOUD! 

keine Mindestvertragslaufzeit 

keine Einrichtungsgebühr 

Die STRATO ServerCloud definiert Server-Hosting neu – in Preis und 

Technik. Dank flexiblen Tarifen bezahlen Sie nur das, was sie auch 

nutzen. Los geht es bereits bei 1,99 € je Monat. Das ist Cloud. 

Jeder einzelne Server ist ein Unikat. Arbeitsspeicher, Festplatte und 

CPU-Leistung lassen sich flexibel anpassen. Nutzen Sie nur das, was 

Sie benötigen. Das ist Cloud. 

Die STRATO ServerCloud ist eine kleineVM oder ein ganzes Rechenzentrum. 

Arbeiten Sie ohne Hardware-Schranken. Das ist Cloud! 

1 

,99 

ab €/Mon. * 

HOSTED 

IN GERMANY 

* Preis inkl. MwSt. Info: 030 – 300 146 111 | strato-pro.de

Aktuelles | Trackback 

Zahlungsmittel 

Cleap 

Cleap ermöglicht das bargeldlose Bezahlen mit dem 

eigenen Smartphone: Die kostenlose Cleap-App verwandelt 

jedes Smartphone 

in eine virtuelle 

Geldbörse. Die Zahlungsabwicklung 

via 

Apple-, Android- und/ 

oder Windows-Smartphone 

findet kabellos 

über WLAN oder 

3/4G statt, indem der 

Händler einen QR- 

Code einscannt, der 

in der App generiert wird und nach erfolgreicher 

Zahlungsabwicklung verfällt. 

www.cleap.de 

Video-Service 

Clipvilla 

Einfache Werbevideos 

und -spots 

können Sie durch 

das Einfügen von 

eigenen Bildern, 

Videos und Texten 

in HD-Videovorlagen online selbst erstellen. Mit Musik 

und professionellen Sprechern lässt diese Videoproduktion 

sich dann noch zusätzlich aufwerten. Ob 

als Werbevideo, Imagefilm, Messepräsentation oder 

für Social Media, mit den Clipvilla-Templates erstellen 

Sie Bewegtbilder für Ihre Bedürfnisse und Ihre Branche: 

Die HD-Qualität und geringe Datengröße der 

Videos eignet sich perfekt für großflächige Internetwerbung 

oder Imagefilme für Websites. 

www.clipvilla.com 

iPad-Tools 

iFontMaker 

iFontMaker ist ein exklusiver Font-Editor 

fürs iPad, der über das Touch-Interface 

bedient wird: In weniger als fünf 

Minuten erstellen Sie damit Ihren eigenen 

handschriftlichen Font, der per E- 

Mail verschickt oder in ein TTF-Format 

konvertiert werden kann, das sich in 

Anwendungen wie Adobe Creativesuite, 

Microsoft Office für Mac und 

Windows und Webfonts online einsetzen 

lässt. iFontMaker von Eiji Nishidai, 

via Itunes für 6,99 US-Dollar. 

www.2ttf.com 

Einnahmequelle für Blogger 

Linksert 

Links weiterverteilen und daran verdienen: 

Mit Linksert können Blogger 

nach dem Affiliate-Prinzip an Produkten 

mitverdienen, die über einen 

von ihnen erzeugten Link verkauft 

werden. Eine große Auswahl an Online-Shops 

steht zur Verfügung und 

statt der mühseligen Anmeldung bei 

einzelnen Partnerprogrammen verteilt 

man nun einfach einen Linksert-Link. 

Mit Erfolgsstatistik. 

https://www.linksert.net/de 

Split-Test 

SEOclearly 

Welche Version einer Website kommt 

bei Google besser an? Statt aufwändiger 

Langzeittests mit unterschiedlichen 

statistischen Auswertungen 

durchzuführen, können Sie auch 

auf diesen Online-Dienst zurückgreifen, 

der unmittelbare Split-Tests 

für verschiedene Template-Varianten 

einer Site durchführt. Ganz ohne 

Wartezeiten, mit kostenlosem Probemonat 

und dann 99 US-Dollar 

Monatsgebühr für drei Websites und 

unbegrenztes Testen. 

www.seoclearly.com 


Jetzt wird Steuern sparen 

zum Kinderspiel! 

DIE 

ORIGINAL 

SOFTWARE 

nur 

€ 9,99 * 

Sparen Sie 2,– Euro 

Versandkosten! 

Ab sofort 

* inkl. 2,- Euro 

Versandkosten! 

im Handel! 

Gleich online bestellen unter 

www.wekashop.de

Special | Frameworks für Responsive Layout 

Frameworks für das 

Responsive Webdesign 

Inzwischen gibt es eine Reihe von Responsive Frameworks 

- aber welches Responsive Framework eignet 

sich wofür? Und was sind die wichtigsten Vor- und 

Nachteile der einzelnen Frameworks? 

Nicht bei jedem Projekt muss man 

das Rad neu erfinden, sondern kann 

eine Basisstruktur verwenden, die sich 

als robust erwiesen hat. Und vielleicht 

setzt man auch direkt fertige, gängige 

Layoutkomponenten ein, und passt sie 

entsprechend an. Die Verwendung von 

Frontend-Frameworks bietet also einiges 

an Vorteilen. Heute sollte ein solches 

Framework natürlich auch „responsiv“ 

sein, sprich die die erstellten Layouts 

sollten sich an die verschiedenen Bildschirmgrößen 

anpassen. Aus der großen 

Anzahl an Responsive Frameworks tellen 

wir als besonders interessante Varianten 

320 and Up, Bootstrap und Foundation 

vor. Außerdem wollen wir einen kurzen 

Blick auf einige weitere werfen. 

320 and Up 

320 and Up stammt von Andy Clarke; die 

erste Version erschien im Frühjahr 2011. 

Die rundum erneuerte Version 2 basiert, 

wie die Vorversion, auf Boilerplate, integriert 

aber jetzt ebenfalls Komponenten 

von Bootstrap. Wie der Name suggeriert, 

verfolgt 320 and Up den Ansatz „Mobile 

First“ und hatte damit ursprünglich eine 

Vorreiterrolle: Von den Formatierungen 

für die kleinen Bildschirme ausgehend, 

werden sukzessive die Angaben für grö- 


Frameworks für Responsive Layout | Special 

ßere Bildschirme ergänzt. Fünf Media 

Queries sind insgesamt im Stylesheet 

von 320 and Up enthalten: Eigene Formatierungen 

sind vorgesehen ab einer 

Größe von 480, 600, 768, 992 und 

1382 Pixel. Im Download-Paket finden 

Sie eine HTML-Datei als Vorlage mit 

nützlichen Bestandteilen. Sie beinhaltet 

beispielsweise konditionale Kommentare 

um das HTML-Element, damit sich 

besondere Formatierungen für einzelne 

IE-Versionen definieren lassen: 

 

Damit erhält das HTML-Starttag, wenn es 

sich um den IE 8 und nicht um eine mobile 

Version handelt, die Klasse lt-ie9. So 

können Sie besondere Formatierungen für 

diesen Browser in Ihrem Stylesheet vornehmen, 

indem Sie vor dem gewünschten 

Selektor .lt-ie9 ergänzen. Außerdem 

finden sich in der HTML-Datei nützliche 

eingebundene Javascript-Dateien wie 

Selectivizr, das die CSS3-Selektoren in 

älteren IEs nachbessert, und Modernizr 

zur Feature Detection. 

Eine zentrale Komponente von 320 and 

Up ist das Stylesheet. Dieses erhalten Sie 

in verschiedenen Versionen. Zusätzlich 

zur normalen CSS-Datei gibt es Stylesheets 

für CSS-Präprozessoren: Eigene 

Ordner beinhalten die Angaben für LESS 

und SASS, für Letzteres in verschiedenen 

Geschmacksrichtungen. 

Einen Überblick über die Formatierungen 

verschaffen Sie sich am einfachsten über 

die Präprozessoren-Version, weil dort 

Auf einen Blick 

Der Einsatz von Frontend-Frameworks 

bietet eine ganze Reihe von Vorteilen, 

besonders wenn diese responsiv sind. 

In diesem Artikel stellen wir einige 

besonders empfehlenswerte Frameworks 

wie 320 and Up von Andy Clarke, 

Bootstrap vom Twitter-Team sowie 

Foundation von Zurb vor und veranschaulichen 

die Vor- und Nachteile 

von CSS-Präprozessoren. 

die Dateien und Komponenten einzeln 

zu sehen sind. Zentrale Komponente ist 

ein 320andup genanntes Stylesheet, das 

die anderen Stylesheets einbindet und in 

Kommentaren erläutert, worum es sich 

jeweils handelt. 

Neben dem üblichen Reset-Stylesheet 

und grundlegenden Formatierungen 

gibt es auch Formatierungen für Alert- 

Buttons, Boxes und Badges – dort lassen 

sich beispielsweise schöne Farbverläufe 

einbauen. Für Icons wird wie bei Bootstrap 

der Font Awesome genutzt. Weitere 

Komponenten sind Vorformatierungen 

für Formularelemente oder Tabellen. Die 

Formatierungen für einzelne Viewportgrößen 

stehen in eigenen Dateien – teilweise 

auch nur als leere Vorlagen. Interessant, 

aber auch erklärungsbedürftig 

ist die Komponente Upstart von 320 and 

Up: In dieser finden 

sich Zusatz- 

Formatierungen 

für gängige Layoutkomponenten, 

etwa für ein 

Rasterlayout oder 

Bei 320 and Up 

mit dabei: eine 

Testseite, auf der 

sich eine Webseite 

in gängigen 

Viewportbreiten 

ansehen lässt. 



für Panels. Nützliche Helfer im Entwicklungsalltag 

des Responsive Designers 

sind zwei weitere Dateien, die man beide 

über einen Server aufrufen muss: responsive.html 

führt vor, wie eine ausgewählte 

Datei in verschiedenen Viewportgrößen 

aussieht. Sie setzt hierfür auf iFrames und 

zeigt automatisch die index.html-Datei, 

die sich im selben Verzeichnis befinden 

muss, in den verschiedenen Viewportgrößen. 

Die andere Datei, responsive. 

php, dient zum Test der Schriftgröße. 

So ist 320 and Up eine gute Projektvorlage 

mit ausgewählten Komponenten von 

Bootstrap und Mobile Boilerplate, ohne 

jedoch vollständige vorgefertigte Layouts 

zu präsentieren. Anpassungen lassen sich 

am einfachsten vornehmen, wenn man 

die CSS-Präprozessoren-Varianten nutzt. 

Bootstrap 

Das beliebte Frontend-Framework Bootstrap 

stammt ursprünglich vom Twitter- 

Team. Attraktiv ist es besonders durch 

seine vielen Komponenten für schöne 

Benutzeroberflächen – das reicht von 

einem einfach zu verwendenden Rasterlayout 

über Dropdownmenüs, Buttons, 

Navigationsvarianten, Thumbnails bis 

hin zu Fortschrittsbalken. Mit dabei sind 

eine Reihe von Javascript-Dateien für 

modale Dialoge, Tabs, Toooltipps, Popovers, 

Karussells und vieles mehr. Besonders 

praktisch ist der konfigurierbare 

Download, bei dem Sie einerseits die 

Komponenten wählen und andererseits 

die grundlegenden Formatierungen wie 

Farben und Größen bestimmen können. 

Bootstrap verwendet LESS als Präprozessor. 

Wenn Sie aber nicht mit LESS 

arbeiten wollen, können Sie grundlegende 

Formatierungen auch über die 

Download-Seite bestimmen. 

Standardmäßig ist bei Bootstrap die responsive 

Komponente nicht inbegriffen, 

sondern muss erst aktiviert werden. Dafür 

ergänzen Sie in Ihrer HTML-Datei 

eine Meta-Angabe und einen Verweis auf 

das entsprechende Stylesheet: 

 

 

Bootstrap bietet sein Rasterlayout in zwei 

Versionen an: zum einen als Standardvariante, 

die Breitenangaben in Pixeln 

umsetzt, und zum anderen als flüssiges 

Rasterlayout. Bei beiden können Sie die 

bootstrap-responsive.css-Datei einsetzen. 

In Kombination mit dem flüssigen 

Layout haben Sie ein klassisches responsives 

Layout, im anderen Fall gibt es 

stufenweise Anpassungen: Die Spaltenbreite 

ist dann bei ganz großen Displays 

mit mehr als 1200 Pixel verfügbarem 

Viewport 70 Pixel breit, bei einer Breite 

zwischen 980 und 1200 Pixeln hingegen 

60 Pixel, und zwischen 768 und 

980 wird die Spalte 42 Pixel breit. Bei 

noch kleineren Viewportgröße sind die 

Spalten flüssig. Die Kombination aus 

Praktisch für das responsive Layout 

bei Bootstrap: Die Navigation wird 

bei kleinem Viewport standardmäßig 

eingeklappt, und bei Klick auf den 

Button ausgeklappt. 



Pixelwerten für die Breite und Media 

Queries ist kein responsives Webdesign 

im ursprünglichen, von Ethan Marcotte 

geprägten Sinn des Wortes, sondern ein 

adaptives Layout. Aber feste Pixelwerte 

für die Breiten haben Vorteile – und kommen 

den Grafikern mehr entgegen, die 

ursprünglich im Print beheimatet sind. 

Ist das Responsive Stylesheet eingebunden, 

können Sie außerdem über Klassen 

steuern, ob ausgewählte Komponenten 

auf bestimmten Geräten sichtbar oder 

unsichtbar sein sollen. Beispielsweise 

wird ein Element mit class=“visiblephone“ 

nur auf Smartphones angezeigt 

oder mit class=“hidden-phone“ auf kleinen 

Bildschirmen ausgeblendet. 

Ebenfalls praktisch ist die einklappbare 

Navigation, für die die JavaScript-Datei 

collapsible eingebunden sein muss: Damit 

wird die Navigation bei viel verfügbarem 

Platz als horizontale Leiste angezeigt, 

bei weniger verfügbarem Platz 

hingegen verschwindet sie und kann 

über einen Klick auf das Menü-Icon wieder 

angezeigt werden – diesmal als vertikale 

Navigation. 

Die richtige Foundation 

Bescheiden ist das Auftreten von Foundation 

nicht gerade, denn sie bezeichnen 

sich selbst „als fortschrittlichstes Responsive 

Framework der Welt“ (The most advanced 

responsive front-end framework 

in the world). Version 3.2.2 ist gerade erst 

im November 2012 erschienen. 

Als Ausgangsbasis verwenden Sie am 

besten die im Download-Paket mitgelieferte 

index.html-Datei. In dieser sind alle 

benötigten Dateien bereits integriert, 

jeweils als normale und als Minimalversion, 

wobei erstere auskommentiert 

ist. Von den zwei CSS-Dateien ist foundation.css 

das CSS-Herzstück, app.css 

ist hingegen für die eigenen Formatierungen 

vorgesehen. 

Mit dabei ist eine große Anzahl an JavaScript-Dateien, 

die in der Index-Datei 

innerhalb eines Kommentars eingebunden 

sind. Direkt verlinkt ist die Datei 

foundation.min.js, die alle JavaScript- 

Dateien zusammenfasst. app.js dient 

zum Starten der Komponenten. 

Zur Anordnung der Inhalte gibt es ein 

Raster-Framework, das eine Aufteilung 

in Spalten ermöglicht und wie üblich mit 

Klassennamen wie column oder eight arbeitet. 

Zusätzlich gibt es aber dank der 

eingesetzten Präprozessoren die Möglichkeit, 

ein semantisches Grid zu ver- 

_09XWI_internet24_IM_03_13.pdf;S: 1;Format:(210.00 x 137.00 mm);16. Jan 2013 08:44:06 

Hochverfügbarkeits-Shopserver 

Hochverfügbarkeitssysteme von internet24 garantieren, dass Ihr Online-Shop rund um die Uhr erreichbar ist. Fällt 

ein Serversystem aus, springt automatisch ein zweiter, permanent aktualisiert mitlaufender Server ein, um alle 

Aufgaben zu übernehmen. Ergänzt wird diese Leistungsfähigkeit durch eine hochverfügbare Rechenzentrumsinfrastruktur, 

eine redundante Internetanbindung mit 99,99 % garantierter Verfügbarkeit, Markenhardware von DELL 

und einem Expertenservice mit 24/7 Premium-Support. 

Informieren Sie sich bei Ihrem persönlichen Ansprechpartner über beeindruckend individuelle Shopserver-Qualität. 

www.internet-magazin.de 19 

internet24 GmbH | Bayrische Straße 18 | 01069 Dresden Telefon +49 (0)3 51 / 211 20 40 info@internet24.de


CSS-Präprozessoren 

Die meisten der gängigen Frontend- 

Frameworks setzen inzwischen auf CSS- 

Präprozessoren. Diese erweitern CSS mit 

Variablen und Konzepten wie Mixins, die 

die Wiederverwendung einzelner Komponenten 

in Stylesheets ermöglichen. Das 

kennt man sonst aus Programmiersprachen. 

Damit lässt sich beispielsweise eine 

Farbe einmal zentral definieren und dann 

immer wieder einsetzen. Hilfreich ist es 

auch, Mixins für immer wieder kehrende 

Code-Blöcke zu definieren, beispielsweise 

für die in CSS3 benötigten Varianten mit 

den herstellerspezifischen Präfixen. Ein 

weiterer Vorteil der CSS-Präprozessoren 

ist es, dass man dadurch die Formatierung 

eines Layouts in unterschiedlichen 

Dateien aufteilen kann, die dann je nach 

Bedarf eingebunden werden. Das Ergebnis 

ist aber nach wie vor eine CSS-Datei. 

Die vorgestellten Frameworks setzen auf 

unterschiedliche CSS-Präprozessoren: So 

verwendet beispielsweise Bootstrap LESS, 

während Foundation auf SASS setzt. Andere 

wiederum, wie 320 and Up, erlauben 

die Verwendung aller Präprozessoren. 

Die Homepage von LESS finden Sie unter 

www.lesscss.de. Um LESS zu verwenden, 

binden Sie das mit der Endung .less versehende 

Stylesheet und einen Verweis auf 

die LESS-Javascript-Datei ein: 

 

 

Nützlich ist es aber auch, den LESS-Code 

direkt in CSS-Code umzuwandeln, etwa 

durch WinLess (winless.org). 

Eine interessante Alternative zu LESS ist 

SASS (sass-lang.com). Die offizielle Version 

setzt auf Ruby on Rails, das zuerst 

installiert werden sollte. 

Für Windows geht das recht komfortabel 

über den Installer, der auf der Website 

rubyinstaller.org/downloads zum Download 

angeboten wird. 

SASS gibt es in mehreren Varianten: Die 

ältere Syntax wird auch als eingerückte 

Syntax bezeichnet und typischerweise 

werden die Dateien mit der Endung sass 

bezeichnet. Die neuere Syntax setzt auf 

geschweifte Klammern und CSS-ähnliche 

Syntax und die Dateien haben die Endung 

scss. Das bei Foundation eingesetzte COM- 

PASS selbst wiederum ist eine Sammlung 

von nützlichen Funktionen und Ergänzungen 

zu SASS. Eine schöne Erläuterung 

der notwendigen Schritte zur Installation 

von Compass finden Sie unter thesassway. 

com/beginner/getting-started-with-sassand-compass. 

Der Siegeszug der CSS-Präprozessoren hat 

aber auch Nachteile. Durch die Definition 

von Mixins schleichen sich Dinge ein, die 

man so nicht braucht. Beispielsweise wird 

bei 320 and Up die Transparenzangabe 

von opacity auch mit den herstellerspezifischen 

Präfixen –moz und –webkit geschrieben. 

Diese braucht man aber schon 

seit einer ganzen Weile nicht mehr: –mozopacity 

war notwendig für den Firefox vor 

Version 1. 

wenden. Foundation setzt auf flüssige 

Angaben, das heißt Werte in Prozent. Abstände 

wie padding können Sie einfach 

anpassen, da Foundation mithilfe der 

CSS3-Eigenschaft box-sizing: border-box 

das andere Boxmodell aktiviert: width 

bezeichnet dann nicht mehr nur den 

inneren Bereich, zu dem padding und 

border addiert werden, sondern die Gesamtbreite. 

Standardmäßig werden bei 

kleineren Bildschirmen die Elemente auf 

100%-Breite gesetzt und untereinander 

angeordnet. Falls Sie doch eine Aufteilung 

auf kleinen Bildschirmen brauchen, 

so gibt es hierfür eigene Klassen mit dem 

Präfix -mobile, mit denen sich bestimmte 

Komponenten nur für kleine Viewports 

nebeneinander platzieren lassen. Apro- 

Foundation bringt eine Reihe von HTML- 

Templates mit, die mögliche Aufteilungen 

zeigen und sich auch für einen 

raschen Einstieg eignen. 



pos eigene Klassen: Wie Bootstrap stellt 

auch Foundation Klassen zur Verfügung, 

um Inhalte nur bei bestimmten 

Viewportgrößen sichtbar zu machen 

oder zu verbergen. 

Foundation bietet eine Reihe von formatierten 

Inhaltselementen: von Buttons 

über Lösungen für die Navigation, 

Formularelemente und Tabs bis hin zu 

weiteren gängigen Bestandteilen von 

Benutzeroberflächen. 

So existieren Fortschrittsbalken, Thumbnails 

oder eine Flexibilisierung von 

Videoelementen, die sich dann an die 

Bildschirmgröße anpassen. Besonders 

attraktiv sind die mitgelieferten 

Javascript-Funktionen, darunter Orbit 

Slider - nutzbar für Bilder oder andere 

Inhalte -, Reveal für modale Fenster, die 

sich erstellen lassen, ohne dass Sie eine 

Zeile Javascript-Code schreiben müssen, 

Clearing für eine Galerie oder Magellan 

für eine fixe Navigation. Das Schöne 

daran ist, dass diese Komponenten alle 

responsiv sind. 

Da Foundation auf flüssige Breitenangaben 

in Prozent setzt, ist nur eine geringe 

Anzahl an Anpassungen notwendig. Mit 

einer einzigen Media-Query-Angabe 

werden die Anpassungen für kleine 

Viewports definiert: 

@media only screen and (max-width: 

767px) {} 

Foundation setzt auf SASS/Compass, worüber 

sich die einzelnen Komponenten 

bequem anpassen lassen. Wer lieber mit 

CSS pur arbeitet, kann das natürlich auch. 

In diesem Fall empfiehlt es sich, über die 

Download-Seite die ersten Anpassungen 

vorzunehmen. Besonders praktisch sind 

auch die Templates, die auf der Downloadseite 

zur Verfügung stehen und beispielhafte 

Seitenaufteilungen zeigen. 

Von Skeleton bis Frameless 

Natürlich gibt es eine große Anzahl weiterer 

responsiver Frameworks. Da wäre 

beispielsweise Skeleton, das neben der 

Typographie ein fast schon klassisch 

anmutendes responsives Rasterlayout 

mitbringt. Außerdem gibt es Less – was 

nichts mit dem gleichnamigen LESS-Präprozessor 

zu tun hat. Less ist allerdings 

kein Framework mit vorgefertigten Dateien, 

sondern beschreibt eine Idee, wie 

sich adaptive Layouts erstellen lassen, die 

über die verschiedenen Gerätegrenzen 

hinweg konsistent wirken. Flüssige Angaben 

sind hier nicht angesagt, vielmehr 

bleiben die Spaltenelemente bei den 

verschiedenen Viewports in einheitlicher 

Größe, werden aber nach Bedarf unterschiedlich 

angeordnet oder über den Außenabstand 

angepasst. 

Eine Weiterentwicklung von Less stellt 

Frameless dar, das ebenfalls auf Spalten 

in einer festen Breite setzt. Die Media 

Queries orientieren sich hier nicht 

mehr an gängigen Breiten von Ausgabegeräten 

(was sie sowieso nicht tun 

sollten), sondern orientieren sich an 

den Spalten. Dann kann man beispielsweise 

überlegen, welche Anpassungen 

durchgeführt werden sollen, wenn nur 

X Spalten Platz haben. 

Eindeutig kein Framework, aber von 

nicht minder großem Nutzen, ist die 

responsive Pattern-Galerie von Brad 

Frost, ein Teil seines Projekts „This is 

responsive“: Hier sind Möglichkeiten 

aufgelistet, gängige Layoutkomponenten 

responsiv zu realisieren. Eine unentbehrliche 

Inspirationsquelle! 

Fazit 

Die vorgestellten Frameworks sind ganz 

unterschiedlich angelegt und unter- 

_09Z8P_Webhoster_Neu_IM_03_webhoster_de_210x95.pdf;S: 1;Format:(210.00 x 95.00 mm);21. Jan 2013 13:25:44 

BESTE PERFORMANCE 

FÜR GESCHÄFTSKUNDEN. 

9,99 

EURO/MONAT 

BUSINESS TARIF 

P 

P 

P 

75 GB Speicherplatz 

100 GB Datentransfer/Monat 

eine eigene Domain 

P 

P 

P 

P 

100 weitere FTP Zugänge 

500 Subdomains 

1000 eMail Adressen 

75 x MySQL Datenbanken 

www.webhoster.de 



Das Prinzip 

hinter Frameless: 

ein adaptives 

Layout mit 

unterschiedlich 

vielen Spalten. 

schiedlich komplex. Das eine Ende stellt 

sicher Foundation von Zurb dar, das 

neben vielen Layoutkomponenten wie 

Buttons, Tabs und so weiter auch gleich 

die richtigen responsiven Plug-ins für 

Slider, Bildergalerien und mehr mitbringt. 

Attraktiv ist auch die Möglichkeit, 

ein semantisches Raster zu nutzen. 

Foundation zeigt außerdem, wie 

man moderne Features wie box-sizing 

einsetzt, und motiviert einfach dazu, 

ein neues Projekt mit diesem großartigen 

Framework zu gestalten. 

Einen großen Funktions- und Komponentenreichtum 

bietet auch Bootstrap. Bei 

Bootstrap ist allerdings die responsive 

Komponente kein Kern des Frameworks. 

So heißt es auch explizit in der Dokumentation, 

bei größeren Projekten solle 

man die Verwendung unterschiedlicher 

Code-Basen anstelle von Media Queries 

in Erwägung ziehen. Aber trotzdem enthält 

Bootstrap alles notwendige für die 

Anpassungen an kleinere Bildschirme. 

Sowohl Bootstrap als auch Foundation 

erlauben aufgrund ihres Komponentenreichtums 

das rasche Prototyping und 

die schnelle Erstellung von attraktiven, 

klickbaren Layoutentwürfen. 320 and Up 

Links zum Thema 

Responsive Komponente von Bootstrap 

twitter.github.com/bootstrap/ 

scaffolding.html#responsive 

320 and Up 

stuffandnonsense.co.uk/ 

projects/320andup 

Foundation von Zurb 

foundation.zurb.com 

Less-Framework 

lessframework.com 

Weiterentwicklung von Less: Frameless 

framelessgrid.com 

Skeleton 

www.getskeleton.com 

Patterns fürs Responsive Design 

bradfrost.github.com/this-isresponsive/patterns.html 

präsentiert eine handverlesene Auswahl 

nützlicher Vorgaben. Es ist ein recht persönliches 

Projekt und eben die Code-Basis, 

die Andy Clarke bei seinen Projekten 

immer wieder verwendet. Es bietet sich 

an, 320 and Up als Basis oder Vorbild 

für die Gestaltung eigener Frameworks 

zu nehmen. Less und Frameless liefern 

weniger Code als vielmehr eine elementare 

Idee für die Herangehensweise, die 

vor allem dann interessant ist, wenn man 

beispielsweise mit einem adaptiven Layout 

mit festen Pixelbreiten für die Spalten 

liebäugelt. Die Media Queries sind bei 

den einzelnen Frameworks unterschiedlich 

komplex und ausdifferenziert. 320 

and Up deckt mit immerhin fünf gängigen 

Größen eine beachtliche Palette 

ab. Trotzdem sollte man nie vergessen, 

dass sich die Layoutanpassungen nicht 

an gängigen Geräteklassen orientieren 

sollten, sondern an den Erfordernissen 

des aktuellen Layouts. Und muss man 

wirklich so viele Fälle berücksichtigen? 

Foundation zeigt, dass sich bei einem 

flüssigen Layout auch die wichtigsten 

Anpassungen durch eine einzige Media 

Query vornehmen lassen. 

Die Frameworks sind aber noch in weiterer 

Hinsicht interessant. Sie können 

als typische Beispiele für die Vorgehensweise 

im heutigen Webdesign angesehen 

werden: es sind keine reinen CSS- 

Frameworks mehr, sondern sie enthalten 

zusätzlich wichtige JavaScript-Komponenten. 

Angesagt ist ebenfalls der Einsatz 

von CSS-Präprozessoren, weil diese 

– richtig verwendet – den ersten Schritt 

zu besser benutzbaren und wartbaren 

Stylesheets darstellen. 

 

Dr. Florence Maurice 


Egal wo ich bin, 

meine Daten sind schon da. 

HiDrive – 

der geniale 

Online-Speicher 

100 GB 

Speicher 

Für ein 

ganzes 

Jahr 

€/Mon.* 

JETZT 30 TAGE 

KOSTENLOS TESTEN! * 

Was macht HiDrive so genial? 

Fotos, Musik und Dokumente einfach online speichern 

Weltweiter Zugang (per Smartphone, Tablet-PC, Notebook) 

Dateien austauschen und erfolgreich zusammenarbeiten 

Optimaler Schutz vor Datenverlust – ideal als Online-Backup 

HOSTED 

IN GERMANY 

* Aktion bis 28.02.2013: HiDrive Media 100 jetzt 30 Tage kostenlos testen, danach 1 Jahr für 0,- €, danach 4,90 €/Mon., 

Mindestvertragslaufzeit nach Testphase 24 Monate. Einmalige Einrichtungsgebühr 9,90 €. Preis inkl. MwSt. 

Servicetelefon: 030 - 300 146 - 11

Webdesign | Off-Canvas-Layouts 

Spot on! 

Häufig werden Layoutkomponenten bei einem Responsive Layout auf 

schmalen Bildschirmen untereinander dargestellt. Eine interessante 

Alternative dazu ist Off-Canvas: Hier sind Inhalte außerhalb des 

sichtbaren Bereichs platziert und werden erst bei Bedarf 

eingeblendet. Ein schicker Effekt – der Workshop zeigt, 

wie es geht. 

Für die Desktop-Version einer Website 

steht üblicherweise viel Platz 

zur Verfügung, sodass man Inhalte nebeneinander 

oder mehrspaltig anordnen 

kann. Passt man sie im Rahmen eines 

responsiven Webdesigns für kleinere 

Bildschirmgrößen an, so ist eine mehrspaltige 

Darstellung nicht sinnvoll; stattdessen 

ordnet man die Inhalte oft untereinander 

an. Das bedeutet aber, dass 

der Benutzer viel scrollen muss, um alle 

Inhalte zu erreichen. Bei der Off-Canvas- 

Darstellung ist das anders. 

Außerhalb des Bildschirms 

Bei einer Off-Canvas-Anordnung werden 

für schmale Bildschirme nur die 

wichtigsten Inhalte direkt angezeigt. Die 

anderen sind außerhalb des sichtbaren 

Bildschirms (off-canvas) platziert, beispielsweise 

rechts, links oder oberhalb 

davon. Sie werden bei Bedarf, das heißt 

auf Anforderung des Benutzers, hereingeschoben. 

Im weiteren Sinne versteht 

man übrigens unter Off-Canvas-Menüs 

allgemein ein- oder ausklappbare Bereiche. 

Uns interessieren aber erst einmal 

die klassischen Off-Canvas-Layouts 

mit Layoutkomponenten außerhalb des 

sichtbaren Bereichs. 


Off-Canvas-Layouts | Webdesign 

Für die konkrete Realisierung eines Off- 

Canvas-Layouts gibt es verschiedene 

Möglichkeiten. Gehen wir erst einmal 

von zwei Bereichen aus, um das Grundprinzip 

zu erläutern: 

»» Bei kleinen Bildschirmen soll nur die 

rechte Spalte angezeigt werden, die 

linke Spalte ist off-canvas, hier links 

außerhalb des sichtbaren Bereichs 

platziert. Diese linke Spalte kann mit 

Klick auf einen Link eingeblendet werden 

und schiebt sich dann von links in 

den sichtbaren Bereich hinein. 

»» Bei mehr verfügbarem Platz – wie beispielsweise 

auf einem Desktop-Monitor 

– sind beide Spalten direkt sichtbar 

nebeneinander angezeigt. 

Für die Schiebebewegung brauchen wir 

kein Javascript, sondern können auf CSS 

Transitions zurückgreifen. Allerdings 

wollen wir Javascript einsetzen, um die 

unterschiedlichen Formatierungen auf 

kleinem Bildschirm auszulösen (zu einer 

reinen CSS-Lösung kommen wir später 

noch): So soll ja beim ersten Aufruf 

der Seite auf kleinem Bildschirm nur die 

rechte Spalte angezeigt und die andere 

erst infolge einer Benutzeraktion eingeblendet 

werden. Um diese beiden Formatierungen 

zu realisieren, weisen wir 

mit Javascript dem body-Element je nach 

Kontext unterschiedliche Klassen zu. 

Wichtig dabei ist, dass das Layout auch 

ohne Javascript benutzbar ist – eine Mindestanforderung 

ist, dass alle Inhalte 

auch dann noch erreichbar sind. Da das 

Einblenden der Spalte nur funktionieren 

kann, wenn Javascript aktiviert ist, sollte 

auch die Off-Canvas-Darstellung an aktiviertes 

Javascript gekoppelt sein. Als Marker, 

ob Javascript aktiviert ist oder nicht, 

ergänzen wir per Javascript die Klasse js 

beim body-Element. Dadurch können 

wir spezielle Formatierungen definieren, 

die nur bei Vorhandensein der Klasse 

wirken. Die Verwendung von Klassen zur 

Kennzeichnung, ob Javascript aktiviert ist 

oder nicht, ist eine probate Methode, die 

übrigens auch bei Modernizr zum Einsatz 

kommt; dort wird die Klasse allerdings 

dem html-Element hinzugefügt. 

Basis – auch ohne 

Javascript nutzbar 

Beginnen wir mit der Grundstruktur. Wie 

bei allen responsiven Layouts benötigen 

wir im Kopfbereich die Meta-Angabe, 

die die normale Skalierungsfunktion von 

Smartphones abschaltet: 

 

Im body gibt es zwei div-Bereiche, die 

mit den Klassen .eins und .zwei versehen 

sind. Außerdem besitzen die Elemente 

ids, damit sie als Ziel interner Verweise 

dienen können. 

 

 

Im Normalfall werden die Bereiche einfach 

untereinander angezeigt. Sie erhalten 

eine fast bildschirmfüllende Breite. Außerdem 

wird ein Übergang (transition) definiert, 

damit danach die Veränderungen 

spürbar ablaufen: Die Transition soll 0.3 

Sekunden dauern, alle Eigenschaften 

sollen einbezogen werden (all) und als 

Timing-Funktion wird ease bestimmt. 


Viel Text auch auf kleinen Bildschirmen 

darzustellen, kann zu Problemen führen. 

Abhilfe schafft hier das Off-Canvas-Layout. 

Lesen Sie, 

»»wie Sie eine Off-Canvas-Anordnung 

platzieren, 

»»wie sie die Bereich ein- und ausblenden 

und 

»»von einer weiteren Lösung, die auch 

ohne Javascript auskommt. 

.eins, .zwei { 

-moz-transition: 0.3s all ease; 

-webkit-transition: 0.3s all ease; 

-o-transition: 0.3s all ease; 

transition: 0.3s all ease; 

width: 90%; 

padding: 4%; 

} 

Alle modernen Browser verstehen die 

hier verwendeten CSS3 Transitions, der 

Internet Explorer ab Version 10. Für 

diese benötigt er übrigens kein Präfix, 

die Angabe -ms- war nur für die Preview 

notwendig. Dass die Animation des Hereinschiebens 

nicht in älteren IE funktioniert, 

ist zwar schade, aber verschmerzbar, 

denn die grundlegende Anzeige der 

Bereiche klappt auch dort und das Bei- 

Bei großem Viewport sind die beiden 

Spalten nebeneinander angeordnet. 



Eins 

einblenden 

Wenn auf diesen Link geklickt wird, soll 

der angegebene Bereich erscheinen. 

Dafür fügen wir dem body-Element die 

Klasse aktiv-eins hinzu. Mit jQuery geht 

das folgendermaßen: 

$(".naveins").click(function() { 

$("body").addClass("aktiv-eins"); 

Bei kleinem Viewport ist zunächst nur die rechte Spalte zu sehen, die andere kann 

durch einen Klick eingeblendet werden. 

spiel ist somit trotzdem funktionsfähig. 

Die normale Anordnung für kleine Bildschirme 

bei deaktiviertem Javascript ist 

damit fertig. 

Off-Canvas bei 

aktiviertem Javascript 

Die weiteren Formatierungen sind nur 

sinnvoll bei aktiviertem Javascript. Als 

Marker für aktiviertes Javascript fügen wir 

mit jQuery dem body-Element die Klasse 

.js hinzu. Sowohl die Einbindung von 

jQuery als auch der eigene Javascript- 

Code stehen am Ende des HTML-Dokuments 

vor dem schließenden 

– bei einer anderen Anordnung müssten 

wir den jQuery-Code innerhalb von 

$(function() { und }); notieren. 

.eins wählt alle Elemente aus, die die 

Klasse eins haben. Hingegen wählt der 

zusammengesetzte Selektor .js .eins nur 

diejenigen Elemente mit der Klasse eins 

aus, die innerhalb eines Elements mit 

der Klasse js stehen. Und das tun sie nur 

bei aktiviertem Javascript, da wir ja zu 

diesem Zweck die Klasse js hinzugefügt 

haben. Damit können wir die Off-Canvas-Darstellung 

realisieren, bei der .eins 

außerhalb des sichtbaren Bereichs platziert 

und nur .zwei angezeigt wird. Hierfür 

werden alle Elemente links gefloatet, 

durch einen negativen Außenabstand von 

-100 Prozent wird .eins links aus dem 

sichtbaren Bereich hinausgeschoben. 

.js .eins { 

margin-left: -100%; 

return false; 

}); 

click() fängt das Klick-Ereignis ab, add- 

Class() ergänzt eine passende Klasse. 

Nun müssen wir noch die Formatierungen 

definieren: Damit die erste Spalte 

.eins eingeblendet wird, setzen wir 

zuerst einmal den Außenabstand auf 0 

(dieser war ja ursprünglich bei -100 Prozent). 

Außerdem wird die Breite so angepasst, 

dass .eins zwar eingeblendet ist, 

aber trotzdem noch ein Teil der rechten 

Hauptspalte zu sehen ist. 

.aktiv-eins .eins { 

margin-left: 0; 

width: 80%; 

} 

Die rechte Spalte wird mit einem rechten 

Außenabstand von -100 Prozent weiter 

nach rechts geschoben. 

.aktiv-eins .zwei { 

margin-right: -100%; 

 

 

 

 

$("body").addClass("js"); 

 

Damit sieht das body-Element bei aktiviertem 

Javascript folgendermaßen aus: 

 

Ist Javascript nicht aktiviert, lautet es: 

 

Dank dieser Vorbereitung können wir 

unsere Selektoren nun gezielt nach folgendem 

Prinzip erstellen: Der Selektor 

float: left; 

} 

.zwei hingegen soll normal sichtbar sein 

und erhält deswegen einen Außenabstand 

von 0. 

.js .zwei { 


float: left; 

} 

Einblenden der Bereiche 

Unsere Off-Canvas-Darstellung steht, aber 

das sanfte Einblenden der Bereiche fehlt 

noch. Hierfür brauchen wir erst einmal innerhalb 

des Bereichs .zwei einen Link, der 

als normale Sprungmarke angelegt ist: 

} 

Zurück zum Ausgangszustand 

Außerdem müssen wir dem Benutzer die 

Möglichkeit geben, zur Standardansicht 

zurückzukommen, bei der die rechte 

Spalte sichtbar ist. Dafür brauchen wir 

zuerst einen Link in der linken Spalte: 

ausblenden 

Dann können wir per Javascript den Klick 

auf den Link abfangen und die entsprechenden 

Klassen wieder entfernen: 

$(".navzwei").click(function() { 

$("body").removeClass("aktiv-eins"); 

return false; 


Off-Canvas-Layouts | Webdesign 

}); 

Die Formatierung für kleine Bildschirme 

und die Off-Canvas-Funktionalität sind 

damit abgeschlossen. 

Mehr Platz 

Die bisherigen CSS-Formatierungen waren 

nicht innerhalb von Media Queries 

angeordnet, das heißt, sie gelten immer, 

unabhängig vom verfügbaren Viewport. 

Bei größeren Viewports müssen wir aber 

andere Formatierungen festlegen. Ab einer 

gewissen Breite brauchen wir nämlich 

die Off-Canvas-Darstellung nicht, 

sondern können die Bereiche normal 

anzeigen lassen. Dafür formulieren wir 

erst einmal die entsprechende Media- 

Query-Angabe: 

@media screen and (min-width: 800px) {} 

Im Beispiel sollen ab einer Breite von 

800 Pixeln (min-width: 800px) beide 

Spalten normal angezeigt werden. Die 

folgenden Angaben stehen innerhalb 

der geschweiften Klammern der angegebenen 

@media-Regel. Zuerst einmal 

können wir die Links zum Ein- und Ausblenden 

der Spalten entfernen, weil die 

Spalten ja direkt sichtbar sind: 

.naveins, .navzwei { 

display: none; 

} 

Übrigens: Wenn Sie häufiger Komponenten 

in Abhängigkeit vom verfügbarem 

Viewport anzeigen oder ausblenden lassen 

wollen, könnten Sie hierfür auch eigene 

Klassen definieren, wie es beispielsweise 

bei den Frameworks Bootstrap und 

Foundation gehandhabt wird. Außerdem 

können wir die Elemente normal anordnen, 

das heißt ihnen eine passende Breite 

geben und sie floaten: 

.js .eins, .eins { 

width: 30%; 


float: left; 

padding: 3% 

} 

.js .zwei, .zwei { 

width: 54%; 

float: left; 

padding: 3%; 

} 

Im Code sind die Selektoren immer gedoppelt, 

neben .js .eins ist auch .eins als 

Selektor angegeben und das erklärt sich 

folgendermaßen: An sich funktioniert 

die bei .eins angegebene Formatierung 

sowohl bei aktiviertem als auch bei deaktiviertem 

Javascript. .js .eins brauchen 

wir aber bei aktiviertem Javascript, um 

genügend Spezifität zu haben, damit die 

zuvor für .js .eins definierten Angaben 

überschrieben werden können. Das Beispiel 

lässt sich natürlich noch verbessern 

– es wäre etwa sinnvoll, die Links zum 

Ein- und Ausblenden der Bereiche bei 

deaktiviertem Javascript zu entfernen, da 

sie dann nicht mehr sinnvoll sind. 

Variationen 

Das für zwei Bereiche gezeigte Grundprinzip 

von Off-Canvas können Sie natürlich 

auch bei drei Spalten anwenden, 

ein Beispiel dafür ist die Off-Canvas-Seite 

von Jason Weaver. Hier befinden sich bei 

schmalen Bildschirmen die linke und die 

rechte Spalte außerhalb des sichtbaren 

Bereichs und können per Klick auf den 

Link hineingeschoben werden. Bei viel 

verfügbarem Platz sind alle drei Spalten 

sichtbar. Außerdem gibt es auch noch 

eine Zwischenstufe ab 600 Pixeln Größe: 

In diesem Fall werden zwei Spalten 

angezeigt – die erste und die zweite – 

und nur die dritte Spalte ist off-canvas 

angeordnet. Auch das lässt sich natürlich 

noch variieren: 

»» Bei der Off-Canvas-Darstellung auf 

kleinem Bildschirm kann standardmäßig 

selbstverständlich auch eine 

andere als nur die mittlere Spalte angezeigt 

werden. 

»» Bei größeren Bildschirmen müssen 

die Bereiche nicht einfach nebeneinander 

angezeigt, sondern es könnte 

auch eine Spalte oben als Kopfzeile 

angeordnet werden. 

»» Eine raffinierte Variation zeigt lab. 

hakim.se/meny/: Wenn die Spalte 

links eingeblendet wird, dreht sich 

der ursprünglich sichtbare Bereich 

durch 3D Transforms nach hinten, 

Schicker Effekt: Wird die seitliche 

off-canvas platzierte Navigation 

hereingeschoben, dreht sich das 

Hauptelement im 3D-Raum. 


1&1 feiert Geburtstag – feiern Sie mit! Wir schenken Ihnen 

50,– € Jubiläums-Bonus! * 

DOMAINS | E-MAIL | WEBHOSTING | E-SHOPS | SERVER 

*1&1 Jubiläumsaktion bis 28.02.13 für Neukunden: 1&1 WebHosting Pakete 6 Monate 0,– €/Monat, danach z.B. 1&1 Dual Unlimited 24,99 €/Monat, 14,90 € Einrichtungsgebühr, 

einmaliger Jubiläumsbonus 50,– €. 1&1 Dynamic Cloud Server Basiskonfiguration 3 Monate 0,– €/Monat, danach 39,99 €/Monat, 39,– € Einrichtungsgebühr, einmaliger Jubiläumsbonus

1&1 WEBHOSTING 

1&1 feiert 25-jähriges Jubiläum. Profitieren Sie von 25 Jahren Erfahrung und geben Sie Ihren Web-Projekten eine sichere 

Zukunft. Denn mit weltweit über 11 Mio. Kundenverträgen, 5.000 Mitarbeitern und 5 Hochleistungs-Rechenzentren ist 

1&1 einer der größten Webhoster weltweit. Als Kunde profitieren Sie von unserem langjährigen Know-how und unserem 

24/7 Experten-Support. Und das Beste ist: Allen, die sich bis 28.02.13 für 1&1 entscheiden, schenken wir bis zu 50,– € 

Jubiläums-Bonus! 

1&1 WebHosting 

1&1 Cloud Server 

1&1 Dedicated Server 

■ Optimale Sicherheit durch parallelen 

Betrieb und tägliche Backups 

■ Bis zu 8 Inklusiv-Domains 

■ Freie Wahl des Betriebssystems 

(Linux oder Windows) 

■ NEU! PHP 5.4 inklusive 

■ Inklusive aller Tools zur Realisierung 

Ihrer Ideen 

■ Unlimited Traffic inklusive 

■ Voller Root Zugriff 

■ Individuelle Kombination aus CPU, 

RAM und Festplattenspeicher 

■ Abrechnung stundengenau und 

konfigurationsbasierend 

■ Optimale Sicherheit durch parallelen 

Betrieb 

■ Wiederherstellung per Snapshot 


■ Voller Root Zugriff 

■ Bis zu 32 Cores und 64 GB RAM 

■ Große Auswahl an Betriebssystemen 

■ Bereitstellung und Austausch 

innerhalb von 24h 

■ Nahezu 100 % Verfügbarkeit und 

Erreichbarkeit 


6 MONATE 

0,– 

+ JUBILÄUMS- 3 MONATE 

BONUS 

BONUS 

+ 

50,– 

€ * 0,– 

€ 

0,– 

€ 

50,– * 

50,– 

* 

€* €* 

3 MONATE 

+ BONUS 

JUBILÄUMS- 

JUBILÄUMS- 

50,– 

€* 

AKTION NUR BIS 28.02.2013! 

0 26 02 / 96 91 

0800 / 100 668 

1und1.info 

50,– €. 1&1 Dedicated Server 3 Monate 0,– €/Monat, danach z.B. 1&1 Server XXL24i 399,– €/Monat, 99,– € Einrichtungsgebühr, einmaliger Jubiläumsbonus 50,– €. Für alle Aktionsangebote 

12 Monate Mindestvertragslaufzeit. Jubiläumsbonus wird mit der jeweiligen monatlichen Grundgebühr ab dem ersten Bezahlmonat verrechnet. Preise inkl. MwSt.


wodurch die Aufmerksamkeit gezielt 

auf die nichtgedrehte linke Spalte gelenkt 

wird. 

Ohne Javascript 

An sich könnte man Off-Canvas-Layouts 

auch ohne Javascript erstellen – nämlich 

über den neuen CSS3-Selektor :target. 

Mit :target können Sie das Ziel von internen 

Verweisen formatieren. Wikipedia 

setzt :target beispielsweise ein, um bei 

einem Klick auf eine Fußnotennummer 

die angesprungene Fußnote durch eine 

Hintergrundfarbe zu kennzeichnen. 

Wie man :target für Off-Canvas verwendet, 

demonstriert Chris Coyier. Zuerst ist 

der Bereich eingeklappt, beispielsweise 

durch eine Breite von 0. 

#navi { 

/* eingeklappt */ 

width: 0; 

overflow: hidden; 

position: fixed; 

top: 0; 

left: 0; 

height: 100%; 

} 

Und bei Klick auf den Link Menü wird für das angesprungene 

Ziel die Formatierung – hier 

die Breite der Spalte – verändert: 

#navi:target { 

width: 20%; 

} 

Um wieder zur ursprünglichen Version 

zurückzukommen, benötigt man einen 

Link wie Zurück, dann 

greift der :target-Selektor nicht mehr. 

Diese Lösung ist elegant, weil sie ohne 

Javascript auskommt. Aber sie hat derzeit 

noch den Nachteil der schlechteren 

Browserunterstützung: Der :target-Selektor, 

mit dem die Interaktivität steht und 

fällt, funktioniert im Internet Explorer 

erst ab Version 9. Ein weiterer Nachteil 

ist, dass Sprungmarken in den Browserverlauf 

aufgenommen werden und es für 

den Besucher irritierend ist, wenn ein 

Klick auf den Zurück-Button die Version 

mit Menü aktiviert. 


Off-Canvas-Vorstellung von Jason Weaver 

jasonweaver.name/lab/offcanvas/ 

Off-Canvas bei Luke Wroblewski 

www.lukew.com/ff/entry. 

asp?1517 

Off-Canvas ohne Javascript mit dem 

CSS3-Selektor :target 

css-tricks.com/off-canvas-menuwith-css-target/ 

Off-Canvas mit 3D-Effekt 

lab.hakim.se/meny/ 

Off-Canvas-Varianten bei Zurb Foundation 

www.zurb.com/playground/offcanvas-layouts 

Nützliche Helfer 

Es gibt auch Beispiele für den direkten 

Einsatz von Off-Canvas-Layouts. Besonders 

praktisch sind diejenigen von Zurb 

Foundation: Hier finden Sie vier Off-Canvas-Varianten 

zum Download, die Sie an 

Ihre Bedürfnisse anpassen können. Jede 

der Varianten setzt auf dem sehr schönen 

Frontend-Framework Foundation auf. 

»» 

Variante 1 „ Off-Canvas Bottom Nav”: 

Hier ist die Navigation bei kleinen 

Screens unterhalb des Hauptinhalts 

angeordnet und kann durch Scrollen 

erreicht werden, aber es gibt auch einen 

Link, über die sie sich direkt anspringen 

lässt. Der Bereich Extras ist 

außerhalb des sichtbaren Bereichs – 

nämlich links angeordnet – und wird 

auf Anforderung hereingeschoben. 

»» 

Variante 2 „ Off-Canvas Top Nav”: 

Bei dieser Variante gibt es bei kleinen 

Screens im oberen Bereich Links 

für die Navigation und die Extras. Die 

Navigation ist standardmäßig oberhalb 

angeordnet und wird auf Anforderung 

von oben hereingeschoben. Die Extras 

befinden sich links außerhalb des 

sichtbaren Bereichs. 

»» 

Variante 3 „ Paneled” eignet sich zur 

Darstellung mehrerer relativ gleichwertiger 

Inhalte und funktioniert ähnlich 

wie Javascript-Tabs, mit dem einzigen 

Unterschied, dass die Inhalte nicht versteckt, 

sondern eben off-canvas platziert 

sind und beim Klick auf die oberen Tabs 

jeweils hereingeschoben werden. Bei 

großem Bildschirm sind die Inhalte untereinander 

platziert und können durch 

Scrollen oder durch direkte Auswahl 

oben angesteuert werden. 

»» 

Variante 4 „ Sidebar on Mobile Online”: 

Das Menü ist standardmäßig 

links außerhalb des sichtbaren Bereichs 

platziert und lässt sich animiert 

einblenden. Die Sidebar mit Zusatzinformationen 

befindet sich unterhalb 

des Hauptinhalts und wird durch 

Scrollen erreicht. 

Eine weitere Anlaufstelle für Off-Canvas- 

Beispiele ist die Responsive-Pattern-Galerie 

von Brad Frost. Er stellt drei Variationen 

vor – das Einblenden von oben, von links 

und von rechts mit zwei Bereichen. 

Off-Canvas ist ein Prinzip, das von nativen 

Apps bekannt ist – beispielsweise 

von der Facebook-App –, aber auch 

beim responsiven Webdesign verdient 

dieses Schema seinen Platz. Wichtig ist 

dabei, dass auch bei deaktiviertem Javascript 

alle Inhalte erreichbar sind. Das 

Grundprinzip, dass man von einer funktionierenden 

Basis ausgeht, die dann für 

fähigere Geräte verbessert wird – kurz 

Progressive Enhancement – ist eine der 

zentralen Strategien im Umgang mit der 

Flut an neuen Geräten, die zur Betrachtung 

von Internetseiten genutzt werden. 

Apropos mobile Geräte: Wenn jQuery 

wirklich nur zum Hinzufügen und 

Entfernen von Klassen verwendet wird 

und nicht für weitere Funktionen, wäre 

es besser, die Klassenergänzung ohne 

Zuhilfenahme von jQuery in Javascript 

pur zu erledigen; jQuery wäre dann nur 

Overkill. 

Dr. Florence Maurice 


SPEZIAL 53 

Jetzt am Kiosk! 

NUR 

€7,– 

inkl. Versandkosten! 

Porto sparen und 

sofort bestellen! 

www.pc-magazin.de/ 

sonderheft 

Zum Heftinhalt: 

In diesem PC Magazin Spezial lesen Sie, welches 

Ultrabook für welche Ansprüche das Richtige ist: 

Die Spannweite geht hier vom ultrakompakten 

Reisebegleiter über Business-Ultrabooks bis hin 

zu 14-Zöllern mit spieletauglichen Grafikchips. 

Wir haben mehr als 20 Ultrabooks verschiedener 

Klassen für Sie getestet, zeigen die Technologien, 

die Ultrabooks zu etwas Besonderem machen und 

stellen das beste Zubehör für die coolen Mobilrechner 

vor. Daneben finden Sie in diesem Heft eine Fülle an 

Praxistipps zu Themen wie Windows 8, SSDs, mobilem 

Internet, Cloud-Computing oder Sicherheit. Und 

Sie erfahren, wie die nächste Ultrabook-Generation 

mit Windows 8 und Touchscreen aussieht. 

Das neue PC Magazin Spezial 53 – jetzt am Kiosk. 

PC Magazin Spezial 53 „Ultrabooks“ 

❑ Ja, ich möchte das neue PC Magazin-Sonderheft „Spezial 53 – 

Ultrabooks“ inkl. DVD für nur 7,– € bestellen. Dies ist der Endpreis; es 

kommen KEINE weiteren Versand- oder sonstige Kosten hinzu. 

Name / Vorname 

Straße / Nr. 

PLZ / Ort 

E-Mail 

Gewünschte Zahlungsweise: ❑ Bequem durch Bankeinzug ❑ Gegen Rechnung 

Kontonummer 

Kartennummer 

Datum / Unterschrift 

BLZ 

❑ per EuroCard / MasterCard / Visa / American Express 

Gültig bis 

Bei Fernabsatzverträgen unter 200 Euro besteht kein gesetzliches Widerrufsrecht. WEKA MEDIA PUBLISHING GmbH, 

Richard-Reitzner-Allee 2, 85540 Haar, Handelsregister München, HRB 154289. 

✄ 

Bequem online bestellen: 

■ www.pc-magazin.de/ 

sonderheft 

■ oder bestellen Sie per Post: 

PC Magazin Kundenservice, 

Postfach 180, 77649 Offenburg 

■ oder per Fax: 0781 846191 

■ oder bestellen Sie per Telefon: 

0781 6394548 

Dieses und weitere interessante 

Angebote finden Sie auch unter 

www.wekashop.de

Webdesign | CSS–Spezifikationen 

Mit der Einführung von CSS3 haben sich 

Webdesigner und Programmierer daran 

gewöhnen müssen, dass CSS nicht mehr 

in einer einzigen Spezifikation definiert 

ist, sondern einen modularen Aufbau 

bekam. 

Mit der Veröffentlichung der Spezifikation 

„Selectors Level 4“ sahen viele bereits 

die ersten Arbeiten in Sachen CSS4 kommen. 

Und wie man es in Medien immer 

wieder erleben muss, verbreiteten Dritte 

die Spekulationen und verkauften sie als 

Ausblick in die nicht mehr allzu ferne 

Zukunft der kaskadierenden Stylesheets. 

Um den Gerüchten um CSS4 ein 

Ende zu bereiten, hat Tab Atkins 

junior auf seiner Website (www.xanthir. 

com/b4Ko0/) ein klares Statement veröffentlicht: 

„THERE IS NO SUCH THING 

AS CSS4“. Atkins arbeitet für Google 

am Chrome-Browser, er ist Mitglied der 

CSS Working Group und arbeitet an verschiedenen 

anderen Arbeitsgruppen des 

W3C mit. Somit kommt dieses Statement 

aus berufenem Munde. Quasi von 

höchster Instanz wissen wird jetzt, dass 

die Spezifikation "Selectors Level 4" kein 

Modul von CSS4 sind, sondern eben nur 

ein Schritt in die Zukunft von CSS ist. 

Gleiches gilt auch für andere Spezifikationen 

wie „CSS Backgrounds and Borders 

Module Level 2“. 

Bildübergänge 

In CSS 1 und 2 beschränkt sich die Verwendung 

von Bildern weitgehend auf 

simple Möglichkeiten wie die Eigenschaft 

background-image, die lediglich einen 

URL-Wert unterstützt. Die Spezifikation 

„CSS Image Values and Replaced Content 

Module Level 4” erlaubt die Überblendung 

von zwei Hintergrundbildern 

mit dem Element cross-fade. Sie geben 

dazu einfach die beiden Spezifikationen 

wie „CSS Backgrounds and Borders Module 

Level 2“. 

Viel Neues bei CSS 

Wer in Sachen Webdesign auf dem Stand der Dinge 

sein will, der muss nicht nur mit den aktuellen Standards 

vertraut sein, sondern auch wissen, was die 

Zukunft bringen wird. Die Medien forcieren Gerüchte 

über eine kommende CSS4-Version. Doch die wird 

es nicht geben, dafür aber sehr viele, nicht minder 

spannende Neuerungen. 

Bildübergänge 

In CSS 1 und 2 beschränkt sich die Verwendung 

von Bildern weitgehend auf 

simple Möglichkeiten wie die Eigenschaft 

background-image, die lediglich 

einen URL-Wert unterstützt. Die Spezifikation 

„CSS Image Values and Replaced 

Content Module Level 4” erlaubt die 

Überblendung von zwei Hintergrundbildern 

mit dem Element cross-fade. Sie 

geben dazu einfach die beiden URLs der 

Hintergrundbilder an und bestimmen 

den Prozentsatz, mit dem das vordere 

Bild in das hintere überblendet werden 

soll. Dabei bedeutet der Wert 0 Prozent, 

dass nur das hintere Bild sichtbar ist, bei 

100 Prozent nur das vordere. Wenn Sie 

den Wert 50 verwenden, erfolgt eine 

1:1-Überblendung. Der konkrete Code 

hierfür sieht wie folgt aus: 

background-image: cross-fade( 

url(„bild1.png“), 

url(„bild2.png“), 

50%); 

Durch eine Erweiterung lassen sich weitere 

Details steuern. Soll die Überblendung 

der beiden Bilddateien innerhalb 

von zwei Sekunden erfolgen und sich die 

Animation unendlich oft wiederholen, so 

erweitern Sie obigen Code um folgende 

Zeile: 

animation: fading 2s infinite; 

Laut Spezifikation ist die Verwendung 

von cross-fade auf alle Bilder möglich, 

also auch auf border-image. 

In Zeiten, in denen Responsive Design 

eine immer wichtigere Rolle spielt, benötigt 

man einen Mechanismus, der für die 

optimierter Renderung der Bilder sorgt. 

Hierfür sieht die „CSS Image Values and 

Replaced Content Module“-Spezifikation 

das Element image-rendering vor. Das 

Element unterstützt zwei Optionen: Die 

Standardeinstellung auto für die Optimierung 

der Bildqualität und crisp-edges 

für die Optimierung von Detailschärfe 

und Geschwindigkeit. 

Ein Beispiel: 

img[src$=“.gif“], img[src$=“.png“] { 

image-rendering: -moz-crisp-edges; 

/* Firefox */ 

image-rendering: -o-crisp-edges; 

/* Opera */ 

image-rendering: -webkit-opti 

mize-contrast; /* Webkit */ 


Eine CSS4-Version wird es in nächster 

Zeit zwar nicht geben, dafür aber interessante 

Neuerungen und Erweiterungen 

für CSS. Diese umfassen unter 

anderem eine verbesserte Gestaltung 

von Hintergründen und Rahmen und 

zahlreiche neue Möglichkeiten bei der 

Textmanipulation. 


CSS–Spezifikationen | Webdesign 

image-rendering: crisp-edges; 

-ms-interpolation-mode: nearestneighbor; 

/* IE */ 

} 

Anfangs waren in der Spezifikation die 

Werte optimizeQuality und optimize- 

Speed vorgesehen, aber die sind inzwischen 

im auto-Wert aufgegangen. 

Optimierte Textverarbeitung 

Um Webdesignern mehr Möglichkeiten 

in Sachen Textmanipulation an die Hand 

zu geben, hat die CSS Working Group mit 

dem aktuellen „CSS Text Level 4“-Modul 

eine Fülle an Verarbeitungsmechanismen 

vorgesehen. Dazu gehören beispielsweise 

der Zeilenumbruch, die Ausrichtung, 

der Umgang mit Leerzeichen sowie Textdekoration- 

und Transformation. Das Dokument 

verspricht interessante Verbesserungen 

für all die Webentwickler, denen 

die typografische Aufmachung von Inhalten 

am Herzen liegt. 

Eine der interessantesten Textverarbeitungsmöglichkeiten 

bietet die Eigenschaft 

text-transform. Sie unterstützt 

verschiedene Werte. Mit dem Wert capitalize 

wird der Anfangsbuchstaben eines 

jeden Worts großgeschrieben, alle anderen 

Buchstaben bleiben unverändert. 

Die Werte uppercase beziehungsweise 

lowercase formatieren den Text groß- beziehungsweise 

kleingeschrieben. 

Großen Raum nimmt in der Spezifikation 

der Zeilenumbruch ein. In Zukunft 

werden Sie (fast) die gleichen Umbruchmöglichkeiten 

nutzen können, wie Sie 

sie von Ihrer Textverarbeitung kennen. 

Mit der Eigenschaft line-break können Sie 

verschiedene Umbrüche definieren. Mit 

dem Wert auto erfolgt der Zeilenumbruch 

automatisch durch den User Agent, also 

den Browser. Wenn Sie einen weniger 

restriktiven Umbruch verwenden wollen, 

kommt der Wert loose zum Einsatz. 

Seine Verwendung ist insbesondere bei 

kurzen Zeilen wichtig. Um die gängigen 

Zeilenumbruchregeln anzuwenden, verwenden 

Sie den Wert normal. 

Auch in Sachen Silbentrennung hat „CSS 

Text Level 4“ einige Neuerungen zu bieten. 

Von CSS3 kennt man die Eigenschaft 

hyphen mit den mögliche Werten none, 

manual und auto. Damit legen Sie fest, 

ob die Silbentrennung prinzipiell deaktiviert 

ist (none), die Trennung manuell 

(manual) oder automatisch durch sprachspezifische 

Regeln (auto) erfolgt. In der 

Text-Level-4-Spezifikation kommen neue 

Eigenschaften hinzu. Mit der Eigenschaft 

hyphenate-character können Sie beispielsweise 

ein bestimmtes Zeichen als 

Trennzeichen anlegen. Die Eigenschaft 

hyphenate-limit-zone bestimmt den maximalen 

Wert für ungenutzten Raum in 

einer Zeile. Beim Überschreiten dieses 

Werts erfolgt die Trennung durch den 

Browser. Die Spezifikation sieht bislang 

zwei weitere praktische Eigenschaften 

vor: Mit hyphenate-limit-chars bestimmen 

Sie die Anzahl der Zeichen vor und 

nach der Trennung. Aus Sicht der Typografie 

wirkt ein Dokument nicht sonderlich 

professionell, wenn viele Zeilen mit 

einer Silbentrennung enden. Auch hierfür 

hat das Modul die passende Lösung: 

Mit der Eigenschaft hyphenate-limit-lines 

können Sie die maximal Anzahl aufeinander 

folgender Zeilen mit Trennung 

festlegen. 

Pseudoelemente 

Auch die Pseudoelemente kennt man 

von CSS3 und deren Verwendung dürfte 

den meisten Webdesignern nicht 

fremd sein. Damit können Sie festlegen, 

dass vor oder nach einem Element automatisch 

bestimmte Inhalte eingefügt 

werden. Mögliche Einfügungen sind statischer 

Text, beliebige Ressourcen wie 

beispielsweise Grafiken, aber auch variable 

Inhalte. 

Eine der interessantesten Anwendungsbereiche 

ist das Einfügen einer Initiale. 

Dabei wird einfach der erste Buchstabe 

aus einer Zeile zu Beginn des Absatzes 

eingefügt. Um eine Initiale zu generieren, 

muss außerdem eine Texttransformation 

vorgenommen und der erste Buchstabe 

großgeschrieben werden. Dazu ein 

konkretes Beispiel, das die Initale über 

Tab Atkins junior ließ alle Gerüchte rund um CSS4 verstummen. Aus dem Zentrum 

der CSS Working Group kommt das eindeutige Statement, dass es keine CSS4 geben 

wird. Die Zukunft heißt einfach nur CSS. 


Webdesign | CSS–Spezifikationen 

zwei Zeilen hinweg erzeugt: 

 

 

 

Beispiel für eine Initiale 

 

P { font-size: 12pt; line-height: 

1.2 } 

P::first-letter { font-size: 200%; 

font-weight: bold; float: left } 

SPAN { text-transform: uppercase } 

 

 

 

Das sind die ersten 

Wörter eines Artikels, wie man millio 

nenfach im Internet findet. 

 

 

 

 

Besondere Beachtung verdienen die 

Elemente ::before und ::after, mit denen 

man verschiedene Elemente vor 

und nach einem bestimmten Content 

einfügen kann. Dabei kann man auch 

mehrere solcher Elemente mit grafischen 

Effekten mischen. Hierzu ein Beispiel: 

div::before { 

content: „“„; 

} 

div::after { 

content: „”“; 

} 

div::after(2) { 

content: „.“; 

position: absolute; 

bottom: -10px; 

right: 20%; 

border-left: 10px solid transparent; 

border-right: 10px solid transparent; 

border-top: 10px solid #111; 

width: 0; 

height: 0; 

Die Gestaltung einer Umrandung entsprechend 

der Spezifikation „CSS Backgrounds 

and Borders Module Level 4“. 

} 

div{ 

position: relative; 

float: left; 

background: #111; 

padding: 1em; 

border-radius: 1em; 

color: white; 

} 

Mit CSS Pseudo-Elementen lassen 

sich spannende Dinge realisieren. 

 

Pseudoelemente sind außerdem über 

Skripts ansprechbar und auch als Event- 

Ziel verfügbar. Die Spezifikation sieht 

auch in diesem Bereich Neuerung vor. 

So ist beispielsweise der Stil anpassbar. 

Auch Listen von Pseudoelementen können 

angelegt werden. 

Hintergründiges 

Das Modul „CSS Backgrounds and Borders 

Module Level 4“ stellt verschiedene 

Neuerungen für die Gestaltung von Hintergründen 

und Rahmen zur Verfügung. 

Level 4 bietet gegenüber seinem Vorgänger 

verschiedene Erweiterungen. 

Die wichtigen sind Rahmenbearbeitung 

(border-clip), Schatten (box-shadow) und 

Rahmenformatierung (border). 

Mit border-clip können Sie die Umrandung 

eines Bereichs anpassen. Dabei 

sind beispielsweise durchgehende und 

unterbrochene Umrandungen möglich, 

auch ein Mix aus beiden Varianten und 

die Verwendung von Farbe. 

Ein einfaches Beispiel: 

border-clip-top: 0 10px 1fr 10px; 

border-clip-bottom: 0 10px 1fr 10px; 

border-clip-right: 0 5px 1fr 5px; 

border-clip-left: 0 5px 1fr 5px; 

Mit der Eigenschaft box-shadow können 

Sie Ihrem Rahmen verschiedene Schatten 

zuweisen. Der Schatten kann innerhalb 

und außerhalb des Rahmens positioniert 

werden. Für die Rahmengestaltung sieht 

die Spezifikation verschiedene Möglichkeiten 

vor. Sie können grafische Elemente 

wie Linien und geometrische Figuren, 

aber auch Bilder verwenden. 

Selektoren 

Am meisten Beachtung fand in den 

letzten Monaten die Spezifikation „Selectors 

Level 4“, die es Ihnen endlich 

erlaubt, Elternelemente anzusprechen. 

Unter Webdesignern dürfte sich herumgesprochen 

haben, dass Selektoren eine 

große Hilfe bei der Entwicklung von 

semantischem und 

performantem 

Code sein können. 

Allgemein 

formuliert repräsentierten 

Selektoren eine 

Struktur, die in 

CSS als Bedingung 

für die 

Auswahl von 

Elementen in 


CSS–Spezifikationen | Webdesign 

einem Dokument verwendet werden 

kann, um auf diese dann eine bestimmte 

Aktion anzuwenden. Es kann sich auch 

um eine einfache Beschreibung eines 

HTML- oder XML-Fragments handeln. 

Über die Selektoren können alle relevanten 

Elemente in einem Webdokument 

angesprochen werden, beispielsweise 

Klassen, Attribute, Links und 

Pseudoklassen. 

Die Elemente eines Dokumentenbaums, 

die durch einen Selektor repräsentiert 

werden, sind die Subjcets des Selektors. 

Mit dieser Technik können Sie beispielsweise 

ein Elternelement ($E) auf Grundlage 

des Kindelements (F) gestalten. 

Hier ein Beispiel: 

/* Stil des LI-Elements */ 

ul > $li > p { border: 1px solid 

#ccc; } 

Obiger Code bestimmt den Stil des LI- 

Elements, nicht aber den des P-Elements. 

Mit dem Selektor ist das einfach: 

$ol > li:only-child { 

list-style-type: none; 

} 

In diesem Beispiel wird das OL-Element 

durch das LI-Kindelement gestaltet. 

Das Subjekt des Selektors soll 

dabei explizit durch das Dollarzeichen 

gekennzeichnet werden. Mit den 

beidem Pseudoklassen :any-link und 

:local-link können Sie lokale Elemente 

ansprechen. Die Pseudoklasse :any-link 

wird für allgemeine Links verwendet, 

:local-link hingegen für Quellen, die 

sich auf dem gleichen Host befinden. 

Mehr Informationen 

In Sachen CSS sind verschiedene Spezifikationen auf dem Weg, die das künftige Aussehen 

von Web-Dokumenten mit beeinflussen werden. Der beste Ausgangspunkt zu aktuellen 

Informationen rund um CSS ist die Website der CSS Working Group. Die aktuellen 

Entwicklungen bieten mehr als genug Stoff für einen Blick in die Zukunft: 

CSS Image Values and Replaced Content Module Level 4 

dev.w3.org/csswg/css4-images/ 

CSS Pseudo-elements Module Level 4 

dev.w3.org/csswg/css4-pseudo/ 

CSS Backgrounds and Borders Module Level 4 

dev.w3.org/csswg/css4-background/ 

CSS Selectors Level 4 

www.w3.org/TR/2011/WD-selectors4-20110929/ 

CSS Text Level 4 

dev.w3.org/csswg/css4-text/ 

Das folgende einfache Beispiel verhindert 

beispielsweise, dass Links, die auf 

die aktuelle Seite zielen, unterstrichen 

werden, wenn sie nicht Teil der Navigationsliste 

sind: 

nav :local-link { text-decoration: 

none; } 

Mit local-link können Sie sogar 

lokale Links abhängig von der URI 

ansprechen: 

a:local-link {...} 

a:local-link(0) {...} 




Viel Beachtung fand auch die Einführung 

des Pseudoklasse matches (), denn damit 

lassen sich Elemente ansprechen, die 

Anspruch und Wirklichkeit: Noch können Browser nicht die gewünschte Initiale 

umsetzen. Links das anvisierte Ergebnis. 

Auf der Website der W3C finden Sie alle CSS-spezifischen Spezifikationen und Entwürfe. 

Die neueren Dokumente befinden sich meist noch im Entwicklungsstadium und sind 

noch nicht einmal für die Implementierung vorgesehen. 

bestimmten Argumenten entsprechen. 

Dazu gibt es auch das passende Gegenstück, 

über das der Ausschluss von Elementen 

möglich ist: not(). 

Der folgende Selektor repräsentiert alle 

Element außer haus-Elemente: 

*:not(haus) 

Ein weiteres Beispiel zeigt, wie man alle 

HTML-Elemente bis auf Links auswählt: 

html|*:not(:link):not(:visited) 

Fazit 

Der modulare Aufbau von CSS ist für 

alle Entwickler von Browern und von 

Entwicklungskits ein wahrer Segen, 

denn so können sie sich peau à peau 

neue Feature implementieren, ohne 

gleich vollständige Spezifikationen umsetzen 

zu müssen. 

Auch Webdesigner profitieren vom modularen 

Aufbau, da sie sich so kontinuierlich 

an neue Features gewöhnen 

und diese gezielt in ihren Entwicklungen 

umsetzen können. Doch soviel 

ist gewiss: CSS ist auf einem guten Weg 

und wird uns noch manch interessante 

Möglichkeiten offerieren. 

 

Dr. Holger Reibold 


Webentwicklung | Frontend-Entwicklung 

Frontend-Tools für 

jeden Einsatz 

Es herrscht wahrlich kein Mangel an Werkzeugen für 

die Entwicklung und Pflege von Internetseiten. Nur 

sollte das Tool auch zum eigenen Arbeitsstil passen. 

Wir haben uns für Sie auf dem Markt umgesehen und 

präsentieren Werkzeuge für jede Anforderung. 


Der Markt hat im Bereich der Entwicklung 

und Pflege von Websites viel zu 

bieten. Dieser Artikel liefert Ihnen 

einen Überblick über die besten Tools 

von der Webentwicklung bis zur Versionierung, 

geht auf Frameworks zur 

Arbeit mit Prototypen ein sowie auf 

Tools zur Erstellung und Nutzung von 

Testumgebungen. 

Arbeitsabläufe und Geschmäcker sind 

unterschiedlich. Wer am liebsten 

tief im Quellcode seiner Seiten arbeitet, 

wird mit WYSIWYG-Anwendungen wohl 

kaum warm werden. Und Entwickler, die 

mit Word & Co. auf Kriegsfuß stehen, suchen 

eher nach einer einfachen Möglichkeit, 

ihre Dokumentation zu pflegen. Auf 

den nächsten Seiten lernen Sie praktische 

Werkzeuge für jeden Geschmack und im 

Prinzip für jedes Betriebssystem kennen. 

Basic-Coding: 

Für Puristen und Genießer 

Für absolute Puristen bietet sich der 

Einsatz des Editor VIM an. Ihn gibt es 

für Windows, Linux und Mac. Überzeugte 

Anwender schwärmen von seiner 

Schlichtheit und der Möglichkeit, die 

grundlegende Installation zu erweitern. 

Wer allerdings ein Freund von Benutzeroberflächen 

ist, wird das Arbeiten damit 

eher mühsam finden. Etwas komfortabler 

ist SublimeText, dessen Hersteller nicht 

nur den Softwareentwickler im Blick 

hat, sondern auch Autoren, was sich 

zum Beispiel im sehr schön gemachten 

Vollbildmodus zeigt. Hier wie dort 

braucht es allerdings eine Weile, bis der 

Anwender sich in alle Funktionen und 

Tastenkürzel eingearbeitet hat, um den 

größten Nutzen aus den Programmen 

zu ziehen. Alle Coder, die Wert auf eine 

integrierte und flexible Entwicklungsumgebung 

legen, werden mit Aptana zufrieden 

sein. HTML, CSS, PHP, Ruby und 

Javascript sind für diese Umgebung kein 

Problem. Vom Syntax-Highlighting über 

die Code-Vervollständigung bis hin zum 

integrierten Debugger ist alles dabei, was 

das Entwicklerherz höher schlagen lässt. 

Wer primär mit der Entwicklung von Javascript 

und HTML5 zu tun hat, sollte 

WebStorm eine Chance geben. Die 

Entwicklungsumgebung ist genau dafür 

optimiert und verfügt über einen integrierten 

Debugger sowie ausgezeichnete 

Funktionen, vorhandenen Code einem 

umfangreichen Refactoring zu unterziehen. 

Zeitsparend sind die mitgelieferten 

Boilerplates. 

Dokumentationen: 

Schnell und einfach 

Früher oder später kommt die Dokumentation 

immer auf den Entwickler zu. Wer 

Oberflächen und Webseiten für Kunden 

designt oder anpasst, muss den späteren 

Redakteuren Informationen an die 

Hand geben, wie sich das System einsetzen 

lässt. Doch niemand möchte mit 

diesem Thema mehr Zeit als unbedingt 

notwendig verbringen. Für ausführliche 

Erläuterungen in Textform bietet sich 

die Nutzung von Markdown an. Diese 

Markup-Sprache basiert auf einfachen 

Textdateien, deren Markups dem Text 

Bedeutungen zuweisen. So wird eine 

Hauptüberschrift etwa durch die vorangestellte 

Raute (#) gekennzeichnet, eine 

Überschrift zweiter Ebene durch zwei 

Rauten. Die Texte bleiben dabei trotz 


Frontend-Entwicklung | Webentwicklung 

der Anweisungen 

immer noch leicht 

lesbar und können 

auf wirklich jedem 

Betriebssystem bearbeitet 

werden. 

Das Programm Pandoc, 

das für alle 

Plattformen zur Verfügung 

steht, kann aus diesen Markdown-Dateien 

mit einem Befehlsaufruf 

verschiedene Ausgabeformate erzeugen. 

So wird aus dem gleichen Text ganz einfach 

HTML, ein E-Book oder auch ein 

Dokument in Formaten für Microsoft 

oder Libre Office. 

Wer es noch Zeitsparender mag, sollte 

sich einmal Clarify ansehen. Auf den 

ersten Blick ist das Tool einfach ein Programm 

für das Anlegen von Bildschirmfotos. 

Das ist auch seine Hauptfunktion. 

Dabei speichert die Software die Screens 

aber nicht einfach als Bilder auf der 

Festplatte, sondern in einem Dokument. 

Jede Aufnahme wird zu einem Schritt innerhalb 

der Datei und kann mit kurzen 

Erläuterungen und Markierungen versehen 

werden. Die Dokumentation stellen 

Sie anschließend entweder online, etwa 

SublimeText ist 

ein Editor, der 

einen guten 

Kompromiss zwischen 

Entwicklungsumgebung 

und puristischen 

Werkzeugen wie 

VIM darstellt. 

Mit der grafischen Oberfläche von Easel lassen sich Prototypen schnell zusammenklicken. 

Mit einem Mausklick erhält der Entwickler anschließend seinen Quellcode. 

als HTML-Datei, zur Verfügung oder Sie tung weiter zu bearbeiten. Schneller und 

erzeugen daraus ein PDF oder eine RTF- bequemer lässt sich die Dokumentation 

Datei, um diese in einer Textverarbei- 

nicht erledigen. 

_09Z8N_Webhoster_Neu_IM_03_homepage_info_210x95.pdf;S: 1;Format:(210.00 x 95.00 mm);21. Jan 2013 13:25:49 

DER EINFACHSTE WEG 

ZU IHRER EIGENEN 

HOMEPAGE 

JETZT 

KOSTENLOS 

TESTEN 

WWW.HOMEPAGE.INFO 

ÜBER 100 DESIGN 

THEMEN ZUR AUSWAHL

Webentwicklung | Frontend-Entwicklung 

Versions ist ein 

Beispiel für eine 

Versionskontrolle, 

die den notwendigen 

Server mitbringt. 

Wer nicht 

mit einem Mac 

arbeitet, findet 

auch Alternativen 

für Windows. 

Entwicklung direkt im Browser 

So ganz ohne Arbeit am Quellcode wird 

es auch in absehbarer Zukunft beim 

Design und der Umsetzung von Websites 

wohl nicht gehen. Das Angebot 

an Entwicklungswerkzeugen, die ohne 

umfangreiche Installation auskommen 

und direkt im Browser funktionieren, 

wächst allerdings stetig. Easel stellt zu 

einem moderaten Monatstarif eine visuelle 

Entwicklungsumgebung zur Verfügung, 

mit deren Hilfe der Entwickler 

responsive Oberflächen aus den angebotenen 

Formen und Elementen zusammenklickt. 

Auf das Pixel exakt werden 

die Objekte ausgerichtet. Ist das Design 

soweit zufriedenstellend, lässt sich der 

Quellcode einzelner Elemente oder einer 

vollständigen Seite in HTML und 

CSS exportieren. 

Wer das bereits wieder zu grafiklastig 

findet und eher nach einer Entwicklungsumgebung 

sucht, die rein im Browser 

funktioniert, wird mit Codev zufrieden 

sein. Dabei handelt es sich um einen 

Code-Editor, der die Arbeit am Quellcode 

(auch im Team) von jedem Ort ermöglicht 

und sich hinter lokal installierten Anwendungen 

nicht zu verstecken braucht. 

Die Oberfläche ist auch für die Nutzung 

auf Touchscreens optimiert, so dass sich 

per iPad oder Nexus an den Seiten arbeiten 

lässt. Ein zusätzlicher Nutzen: 

Die Zeit, die mit der Entwicklung verbracht 

wird, protokolliert das System 

automatisch. Die Zeiterfassung ist also 

auch gleich miteingebaut. 

Quellcode versionieren 

Nicht nur wenn der Code im Team entwickelt 

werden soll, stellt sich die Frage, 

wie die verschiedenen Arbeitsstände 

verwaltet werden. Ein System zur Versionierung 

hilft, zu einem früheren Stand 

der Entwicklung zurückzukehren. Github 

ist sicherlich einer der bequemsten und 

schnellsten Wege zur Versionskontrolle. 

Sie brauchen sich bei diesem Cloud- 

Dienst nicht um die Einrichtung des Systems 

zu kümmern, sondern können nach 

der Eröffnung eines Accounts loslegen. 

Für OpenSource-Projekte kostet die Nutzung 

der Infrastruktur nichts, die Datenspeicher 

sind dafür dann aber öffentlich. 

Für die Eröffnung von bis zu fünf privaten 

Code-Speichern werden 7 US-Dollar pro 

Monat berechnet. Der Dienst bietet auch 

zwei offizielle Clients für Windows und 

den Mac an, um noch einfacher auf die 

Ressourcen zurückgreifen zu können. 

Wer lieber mehr Kontrolle über sein System 

haben möchte, installiert sich eine 

lokale Versionskontrolle. Nach wie vor 

beliebt ist hierbei Subversion. Es ist gut 

dokumentiert und gerade auch auf dem 

Mac oder Linux schnell lokal eingerichtet. 

Wer sich nicht scheut in einem Terminal 

zu arbeiten, braucht auch keine weitere 

Software. Mit wenigen Kommandos 

wird der Quellcode an den Datenspeicher 

übergeben oder wieder ausgelesen. 

Rein grafische Versionskontrollen, die 

den notwendigen Server bereits einge- 

Gridpak eignet sich für Minimalisten. Man erstellt damit ein Raster für Websites, 

das als Grundlage für deren weitere Entwicklung genutzt wird. 


Frontend-Entwicklung | Webentwicklung 

baut haben und mitinstallieren, stehen 

für Mac und Windows bereit. Versions 

entspricht in Look-and-Feel der gewohnten 

Mac-Ästhetik. Tortoise ist eine 

Versionskontrolle für Windows, die auf 

Subversion basiert und sich direkt in den 

Explorer einklinkt. 

Frameworks für jeden Geschmack 

Mit Frameworks sparen die Entwickler 

Zeit. Außerdem sorgen sie vom ersten 

Moment an für eine konsistente Optik 

auf allen Seiten. Die Frage hinsichtlich 

der besten Herangehensweise 

ist unter Webdesignern nach wie vor 

umstritten. Während die einen vor der 

eigentlichen Entwicklung das Anlegen 

eines Wireframes (Mockup) bevorzugen, 

kommt anderen das schnelle 

Prototyping eher entgegen. Ein gutes 

Framework beschleunigt die Arbeit mit 

Prototypen. 

Gridpak ist ein einfaches System, das 

dem Arbeitsstil eines Puristen näher 

kommt. Es stellt auf Knopfdruck lediglich 

die grundlegende Struktur des 

Entwurfs zur Verfügung. Auf der Seite 

entscheiden Sie sich dabei für das gewünschte 

Gitter und erhalten anschließend 

die grundlegenden Dateien in 

Form von CSS, PNG und Javascript- 

Code zum Download. 

Foundation bietet hier schon etwas 

mehr. Das Framework kümmert sich 

dank einiger weniger Anweisungen 

nicht nur um das Anlagen einer Gitterstruktur, 

sondern enthält auch einige 

Dutzend primitiver Formen, mit denen 

das Design vorangetrieben werden 

kann. Als Lohn der Mühe erhält der 

Entwickler anschließend ein Grundgerüst 

an Code, das danach leicht in 

Sachen Farbe und Schriften an die eigenen 

Ideen angepasst werden kann. 

Über Bootstrap müssen wahrscheinlich 

keine großen Worte mehr verloren werden. 

In Kombination mit einem guten 

Links und Infos 

Aptana 

www.aptana.com 

Bitnami 

bitnami.org/stacks 

Bootstrap 

twitter.github.com/bootstrap 

Browserstack (Testphase kostenlos, 

danach mindestens 19 Dollar pro Monat). 

www.browserstack.com 

Clarify 

www.clarify-it.com 

Codev 

codev.it 

Easel (Testphase kostenlos. Für alle 

Funktionen und eine unbegrenzte Zahl 

an Dokumenten werden 15 US-Dollar pro 

Monat berechnet). 

www.easel.io 

Foundation 

foundation.zurb.com 

Github 

github.com 

Gridpak 

Editor erweisen sich die Grundgerüste 

dieses von Twitter entwickelten Frameworks 

als echte Zeitsparer und Helfer 

im Entwicklungsprozess. 

Lokale Testumgebungen 

Puristen werden eine vollständige lokale 

Installation des Zielsystems zu Testzwecken 

wohl bevorzugen. Auf dem Mac 

ist bereits ein lokaler Webserver, sogar 

mit PHP-Unterstützung, vorhanden und 

muss lediglich durch die Webfreigabe aktiviert 

werden. Und in den Paketquellen 

der diversen Linux-Distributionen sind 

alle Elemente für einen lokalen Server 

mit Apache, MySQL und PHP vorhanden. 

Nur wenig aufwändiger ist die Zusammenstellung 

eines solchen Systems 

für die Windows-Plattform. Durch die 

einzelnen Installationen und Konfigurationen 

landen nur die Komponenten auf 

der Festplatte, die gewünscht sind. 

Wer es dagegen noch einfacher mag, 

kann zu den so genannten Bitnami- 

gridpak.com 

HTML5 Boilerplate (kleines Framework für 

die schnelle Entwicklung) 

html5boilerplate.com 

Markdown und seine Syntax 

daringfireball.net/projects/markdown/ 

Pandoc 

johnmacfarlane.net/pandoc 

SublimeText (69 Euro) 

www.sublimetext.com 

Tastenkürzel für diverse Editoren und 

Umgebungen trainieren 

www.shortcutfoo.com/ 

app/tutorial/sublimetext 

Tortoise 

tortoisesvn.net 

Versions (Kostet knapp 60 Euro) 

versionsapp.com 

VIM 

www.vim.org 

Webstorm (zwischen 49 und 94 Euro) 

Stacks greifen. Diese bringen eine Installationsroutine 

für alle Betriebssysteme 

mit und installieren eine WAMP-, 

LAMP- oder MAMP-Umgebung mit 

wenigen Mausklicks. Über ein kleines 

Zusatzprogramm wird dann die Testumgebung 

per Mausklick gestartet. 

Von Bitnami stammen dazu zahlreiche 

Webanwendungen (von Wordpress 

über Moodle bis hin zu Magento), deren 

Setup-Programm gezielt nach einem 

bereits installierten Stack sucht und das 

System einrichtet. Über den Aufruf der 

Adresse localhost im Browser ist die 

Testumgebungen dann erreichbar. Wer 

wissen möchte, wie sein Design in verschiedensten 

Browsern aussieht, braucht 

diese nicht erst zu installieren oder sich 

mit der Konfiguration einer Testumgebung 

zu beschäftigen. Der Service- 

Browserstack ist hier eine komfortable 

Alternative beziehungsweise Ergänzung 

zur Testumgebung. 

 

Stephan Lamprecht 


Webdesign | Cheat Sheet 

Neu: Das Cheat Sheet 

Social Media – Quick 

Reference Guide 


Unser Cheat Sheet hilft bei der täglichen 

Arbeit: Einfach das doppelseitige Blatt 

aus der Heftmitte trennen und laminieren. 

So hält es auch größeren Belastungen, 

etwa Developer-Kaffee, stand. 

Vorbei ist die Zeit, in der eine gute Website mit monatlichem 

Newsletter den Anforderungen an professionelle 

Kommunikation genügt: Heute twittern User, chatten, 

teilen, liken und nutzen Smartphone-Apps. Daher 

sollten Sie jetzt prüfen, welche sozialen Netze zur Zielgruppe 

passen und wie Sie diese sinnvoll erreichen. 

Social-Media-Netzwerke sind die virtuellen 

Orte, an denen Ihre potenziellen 

Kunden sich derzeit tummeln, so 

viel ist klar. Nicht ganz so offensichtlich 

ist für viele Unternehmer, dass es sich 

bei Facebook, Linkedin, Twitter und Co. 

nicht einfach um neue Vertriebskanäle 

handelt, die sich mit bewährten Methoden 

beackern lassen. 

Ein rundum erfolgreicher Social Media 

Account generiert zwar hoffentlich 

Immer richtig im Bilde 

auch Umsätze, sein Hauptzweck ist das 

aber in der Regel nicht. Die Zielgruppe 

lässt sich nicht instrumentalisieren 

und wenn ein Unternehmen zu viel 

Werbung verteilt, wird es umgehend 

„entfolgt” oder aus dem Nachrichtenstrom 

gefiltert. Wer unterhaltsam und 

informativ zu eigenen Aktionen kommuniziert, 

hat gute Karten, vorausgesetzt, 

er hat Fingerspitzengefühl – und 

das richtige Netzwerk. 

Die ideale Unterstützung, wenn Sie 

sich systematisch in allen Netzwerken 

beteiligen möchten: Im 

Lunametrics-Blog finden Sie eine 

lange Liste aller Bildformate, die 

für Profile, Timelines, Unternehmensseiten 

in den sozialen Netzen 

von Twitter bis Youtube zum Einsatz 

kommen. Unter den grafischen Darstellungen 

im Posting stehen alle 

Abmessungen noch einmal separat 

als Liste – so können Sie alle Fotos und anderen Grafiken schon vor der Anmeldung 

perfekt vorbereiten, sich immer mit dem richtigen Bildausschnitt präsentieren und 

schon vorab überlegen, welche Vorschaugrafiken bei eigenen Texten Sinn machen, 

wie Meta-Descriptions und Linktexte formuliert sein könnten. Beachten Sie jedoch 

bitte unbedingt die Richtlinien für die Gestaltung von Profilgrafiken: Bei Facebook 

zum Beispiel bietet die große Titelgrafik zwar verlockend viel Platz, darf aber nicht als 

Werbefläche eingesetzt werden. 

www.lunametrics.com/blog/2012/11/12/final-social-media-sizing-cheat-sheet/ 

Denn jedes Social Network hat eine 

eigene Kultur, bedient unterschiedliche 

Zielgruppen und hilft beim Erreichen 

unterschiedlicher Ziele. Über 1,2 Milliarden 

Menschen sind weltweit in 

solchen Netzen aktiv, so eine aktuelle 

Studie von ComScore (www.comscore. 

com). Sie verteilen sich auf Communities 

wie Facebook, Sharing Sites wie Flickr, 

Instagram und Youtube oder Lokalisierungsdienste 

wie Foursquare. Viele User 

nutzen gleich mehrere Netzwerke parallel, 

bequem durch Smartphone-Anwendungen 

unterstützt. 

Ziele und Chancen 

Die lukrativste Zielgruppe sind die 

umtriebigen, aufgeschlossenen und 

vielseitig interessierten unter den Konsumenten, 

doch wie erreicht man sie? 

Eine Marke bekannter machen, Kunden 

erreichen, mit der Zielgruppe kommunizieren, 

Aktionen verbreiten und dabei 

(auch) Umsätze erzielen und außerdem 

Links im Internet verteilen, die sich bei 

der Suchmaschinenoptimierung positiv 

auswirken, viele Fans gewinnen, aus Interessenten 

Käufer machen: Kaum etwas 

ist schwieriger, als ein sinnvolles Ziel im 

Bereich Social Media zu definieren und 

die Ergebnisse dann auch noch zu prüfen. 

Zwar lassen sich Klicks, Fans und 

Follower in Zahlen ganz einfach messen, 

doch wer Social-Media-Aktivitäten gerne 

eins zu eins in Umsatzsteigerungen 

umrechnen würde, hat schlechte Karten. 

Zehntausende von Fans kann man auch 

mit Gewinnspielen erreichen, ohne dass 

mehr als eine Handvoll zu Kunden wird, 


Cheat Sheet | Webdesign 

nicht ohne weiteres 

messbar, wenn ein 


Unternehmen parallel 

35 Profi-Tipps für den Einsatz von 

auch noch Such- 

Linkedin als Business-Netzwerk 

blog.hubspot.com/blog/ta- 

maschinenmarketing 

bid/6307/bid/23454/The- 

und konventionelle Ultimate-Cheat-Sheet-for- 

Werbung betreibt. Mastering-LinkedIn.aspx 

Nur eins ist ganz sicher: 

Pinterest for Business: 10 Regeln für 

Völlig auf Social 

den Erfolg 

www.amyporterfield. 

Media zu verzichten, 

com/2012/06/the-10-com- 

kann sich heute kein mandments-of-using-pinterest- 

Clevere Planung für Facebook-Shares und Tweets: Mit Hootsuite.com 

und Buffer wird Ihre Social-Media-Zeitplanung 

Unternehmen mehr 

leisten, zumindest die for-business/ 

Social-Media-Todsünden: So nicht! 

stressfrei (bufferapp.com). 

Verknüpfungsmöglichkeiten 

der Business- 

karrierebibel.de/ich-kann-dasnicht-ausstehen-20-todsundenin-social-media/ 

während ein populäres Zufallsfoto im Netze wie Xing und Linkedin werden im 

Instagram for Business 

Nu Hunderttausende von potenziellen Geschäftsleben heute vorausgesetzt. www.socialmediaexaminer.com/ 

Käufern hervorbringen kann. 

instagram/ 

Es gibt auch Firmen, die auf Such- Keine Einbahnstraße 

und 

instagram-business.tumblr.com/ 

maschinenoptimierung zum größten Teil Wenn Sie sich nun mit Hilfe unseres 

Tumblr for Business, ein Quick Guide 

verzichten können, weil ausreichend Cheat Sheets einen Überblick über die 

www.entrepreneur.com/ 

User aus den sozialen Netzwerken zu 

ihrem Shop kommen und sie nicht mehr 

auf das Google-Ranking angewiesen 

sind. Aber auch hier kann nur gemessen 

werden, woher der User beim ersten 

Kauf kam, und nicht, ob er über Facebook 

oder andere Netze auf einen Shop 

aufmerksam wurde und später wiederkam. 

derzeit angesagten sozialen Netze verschaffen, 

vergessen Sie bitte nicht die 

Einbindung von entsprechenden Buttons 

und Verknüpfungen auf Ihrer Firmen- 

Website, mit denen Ihre Kontakte Sie 

jederzeit mühelos bei Facebook, Twitter, 

Linkedin und Co finden können. 

Wir hoffen, dass unser Cheat Sheet 

article/224084 

4sq das deutsche Foursquare-Blog beziehungsweise 

die inoffizielle Fan-Site 

4sq-blog.de 

werke erleichtert und freuen uns über 

Feedback, damit die nächsten Arbeitsblätter 

noch nützlicher werden. 

Alles ist möglich, doch vieles ist Ihnen die Auswahl der richtigen Netz- 

 

Carola Heine 

_09Z8K_Webhoster_Neu_IM_03_freeweb_de_210x95.pdf;S: 1;Format:(210.00 x 95.00 mm);21. Jan 2013 13:26:18 

Alle wichtigen Features. 

Kostenlos & unverbindlich. 

WWW.FREEWEB.DE 

5 GB Speicherplatz 

10 GB Datentransfer/Monat 

eine eigene Domain (.de) 

FTP Zugang zum Aufspielen der Daten 

10 Subdomains 

5 eMail Adressen 

1 x MySQL Datenbank 

KOSTENLOSER 

FREEWEB.DE 

TARIF 

Keine Mindestvertragslaufzeit. 

Keine Einrichtigungskosten. 

Keine Kündigungskosten.

Webdesign | Cheat Sheet 

social media Cheat sheet 

Das Cheat Sheet 

Facebook 

www.facebook.com 

Jeder User und jede Firma hat eine eigene Präsenz in Form einer „Timeline“, 

eines eigenen Nachrichtenstroms. Facebook-Nutzer verknüpfen 

sich (Fans/Freunde) oder abonnieren aktiv die Nachrichten anderer 

beziehungsweise. signalisieren Interesse/Zustimmung zu Beiträgen durch 

„Gefällt mir“-Klicks. Das aktuell größte soziale Netzwerk erfordert rege und 

konsequente Beteiligung. Facebook-Seiten für Business-Zwecke sollten 

echten Mehrwert liefern in Form von Informationen und Unterhaltung. 

Aufwand Schnelle Einrichtung, unkompliziertes Veröffentlichen 

und Teilen von Links und Informationen. 

Tägliche Aktivität Voraussetzung für Erfolg. 

Kosten 

Zielgruppe 

Tipp 

Chance 

Für Sponsored Posts und Werbung innerhalb von 

Facebook fallen Gebühren an, das Anlegen und 

Führen eines Accounts ist kostenlos. 

Alle 

Facebook-Fans reagieren ungnädig darauf, 

wenn sie mit Werbung belästigt werden. Besser: 

Bekanntheitsgrad einer Marke erhöhen, ansprechendes 

Bild der Unternehmenskultur zeigen, 

nebenbei über News/Produkte informieren. Wird 

dies geschickt gemacht, steigen dadurch unweigerlich 

auch die Umsätze. 

Wer seine Kunden ernst nimmt, findet in Facebook 

ein wertvolles Instrument für Kundenpflege 

und Feedback. 

Twitter 

www.twitter.com 

Jeder Twitter-Account hat eine Timeline und kann andere abonnieren 

sowie von anderen abonniert werden (Friends und Follower). Interesse 

und Zustimmung wird durch Following, das Vergeben von Favoriten, 

durch Antworten und „Retweets“ (Weiterverteilen) signalisiert. 

Twitters Besonderheit: Keine Nachricht kann länger als 140 Zeichen 

sein. Mit sogenannten Hashtags werden auf Twitter die Beiträge/ 

Tweets einem bestimmten Thema zugeordnet. 

Aufwand Schnelle Einrichtung, unkompliziertes Veröffentlichen 

und Teilen von Links und Informationen. 

Tägliche Aktivität Voraussetzung für Erfolg. 

Kosten 

Zielgruppe 

Tipp 

Chance 

Für Sponsored Posts und Werbung innerhalb von 

Twitter fallen Gebühren an, das Anlegen und 

Führen eines Accounts ist kostenlos. 

Alle, mit Schwerpunkt auf Smartphone-Nutzern. 

Mit Tools wie Buffer (www.bufferapp.com) und 

Hootsuite (www.hootsuite.com) verteilen Sie 

Ihre Postings in den sozialen Netzen komfortabel 

den ganzen Tag oder die ganze Woche über 

„automatisch“. Setzen Sie populäre #-Hashtags zu 

relevanten Themen, wo immer es passt. 

Direkter und unmittelbarer Kundenkontakt, 

Hotline-Funktion, Feedback. 

XING 

www.xing.com 

Auf Xing vernetzen sich Berufstätige aller Branchen, suchen und 

finden Jobs, Mitarbeiter, Aufträge, Kooperationspartner, fachlichen 

Rat oder Geschäftsideen. Die Mitglieder tauschen sich online in rund 

50.000 Fachgruppen aus und treffen sich persönlich auf Xing-Events. 

Eine Timeline der eigenen Kontakte und gut durchdachte Networking-Funktionen 

wie eine Detailsuche machen aus Xing eine aktive 

Networking-Ressource, aktuell die wichtigste für Business-Networking 

in Deutschland, am besten in Kombination mit Linkedin. 

Aufwand Hoch. Das beginnt schon bei den Basics: Für optimale 

Auffindbarkeit und Verknüpfung sollte das 

Profil besonders sorgfältig ausgefüllt und „optimiert“ 

werden, denn innerhalb von Premium-Xing 

wird viel mit der Suchfunktion gearbeitet. 

Kosten 

Kostenfreier Basis-Account, Premium-Mitgliedschaft 

ab 4,85 Euro/Monat 

Zielgruppe 

Tipp 

Chance 

Business 

Bei Xing können Sie als Premium-Mitglied sehen, 

wer Ihr Profil aufgerufen hat und gegebenenfalls 

selbst Kontakt aufnehmen. 

Professioneller und seriöser Austausch durch 

Klarnamen, Business-Umfeld und Konzentration 

auf geschäftliche Themen, besonders in Gruppen 

zu bestimmten Branchen oder Aufgabenfeldern. 

Linkedin 

www.xing.com 

Linkedin ist weltweit das größte Business-Netzwerk und in mehr als 

200 Ländern und Regionen und in achtzehn Sprachen verfügbar. Ziel 

von Linkedin ist die Verknüpfung von Fach- und Führungskräften weltweit, 

um diese produktiver und erfolgreicher zu machen. 

Das Facebook der Business-Welt, zumindest was internationale 

Kontakte angeht. „Linkedin Today“ ist ein Newsticker für das eigene 

Netzwerk, die eigene Branche und allgemeine News. 

Aufwand Hoch. Damit Networking mit Linkedin funktioniert, 

müssen Kontakte gepflegt und intensiver 

Austausch betrieben werden, zum Beispiel in den 

Expertenforen. 

Kosten 

Zielgruppe 

Tipp 

Chance 

Kostenfreier Basis-Account, mehrstufige Premium-Mitgliedschaft 

ab 14,95 Euro/Monat 

Business 

Verknüpfen Sie Ihren beruflichen Twitter- mit 

Ihrem Linkedin-Account, um durch Tweets eine 

größere Zielgruppe zu erreichen. 

Damit Linkedin Ihrem Networking auf die Sprünge 

hilft, sollten Sie Ihr Profil öffentlich schalten, 

um besser auffindbar zu sein, und möglichst viele 

Kontakte einpflegen. Punkten Sie in den Linkedin-Gruppen 

mit Fachwissen von „Wordpress-Jobs“ 

bis „Social-Media-Marketing“. 


Cheat Sheet | Webdesign 

– Quick Reference guide 

Google+ 

plus.google.com 

Im Social Network von Google teilt man seine Kontakte für Status- 

Updates und die Zusammenarbeit in Kreise auf, mit denen Informationen 

gezielt geteilt werden (oder nicht). Damit ist es möglich, Kunden 

oder potenziellen Klienten andere Informationen sehen zu lassen 

als Geschäftspartner oder Freunde. 

Aufwand Mittel. Auch ein G+-Account will gepflegt werden, 

um Erfolge zu bringen. 

Tipp 

Chance 

Beiträge und Kommentare können editiert und 

damit auch jederzeit auf den neusten Stand der 

Dinge aktualisiert werden. 

Mit der Videofunktion „Hangout“ lassen sich 

Meetings und Präsentationen abhalten und Faceto-Face-Kontakte 

pflegen. 

Pinterest 

business.pinterest.com 

Pinterest ist eine Online-Pinwand, auf der man Dinge mit anderen 

teilt, die einem gefallen. Anmelden kann man sich jedoch nicht nur 

als Privatperson, sondern auch als Firma, Freelancer, gemeinnütziges 

Unternehmen oder als Marke. 

Aufwand Mittel. Eine Community aufzubauen erfordert 

Einsatz, einfach nur auffindbar zu werden mit den 

eigenen Bildern ist nicht ganz so aufwändig. 

Tipp 

Pinterest-Communities basieren auf Austausch 

– kommentieren und verfolgen Sie die Pinterest- 

Alben Ihrer Fans, verteilen Sie auch deren Bilder. 

Chance 

Was auch immer sich in Form von Bildern/Grafiken/Fotos 

vorteilhaft darstellen lässt, kann auf 

Pinterest erfolgreich verbreitet werden. 

Instagram 

hwww.instagram.com 

Instagram ist eine Photo-Sharing-App mit Schwerpunkt auf 

Smartphone-User: Schnell schöne und lustige Fotos aufnehmen und 

Instagram-Filter zur Verschönerung anwenden, um anschließend auf 

Facebook, Twitter, Tumblr oder im eigenen Blog darüber zu posten. 

Aufwand Mittel. Mit Instagram ist es einfach, Foto- 

Dokumente von Abläufen und Veranstaltungen 

durchgehend mit anderen zu teilen. 

Tipp 

Den Usern konkrete Fragen stellen zum Dargestellten, 

Mitarbeiter vorstellen, Rätsel veranstalten 

und täglich mindestens ein Bild posten. 

Chance 

Die eigenen Produkte präsentieren, aber auch das 

Umfeld: wer, wann, was, wie und wo mit wem – 

auch begleitend zu Veranstaltungen/Messen. 

Tumblr 

www.tumblr.com 

90 Millionen Blogs mit 40 Milliarden Einträgen: Tumblr ist ein Ding 

zwischen Twitter und dem eigenen Blog. Posten Sie Texte, Fotos, 

Zitate, Links, Musik und Videos vom Browser, Handy, Desktop oder 

E-Mail-Konto aus. 

Aufwand Hoch. Herzchen vergeben und erhalten, Content 

erstellen und verteilen: Ein erfolgreicher Tumblr- 

Account ist immer in Bewegung. 

Tipp 

Texte, Fotos oder Videos lassen sich per Mail an 

eine geheime Adresse publizieren und Audioeinträge 

lassen sich auch telefonisch posten. 

Chance 

Kurz, knackig und unterhaltsam sollten Tumblr- 

Postings sein: Ideal vom Smartphone aus zu pflegen, 

zumal man bei Tumblr auch mehrere Blogs 

zu verschiedenen Schwerpunkten anlegen kann. 

Foursquare 

www.business.foursquare.com 

Geo-Marketing für Betriebe ist mit der kostenlosen Foursquare-App 

eine Mischung aus Google Maps und Bewertungsportal. Nutzer teilen 

mit, wo sie sich gerade befinden und was sie dort tun – ein reizvolles 

Feature gerade für kleinere und mittelständische lokale Unternehmen. 

Aufwand Mittel. Bemerkungen und Kommentare sollten 

beantwortet werden; häufig Anreize für einen 

Besuch zu liefern, ist ebenfalls wünschenswert. 

Tipp 

Um als Foursquare-Standort lokalisiert zu werden, 

melden Sie Ihre Betriebsstätte an. 

Chance 

Mit Aktionen und Rabatten für wiederholte 

Check-ins machen Sie aus Erstkunden Stammkunden. 

Mit Hilfe der Statistik prüfen Sie, ob und 

wie viele Kunden „Wiederholungstäter“ sind. 

Youtube 

www.youtube.com 

Informationen im Videoformat mit anderen teilen, von Usern bewerten 

lassen und komfortabel in alle gängigen Formate umwandeln lassen: 

Wer Unternehmensfilme, Werbespots, Event-Videos und Meeting-Protokolle 

im Filmformat online bereitstellt, nutzt dafür Youtube. 

Aufwand Mittel. Filme müssen bereitgestellt, Feedback 

muss verwaltet werden. 

Tipp 

Chance 

Der Basis-Account ist kostenlos, doch es gibt 

auch professionelle Angebote, siehe „Erstellen 

eines Markenkanals“ (support.google.com/you 

tube/bin/answer.py?hl=de&answer=1101676) 

Marke stärken, Zuschauer binden, Kontakt mit der 

Zielgruppe pflegen. 


Testen Sie jetzt 3x Internet Magazin und erhalten Sie 

Sofort zu 

Nutzen Sie weiter die Vorteile des Internet Magazin-Premium-Abos! 

Ja, ich nehme Ihr Super-Testangebot an. Ich möchte drei Ausgaben des Internet Magazins 

testen. Dazu erhalte ich als Prämie wahlweise den 32 GB USB-Stick, den Amazon.de-Gutschein 

im Wert von10Euro oder die revolt Powerbank für nur 14,99 €. 

Sollten Sie eine Woche nach Erhalt des 3. Heftes nichts von mir hören, freue ich mich auf 

die regelmäßige Zustellung per Post frei Haus 12 Ausgaben proJahr für nur 52,90. 

INTERNET MAGAZIN-TESTABO 

JA, ich möchte die nächsten drei Ausgaben des Internet Magazins testen. Außerdem erhalte ich 

wahlweise als Prämie gratis 

❏ den 32 GB USB-Speicherstick (K970) für 14,99 Euro (Österreich 19,99 Euro*,Schweiz 29,99 sfr*) 

❏ den 10 Euro-Amazon.de-Gutschein (K971) für 14,99 Euro (Österreich 19,99 Euro*,Schweiz 29,99 sfr*) 

❏ die revolt Powerbank (K830) für 14,99 Euro (Österreich 19,99 Euro*,Schweiz 29,99 sfr*) 

Sollten Sie eine Woche nach Erhalt des 3. Heftes nichts von mir hören, freue ich mich auf die 

regelmäßige Zustellung per Post frei Haus -12Ausgaben /Jahr für nur 52,90 Euro) 

Name, Vorname 

E-Mail (Für Korrespondenzzwecke) 

Straße, Nr. 

PLZ, Ort 

Gewünschte Zahlungsweise: Bequem durch Bankeinzug Gegen Rechnung 

Dafür erhalte ich 1Heft gratis (Nur im Inland!) 

BLZ 

Kontonummer 

Sofort online bestellen: 

www.internet-magazin.de/ 

angebot 

Per Post 

Internet Magazin 

Kunden-Service 

Postfach 180 

77649 Offenburg 

oder faxen/anrufen: 

Fax: 0781 -846191 

Tel: 0781 -639 45 48 

✃ 

Geldinstitut 

Datum, Unterschrift 

Ändert sich meine Adresse, erlaube ich der Deutschen Post AG, dem Verlagmeine neue Anschrift mitzuteilen. Die Prämie wird NACH erfolgter 

Bezahlung des Test-Abo-Preises zugesandt. Sollte der abgebildete Artikel nicht mehr lieferbar sein, erhalten Sie einen qualitativ gleichwertigen 

Ersatzartikel. Das Jahres-Abonnement ist nach Ablauf des ersten Jahres jederzeit kündbar. WEKA MEDIA PUBLISHING GmbH, 

Richard-Reitzner-Allee 2, 85540 Haar,Handelsregister München, HRB 154289. *Folgeabopreise siehe Impressum 

Ich bin damit einverstanden –jederzeit widerruflich-, dass mich der VerlagWEKA MEDIA PUBLISHING künftig per E-Mail und 

telefonisch über interessante Vorteilsangebote informiert. 

WK30i2M03 

Dieses und weitere interessante 

Angebote finden Sie auch unter 

www.wekashop.de 

Gleich Coupon

eine tolle Prämie dazu! 

Gleich online bestellen unter: 

www.internet-magazin.de/angebot 

greifen! 

Ab jetzt 

5€ 

günstiger! 

Jetzt nur 14,99 € 

statt 19,99 € 

NEU! 

3x Internet Magazin 

plus 32 GBSpeicherstick oder revolt- 

Powerbank oder 10 Euro-Amazon.de- 

Gutschein ab €14,99 

32 GB USB-Stick 

Der Speichergigant für den Alltag 

Der 32 GB USB-Stick ist angenehm klein, 

bietet aber genügend Speicherplatz für 

IhreDaten, wie etwa32.000 MP3s, 60.000 

Fotos, 12 Stunden Film oder eben 

32 Gigabyte Daten. 

Amazon.de-Gutschein 

im Wert von 10,- Euro 

Ein Heft GRATIS bei Bankeinzug! 

Wählen Sie 

eine dieser 

attraktiven 

Prämien! 

SATTE 

32 GB 

TOP-PRÄMIE 

DES MONATS! 

revolt Powerbank 

mit 4000 mAh 

Das Energiebündel für unterwegs: 

Sorgt für neue Energie und spendet Licht 

Sie bietet Strom abseits der Steckdose für iPhone, 

iPod, Navi, MP3-Player,Handy, Smartphone.Der kleine 

Kraftprotz hat drei USB-Adapter mit dabei. Damit 

macht er Geräte mit Dock Connector,Mini-USB und 

Micro-USB wieder fit. Ab €14,99! * 

Weitere Infos unter www.pearl.de! 

ausfüllen und einsenden oder online bestellen unter www.internet-magazin.de/angebot

Webentwicklung | Google Drive Site Publishing 


Google Drive eignet sich als Cloud- 

Dienst nicht nur zum Ablegen von 

Dokumenten. Lesen Sie, 

»»wie Sie mit der Erweiterung Drive 

Site Publishing Webapplikationen 

hosten und ausführen können, 

»»wie Sie dort eigene Benutzerverwaltungen 

einrichten und 

»»welche Alternativen es derzeit auf 

dem Markt gibt. 

Cloud-Hosting 

Mit Drive Site Publishing möchte Google das Webhosting 

neu erfinden. Wir zeigen, was Sie mit einem 

kostenlosen Google-Drive-Account jetzt schon alles 

anstellen können. 

Google bietet seit jeher einen Online-Dienst 

zum Speichern, Erstellen 

und Bearbeiten ganz gewöhnlicher 

Office-Dokumente. Nach der Erstellung 

eines kostenlosen Google-Accounts 

und der Anmeldung für diesen Dienst 

konnten Benutzer gigabyteweise Office- 

Dokumente und andere Dateien in die 

Cloud übertragen und nach der Erteilung 

entsprechender Freigaben mit anderen 

Benutzern gemeinsam verwenden. Ursprünglich 

unter dem Namen Google 

Docs bekannt, trägt der Dienst neuerdings 

die Bezeichnung Google Drive 

und ist nun unter der Adresse drive. 

google.com zu finden. Ende November 

2012 stellte Google einen neuen Dienst 

namens Drive Site Publishing vor. 

Google Drive Site Publishing ermöglicht 

es Webschaffenden, Google-Drive- 

Verzeichnisse als Websites zu veröffentlichen 

und (kostenfrei) zu hosten. Der 

Dienst unterstützt Javascript und andere 

clientseitige Skriptsprachen, sodass Webgestalter 

eine ganze Webapplikation aus 

einem Google-Drive-Verzeichnis heraus 

(ebenfalls kostenfrei) hosten und ausführen 

lassen können. Interessanterweise 

lässt sich sogar eine Javascript-Drive- 

Applikation direkt von Google Drive 

heraus ausführen. 

Publizieren von Inhalten 

Wer Google Drive Site Publishing zum 

Hosten einer Website nutzen möchte, 


Google Drive Site Publishing | Webentwicklung 

erstellt im ersten Schritt ein öffentliches 

Verzeichnis. Alle Inhalte, die Sie in diesem 

Verzeichnis publizieren möchten, 

müssen ebenfalls öffentlich zugänglich 

sein. Die URL dieses Verzeichnisses ist 

der so genannte Web View Link. Um auf 

die Website-Assets in diesem Verzeichnis 

zu verlinken, benutzen Sie ganz einfach 

die Web-View-Link-Adresse. 

Das Erstellen der benötigten Verzeichnisse 

und das Ablegen von Daten können 

Sie manuell direkt im Browser oder 

softwaregesteuert mittels Google Drive 

SDKs bewerkstelligen. Wer als Browser 

Google Chrome benutzt, kann die benötigten 

Dokumente per Drag-und-Drop 

aus dem Desktop in das öffentliche Verzeichnis 

der Website im Browser hochladen. 

Alternativ können Sie mit einer 

Desktop-Applikation namens Google 

Drive die Inhalte eines lokalen Verzeichnisses 

auf Ihrem Computer oder 

auf einem Mobilgerät mit der Google 

Cloud synchronisieren. 

Dateien in dem betreffenden Google- 

Drive-Verzeichnis lassen sich unter Angabe 

seiner Web-View-Link-Adresse referenzieren. 

Diese Adresse können Sie 

leider nicht dem URL-Feld des Browsers 

entnehmen, wenn Sie das betreffende 

Drive-Verzeichnis aufrufen, sondern 

müssen das Dialogfenster der Sharing- 

Einstellungen benutzen, um die ID des 

Verzeichnisses in Erfahrung zu bringen. 

In der Adressleiste des Dialogs finden 

Sie hier eine Webverknüpfung in der 

Form https://docs.google.com/folder/d/ 

XXXXXXXXXX/edit. 

Diese URLs gilt es wie folgt abzuändern: 

https://googledrive.com/host/ 

XXXXXXXXXX/. Mit Hilfe dieser Adresse 

müssen Sie jetzt die Websites im 

betreffenden Drive-Verzeichnis referenzieren. 

Die benötigten URLs setzen 

sich etwa wie folgt zusammen: https:// 

googledrive.com/host/XXXXXXXXXX/ 

Impressum.html. 

Diese Unterscheidung ist extrem wichtig. 

Um eine Website als solche im Browser 

darzustellen, müssen Sie die Web-View- 

Link-Adresse des Website-Verzeichnisses 

und ihren Dateinamen referenzieren. 

Sollten Sie ein HTML-Dokument in der 

Drive-Ansicht in Ihrem Browser anklicken 

oder seine URL-Adresse weitergeben, 

lädt der Browser lediglich die Code- 

Ansicht der Website. 

Relative Verknüpfungen sollten im Übrigen 

problemlos funktionieren. Leider 

schließt sich Google Drive Site Publishing 

mit der Verwendung eigener Domainnamen 

vorerst komplett aus. 

Bei einem Google-Drive-Verzeichnis handelt 

es sich im Übrigen interessanterweise 

um eine Datei mit dem MIME-Typ application/vnd.google-apps.folder. 

Metadaten 

wie ebendiese Information und 

andere Eigenschaften wie die Benutzerrechte 

verzeichnet Google Drive in 

einer so genannten Ressource. Den In- 

Google Drive Site Publishing mit der 

Website des Internet Magazins. 

halt dieser Ressource können Sie unter 

Verwendung von Methoden aus dem 

Drive SDK in einer der unterstützten 

Skriptsprachen auslesen. 

Ganz anders als im Falle von Googles 

Sites-Diensten (verfügbar unter sites. 

google.com) steht es Ihnen bei Google 

Drive Site Publishing frei, eigenes 

HTML hochzuladen. Im öffentlichen 

Verzeichnis Ihrer Website dürfen sich 

allerdings nur statische Webdokumente 

Eine statische Beispiel-Website auf 

Google Drive Site Publishing. 



Dienste wie Site44.com erlauben 

es Ihnen, Websites in einem 

kostenlosen Dropbox-Account 

zu hosten – auch unter Nutzung 

eigener Domainnamen. 

Mit der Applikation 

Google Drive können 

Sie die Inhalte lokaler 

Verzeichnisse mit Ihrem 

Drive-Account synchronisieren; 

so können Sie 

Websites auf Ihrem lokalen 

Computer gestalten 

und mit Google Drive Site 

Publishing ganz leicht 

veröffentlichen. 

function createPublicFolder($service, 

$folderName) { 

$file = new Google_DriveFile(); 

$file->setTitle($folderName); 

$file->setMimeType(‚application/vnd. 

google-apps.folder‘); 

$createdFile = $service->files- 

>insert($file, array(‚mimeType‘ => 

‚application/vnd.google-apps.folder‘, 

)); 

$permission = new Google_Permission(); 

Der bisher 

verfügbare 

Webdienst 

Google Sites 

bietet viele 

Vorlagen, aber 

nur minimale 

Anpassungsmöglichkeiten. 

befinden, zum Beispiel HTML- und 

CSS-Dateien oder Bilder. Zwar können 

Sie mittels der Google App Engine 

sogar dynamische Websites umsetzen, 

doch in diesem Falle müssten Sie eine 

kommerzielle Lösung von Google in 

Anspruch nehmen. 

Gemäß der aktuellen Einstellung in der 

robots.txt-Datei unter https://googledrive. 

com/robots.txt dürfen Bots die öffentlichen 

Verzeichnisse indizieren. Um diese 

Standardeinstellung zu verändern, 

können Sie inm öffentlichen Verzeichnis 

Ihrer Website auf Google Drive eine eigene 

robots.txt-Datei ablegen. 

Google Drive SDK 

Ein öffentliches Verzeichnis, welches 

den Konventionen von Google Drive Site 

Publishing Folge leistet, können Sie 

selbstverständlich auch programmgesteuert 

erzeugen. Google stellt hierzu 

entsprechende Funktionen über das eigene 

Drive SDK bereit. Sechs verschiedene 

Ansätze stehen zur Verfügung, 

darunter Java, Python, PHP, Ruby, Javascript 

und das .NET-Framework. 

In PHP gelingt es zum Beispiel mittels: 



Die wichtigsten Alternativen 

Google Drive Site Publishing trifft auf einen Markt voller interessanter 

Angebote. Von den hauseigenen Google Sites über Github- 

Projektseiten bis hin zu AWS S3 haben Sie die Qual der Wahl 

zwischen kostenlosen oder nahezu kostenlosen Alternativen. 

Google Sites 

Mit dem kostenlosen Webdienst Google Sites spricht der Internetriese 

Webdesign-Affine an, die sich mit den technischen 

Feinheiten der Website-Gestaltung lieber nicht befassen möchten. 

Der Dienst bietet zahlreiche einsatzbereite Vorlagen, aber 

nur minimale Anpassungsmöglichkeiten und keinen softwaregesteuerten 

Zugriff auf Google-Drive-Daten. 

Github 

Mit dem kostenlosen Webhosting-Dienst Github Pages (verfügbar 

unter pages.github.com) erhalten Web- und Softwareentwickler 

einen kostenlosen Webhosting-Dienst mit Unterstützung für eigene 

Domainnamen und einer Anbindung an Github selbst. Git- 

Software mit und ohne eine grafische Benutzeroberfläche finden 

Sie unter der Adresse git-scm.com/downloads. Zum Veröffentlichen 

von Websites können Sie die Mac-Version der Software 

oder die Kommandozeile nutzen. Außerdem arbeitet der Dienst 

mit dem Ruby-basierten Generator statischer Webseiten Jekyll 

zusammen (jekyllrb.com). Zu beachten: Der Webhosting-Dienst 

Github Pages ist für Softwareprojekte gedacht. 

Dropbox 

Der beliebte Online-Dienst in der Wolke, Dropbox, kann inzwischen 

statische Websites hosten. Die Einrichtung erfordert allerdings 

externe Hilfe anderer Cloud-Dienste. Zum Glück gibt 

es einige interessante Gratisangebote. Webdienste wie site44. 

com oder Droppages (droppages.com) können Ihre Dropbox mit 

nur wenigen Mausklicks in einen Webhoster verwandeln. Beide 

Dienste unterstützen Ihren eigenen Domainnamen. Der Vorteil 

von Dropbox-Diensten besteht darin, dass Sie Ihre Websites 

ganz einfach lokal bearbeiten und abspeichern können; der 

Dropbox-Client kümmert sich für Sie um die Synchronisierung 

mit der Wolke. 

AWS S3 

Amazons günstiger elastischer Massenspeicher in der Wolke mit 

der etwas kryptischen Bezeichnung S3 (eine Abkürzung für Simple 

Storage Service) unterstützt das Hosting statischer Websites 

aus einzelnen Buckets. Mit der Cloud Storage Engine für MySQL 

(ClouSE) und dem Wordpress-Plug-in WP2Cloud können Sie darüber 

hinaus sämtliche Daten einer Wordpress-Installation auf 

Amazon S3 ablegen. Wenn Sie aus dieser Möglichkeit Gebrauch 

machen und zudem Ihre Wordpress-Installation ebenfalls auf 

AWS einrichten möchten, können Sie unter der Adresse www.oblaksoft.com/downloads 

ein AMI-Image (Amazon Machine Image) 

mit den benötigten Komponenten kostenlos herunterladen. Wer 

nur eine statische Website benötigt, kann diese am einfachsten 

mit dem Ruby-Gem (https://github.com/yearofmoo/Simple-S3) 

aufsetzen. Ein eigener Domainname lässt sich beispielsweise 

über einen Cname-Eintrag implementieren. 

Die Übertragung von Daten zwischen dem lokalen Computer und 

der AWS-Wolke mit Amazons Online-Assistenten im Browser ist 

relativ holprig. Das neueste Redesign erleichtert den Arbeitsfluss 

nicht gerade und der erweiterte Assistent befindet sich im 

relativ unbenutzbaren Betastadium. Wer diesen Weg einschlagen 

möchte, sollte sich also zumindest die kostenlose Version 

des Cloudberry Explorers von Cloudberry Lab holen (cloudberry 

lab.com). Wer die AWS-S3-Wolke als lokales Verzeichnis einhängen 

möchte, benötigt Cloudberry Drive (29,99 US-Dollar). Amazons 

Preise für den S3-Speicher beginnen bei etwa acht Eurocent 

pro GByte pro Monat zuzüglich ebenfalls symbolischer Übertragungsgebühren. 

Neukunden erhalten ein Nutzungskontingent 

von fünf GByte S3-Standardspeicher kostenlos für ein Jahr. 

$permission->setValue(‚‘); 

$permission->setType(‚anyone‘); 

$permission->setRole(‚reader‘); 

$service->permissions->insert( 

$createdFile->getId(), $permission); 

return $file; 

} 

Das Skript erstellt eine Datei mit dem 

MIME-Typ application/vnd.google-apps. 

folder und stellt die korrekten Zugriffsrechte 

ein. Das Skript setzt hierzu den 

Accounttyp auf anyone und die so genannte 

Role auf reader. In Javascript sieht 

es so aus: 

function createPublicFolder 

(folderName) { 

var body = { 

‚title‘: folderName, 

‚mimeType‘: „application/vnd.googleapps.folder“ 

}; 

var request = gapi.client.drive.files. 

insert({ 

‚resource‘: body 

}); 

request.execute(function(resp) { 

console.log(‚Folder ID: ‚ + resp.id); 

var permissionBody = { 

‚value‘: ‚‘, ‚type‘: ‚anyone‘, 

‚role‘: ‚reader‘ 

}; 

var permissionRequest = gapi.client. 

drive.permissions.insert({ 

‚fileId‘: resp.id, ‚resource‘: 

permissionBody 

}); 

permissionRequest. 

execute(function(resp) { }); 

}); 

} 

und schließlich in .NET: 

private static File 



Der kostenlose URL-Kürzungsdienst 

Gdrive.es hat sich darauf spezialisiert, 

die langen Web-View-Link-Adressen 

Ihrer Google-Drive-Dokumente durch 

kürzere URLs zu ersetzen. 

createPublicFolder(DriveService 

service, String folderName) { 

File body = new File(); 

body.Title = folderName; 

body.MimeType = „application/vnd. 

google-apps.folder“; 

File file = service.Files. 

Insert(body).Fetch(); 

Permission permission = new 

Permission(); 

permission.Value = „“; 

permission.Type = „anyone“; 

permission.Role = „reader“; 

service.Permissions. 

Insert(permission, file.Id).Fetch(); 

return file; 

} 

Der Einsatz der Funktion Files.Insert() 

fördert die Ausgabe der Web-View-Link- 

Adresse zu Tage: 

„Web View Link“: „https://googledrive. 

com/host/A1B2C3D4E5F6G7H8J9“ 

Spreadsheets und Formulare 

Um eine Tabelle aus der Google-Drive-Tabellenkalkulation oder 

Teile davon in eine Website einzubetten, müssen Sie diese zuerst 

veröffentlichen. 

»»Schritt 1: Aus dem Datei-Menü in der Symbolleiste wählen Sie 

den Eintrag Im Web veröffentlichen. 

»»Schritt 2: Im sich nun öffnenden Fenster wählen Sie, welche 

Teile der Tabelle Sie veröffentlichen möchten, und klicken Sie 

auf die Start-Publishing-Taste. Die Applikation erzeugt für Sie 

eine eindeutige URL. 

»»Schritt 3: Verwenden Sie die URL aus Schritt 2, um die Tabelle 

auf Ihrer Website einzubinden. 

Benutzer von Google Sites verwenden die Insert-Funktion von 

Google Sites, um eine Tabellenkalkulation einzufügen. Klicken 

Sie hierzu auf Edit page/Insert/Spreadsheet from within your 

site“. Anschließend tragen Sie die URL Ihrer Tabelle ein. 

Wenn Sie ein Formular in eine Website oder ein Blog einbetten 

möchten, klicken Sie auf die Schaltfläche More Actions oben im 

Editor und wählen den Befehl Embed aus dem Dropdown-Menü. 

Wann immer Sie die Web-View-Link- 

Adresse Ihrer jeweiligen Site ermitteln 

möchten, sollten Sie einen Aufruf der 

Drive-API tätigen, denn nur diese Methode 

ist von Google offiziell dokumentiert. 

Berechtigungen 

Für jede Datei und jedes Verzeichnis 

in Google Drive existiert eine Liste von 

Berechtigungen. 

Jede solche Berechtigung 

legt 

die Eigenschaften 

type, role und value 

für das betreffende 

Objekt fest. 

Die Eigenschaft 

type beschränkt 

den Zugriff auf 

eine Kategorie 

von Benutzern. 

Die Eigenschaft 

value legt fest, 

welche Benutzer 

der jeweiligen 

Kategorie 

berechtigt sind, 

um Zugriff auf 

das Objekt zu erhalten. Die Eigenschaft 

role legt die zulässigen Aufgaben fest, 

die der betreffende Benutzer ausführen 

darf. Hierzu gehören solche Aktivitäten 

wie das Lesen oder das Bearbeiten von 

Eigenschaften oder Inhalten einer Datei, 

das Auflisten der Inhalte in einem Verzeichnis 

oder das Hinzufügen von Kommentaren. 

Google Drive erlaubt es Ihnen, 

die gemeinsame Nutzung von Dateien 

und Verzeichnissen zwischen Benutzern 

softwaregesteuert zu koordinieren. So 

könnten Sie zum Beispiel die Anzeige 

des Share-Dialogs durch eine Website 

mit Hilfe von Javascript auslösen: 

 

 

 

 

init = function() { 

s = new gapi.drive.share. 

ShareClient(‚‘); 

s.setItemIds([„“]); 

} 

window.onload = function() { 

gapi.load(‚drive-share‘, init); 



Eine statische Website (oder statische Elemente 

einer dynamischen Website) können Sie ganz 

einfach und kostengünstig auf dem robusten 

AWS-S3-Speicher hosten. 

} 

 

 

Beim Auslöserereignis könnte es sich 

beispielsweise um das Aktivieren einer 

Schaltfläche handeln. Diese ließe sich 

mit Hilfe einer Zeile wie 

An andere 

Benutzer freigeben 

im body-Abschnitt der Seite ins Leben 

rufen. Damit das Skript funktioniert, 

müssten allerdings mehrere Anforderungen 

erfüllt sein. Der aktuelle Benutzer 

muss angemeldet sein, die App installiert 

haben und die Sharing-Funktion von der 

für Ihre Drive-App registrierten (also 

vertrauenswürdigen) 

URL aufrufen. 

Um eine Drive-App 

zu entwickeln, müssen 

Sie diese zuerst 

unter der Adresse 

https://code. Aktivieren der 

google.com/apis/ nötigen Googleconsole/?pli=1 

bei APIs für die Entwicklung 

einer 

Google registrieren 

und die benötigten neuen Drive- 

APIs aktivieren, da- 

Applikation. 

runter auf jeden Fall die beiden Einträge 

Drive API und Drive SDK. In der Registerkarte 

API-Access erstellen Sie dann 

die benötigten Zugangsschlüssel ganz 

einfach unter Verwendung der Schaltfläche 

Create an OAuth 2.0 client ID. 

Danach konfigurieren Sie Ihr API-Projekt 

für die Verwendung des Drive SDK. 

Dieser Vorgang umfasst das Erstellen 

der benötigten App-Icons, die Einrichtung 

der OAuth-Client-ID und der vertrauenswürdigen 

URL (der sogenannten 

Open URL). Danach sollten Sie mindes- 

tens einen Benutzer-Account zur Verfügung 

haben, in dem Sie Ihre Drive-App 

testweise einrichten können. 

Fazit 

Google ist als ein innovatives Unternehmen 

dafür bekannt, immer neue Ideen 

auszuprobieren. Google Drive Site Publishing 

liegt technisch gesehen zwischen 

Amazon AWS, welches ein umfangreiches 

Spektrum an professionellen 

SaaS-Diensten bietet, und den 

vergleichsweise simplen „Öffentlichen 

Ordnern“ von Dropbox. 

Der größte Vorteil von Google Drive 

Site Publishing besteht in der Anbindung 

an Google Drive und der Verfügbarkeit 

von Google Drive SDK für die Entwicklung 

von Webanwendungen. Dank des 

des Google veröffentlichten Drive SDK 

können Sie Web-Apps schreiben, die mit 

Google Drive kommunizieren, und Ihren 

Benutzern erweiterte Funktionen bereitstellen. 

So könnten Sie zum Beispiel eine 

eigene Blogsoftware schreiben oder gemeinsam 

genutzte Dokumente skriptgesteuert 

aktualisieren. 

 

Anna Kobylinska und 

 

Filipe Pereira Martins 


Webentwicklung | Citus CMS 

Minimalistisches CMS 

Citus CMS bietet die wichtigsten CMS-Funktionen 

bei minimaler Größe an. Das CMS ist sowohl für 

Anwender als auch Entwickler interessant, da es 

einfach zu bedienen und flexibel zu erweitern ist. 

Gerade einmal 784 KiloByte umfasst 

die ZIP-Datei, welche die Grundfunktionen 

des Content Management 

Systems (CMS) Citus CMS umfasst. Wenn 

Sie alle Dateien entpacken, befinden sich 

auch nicht mehr als 2,91 MByte auf der 

Festplatte. Damit haben Sie ein sehr kompaktes 

System, das in wenigen Minuten 

einsatzbereit ist. Zum Betrieb benötigen 

Sie lediglich eine MySQL-Datenbank und 

einen Webserver mit PHP5-Erweiterung. 

Die Installation 

Für die Installation kopieren Sie den Inhalt 

der ZIP-Datei in ein Verzeichnis auf 

Ihrem Webserver und legen eine MySQL- 

Datenbank an. Rufen Sie anschließend 

über einen Browser die Indexdatei aus 

dem angelegten Ordner auf. Ihnen stehen 

zu Beginn zwei Optionen zur Verfügung: 

die Neuinstallation des CMS sowie die Installation 

von Paketen zur Erweiterung. 

Auf der eigentlichen Installationsseite 

geben Sie die URL der Datenbank, deren 

Namen sowie den Benutzer und das 

Passwort an. Für den späteren Zugriff auf 

die Administrationsoberfläche benötigen 


Citus CMS ist kostenlos und läuft unter 

minimalen Anforderungen. Lesen Sie, 

»»wie Sie Citus CMS auf Ihrem Webserver 

installieren, 

»»wie Sie das System einrichten und 

»»wie Sie das Content-Management- 

System erweitern. 

Sie noch einen Benutzer sowie eine 

E-Mail-Adresse. Mit diesen Daten 

wird die Installation durchgeführt 

und Sie erhalten zum Schluss ein 

Einstiegspasswort, mit dem Sie sich 

auf der Weboberfläche anmelden. 

Zu diesem Zeitpunkt ist auch bereits die 

erste Seite angelegt, die allerdings noch 

mehr als spartanisch aussieht. Für die Administrationsoberfläche 

gibt es keinen eigenständigen 

Link – Sie rufen sie über die 

URL auf und erhalten einen ersten Blick 

auf das Dashboard von Citus CMS. Bevor 

Sie mit der Pflege von Websites beginnen, 

sollten Sie das Passwort Ihres Administrators 

ändern. Die notwendige Funktion finden 

Sie in der Benutzerverwaltung, in der 

bis dahin lediglich Ihr zuvor generierter 

Benutzer vorhanden ist. 

Damit ist die Grundinstallation abgeschlossen 

und Sie können mit der Pflege 

der Website beginnen. 

Der Einstieg 

Nach dem Anmelden auf der Administrationsoberfläche 

landen Sie direkt auf der 

Dashboard-Seite von Citus. An dieser 

Stelle finden Sie eine Übersicht der verschiedenen 

Administrationsfunktionen 

in Form von Menüpunkten sowie eine 

kurze Einführung, wie Sie das System 

nutzen. Diese gliedert sich in insgesamt 

sechs Punkte und führt Sie durch die 

wichtigsten Schritte, die Sie für die Pflege 

Ihrer Website mit Citus CMS benötigen. 

Zuerst sollten Sie den Titel der Website 

ändern, da dieser initial auf „Meine Website“ 

steht. Die Einstellungen finden Sie 

unterhalb des Menüpunkts Einstellungen. 

In diesem Menü setzen Sie die übergreifenden 

Parameter für Ihre Website: den Titel, 

das Template, die Sprache sowie den 

absoluten Pfad zu Ihrer Website. 

Seiten pflegen 

Das CMS startet mit einer einzigen Seite 

– der Startseite. Diese finden Sie in der 

Seitenverwaltung und können Sie direkt 

über den integrierten Editor bearbeiten. 

Dazu wird die Erweiterung TinyMCE verwendet, 

die bereits installiert ist. In der 

vereinfachten Darstellung finden Sie zum 

einen die beiden Felder Seitentitel und 

Seitenalias sowie eine Möglichkeit, die 

Art der Verknüpfung zu setzen. 

Der Seitentitel ist derjenige Titel, welcher 

in der Navigation als Menüpunkt 

erscheint. Der Alias spielt im ersten 

Schritt keine Rolle, sollte jedoch sinnvoll 

geändert werden, da er bei der Erweiterung 

FriendlyURLs von Bedeutung ist. 

In diesem Fall wird der Alias als Teil der 

URL verwendet und soll zu einer besseren 

Suchmaschinenplatzierung der Seite 


Citus CMS | Webentwicklung 

führen. Soll eine Seite nicht innerhalb 

des aktuellen Fensters erscheinen, dann 

ändern Sie die Art der Verknüpfung entsprechend 

und nutzen den Wert In neuem 

Fenster öffnen. 

Neben der einfachen Darstellung der 

Seite gibt es auch noch eine erweiterte 

Version, in welcher Sie zusätzliche Informationen 

bearbeiten können. Dies sind 

zum einen der Gültigkeitszeitraum der 

Website, aber auch die Schlüsselwörter 

der Site sowie die Beschreibung. Diese 

finden Sie anschließend in den Metatags 

keywords und description abgelegt. 

Zusätzlich dazu können Sie für bestimmte 

Websites ein anderes Template 

als das in den Einstellungen angegebene 

verwenden. In diesem Fall übersteuern 

Sie die Grundeinstellung direkt bei den 

erweiterten Werten einer Site. 

Als letztes haben Sie je Seite die Möglichkeit, 

ein Zugangspasswort zu setzen. 

Ist dieses eingerichtet, erhalten Sie erst 

dann Zugriff auf die Seite, wenn Sie das 

korrekte Passwort eingegeben haben. 

Die Änderungen an einer Seite werden 

nach dem Speichern wirksam. Achten 

Sie auf eine entsprechende Erfolgsrückmeldung 

– nur so können Sie sicher sein, 

dass die Änderungen auch wirklich berücksichtigt 

wurden. 

Seitenverwaltung. In der Übersicht lassen 

sich die einzelnen Seiten an die gewünschte 

Position befördern und werden 

anschließend entsprechend auf der 

Website angeordnet. 

Medien integrieren 

Nachdem Sie die richtige Struktur Ihrer 

Seiten festgelegt und auch die Texte eingepflegt 

haben, stehen als Nächstes die 

benötigten Bilder, Videos oder anderen 

multimedialen Daten auf dem Plan. Sie 

haben zwei Möglichkeiten, diese auf 

Ihren Webserver zu bringen. Wenn Sie 

Im ersten Schritt wählen Sie 

für eine Neuinstallation von 

Citus CMS den gleichnamigen 

Punkt aus. 

einen direkten Verzeichniszugriff besitzen, 

kopieren Sie sie direkt auf der Dateiebene 

in den Ordner media. Sollte dies 

nicht möglich sein, steht Ihnen innerhalb 

der Administration der Punkt Medienverwaltung 

zur Verfügung. Mit diesem legen 

Sie unterhalb des Ordners media neue 

Ordner an und fügen diesen die entsprechenden 

Dateien hinzu. Dazu benötigen 

Sie keine weiteren Rechte auf Verzeichnisebene. 

Nachdem Sie die Dateien auf 

den Server kopiert haben, integrieren Sie 

diese am besten direkt über den TinyMCE 

Editor auf der gewünschten Seite. 

Strukturen aufbauen 

Citus CMS sieht mehrere Elemente für 

den Aufbau einer Struktur und deren 

Pflege vor. Sie können für jede Seite 

festlegen, auf welcher Ebene sich diese 

in Bezug auf bereits vorhandene Seiten 

befindet. Damit können Sie mit einfachen 

Mitteln eine mehrstufige Navigationsstruktur 

aufbauen. Wie diese letzten 

Endes dargestellt wird, hängt stark vom 

verwendeten Template ab. 

Neben der Zuweisung einer Hierarchie 

ist es zusätzlich möglich, die Reihenfolge 

der Seiten festzulegen. Dies erledigen 

Sie direkt innerhalb des Menüpunktes 

Bilder und andere multimediale 

Dateien speichern Sie über die 

Medienverwaltung. 


Webentwicklung | Citus CMS 

In der Seiten- 

verwaltung legen 

Sie neue Seiten 

an und stellen 

eine Gruppierung 

und eine Reihenfolge 

her. 

Benutzer und Gruppen 

Citus CMS hat auch eine rudimentäre 

Rechteverwaltung auf Benutzer- und 

Gruppenebene integriert. 

Die Rechtevergabe wird dabei immer 

über die Benutzergruppe abgebildet. 

Wenn Sie also einen neuen Benutzer mit 

abweichenden Berechtigungen anlegen 

möchten, generieren Sie im ersten Schritt 

eine Benutzergruppe und weisen dieser 

die entsprechenden Rechte zu. 

Nachdem dies geschehen ist, fügen Sie 

im zweiten Schritt einen neuen Benutzer 

hinzu und ordnen diesen der gewünschten 

Gruppe zu. Während des Anlegens 

weisen Sie diesem Benutzer auch ein 

Passwort zu und können zusätzlich eine 

E-Mail Adresse hinterlegen. Abhängig davon, 

ob Sie dem Benutzer den Menüpunkt 

Benutzerverwaltung zugewiesen haben, 

Die wichtigsten Erweiterungen im Überblick 

kann er sein eigenes Passwort selbst ändern 

oder auch nicht. Nach dem Anmelden 

sieht er nur diejenigen Menüs, die Sie 

zuvor für ihn freigeschaltet haben. 

Verwaltungsoptionen 

Für eine schnellere Auslieferung nimmt 

das CMS eine Zwischenspeicherung bestimmter 

Daten vor. Gerade bei größeren 

Aktualisierungen der Seiten macht 

es Sinn, den Cache komplett zu leeren, 

damit auch sicher die neuesten Inhalte 

ausgeliefert werden. Dazu steht Ihnen 

innerhalb der Systemwartung der Punkt 

Frontend-Seitencache leeren zur Verfügung. 

Mit diesem löschen Sie den kompletten 

Inhalt des Ordners /ccms/system/ 

cache und sorgen somit für eine Neugenerierung 

der Seiten. Wenn Sie einen 

entsprechenden Zugriff aufs Dateisystem 

Es gibt zahlreiche Erweiterungen für Citus CMS. Wir haben für Sie einige interessante im Überblick 

zusammengestellt. 

ID Titel Beschreibung 

1010 E-Mail-Adressen-Kodierer E-Mail-Adressen im Frontend werden vor der Ausgabe 

kodiert, damit sie nicht für Spam verwendet werden 

können. 

1011 Suchmaschinenfreundliche URLs Die URLs der Seiten werden auf Basis der Aliase 

zusammengestellt. 

1012 TinyMCE Rich-Text-Editor zur Pflege der Texte auf den Seiten. 

1014 Lytebox Erweiterung zur Präsentation von Fotos. 

1016 Flattr-Button Einfache Integration des Payment Providers. 

1017 Zugriffsstatistiken Besucherzahlen der Website werden erfasst und übersichtlich 

dargestellt. 

1035 Kontaktformular Einfache Einbindung eines Kontaktformulars in Ihre 

Website. 

1038 Galerieverwaltung Erstellt aus den Ordnern der Medienverwaltung eine 

Galerie. 

besitzen, können Sie diesen Schritt natürlich 

auch direkt an dieser Stelle, beispielsweise 

per FTP durchführen. Innerhalb der 

Systemwartung gibt es als zweiten Punkt 

noch die Option zum Aktualisieren des 

CMS. Sie bekommen dabei angezeigt, 

ob die installierte Version noch auf dem 

aktuellen Stand ist und können ansonsten 

gegebenenfalls mit Hilfe des Core Update 

Service und der Update-ID die Aktualisierung 

starten. Diese Funktion ist allerdings 

aktuell noch nicht in Betrieb. 

Citus CMS gezielt erweitern 

Wie viele andere Systeme bietet Ihnen 

auch Citus CMS Möglichkeiten für seine 

eigene Erweiterung. Dazu stehen verschiedene 

Pakete zur Verfügung, die Sie 

über die Administrationsoberfläche und 

die Paketverwaltung einspielen. 

Neben verschiedenen Templates für die 

Gestaltung Ihrer Website gibt es auch 

eine Reihe von funktionalen Erweiterungen, 

wie etwa ein Kontaktformular 

oder ein Plug-in zur Generierung von 

suchmaschinenfreundlichen Links. 

Einen ersten Überblick erhalten Sie 

direkt auf der Website von Citus CMS 

unter Erweiterungen, wo alle Erweiterungen 

aufgelistet sind. Die Pakete sind 

in drei Kategorien unterteilt: Frontend 

Templates, Paketquelle und Core Update 

Service. Innerhalb der Frontend 

Templates finden Sie neue Oberflächen 

für Ihre Website. Aktuell sind in dieser 

Rubrik rund 20 Alternativen zum ausgelieferten 

Template zu finden. In den 

Paketquellen finden Sie funktionale Erweiterungen 

für das CMS und in Core 

Update Service entsprechend systembezogene 

Updates, welche von den 

Entwicklern des Systems zur Verfügung 

gestellt werden. Diese Funktion ist allerdings 

aktuell noch nicht aktiv. Haben 

Sie selbst eine neue Erweiterung entwickelt, 

können Sie diese unter dem Punkt 

Paket vorstellen hochladen und einer 


Citus CMS | Webentwicklung 

breiteren Öffentlichkeit vorstellen. Generell 

trägt jedes Paket eine eindeutige 

ID, mit deren Hilfe Sie es innerhalb der Die wichtigsten Einstellungen nehmen 

Sie für Citus CMS über die Administrationsoberfläche 

vor, eine Reihe von Werten 

Administrationsoberfläche identifizieren 

und installieren können. Sollte es hier 

können Sie jedoch nur über die Konfigurationsdateien 

setzen. 

zu Problemen kommen, laden Sie die 

Dateien direkt von der Website herunter 

und installieren sie manuell über die gung; sie befinden sich im Verzeichnis 

Es stehen Ihnen zwei Dateien zur Verfü- 

Weboberfläche. Dazu kopieren Sie die 

\ccms\system\config. Die erste Datei 

database.config.php enthält die Zugriffsdaten 

für Ihre Datenbank. Da Sie un- 

entpackte ZIP-Datei in das Verzeichnis 

ccms\components und starten anschließend 

unter Angabe des Pfadnamens und Sie den Zugriff auf die Datei über den 

verschlüsselt gespeichert sind, sollten 

der ID des Pakets die Installation über Browser entsprechend unterbinden. 

die Administrationsoberfläche. 

Sie finden eine Übersicht aller installierten 

Pakete über den Administrations- 

erstellen und zum anderen eigene Er- 

zum einen können Sie eigene Templates 

punkt Paketverwaltung. An dieser Stelle weiterungen schreiben. 

sehen Sie auch, ob eine neuere Version Ein Template ist nichts anderes als eine 

des Pakets vorhanden ist. Wenn Sie ein HTML-Seite, die mit verschiedenen Tags 

Template manuell installieren möchten, 

laden Sie es ebenfalls direkt von Bausteine, die beim Aufruf der Seite dy- 

erweitert wird. Dabei handelt es sich um 

der Website herunter und kopieren es namisch mit Inhalten aus der Datenbank 

versorgt werden. 

Die Grundstruktur 

eines jeden Templates 

ist ähnlich: 

Sie benötigen eine 

Ordnerstruktur, in 

welcher auf der 

obersten Ebene 

die Datei main. 

template.html sowie 

ein weiterer 

Ordner resources 

Ein Benutzer sieht abhängig 

zu finden sind. 

von seinen Rechten nur 

Innerhalb dieses 

bestimmte Menüs. 

Verzeichnisses 

werden im Ordner 

views die Dateien für die Fehlermel- 

anschließend in das Verzeichnis templates. 

Sie können das Template anschließend 

über den Menüpunkt Einstellungen im Ordner public die CSS-Dateien sowie 

dungen und die 404-Seite abgelegt und 

und das Auswahlfeld Frontend-Template die Bilder des Templates. Dazu gibt es jeweils 

einen Unterordner css und images. 

aktivieren. 

Die Konfigurationsinformationen zum 

Citus selbst erweitern 

Template werden in der Datei config. 

Citus CMS ist komplett in PHP realisiert package.php hinterlegt, die sich im Ordner 

resources befindet. Den und kann individuell erweitert werden – 

einfachsten 

Zentrale Konfigurationsdateien 

In der zweiten Datei system.config.php 

finden Sie eine Reihe Konfigurationsparameter, 

welche in direktem Zusammenhang 

mit der Anwendung stehen. In dieser 

Datei können Sie beispielsweise die 

FTP-Daten setzen oder auch die Daten für 

Ihre Website, die Sie in den Einstellungen 

pflegen können. 

Eine vollständige Dokumentation der 

Parameter an zentraler Stelle gibt es 

nicht. Die meisten davon werden jedoch 

im Forum in einzelnen Beiträgen 

beschrieben. 

Einstieg in die Entwicklung eines Templates 

finden Sie, wenn Sie sich ein vorhandenes 

Template anschauen. Darüber 

hinaus gibt es im Forum von Citus CMS 

auch eine Anleitung, wie ein Template 

zu erstellen ist (forum.cituscms.org/viewtopic. 

php?f=21&t=192). 

Erweiterungen 

entwickeln 

Sie können nicht nur 

eigene Templates erstellen, 

sondern auch eigene 

Erweiterungen für das 

CMS entwickeln. Es gibt 

zwar keine detaillierte 

Anleitung, wie dies zu 

geschehen hat, jedoch 

gibt es das Paket 1015. In diesem befindet 

sich ein exemplarisches Plug-in, welches 

sehr ausführlich dokumentiert ist. 

Wenn Sie planen, eine eigene Erweiterung 

für Citus CMS zu entwickeln, dann 

sollten Sie die Erweiterung 1015 installieren 

und sich anschließend den Aufbau 

der Erweiterung anschauen. Sie finden 

diese unter \ccms\components\com_demonstration. 

Die einzelnen Dateien sind 

im Coding sehr gut dokumentiert und 

beschreiben die einzelnen Komponenten 

und Bestandteile ausführlich. 

 

Andreas Hitzig 


Webbusiness | Mit Wordpress verkaufen 

Shop-Tuning 

Wer sein Blog etwa dazu nutzt, sich als 

Experte im Web zu positionieren, oder 

seinen Internetauftritt auf Basis von 

Wordpress pflegt, möchte darüber 

vielleicht auch Waren und Produkte 

zum Verkauf anbieten. Shop-Plug-ins 

machen das möglich. 


Mit einem Plug-in verwandeln Sie Ihre 

Wordpress-Installation in einen Online- 

Shop. Wir zeigen, 

»»wie Sie mit zwei verschiedenen 

Produkten Ihre WP-Installation 

erweitern und 

»»wie Sie die Herausforderung der 

Integration von verschiedenen 

Zahlungsarten meistern. 

Soll eine Website, die auf Wordpress 

basiert, um einen Shop ergänzt werden, 

kann der Betreiber auf eine Reihe 

von Optionen zurückgreifen. Der 

schnellste und einfachste Weg besteht sicherlich 

in der Nutzung eines Mietshops 

bei einem Provider. Eine tiefere Integration 

in die Umgebung ist indes damit nur 

schwer oder kaum möglich. Der zweite 

Weg führt über die Anpassung eines der 

vielen kostenfrei im Internet angebotenen 

PHP-Skripte, die die Funktion eines 

Warenkorbs zur Verfügung stellen. Das 

Vorgehen bietet zwar den größten Spielraum, 

was die Anpassung und Integration 

in die bereits bestehenden Seiten anbelangt. 

Zugleich ist dies aber auch die Lösung, 

zu deren Umsetzung am meisten 

Zeit benötigt wird. Und ohne fundierte 

Programmierkenntnisse geht hier nichts. 

Wer ohne umfangreiche Programmierarbeiten 

auskommen will, muss entweder 

einen separaten Shop aufsetzen, um diesen 

später dann über Erweiterungen in 

sein Wordpress zu integrieren (zum Beispiel 

für Magento mit www.magentocommerce.com/magento-connect/wordpressintegration.html). 

Oder er greift zu einem 

Plug-in für Wordpress selbst, das einen 

separaten Shop zur Verfügung stellt. 

Entscheidungshilfe 

Plug-in oder reinrassiger Shop? Diese 

Frage sollte weniger auf funktionaler 

Ebene, als vielmehr im Rahmen des Geschäftsmodells 

und der Bedeutung des 

Online-Handels gestellt werden. Alle 

Plug-ins für Wordpress greifen auf dessen 

Datenbank zurück. Diese dürfte genügend 

Reserven bieten, um auch größere 

Artikelmengen zu verwalten. Schlecht 

sieht indes die Verbindung zwischen 

Wordpress-Shop und einem bereits vorhandenen 

Warenwirtschaftssystem aus. 

Wer ein solches Programm einsetzt, 

wird ohne Zweifel mit einer reinrassigen 

Shop-Software deutlich besser fahren, da 

hier meist bereits definierte Schnittstellen 

genutzt werden können. Bis ein Shop in 

Sachen Optik dem übrigen Internetauftritt 

entspricht, sind einige Anpassungen 

notwendig. Der damit verbundene Aufwand 

dürfte sich für das Angebot einiger 

weniger Artikel kaum lohnen. Ist 

das Artikelangebot zugleich überschau- 


Mit Wordpress verkaufen | Webbusiness 

bar, ein Warenwirtschaftssystem 

nicht notwendig und 

soll der Arbeitsaufwand 

möglichst gering sein, 

ist ein Plug-in ohne 

Zweifel vorteilhafter. 

Wpshopgermany 

Wpshopgermany (wpshopgermany.de) 

ist 

ein noch nicht sehr 

bekanntes Shop-Plugin 

für Wordpress, das 

in Deutschland entwickelt 

wird. Es steht 

in einer Demoversion zur 

Verfügung, die ohne Einschränkungen 

14 Tage lang ausprobiert 

werden kann. Interessant ist das 

Preismodell. So kostet die Light- 

Version lediglich 25 Euro und 

kann bereits für das Anbieten 

von reinen Download-Produkten 

verwendet werden, die dann per 

Paypal bezahlt werden. Wer mehr Zahlungswege 

wünscht und auch physische 

Artikel anbieten möchte, greift zur Prooder 

Enterprise-Variante, die für 45 beziehungsweise 

149 Euro zu bekommen 

ist. Letztere kann dann auf beliebig vielen 

Wordpress-Instanzen installiert und genutzt 

werden, wobei auch der Branding- 

Hinweis auf den Hersteller entfernt werden 

kann. Die Installation verläuft nach 

dem üblichen Schema. Sie besorgen sich 

von der Seite des Anbieters die Erweiterung 

und laden die Datei im Backend 

der Installation hoch. Nachdem Sie das 

Plug-in aktiviert haben, können Sie bereits 

an die Einrichtung des Shops gehen. 

Die Erweiterung ergänzt die Hauptnavigation 

um einen eigenen Menüpunkt. von der Software genutzt werden. Dazu 

Unter Shop finden Sie alle Module für gehören der Warenkorb genauso wie die 

die Einrichtung vor. Auf der Startseite der allgemeinen Geschäftsbedingungen oder 

Einstellungen definieren Sie lediglich die ein Impressum. Über die Listenfelder 

Grundlagen. Dazu zählen Startwerte für weisen Sie bereits vorhandene Seiten 

die Kunden- und Bestellnummern sowie dem jeweiligen Funktionsbereich zu. 

die Auswahl der Währung. 

Mit einem Klick auf den Schalter Einstellungen 

speichern können Sie auch alle 

Die Macher der Software wollen Ihnen 

die Einrichtung eines Shops erleichtern, Seiten in einem Rutsch anlegen lassen, 

der auch juristisch auf einem sicheren sofern Sie die Option Neu anlegen und 

Fundament steht. Wenden Sie Ihren zuordnen gewählt haben. Anschließend 

Blick bei der Einrichtung als Nächstes bearbeiten Sie die Inhalte der Seiten wie 

dem Abschnitt Seitenkonfiguration zu. gewohnt im Back-end. Eine wichtige 

Sie finden dort eine Liste mit Seiten, die Bedeutung vor der Freigabe des Shops 

Bei der Auswahl eines Shop-Plug-ins sollten Sie sich den Bestellvorgang genau 

ansehen. Entspricht er den gesetzlichen Vorgaben und ist er nachvollziehbar? 

Über die Modulverwaltung in wpshopgermany 

aktivieren Sie Bezahl- oder 

Produktarten. In den weiteren Einstellungen 

des jeweiligen Moduls werden 

die notwendigen Angaben ergänzt. 


Webbusiness | Mit Wordpress verkaufen 

kommt in den Einstellungen dem Bereich 

Module zu. Darüber schalten Sie Produktarten 

oder auch Zahlungssysteme 

frei. In der Light-Version aktivieren Sie 

hier wenigstens Downloadprodukte und 

Paypal. Nachdem das Modul freigeschaltet 

wurde, sind auf der dazu gehörenden 

Seite die Details zu hinterlegen, zum 

Beispiel, wie lange ein Download-Link 

gültig sein soll. 

Sind diese vorbereitenden Arbeiten abgeschlossen, 

können Sie damit beginnen, 

über Shop/Produktverwaltung erste Artikel 

anzulegen. Sie können ein Produkt 

einem bereits vorhandenen Beitrag oder 

einer Seite zuordnen. Es funktioniert aber 

auch der umgekehrte Fall. Im Editor von 

Wordpress finden Sie einen zusätzlichen 

Schalter. Aus dem nachfolgenden Dialog 

E-Commerce-Plug-ins für Wordpress 

wählen Sie das gewünschte Produkt aus, 

das dann in den Artikel übernommen 

wird. Um dem Kunden die Übersicht 

möglichst leicht zu machen, bietet Wpshopgermany 

auch ein Widget an, um 

den Warenkorb prominent in der Sidebar 

der Seite darstellen zu können. 

Woocommerce – 

englischsprachige Alternative 

Woothemes hat sich in den vergangenen 

Jahren einen guten Ruf als Anbieter 

eines eigenen Frameworks und professioneller 

Templates für Wordpress 

erworben. Woocommerce rundet das 

Produktportfolio in dieser Hinsicht mit 

einem eigenen Shop ab. Nachdem das 

Plug-in heruntergeladen und aktiviert 

wurde, blendet die Anwendung oben 

»»WPShopgermany 

(wpshopgermany.maennchen1.de/): In Deutschland entwickelt 

und mit allen Funktionen ausgestattet, die ein rechtssicherer Shop benötigt. Neben 

der Basislizenz werden kostenpflichtige Zusatzmodule angeboten, wie etwa „Protected 

Shop“, das im Rahmen eines Abonnements, die Installation mit rechtssicheren 

Texten und Erläuterungen ausstattet. „Download Plus“ ist für alle Publisher 

von elektronischen Dokumenten interessant, da es einen Download-Artikel vor 

der Bereitstellung personalisiert, um der einfachen Weitergabe entgegenzuwirken. 

»»Woocommerce 

(www.woothemes.com/woocommerce/): Das Plug-in ist sehr gut lokalisiert 

und bietet alle notwendigen Funktionen für Versand- und Download-Artikel 

an. Lediglich bei den Beschriftungen von Schaltern und Links muss noch etwas 

Handarbeit angelegt werden. Wer sich diese Mühe sparen will, kann über marketpress.de/product/woocommerce-german-market/ 

eine Ergänzung für Woocommerce 

erwerben, die das Framework an die deutschen Gegebenheiten optimiert. Für den 

Einsatz auf maximal zwei Domains werden hier 60 Euro fällig. 

»»Wordpress eStore Plug-in (www.tipsandtricks-hq.com/wordpress-estore-plugincomplete-solution-to-sell-digital-products-from-your-wordpress-blog-securely-1059): 

Diese im englischsprachigen Raum beliebte Erweiterung kostet rund 50 

Euro und arbeitet nahtlos mit den anderen Plug-ins des Herstellers zusammen. 

Damit kann der Shop mit einem eigenen Affiliate-Programm verbunden werden. 

Auch eine Erweiterung für die Individualisierung von PDF-Dateien (E-Books) vor 

dem Download durch den Kunden ist möglich. 

»»WP-shopified 

(ww.iwebix.de/professioneller-online-shop-mit-wordpress/): Eine sehr 

gelungene Lokalisierung eines ebenfalls bereits seit einigen Jahren bewährten Plugins. 

Ein sauberer Bestellprozess und viele Möglichkeiten, Artikel zu promoten oder 

Sonderverkäufe zu beginnen. Auch der Vertrieb von reinen Download-Produkten ist 

mit diesem Shop möglich. Knapp 30 Euro sind für eine Lizenz zu bezahlen. 

im Bereich des Backend einen eigenen 

Bereich ein. Mit einem Klick auf Seiten 

installieren wird das Setup angestoßen. 

Danach werden Sie unmittelbar zu den 

Einstellungen umgeleitet. Woocommerce 

ergänzt Wordpress um einige Menüeinträge, 

damit der Besucher schneller zur 

Hauptseite des Shops gelangt. Diese können 

Sie in den Optionen von Wordpress 

natürlich auch zur Startseite des Auftritts 

machen. Übersichtlich in verschiedene 

Register unterteilt nehmen Sie die Änderungen 

an Einstellungen des Shops vor. 

Die Verwaltung der Artikel erfolgt dagegen 

im eigentlichen Bereich Produkte. 

Der Editor unterscheidet sich hier nicht 

von dem zum Verfassen von Blogbeiträgen. 

Lediglich die abweichenden Kategorien 

und Bezeichnungen machen den 

Unterschied deutlich. Auch Download- 

Produkte sind möglich. Sollen Produkte 

oder Produktkategorien auf einer eigenen 

Seite dargestellt werden, erfolgt die 

Integration wie bei wpshopgermany über 

eine eigene Schaltfläche im Editor. Dazu 

muss der Redakteur aber die (selbst vergebene) 

Artikelnummer kennen, da Woocommerce 

lediglich einen Platzhalter in 

den Text integriert. 

Herausforderung Payment 

Für welches Plug-in Sie sich entscheiden, 

ist stark von den gewünschten Zahlungsarten 

abhängig, denn hier unterscheiden 

sich die Anwendungen erheblich voneinander. 

Die Integration von Paypal ist 

problemlos. Wer sich dagegen beispielsweise 

die Einbindung von Sofortüberweisung.de 

wünscht, wird auf den Einsatz 

von Woocommerce verzichten müssen. 

Schlechte Karten haben Sie als Anbieter, 

wenn Sie über eigene Verträge oder 

Schnittstellen zu Clearing-Stellen für Kreditkarten 

verfügen. Anders als im Umfeld 

von Magento und Co. werden für die eher 

exotischen Wordpress-Erweiterungen 

keine vorgefertigten Module angeboten. 


Mit Wordpress verkaufen | Webbusiness 

Wurde ein Shop-Plugin 

installiert, wird 

Wordpress um eine 

Reihe von Funktionen 

und Optionen 

erweitert, wie hier 

bei Woocommerce. 

Die Integration anderer Zahlungswege ist 

zwar möglich, der Aufwand dafür allerdings 

hoch. 

Rechtlicher Rahmen 

Bei aller Begeisterung für die unkomplizierte 

Einrichtung und den Funktionsumfang 

von Wordpress-Erweiterungen 

dürfen Sie auch den juristischen Rahmen 

nicht vergessen, dem Sie automatisch 

unterliegen, wenn Sie Waren über das 

Internet zum Kauf anbieten. Vorbildlich 

hat das wpshopgermany gelöst. Die Entwickler 

haben die beiden häufigsten Stolpersteine 

zum rechtssicheren Abschluss 

bereits für Sie aus dem Weg geräumt. So 

muss der Kunde einerseits zwingend die 

AGB akzeptieren, um einen Bestellvorgang 

abzuschließen. Zum anderen weist 

ihn auch die Beschriftung des Schalters, 

ganz aktuell, darauf hin, dass er jetzt kostenpflichtig 

etwas bestellt. Hier leisten 

sich insbesondere Plug-ins aus dem 

Ausland naturgemäß Schwächen. Bei 

Woocommerce heißt es lediglich Bestellen, 

was inzwischen als unzureichend 

Woocommerce 

ergänzt Wordpress 

direkt um 

eine Shop-Startseite 

und viele 

Menüpunkte. In 

Kombination mit 

einem passenden 

Template wird aus 

dem Blog ein vollwertiger 

Shop. 

anzusehen ist. Eine Änderung ist zwar 

möglich, aber da die Buttons tief in den 

Template-Dateien verborgen sind, ist sie 

mit erhöhtem Aufwand verbunden. 

Fazit 

Den perfekten Wordpress-Shop, der es 

mit E-Commerce-Lösungen aufnehmen 

kann, gibt es derzeit noch nicht. Einen 

sehr guten Eindruck hinterlassen allerdings 

wpshopgermany und auch WPshopified, 

die wenig bis gar keinen Anpassungsaufwand 

erfordern. Doch auch 

die anderen E-Commerce-Lösungen für 

Wordpress sind durchaus brauchbar, benötigen 

aber entweder größere Eingriffe 

in die Optik oder sind etwas aufwändiger 

in die eigene Site zu integrieren. Da es 

von (fast) allen Plug-ins Demoversionen 

gibt, die sich in das eigene Wordpress integrieren 

lassen, ist es ratsam, zunächst 

damit Erfahrungen zu sammeln, bevor Sie 

eine endgültige Entscheidung treffen. 

 

Stephan Lamprecht 


Webbusiness | SEO für mobile Websites 

Jeder dieser drei Ansätze hat auf das 

Ranking Ihrer Website verschiedene 

Auswirkungen. Suchmaschinen bevorzugen 

klar die erste Kategorie, mit 

den beiden anderen tun sie sich etwas 

schwer. Zum Glück können Sie hier 

nachhelfen. 

Mobiles SEO 

Suchmaschinenoptimierung zählt zu den wichtigsten 

Voraussetzungen für den Erfolg einer mobilen Website. 

Internet Magazin beleuchtet die besten SEO- 

Praktiken, -Tools und Techniken, die Ihrer Website die 

so begehrten mobilen Besucher bescheren. 

Wer mobile Besucherströme anziehen 

möchte, muss einen möglichst 

großen Anteil der Klicks aus Suchmaschinen 

anzapfen. 

Suchmaschinen bevorzugen Websites 

mit dem schnellsten Seitenaufbau, 

mobilfähigen Schlüsselworten, einer 

guten Anbindung an soziale Netze und 

mobilen Inhalten mit lokaler Relevanz. 

Im Falle mobiler Websites ist die Suchmaschinenoptimierung 

noch etwas 

komplizierter. Smartphone-optimierte 

Websites fallen nämlich in eine von 

drei Kategorien: 

»» responsive Websites, 

»» Websites mit dynamischer Geräteerkennung 

(so genannte dynamisch auszuliefernde 

Websites) und 

»» rein mobile Websites (mobile Ausgaben 

von Desktop-Sites). 

Responsive Websites sprechen alle User 

Agents mit identischem Markup an, indem 

sie das Layout mittels CSS der aktuellen 

Viewportbreite des jeweiligen 

Zielgeräts anpassen. Websites mit dynamischer 

Geräteerkennung optimieren 

sowohl ihr Layout als auch ihren Inhalt 

in Echtzeit mit Hilfe verschiedener Techniken, 

was zur Entstehung mehrerer Editionen 

derselben Inhalte führt und von 

Suchmaschinen leicht als ein Cloaking- 

Versuch missverstanden wird (siehe Kasten 

„Cloaking“). Rein mobile Editionen 

konventioneller Websites führen eine 

parallele Existenz zur Desktop-Variante 

der Website auf einer eigenen URL. 

Responsive Websites 

Responsive Websites reagieren dynamisch 

auf die Viewporteigenschaften 

des Zielgeräts dank einer Anweisung an 

den Browser, ein bestimmtes Stylesheet 

zu verwenden. Zur Umsetzung responsiver 

Websites kommen die so genannten 

@media-Anfragen mit dem passenden 

CSS-Stylesheet für jede Bedingung zum 

Einsatz, zum Beispiel: 

@media only screen and (max-width: 

640px) {... } 

Allen Ausführungen einer responsiven 

Website liegt hierbei ein und dasselbe 

Markup zu Grunde. Die Abweichungen 

in der Darstellung einer responsiven 

Website auf verschiedenen User Agents 

lassen sich ausschließlich auf abweichende 

CSS-Regeln für verschiedene 

Viewportgrößen zurückführen. Da nur 

jeweils eine URL und ein Markup zum 

Einsatz kommen, ist die Indizierung und 

das Berechnen des Rangs einer solchen 

Website für Suchmaschinen ein Leichtes. 

Aus Sicht der Suchmaschinenoptimierung 

ist der responsive Ansatz die 

bevorzugte Methode zur Umsetzung 

einer mobilen Website. 

Dynamische Geräteerkennung 

Bei Websites mit dynamischer Erkennung 

greifen zwar alle Besucher auf jeweils 

dieselbe URL zu, dennoch bekommen 

sie je nach ihrer jeweiligen User-Agent- 

Kennung etwas unterschiedliche Inhalte 

geliefert. Die einzelnen Editionen 

der Website unterscheiden sich nicht 

nur durch die CSS-Stylesheets, sondern 

auch durch abweichendes Mark- 


SEO für mobile Websites | Webbusiness 

up, das dynamisch zur Laufzeit – zum 

Beispiel mit Javascript – zusammengestellt 

wird. Diese Konfiguration hat 

ihre Tücken: Zum einen lassen sich die 

verschiedenen Editionen einer Website 

nur dann erfassen, wenn sich der betreffende 

Crawler mit der passenden User- 

Agent-Kennung zu identifizieren weiß. 

Zum anderen kann es vorkommen, dass 

Caching-Server von ISP-Dienstleistern 

die verschiedenen Editionen der Site 

verwechseln, so dass sie zum Beispiel 

mobile User Agents und mobile Bots 

mit der Desktop-Version der Site beliefern. 

Darüber hinaus besteht für Sie das 

Risiko, dass Ihre Website als Cloakingverdächtig 

eingestuft und zur Bestrafung 

aus dem Index entfernt wird. Damit das 

nicht passieren kann, sollten Sie auf jeden 

Fall Gegenmaßnahmen ergreifen. 

Damit Suchmaschinen und Caching- 

Server das dynamische Markup einer 

Website zur Kenntnis nehmen, muss 

der Webserver beim Ausliefern einen 

passenden Hinweis im HTTP-Header 

vom Typ Vary: User-Agent an seine Gegenstelle 

übergeben. Beim Einsatz von 

Apache benötigen Sie hierzu das Modul 

mod_headers. Nach dem Aktivieren 

dieses Moduls tragen Sie die benötigten 

Header-Direktiven in Apaches Konfigurationsdatei 

ein. Hierzu können Sie 

zum Beispiel den folgenden Code im 

Abschnitt VirtualHost/Files/FilesMatch 

oder Directory in der Datei httpd. 

conf einfügen: 

 

Header append Cache-Control " 

no-transform" 

Header append Vary "User-Agent, 

Accept" 

 

Microsofts IIS bietet Ihnen die Möglichkeit, 

die benötigten Header mit Hilfe 

der grafischen Konfigurationssoftware 

einzutragen. Alternativ können Sie die 

benötigten Header beispielsweise in Ihren 

PHP- und ASP-Skripten übergeben. 

Allerdings sollten Sie beachten, dass der 

Internet Explorer vor Version 9 die Inhalte 

einer Website, die mit dem Vary-Header 

ausgeliefert wird, nicht cachen kann. 

Trifft der Googlebot auf einen solchen 

Vary-Header, bekommt Ihre Website zusätzlich 

noch einen Besuch von Googlebot 

Mobile. Abweichungen der Inhalte 

zwischen den beiden Editionen der betreffenden 

Website gelten dann nicht 

mehr als Cloaking und Ihr Suchmaschinen-Ranking 

ist in trockenen Tüchern. 

Eigene URLs 

Mobile Websites mit eigenen URLs bringen 

eigene Herausforderungen mit sich. 

In diesem Szenario verfügt jede gültige 

URL einer konventionellen Desktop- 

Website über ein mobiles Äquivalent. 

Zum Beispiel könnte die mobile Edition 

von www.domainname.de unter der 

Adresse mobil.domainname.de oder 

auch etwa www.domainname.mobi erreichbar 

sein. Google gibt Ihnen nicht 

vor, wie Sie die URL-Adresse der mobilen 

Ein klassisches 

Beispiel einer responsiven 

Website: 

google.de/mobile/ 

android/. 

Cloaking 

Mit dem Begriff Cloaking bezeichnet 

man die Praxis der Bereitstellung anderer 

Inhalte oder URLs für verschiedene 

Benutzer und Suchmaschinen 

auf Basis der Useragent-Kennung oder 

der IP-Adresse. Suchmaschinen neigen 

dazu, diese Vorgehensweise als 

einen Betrugsversuch zu beurteilen, 

obwohl sie unter bestimmten Umständen 

durchaus eine Berechtigung hat. 

Google geht sogar so weit, Cloakingverdächtige 

Websites aus dem eigenen 

Index zu entfernen. Es ist daher enorm 

wichtig, alle erforderlichen Schritte zu 

unternehmen, damit die mobile SEO- 

Optimierung auch wirklich nur positive 

Resultate nach sich zieht. Dazu zählt 

die Übergabe eines Vary-Headers (im 

Falle der User-Agent-Erkennung) oder 

passender Metatags. 

Edition aufbauen. Auch diese Konfiguration 

erfordert von einer Suchmaschine 

mehrere Durchgänge und es gibt keine 

Garantie, dass der Crawler die mobile 

Version der Seite entdeckt und für indizierungswürdig 

erachtet. Für den Rang 


Webbusiness | SEO für mobile Websites 

einer so aufgebauten Website bedeutet 

es generell nichts Gutes. Wer dennoch 

diesen Weg einschlagen möchte, sei gut 

beraten, die Suchmaschinen über die 

Verfügbarkeit der verschiedenen Editionen 

der Website in Kenntnis zu setzen. 

Die korrekte Vorgehensweise beinhaltet 

drei zusätzliche Arbeitsschritte. Zum einen 

gilt es, die Desktop-Edition der Website 

um einen Verweis auf die mobile Edition 

zu ergänzen, zum Beispiel 

 

Zum anderen benötigt die mobile Edition 

der Website einen Verweis auf die 

Desktop-Version in der Form 

 

Optimieren der 

Suchworte mit 

Hilfe von Googles 

Keyword-Tool (zu 

finden unter Tools 

und Analysen). 

Berichte über 

mobile Besucher 

in Google Analytics: 

Die Suchmaschinenoptimierung 

ist für 

das Akquirieren 

mobiler Besucherströme 

von 

zentraler Bedeutung 

(analytics. 

google.com). 

Dadurch verhindern Sie, dass Suchmaschinen 

inhaltliche Duplikate auf diesen 

zwei verwandten URLs abstrafen. Schließlich 

sei Ihnen die Bereitstellung einer Sitemap 

ans Herz gelegt, welche die Beziehung 

der verschiedenen URLs zueinander 

ins rechte Licht rückt, wie 

 

 

 

http://www.domainname.de/ 

seite-1/ 

 

 

 

Diese Vorgehensweise hilft sicherzustellen, 

dass Google beide Versionen einer 

Website für Zwecke der Berechnung 

des Rangs als eine Einheit behandelt. 

Andernfalls würden die zwei Editionen 

Ihrer Website miteinander um das bessere 

Ranking konkurrieren und weitaus 

schlechter abschneiden. 

Außerdem können Sie den Suchmaschinen 

eine mobile Sitemap bereitstellen: 

 

 

 

http://mobile.beispiel.de/ 

artikel500.html 

 

 

 

Eine mobile Sitemap darf nur URLs beinhalten, 

die mobile Inhalte bereitstellen. 

Dafür kann sie Dokumente in mehreren 

Markup-Sprachen integrieren. Jede mobile 

Sitemap muss außerdem über einen 

eindeutigen Bezeichner verfügen. Zum 

Erstellen klassischer und mobiler Sitemaps 

können Sie zum Beispiel den Sitemap-Generator 

von Microsys verwenden 

(microsystools.com). 

Zu guter Letzt sei Ihnen empfohlen, 

eine durchdachte HTTP-301- beziehungsweise 

-302-Umleitung zu implementieren, 

damit sowohl mobile 

als auch Desktop-Besucher die jeweils 

optimale Version einer Website geliefert 

bekommen. Auch in diesem Fall 

sollte Ihr Server den Vary-Header aussenden. 

Es sollte hierbei möglich sein, 

die Umleitung zu übergehen, damit 

sich die Desktop-Version der Website, 

falls gewünscht, auch auf einem Tablet 

oder Smartphone benutzen lässt. 


SEO für mobile Websites | Webbusiness 

Um zu prüfen, ob Ihre mobile Website 

von Googles mobilen Spidern indiziert 

wird, melden Sie sich für Google Webmaster 

Tools an. 

Kurz und ortsgebunden 

Das Verhalten mobiler Besucher hat 

im Hinblick auf die Suche einige relevante 

Besonderheiten. Der wohl 

wichtigste Unterschied zum Verhalten 

der Desktop-Benutzer besteht in der 

Affinität mobiler Besucher zu kürzeren 

Suchbegriffen und standortbezogenen 

Ereignissen. Wenn mobile Benutzer 

eine Suchmaschine bemühen, wählen 

sie außerdem gerne eine der meistgenutzten 

Suchanfragen aus. Sehr lange 

Suchphrasen sind in der Praxis der mobilen 

Suche kaum anzutreffen. Dafür 

münden Analysten zufolge satte 90 Prozent 

mobiler Suchanfragen in eine Aktivität 

wie den Gang in ein Geschäft oder 

den Kauf eines Produktes online. Zum 

Optimieren Ihrer Suchbegriffe können 

Sie Googles Keyword-Tool verwenden. 

Damit ermitteln Sie die Popularität verschiedener 

Suchwortkombinationen in 

Der kostenlose Dienst SEO Rank (seoeh.com/seoranking/) 

erlaubt es Ihnen, die wichtigsten SEO-Eigenschaften 

einer (mobilen) Website zu untersuchen. 

Abhängigkeit bestimmter 

anderer 

Kriterien. Benutzer 

von Google 

Adwords finden 

das Tool in ihrem 

Account, doch 

es ist auch ohne 

einen solchen 

unter https://adwords.google. 

com/select/ 

KeywordToolExternal 

zugänglich. 

Mobile Suche 

ist vermehrt 

lokaler Natur. 

Wenn Sie also 

Metadaten-Titel 

und -Beschreibungen 

für die 

mobile Suche optimieren, fokussieren 

Sie auf die wahrscheinlichsten, nämlich 

auf die kürzesten Suchwörter und 

den lokalen Kontext Ihrer Website. Aus 

diesem Grunde sei Ihnen empfohlen, 

eine Präsenz in ortsbezogenen Empfehlungsdiensten 

wie Yelp 

(yelp.de), Google Places 

(google.com/places/) oder 

Foursquare (foursquare. 

com) aufzubauen. 

Nützliche Tools für mobiles SEO 

Bei der Umsetzung von SEO für mobile Websites hilft der Einsatz 

einiger Webdienste, Skripte und Bibliotheken. 

Mit Opensite Explorer können Sie mehrere Websites gleichzeitig 

im Hinblick auf ihre SEO-Eigenschaften miteinander vergleichen. 

www.opensiteexplorer.org 

Mit Linkdetective können Sie die Backlinks einer Website unter 

die Lupe nehmen, um Ihre SEO-Strategie zu verbessern. Linkdetective 

benötigt eine CSV-Datei von Opensite Explorer mit der 

Liste aller externen Backlinks. Nach dem Einlesen dieser Datei 

erhalten Sie in nur wenigen Minuten die Ergebnisse einer detaillierten 

Analyse, die Ihnen hilft, die wirkungsvollsten Linkaufbaustrategien 

Ihrer Wettbewerber zu replizieren. 

www.linkdetective.com/ 

Mit SEO Rank, einem kostenlosens SEO-Analysewerkzeug können 

Sie relevante Merkmale Ihrer Websites wie die Unterstützung 

von mobilen Geräten und die Anbindung an soziale Netze 

auf Herz und Nieren zu prüfen. 

seoeh.com/seo-ranking/ 

Gut angeschlossen 

Während nur jeder dritte 

mobile Anwender auf 

Facebook unterwegs ist, 

lassen sich beispielsweise 

laut Microsoft über 91 

Prozent aller mobilen Internetaktivitäten 

auf soziales 

Engagement zurückführen. 

Viele Benutzer 

mobiler Geräte sind rund 

um die Uhr in sozialen 

Netzwerken wie Google 

Plus, Facebook, Linkedin 

oder Twitter eingeloggt und teilen 

dort ihre Online-Aktivitäten mit. Mobile 

Websites sollten daher an soziale 

Netze anknüpfen. An sozialen Netzen 

kommen Sie kaum vorbei, denn nur so 

können Sie die Reichweite Ihres Angebots 

maximieren. 

Fazit 

Suchmaschinenoptimierung für mobile 

Websites gewinnt klar an Bedeutung 

und an Komplexität. Kein Wunder, 

denn spätestens in zwei Jahren soll 

Analysten zufolge die mobile Internetnutzung 

weltweit die Desktop-Nutzung 

übersteigen. 

Im Bereich der lokalen Suche haben 

mobile Benutzer bereits seit einem Jahr 

die Nase vorne. Wer also die Wirkung 

mobiler Websites maximieren möchte, 

sollte sich die Suchmaschinenoptimierung 

zu Herzen nehmen, schleunigst 

die Ärmel hochkrempeln und 

langfristig am Ball bleiben. 

 

Anna Kobylinska und 

Filipe Pereira Martins 


Webbusiness | Business Relationship Management 

Networking mit System 

Der Aufbau und die Pflege tragfähiger Geschäftskontakte 

erfordert viel Zeit und Energie. Entsprechend 

systematisch sollten Unternehmer, Geschäftsführer 

und Vertriebsmitarbeiter beim Auf- und Ausbau ihres 

Beziehungsnetzwerkes vorgehen. Zehn wertvolle 

Expertentipps zeigen, wie das funktioniert. 

Von nichts kommt nichts – das gilt 

auch für das Networking. Denn nicht 

nur das Knüpfen von Kontakten, sondern 

auch deren Pflege erfordert sehr viel Zeit 

und persönliches Engagement. Deshalb 

geben wir Ihnen hier einige Tipps, worauf 

Sie beim Business Relationship Management, 

also beim systematischen Auf- und 

Ausbau Ihrer Geschäftsbeziehungen, 

achten sollten. 

Tipp 1: Nicht blind 

draufloskontakten 

Der Begriff Business Relationship Management 

deutet es bereits an: Beziehungsaufbau 

und -pflege im Business- 

Kontext sind niemals zweckfrei. Ihr 

Geschäft – und natürlich auch das Ihres 

Netzwerkpartners – soll mittel- oder 

langfristig von den gegenseitigen Kontakten 

profitieren. 

Analysieren Sie deshalb genau, bevor 

Sie mit dem Networken beginnen: Zu 

welchen Personen und Organisationen 

könnte sich ein Beziehungsaufbau direkt 

oder indirekt lohnen? Zum Beispiel, 

weil sie lukrative Kunden werden 

könnten? Oder weil sie aufgrund ihres 

Netzwerks wichtige Empfehlungsgeber 

sein könnten? Oder weil ich von ihrem 

Know-how profitieren könnte? 

Tipp 2: Klasse statt Masse 

Aufbau und Pflege persönlicher Beziehungen 

kosten Zeit. Entsprechend wichtig 

ist es, nicht mit Gott und der Welt 

Beziehungen zu pflegen. Studien belegen: 

Zu mehr als 150 Menschen kann 

niemand intensive Beziehungen unterhalten. 

Mögen es im Einzelfall auch ein 


Business Relationship Management | Webbusiness 

Dutzend mehr Kontakte sein, so bleibt 

doch die Tatsache bestehen: Ihre Zeit ist 

begrenzt. Investieren Sie diese lieber in 

wenige fruchtbare als viele unfruchtbare 

Kontakte. 

Definieren Sie für sich Kriterien, anhand 

derer Sie entscheiden: Mit diesen Personen 

oder Organisationen will ich eine 

enge (Geschäfts-)Beziehung aufbauen 

und mit jenen nicht. Und überlegen Sie 

sich zum Beispiel vor und zu Beginn von 

Kongressen (anhand der Teilnehmerliste): 

Mit wem möchte ich warum Kontakt aufnehmen? 

Sonst ist die Gefahr groß, dass Ihre neuen 

Kontakte Zufallsbekanntschaften sind, 

die Ihnen geschäftlich nichts nützen. 

Und haben Sie keine Angst davor, eine 

Kontaktanfrage – zum Beispiel via Xing 

– auch einmal abzulehnen. Denn auch 

für das Networken in Social Media gilt: 

Nicht die Masse, sondern die Klasse der 

Kontakte macht‘s. 

Tipp 3: Zeit einplanen 

Ein gutes Netzwerk fällt nicht vom 

Himmel. Sie müssen es sich erarbeiten. 

Beschließen Sie deshalb zum Beispiel: 

Künftig investiere ich zehn Prozent meiner 

Arbeitszeit in den Auf- und Ausbau 

von Business-Kontakten. 

Denn wer aus Zeitmangel nie ein Verbandstreffen 

besucht, kann dort auch 

keine Personen kennenlernen. Und wer 

Bekannte nie „einfach mal so“ anruft, 

besucht oder einlädt, baut zu ihnen 

auch keine persönliche Beziehung auf. 

Im Gegenteil: Die Beziehung erkaltet 

mit der Zeit. 

Dies gilt übrigens auch für Stammkunden. 

Auch diese sollten Sie öfter mal 

„anlasslos“ kontaktieren – und nicht nur, 

wenn eine Vertragsverlängerung ansteht. 

Denn sonst ist die Gefahr groß, dass 

zwischenzeitlich ein Mitbewerber eine 

immer engere Beziehung zu Ihrem Kunden 

aufbaut. Mit der Konsequenz, dass 

Sie sind Ihren Stammkunden irgendwann 

los sind. 

Die Autorin 

Die Autorin Barbara 

Liebermeister ist Expertin 

für Business 

Relation ship Management 

und Autorin des 

Buches „Effizientes 

Networking: Wie Sie 

aus einem Kontakt eine werthaltige 

Geschäftsbeziehung entwickeln“. 

www.barbara-liebermeister.de 

Tipp 4: Eine gute Vorbereitung 

ist das A und O 

„Wie spreche ich die Person nur an? Und 

worüber rede ich mit ihr?“ Das fragen 

sich Menschen oft, die jemanden kontaktieren 

möchten – zum Beispiel auf 

einer Fachtagung. Dabei sind die Kontaktaufnahme 

und Themenwahl ganz 

einfach, wenn Sie sich adäquat vorbereiten. 

Angenommen, Ihre Zielperson ist 

Geschäftsführer einer mittelständischen 

Firma. Dann schauen Sie doch mal auf 

deren Website: Wie präsentiert sich Ihre 

Zielperson dort? Wirkt sie für einen Geschäftsführer 

eher locker oder steif? Und 

steht auf der Webseite eventuell ihr Lebenslauf? 

Wenn nicht, sehen Sie nach 

bei Xing oder Linkedin. 

Und googeln Sie, was im Internet über 

Ihre Zielperson und sein Unternehmen 

steht. Vielleicht hat er oder sie ja Fachartikel 

geschrieben. Dann könnte ein Gesprächseinstieg 

sein: „Herr/Frau Meyer, 

vor Kurzem las ich einen Artikel von Ihnen 

zum Thema X in der Zeitung Y. Der 

hat mich sehr inspiriert, weil ...“ Ein solcher 

Gesprächseinstieg schmeichelt fast 

jedem, und schon ist das Eis gebrochen. 

Tipp 5: Wer gut drauf ist, 

kommt gut an 

Bevor Sie jemanden persönlich kontakten, 

sollten Sie sich fragen: Bin ich 

Die Kunst des Smalltalks: Zur 

Kontaktpflege gehören nicht nur 

„harte“ Business-Gespräche. 


Webbusiness | Business Relationship Management 

überhaupt in der Stimmung dafür? Denn 

wenn Sie schlecht gelaunt sind und eigentlich 

keine Lust auf Smalltalk haben, 

dann spürt Ihr Gegenüber dies sofort – 

nicht nur anhand Ihrer (Körper-)Sprache. 

Besonders verräterisch sind Ihre Augen. 

Lassen Sie das Networken also sein, wenn 

Sie nicht gut drauf sind. Oder versetzen 

Sie sich zuvor in eine gute Stimmung. 

Zum Beispiel, indem Sie zwei, drei Minuten 

an ein schönes Erlebnis denken 

– Ihren letzten Urlaub etwa oder einen 

tollen Geschäftserfolg. Dann bessert sich 

Ihre Laune, und Sie gehen frohen Mutes 

auf andere Leute zu. 

Tipp 6: Wertschätzend 

kommunizieren 

Denken Sie beim Networken stets daran: 

Ziel ist nicht, kurzfristig einen Deal unter 

Dach und Fach zu bringen. Vielmehr geht 

es darum, tragfähige, auf wechselseitige 

Wertschätzung beruhende Beziehungen 

zu anderen Menschen aufzubauen. Das 

setzt voraus, dass Sie ein echtes Interesse 

an der Zielperson haben. 

Ihre Hauptbotschaft sollte sein: „Ich finde 

Sie und das, was Sie tun, interessant.“ 

Diese Botschaft können Sie Ihrem Partner 

nicht vermitteln, wenn Sie fortwährend 

von sich und dem, was Sie tun, erzählen. 

Hören Sie Ihrem Gesprächspartner zu, 

stellen Sie weiterführende Fragen. Und 

versuchen Sie Gemeinsamkeiten herzustellen. 

Zum Beispiel, indem Sie, wenn 

Ihr Partner von einer Erfahrung berichtet, 

sagen: „Das kenne ich auch. Auch ich 

war mal in der Situation.“ 

Und denken Sie daran: Jeder Mensch ist 

für Lob empfänglich. Sagen Sie deshalb, 

wenn Ihr Partner einen interessanten Gedanken 

äußert: „Das ist ein interessanter 

Aspekt. So habe ich die Sache noch nicht 

gesehen.“ Doch Vorsicht! Werden Sie 

nicht zum plumpen Schmeichler. Wichtig 

ist, dass Sie auf Augenhöhe kommuni- 

Qualität vor Quantität: 

Entscheidend ist nicht die Masse, 

sondern die Klasse der Kontakte. 


Business Relationship Management | Webbusiness 

zieren. Schließlich wollen Sie ein attraktiver 

Partner sein. Das setzt voraus, dass 

Sie situa tionsabhängig auch Dinge von 

sich preisgeben. Zum Beispiel, indem 

Sie sagen: „Als Vater zweier Kinder 

weiß ich, dass ...“ Oder: „In unserem 

Betrieb haben wir die Erfahrung gesammelt, 

dass ...“ Damit senden Sie an 

Ihren Gesprächspartner das Signal: Ich 

bin bereit, mich mit Ihnen über mehr als 

den letzten Vortrag zu unterhalten. Auf 

dieses Angebot kann Ihr Gegenüber, sofern 

gewünscht, eingehen, und Sie haben 

den Grundstein für ein Vertiefen des Kontaktes 

oder der Beziehung gelegt. 

Tipp 7: Erst geben, dann nehmen 

Selbstverständlich geht es beim Business 

Relationship Management letztlich ums 

Geschäft. Doch überstürzen Sie nichts. 

Geschäftsbeziehungen müssen wachsen. 

Und wer stets etwas will, aber selten etwas 

gibt, wirkt schnell unsympathisch. 

Damit andere Menschen zu Ihnen Vertrauen 

fassen, müssen Sie zu Vorleistungen 

bereit sein. Zum Beispiel, indem 

Sie im Gespräch Wissen preisgeben. 

Angenommen Ihr Partner erzählt, er habe 

Probleme mit der Steuerung eines Projektes, 

dann können Sie erwidern: „Wir 

hatten dieses Problem auch. Da hat es 

sich bewährt ...“ Oder: „Haben Sie schon 

von der Methode X gehört? Die hat das 

Unternehmen Y vor einiger Zeit erfolgreich 

angewendet, um ...“ Und wenn Sie 

selbst keinen Rat wissen? Dann können 

Sie eventuell den Kontakt zu einer Person 

oder Organisation herstellen, die helfen 

kann. Durch solche Gefälligkeiten sammeln 

Sie Pluspunkte. Und Ihre Kontaktperson 

ist ebenfalls zunehmend zu solchen 

Gefälligkeiten bereit. 

Tipp 8: Kontakte 

mit System ausbauen 

Ein Kontakt ist noch keine Beziehung. Erst 

aus vielen einzelnen Kontakten erwächst 

in der Regel eine tragfähige Beziehung. 

Das heißt: Einmal geknüpfte Kontakte 

sollten Sie pflegen, damit sie nicht erkalten. 

Das erfordert Zeit – Zeit, die Ihnen 

im Arbeitsalltag, wenn stets etwas Dringendes 

zu erledigen ist, schnell fehlt. 

Entsprechend systematisch sollten Sie bei 

Kontaktpflege und Beziehungsausbau 

vorgehen. Tragen Sie also bei Personen, 

die Ihnen wichtig sind, zum Beispiel ein 

Jahr im Voraus alle zwei Monate im Kalender 

ein: „Müller anrufen“. Sonst ist, 

ehe Sie sichs versehen, ein halbes Jahr 

verstrichen und der lauwarme Kontakt ist 

wieder kalt. Und überlegen Sie sich, wie 

Sie sich den Ihnen wichtigen Personen 

zwischenzeitlich immer wieder in Erinnerung 

bringen können – ohne stets ein 

großes Event zu planen. 

Dafür gibt es einfache Wege. Angenommen, 

Ihr Netzwerkpartner ist Geschäftsführer 

eines IT-Unternehmens mit 50 

Mitarbeitern und Sie lesen in der Zeitung 

einen Artikel darüber, vor welchen 

Herausforderungen mittelständische IT- 

Unter nehmen stehen. Was spricht dann 

dagegen, diesen Artikel einzuscannen 

und dem Geschäftsführer zu mailen? 

Etwa mit einem kurzen Anschreiben wie: 

„Am Wochenende las ich in der Zeitung 

X den Artikel Y. Dabei musste ich an Sie 

denken. Vielleicht enthält 

der Artikel ein, zwei Anregungen 

für Sie.“ Und 

schon haben Sie sich 

beim Gegenüber wieder 

in Erinnerung 

gebracht. 

Doch nicht nur 

dies! Sie haben 

sich auch einen 

Gesprächsaufhänger 

für ein mögliches Telefonat 

geschaffen, in dem Sie fragen: „Konnten 

Sie mit dem Artikel etwas anfangen?“ 

Tipp 9: Kontakte vernetzen 

Ein Netz ist keine Schnur, sondern es besteht 

aus vielen kreuz und quer miteinander 

verwobenen Fäden. Deshalb sollten 

Sie auch daran mitwirken, Beziehungen 

zwischen Ihren Netzwerkpartnern zu 

knüpfen. Angenommen, ein befreundeter 

Manager möchte die Website seines 

Unternehmens neu gestalten und wendet 

sich an Sie. Doch Sie bieten diese Leistung 

nicht an. 

Was spricht dann dagegen, ihm einen 

Webdesigner zu empfehlen, mit dem 

Sie gute Erfahrungen gesammelt haben? 

Das Ergebnis: Zwei Personen sind Ihnen 

dankbar. Der Manager, weil er eine Empfehlung 

bekam, und der Webdesigner, 

weil Sie ihn bei einem potenziellen Kunden 

ins Gespräch brachten. Davon profitieren 

indirekt auch Sie. Denn beide 

werden sich irgendwann revanchieren. 

Sei es, indem Sie Ihnen ebenfalls einen 

Kontakt vermitteln oder Ihnen einen anderen 

Gefallen tun. 

Tipp 10: Regelmäßig ausmisten 

Lassen Sie (Business-)Kontakte, die Ihnen 

nichts bringen, gezielt einschlafen. Denn 

auch das Pflegen solcher Kontakte kostet 

Zeit – Zeit, die Ihnen anschließend zum 

Auf- und Ausbau wirklich wertvoller Beziehungen 

fehlt. Barbara Liebermeister 


Tipps & Tricks | Online-Recht 

Fragliche 

Entscheidungen 

Im Laufe des vergangenen Jahres hat es das 

ein oder andere Urteil gegeben, das nicht nur 

Juristen verblüfft hat. Trotz aller Überraschung 

gilt es nun, mit den Konsequenzen umzugehen. 

Es gibt Gerichtsentscheidungen, die 

nimmt man einfach zur Kenntnis, 

und andere, bei denen man auch nach 

wiederholtem Lesen immer noch den 

Kopf schüttelt. 

Nicht alle Entscheidungen sind nachvollziehbar 

und manche stellen bisweilen 

sogar all das auf den Kopf, das bislang 

als unumstößliche Tatsache galt. Bei 

manchen Urteilen muss man nach dem 

ersten Staunen sogar zugeben: „Gut, 

dass das endlich mal jemand gesagt 

hat“. Unter dem Strich bleibt Juristen in 

der Praxis aber nicht viel anderes übrig, 

als ihren Mandanten die Rechtslage zu 

erläutern und sich deren Verwunderung 

über diese Urteile anzuhören. Nicht in 

jedem Fall ziehen solche „Aufreger der 

Woche“ große Änderungen im Online- 

Recht nach sich, mitunter werden auch 

manche Entscheidungen durch die Berufungs- 

beziehungsweise Revisionsinstanz 

wieder gekippt. Bis dahin müssen 

sie aber erst einmal als gegeben hinge- 

Der Autor 

Der Autor Michael 

Rohrlich ist Rechtsanwalt 

und unter anderem 

auf das Recht der 

neuen Medien spezialisiert. 

www.ra-rohrlich.de 

nommen und bei der Realisierung von 

Internetpräsenzen entsprechend berücksichtigt 

werden. 

Facebook & Co. 

Nachdem 2011 zuerst das Landgericht 

(LG) Frankfurt a.M. (Beschluss vom 19. 

Oktober 2011, Aktenzeichen: 3-08 O 

136/11) festgestellt hatte, dass nicht nur 

rein privat genutzte Accounts in sozialen 

Netzwerken eines Impressums bedürfen, 

hat das LG Aschaffenburg diese Pflicht 

noch konkretisiert, indem es das Bereitstellen 

eines Impressums unter dem Info- 

Reiter als nicht ausreichen deutlich eingestuft 

hat (Urteil vom 19. August 2011, 

Aktenzeichen: 2 HK O 54/11). Die Pflicht 

zur Bereitstellung einer Impressumseite 

mit den entsprechenden Pflichtangaben 

auch für soziale Netzwerke ist inzwischen 

die vorherrschende Meinung. 

Seite Ende 2012 gibt es offenbar vermehrt 

Abmahnungen (noch keine bekannt 

gewordenen gerichtlichen Entscheidungen), 

die den Empfängern vorwerfen, 

sie würden ein privates Facebook-Profil 

rein gewerblich nutzen. Dies sei eine Irreführung 

und somit ein Verstoß gegen 

das Wettbewerbsrecht. Hintergrund ist 

folgender: Bei Facebook gibt es die Möglichkeit, 

sowohl (private) Profile als auch 

(gewerbliche) Seiten anzulegen; letztere 

sind für Unternehmen, Freiberufler und 

so weiter gedacht. Legt man nun ein – 

eigentlich für die reine Privatnutzung 

vorgesehenes – Profil an und postet dort 

aber Inhalte im Zusammenhang mit der 

eigenen gewerblichen Tätigkeit, dann 

verstößt man im Grunde genommen gegen 

die Facebook-Grundsätze. Denn private 

und gewerbliche Facebook-Nutzer 

sollen hier schon optisch unterschiedlich 

dargestellt werden. Die Situation ist 

letztlich mit der bei Online-Auktionen 

vergleichbar, bei denen inzwischen 

auch bei der Erstanmeldung zwischen 

privatem und gewerblichem Account 

gewählt werden muss. Juristisch zählt 

jedoch der objektive Gesamteindruck, 

das heißt auch ein privater Account 

kann als gewerblich einzustufen sein, 

wenn dort entsprechende Inhalte zu 

finden sind. Verkauft ein als privat eingeordneter 

Ebay-Anbieter beispielsweise 

jeden Tag mehrere neuwertige Computer 

oder kauft gar extra Computer an, um 

sie online weiterzuveräußern, so agiert 

er bei Lichte betrachtet wohl kaum als 

Privatperson, sondern muss vielmehr mit 

Post von Mitbewerbern und auch vom 

Finanzamt rechnen. 

Apropos Abmahnungen: Bereits 2009 

hat das LG Hamburg entschieden, dass 

eine per E-Mail zugestellte Abmahnung 

grundsätzlich die gleiche rechtliche 

Wirkung entfaltet, wie eine postalisch 


Online-Recht | Tipps & Tricks 

übermittelte (Urteil vom 7. Juli 2009, 

Aktenzeichen: 312 O 142/09). Und das 

Gericht geht sogar noch einen Schritt 

weiter: Erreicht diese Mail-Abmahnung 

den Empfänger deshalb nicht, weil sie 

von der Firewall „abgefangen“ oder 

irrtümlich als Spam eingeordnet wird, 

so geht das zu Lasten des Empfängers! 

Begründung des Gerichts: Die Abmahnung 

sei sozusagen als „gelbe Karte“ zu 

verstehen, also eine außergerichtliche 

letzte Chance, die der Abmahnende 

dem Abgemahnten einräumt. Wird diese 

nicht ergriffen, aus welchen Gründen 

auch immer, so bleibt dem Abmahnenden 

letztlich nur die Möglichkeit, 

den Gang zum Gericht anzutreten. 

Spam-Mails 

Werbetreibende, die sich via E-Mail an 

potenzielle Kunden wenden wollten, 

müssen sich hierzulande an die so genannte 

„Double-Opt-in“-Lösung halten. 

In der Praxis sieht das dann so aus, dass 

etwa ein Anbieter eines Newsletters darauf 

warten muss, bis sich ein Interessent 

mit seiner Mail-Adresse 

in die Liste der Newsletter-Abonnenten 

einträgt. Nach dieser Erstanmeldung 

muss dann eine 

Bestätigungs-Mail verschickt 

werden, damit echte von Scherzeinträgen 

unterschieden werden 

können. Wird der in der Bestätigungs-Mail 

enthaltene Link dann angeklickt, 

hat der Newsletter-Anbieter die 

Gewissheit, dass der Empfänger auch 

tatsächlich derjenige war, der die Mail- 

Adresse ursprünglich eingetragen hat. 

Das Oberlandesgericht (OLG) München 

hat nun mit Urteil vom 27. September 

2012 (Aktenzeichen: 29 U 1682/12) entschieden, 

dass bereits die – in aller Regel 

automatisch generierte – E-Mail, in welcher 

der Link zur Bestätigung der Mail- 

Adresse enthalten ist, als unaufgeforderte 

Werbe-Mail zu werten ist. Dies soll nach 

Ansicht der Münchner Richter auch dann 

gelten, wenn in der Bestätigungs-Mail 

selbst noch keine Werbung, sondern lediglich 

der zu aktivierende Bestätigungs- 

Link enthalten ist. Damit wirft das OLG 

München die bislang herrschende Auffassung, 

die unter anderen auch vom 

Bundesgerichtshof (BGH) vertreten wird, 

über den Haufen und stellt Werbetreibende 

vor schier unlösbare Aufgaben. 

Online-Shops 

Das LG Frankfurt a.M. hat in seinem Urteil 

vom 8. November 2012 (Aktenzeichen: 

2-03 O 205/12) entschieden, dass 

Werbeaussagen, wie etwa „versicherter 

Versand“ oder auch „garantiert echte 

Ware“, unlauter sind. Das Gericht stufte 

die erste Werbung als irreführend ein, da 

im B2C-Bereich stets der Verkäufer das 

Versandrisiko trägt. Die zweite Aussage 

sei als Werbung mit Selbstverständlichkeiten 

ebenfalls rechtswidrig. 

Eine mindestens genauso oft verwendete 

Klausel im Rahmen von Online- 

Shops ist die Angabe der Versanddauer 

in Form von beispielsqwise 

„voraussichtlich 1-3 Werktage“. 

Diesbezüglich hat das OLG Bremen 

(Urteil vom 5. Oktober 2012, 

Aktenzeichen: 2 U 49/12) klargestellt, 

dass dies eine nicht hinreichend 

genug bestimmte Lieferfrist 

und somit zugleich ein Wettbewerbsverstoß 

sei. Ebenso unzulässig 

seien vergleichbare Formulierungen, 

wie „etwa“, „ca.“ oder „in der Regel“. 

Filesharing 

Im Bereich der illegalen Web-Downloads, 

also des so genannten Filesharings, 

hat der BGH in seinem Urteil 

vom 15. November 2012 (Aktenzeichen: 

I ZR 74/12) eine „Eltern haften nicht für 

ihre Kinder“-Formel aufgestellt. Über 

Sinn und Unsinn der Regelung, dass 

Eltern für ihre Kinder haften, ließe sich 


Weitergehende Informationen zum 

Thema E-Commerce 

www.rechtssicher.info/ 

Website des Autors 

www.ra-rohrlich.de 

Blog des Autors zum Thema Onlinerecht 

für Webmaster 

www.webmaster-onlinerecht.de/ 

Blog des Autors zum Thema Onlinerechte 

von Verbrauchern 

www.verbraucherrechte-online.de/ 

trefflich diskutieren, würde aber hier 

den Rahmen sprengen. Jedenfalls gehen 

die Karlsruher Richter davon aus, 

dass es heutzutage selbstverständlich 

ist, dass Kinder ab einem gewissen Alter 

über einen Computer verfügen und 

bei dessen Benutzung nicht ständig von 

ihren Eltern kontrolliert werden können. 

Daher reiche eine Belehrung über urheberrechtliche 

Ge- und Verbote aus, eine 

ständige Kontrolle könne hingegen nicht 

gefordert werden, so das Gericht. Eltern 

haften daher prinzipiell nicht für die 

seitens ihres Nachwuchses begangenen 

Urheberrechtsverletzungen, sofern sie 

ihn auf die Problematik hingewiesen und 

darüber informiert haben. 

DSL-Anschluss 

Wie das Amtsgericht (AG) Brühl entschieden 

hat, ist es nicht möglich, gegen 

die Sperrung des eigenen Telefon 

beziehungsweise Internetanschlusses 

eine einstweilige Verfügung zu erwirken 

(Beschluss vom 13. November 2012, 

Aktenzeichen: 7 C 275/12). Der einstweilige, 

und damit schnellere, Rechtsschutz 

gegen diese Sperrung sei nur in 

besonderen Notsituationen zulässig. 

Das Entstehen etwaigen Mehrkosten alleine 

sei kein ausreichender Grund für 

die Inanspruchnahme des einstweiligen 

Verfügungsverfahrens. 

Rechtsanwalt Michael Rohrlich 


Webbusiness | Provider-Porträt: Deutsche Telekom 

Einfach – und 

doch professionell 

Die klassischen Webhosting- und Shop-Pakete der Telekom 

zielen vor allem auf Kunden, die eine einfache, 

aber professionelle Komplettlösung suchen, die sie 

ohne externe Hilfe pflegen und verwalten können. 

Die Deutsche Telekom zählt zu den 

größten Webhosting-Anbietern in 

Deutschland, auch wenn sie im klassischen 

Webhosting vor allem im Privatkunden-Bereich 

eigentlich nie besonders 

in Erscheinung getreten ist. Der Grund: 

Ein großer Teil des klassischen Webhosting-Geschäfts 

der Deutschen Telekom 

läuft unter der Marke „Strato“ und ist bei 

ebendiesem Ende 2009 gekauften Tochterunternehmen 

angesiedelt. Der große 

Schwerpunkt im Hosting liegt bei der 

Deutschen Telekom im Bereich Cloud- 

Services (www.telekom.de/cloud). Hier 

reicht die Palette von E-Mail- und Cloud- 

Speicherplatz für Privatkunden und gehostetem 

Microsoft Office bis hin zu 

Collaboration-Plattformen und Enterprise-CRM-Lösungen 

für Unternehmen jeder 

Größe. 

Homepage-Pakete 

Trotz des umfassenden Hosting-Programms 

bei Strato hat auch die Deutsche 

Telekom selbst in kleinerem Rahmen eigene, 

klassische Webhosting-Angebote 

(www.t-online-webhosting.de), die auf 

Privatkunden und kleine Unternehmen 

zielen. Die Hosting- und Shoplösungen 

der Telekom wenden sich vor allem an 

technisch wenig erfahrene Neukunden als 

auch an bereits bestehende Telekom-Kunden 

– allein im DSL-Geschäft über zehn 

Millionen – , die sich wenig oder gar nicht 

mit der Webhosting-Technik auseinandersetzen 

wollen. Und gerade kleinere Unternehmen 

oder Freiberufler können oder 

wollen sich auch keine externe Agenturen 

leisten, die Layout, Design und Technik 

übernehmen und damit Kosten für die 

Administration verursachen. 

Entsprechend einfach gehalten ist das 

Angebot in diesem Segment: Vier Pakete, 

von „Starter“ mit 4,95 Euro pro Monat bis 

„Professional“ mit 24,95 Euro pro Monat 

decken die Bedürfnisse dieser Zielgruppe 

ab, für die auch der integrierte Homepage 

Creator ein wichtiges Argument darstellt. 

Bei diesem Modul wählt der Kunde aus 

über 300 vorgefertigten Design-Vorlagen 

aus und fügt dann lediglich noch seine 

Inhalte ein. 

In den Paketen sind alle Funktionen 

enthalten, die man für eine Standard- 

Website benötigt: Blog, Bildergalerien, 

Multimedia-Shows für Bilder, Videos 

Mit den Design-Vorlagen des Homepage 

Creator lässt sich eine neue Website innerhalb 

weniger Minuten online stellen. 

und Audiodateien, Gästebuch, Newsticker 

und Flashintros. In den teureren Paketen 

kommen Features wie eigene PHPund 

Perl-Skripte, ein Minishop sowie 

Rechteverwaltung für mehrere Benutzer 

hinzu. Neben den reinen Webhosting- 

Funktionen sind Features wie beispielsweise 

E-Mail-Postfächer oder Webshare- 

Speicherplatz für Filesharing enthalten. 

Online-Shops 

Das zweite Standbein beim Webhosting 

der Deutschen Telekom für kleine Unternehmen 

und Selbständige sind die Online- 

Shop-Pakete. Ähnlich wie beim Homepage-Hosting 

setzt das Unternehmen hier 

vor allem auf Kunden, die einen Online- 

Shop möglichst ohne externe Hilfe schnell 

selbst aufsetzen und verwalten wollen. 

Nicht die Hosting-Technik, sondern sein 

eigentliches Verkaufsgeschäft soll für den 

Kunden im Vordergrund stehen. 

In der Stufen, von „Shop Starter“ für 9,95 

Euro über „Shop Basic“ (24,95 Euro) bis 

„Shop Advanced“ (49,95 Euro) sind in den 

Shop-Paketen alle wesentlichen Elemente 

enthalten, um sofort loslegen zu können. 

Je nach Paket sind eine unterschiedliche 

Anzahl an Produkten und Kategorien 

verfügbar, verschiedene Zahlungsmethoden 

sowie Hilfen für die automatische 

Abwicklung der Bestellungen. 

Auch bereits bestehende Buchhaltungsabläufe 

lassen sich damit integrieren. Allen 

Paketen gemein sind professionelle 

Design-Vorlagen für 100 Branchen und 

ein leicht verständlicher Editor für eine 

problemlose Eingabe der individuellen 

Daten und Inhalte. 

Ebenfalls möglich sind fortgeschrittene 

Features wie SSL-Verschlüsselung, Vorbereitung 

für eine „Trusted Shop“-Zertifizierung, 

automatische Erstellung von 

Lieferscheinen und Rechnungen oder 

auch eine automatische Übermittlung der 

Shopdaten in Preissuchmaschinen sowie 

zum Verkauf via Ebay. Franz Neumeier 


HTML, CSS, Javascript & PHP | Tipps & Tricks 

Tipps & Tricks 

Remote Debugging in iOS 6 

mit Safari Web Inspector 

Um das Debugging von Websites und Web-Apps auf iOS zu erleichtern, hat Apple 

seinem Webbrowser Safari das Remote Debugging beigebracht. 

Nach dem Freischalten der Entwicklungswerkzeuge in Safari 

können Sie Ihre Projekte auf einem iOS-Gerät von Ihrem 

Mac heraus testen. Das Ganze funktioniert ähnlich wie Adobes 

Edge Inspector (zuvor Adobe Shadow; Internet Magazin berichtete 

in der Ausgabe 08/2012 in der Rubrik „Tipps und Tricks“). 

Apples Lösung ist zwar kostenlos, setzt aber Safari auf dem Mac 

unter OS X 10.8 voraus. 

Nach dem Aktualisieren von OS X auf die Version 10.8 sollten 

Sie alle verfügbaren Betriebssystem-Updates einschließlich 

iTunes-Aktualisierungen einspielen. Dadurch erhalten Sie auch 

die benötigte Version des Apple Browsers Safari (Version 6.x 

oder höher). Unter Windows klappt der vorgestellte Tipp nicht, 

weil Safari für Windows zurzeit nur in der Version 5.x existiert. 

Der Remote-Web-Inspektor ist vergleichsweise tief in den 

Systemeinstellungen versteckt. 

von Apple vorgesehene Kabel verwenden, denn eine drahtlose 

Verbindung genügt leider nicht. 

Schritt 3: Öffnen Sie die Voreinstellungen von Safari auf dem 

Mac, wechseln Sie in den Abschnitt „Erweitert“ und aktivieren 

Sie das Optionskästchen „Menü »Entwickler«“ in der Menüleiste 

anzeigen“. 

Freischalten 

der Funktionen 

für die 

Webentwicklung 

in Safari 

unter OS X. 

Schritt 1: Auf Ihrem iOS-Gerät (iPhone, iPad oder iPod) starten 

Sie die App-Einstellungen, navigieren zu „Safari > Erweitert“ 

und aktivieren die Option „Webinformationen“. 

Schritt 4: Ohne die Verbindung mit dem Mac zu trennen, starten 

Sie Safari auf Ihrem mobilen iOS-Gerät und navigieren Sie zu 

der URL-Adresse der Website, 

die Sie testen möchten. 

Diese kann sich entweder im 

Aktivieren der erweiterten Fähigkeiten von Safari auf dem iPad. 

Schritt 2: Verbinden Sie das mobile 

iOS-Gerät direkt mit Ihrem 

Mac, auf dem Sie Ihre Webprojekte 

testen und debuggen 

möchten. Sie müssen hierzu das 

Haben Sie die erweiterte 

Funktionalität in Safari unter 

OS und im mobilem Safari 

unter iOS aktiviert und 

das mobile Gerät mit Ihrem 

Mac verbunden, navigieren 

Sie im mobilen Safari zu der 

gewünschten Webseite, die 

Sie inspizieren möchten. 


Tipps & Tricks | HTML, CSS, Javascript & PHP 

Internet oder in Ihrem lokalen Netzwerk befinden. Solange sie 

für das iOS-Gerät über eine drahtlose Wi-Fi- oder Mobilfunkverbindung 

erreichbar ist, funktioniert beides. 

Schritt 5: Wenn Sie jetzt das Menü „Entwickler“ in Safari auf 

Ihrem Mac aufklappen, finden Sie hier einen Menüeintrag für 

jedes direkt angeschlossene iOS-Gerät. Die Untermenüs repräsentieren 

die einzelnen Web-Projekte, welche in Safari auf dem 

betreffenden iOS-Gerät gerade geöffnet sind. 

Während Sie eine 

Webseite im mobilen 

Safari begutachten, 

können Sie diese in 

Safari auf dem Mac 

über das Entwickler- 

Menü erreichen. 

Schritt 6: Wenn Sie einen dieser Einträge in Safari auf dem 

Mac aufrufen, erhalten Sie unmittelbar Zugriff auf den zugehörigen 

Quelltext 

direkt innerhalb der 

Entwicklungswerkzeuge 

in Safari auf 

dem Mac. 

Falls Sie kein iOS- 

Gerät besitzen, 

können Sie stattdessen 

auch den 

Inspizieren einer Webseite mit Hilfe 

iOS-Simulator aus 

von Safari Entwicklertools gleichzeitig 

Apples Xcode verwenden. 

Starten 

auf dem Mac und auf dem iPad. 

Sie dazu zunächst den Simulator und dann den mobilen 

Safari-Browser im Simulator. 

Javascript 

Javascript-Performance auf mobilen 

Geräten optimieren 

Bei Mobilgeräten müssen Sie damit rechnen, dass die Ausführung 

von Javascript-Code pro KByte mindestens eine Millisekunde 

dauert. Je geringer die Dateigröße des auszuführenden 

Codes, umso höher die Leistung und umso höher die Antwortbereitschaft 

des Geräts. Wer einen hohen Wert auf die Qualität 

seines Javascript-Codes legt, der kann durch kleine, stellenweise 

Verbesserungen ebenfalls eine ganze Menge Leistung gewinnen. 

Zur Code-Auswertung dient in Javascript die Funktion 

eval(). Diese Funktion nimmt Code als eine ganz gewöhnliche 

Zeichenkette entgegen. Es gibt mehrere Möglichkeiten, diese 

Funktion einzusetzen. 

Ein Code-Schnipsel, der an eine Zeichenkette einen Buchstaben 

anhängt und eine Schleife von i = 0 bis i = 999 mit einem Intervall 

von 1 durchläuft, könnte zum Beispiel wie folgt aussehen: 

var str = „“, 

i = 0; 

for (; i

.video embed { 

position: absolute; 

top: 0; 

left: 0; 

width: 100%; 

height: 100%; 

} 

DOM, CSS 

Bessere Leistung auf Mobilgeräten dank 

geschickt gewählter Selektoren 

Die Popularität mobiler Geräte führt dazu, dass Webdesigner wieder vor der 

Herausforderung stehen, mit jedem Quäntchen Leistung und jedem Kilobyte 

Bandbreite sparsam umzugehen. Wer dem Thema seine Aufmerksamkeit schenkt, 

findet oft beachtliches Optimierungspotenzial an ganz unerwarteten Stellen. 

Wer hätte schon gedacht, dass sich die Abarbeitung langer CSS-Stylesheets bloß 

durch eine geschicktere Auswahl von Selektoren deutlich beschleunigen lässt. Ein 

gutes Beispiel sind mehrstufig verschachtelte Navigationsmenüs mit ganz vielen 

Einträgen. Auf der einen Seite bietet es sich deswegen an, einen Selektor wie 

diesen zu benutzen: 

div#nav ul.menu > li.menuitem 

Auf der anderen Seite muss der Browser viele Schleifen durch das DOM durchlaufen, 

um auch wirklich nur die betreffenden Elemente zu selektieren. Im ersten 

Schritt prüft der Browser alle Menüeinträge auf ihre Zugehörigkeit zur Klasse 

.menuitem. Die so erstellte Auswahl muss der Browser dann auf Elemente vom 

Typ beschränken. Als Nächstes gilt es, alle Elemente auszuschließen, deren 

übergeordnetes Element der Klasse .menu nicht angehört. Doch damit nicht genug: 

Vaterelemente, welche zwar der gewünschten Klasse angehören aber nicht 

vom Typ sind, muss der Browser ebenfalls herausfiltern. Die übrig gebliebenen 

Elemente prüft der Browser dann noch auf die Erfüllung zwei weiterer 

Bedingungen: Sie müssen einem Element mit der ID #nav untergeordnet sein, 

bei dem es sich um einen -Kasten handelt. Dabei ließe sich dasselbe Ziel 

mittels des Klassenselektors: 

.menuitem 

viel einfacher und schneller erreichen. Wenn Sie die Klasse im Markup konsequent 

nur auf das eine Navigationsmenü beschränken, werden zusätzliche Bedingungen 

in CSS-Stylesheets völlig überflüssig und Ihre Websites gewinnen an 

Schwung auf Mobilgeräten. 

Javascript 

Zusammenfügen von Zeichenketten 

Beim Zusammenfügen von Zeichenketten ziehen viele Webentwickler die optische 

Eleganz des Codes der Geschwindigkeit vor. Diese beiden Methoden: 



foo = foo + bar; 

foo += bar; 

dienen dazu, einer Zeichenkette eine andere Zeichenkette 

anzuhängen, und liefern eine durchaus vergleichbare Performance. 

Manchmal kommen auch [].join()-Operationen zum 

Einsatz, zum Beispiel: 

Ext.create(‚MeinView‘, { 

tpl: [ 

‚‘, 

‚‘, ‚{vorname}‘, ‚‘, 

‚‘, ‚{nachname}‘, ‚‘, 

‚‘ 

].join() 

}); 

Anstatt ein Feld zu erstellen, mit Zeichenketten zu befüllen und 

dann zu kombinieren, können Sie alternativ eine leere Textzeichenkette 

ins Leben rufen und mittels String.prototype.concat 

die zu kombinierenden Textzeichenketten als Argumente daran 

anhängen. 

Ext.create(‚MeinView‘, { 

tpl: ‚‘.concat( 

‚‘, ‚‘, 

‚{vorname}‘, ‚‘, 

‚‘, ‚{nachname}‘, ‚‘, ‚‘ 

) 

}); 

Die Abarbeitungszeit verkürzt sich dadurch dramatisch, 

aber nur bei einer geringen Anzahl von Elementen. Je höher 

die Anzahl der Elemente, umso besser kommen Sie mit 

[].join()-Operationen weg, da sich die Leistung der Browser 

dramatisch verbessert. 

Javascript 

Schleifen und Iterationen auf der 

Überholspur 

Bei einfachen Iterationen können Sie anstelle einer for-Schleife 

for (var i = 0; i


ganz leicht das gewünschte Aussehen verleihen. Im Falle von 

Webkit-Browsern kommen Pseudoelemente zum Einsatz. Die 

Unterstützung von Firefox sowie des Internet Explorers 10 erfordert 

Pseudoklassen. Alle Browser erwarten zudem herstellerspezifische 

Präfixe, konkret also zum Beispiel: 

::-webkit-input-placeholder { 

color: #333; 

} 

:-moz-placeholder { 

color: #333; 

} 

:-ms-input-placeholder { 

color: #333; 

} 

Solange dabei nur textbezogene CSS-Eigenschaften zur 

Geltung kommen, ist alles in trockenen Tüchern. Der Trick 

funktioniert mit jedem Platzhalter dieser Art, unabhängig 

vom Typ des Formularelementes (text, search, url, tel, 

email und password). 

Javascript 

Feldabfragen wiederverwendbar 

machen 

Viele Anfragen fördern ziemlich „vergängliche“ Resultate zu 

Tage, die schnell wieder verworfen werden müssen. Dabei 

können Sie zumindest das Array wiederverwenden, um Zeit zu 

sparen. Zum Beispiel so: 

var foo = [4,5,6]; 

// die Werte aus foo werden hier genutzt und verworfen 

// das Feld bleibt jedoch bestehen; es wird geleert und 

mit neuen Werten aufgefüllt 

foo.length = 0; 

foo.push(5, 6, 7); 

In allen Browsern außer Chrome können Sie einen respektablen 

Leistungssprung erwarten; Chrome kann neue Felder so 

beeindruckend schnell ins Leben rufen, dass sich hier das Problem 

der Leistungsengpässe in der Praxis erst gar nicht stellt. 

_09ZHJ_worldHostingDays_IM_03_13.pdf;S: 1;Format:(210.00 x 137.00 mm);22. Jan 2013 10:01:41 

DAS GRÖSSTE HOSTING- UND CLOUD-EVENT DER WELT – JETZT ANMELDEN! 

19. – 21. MÄRZ 2013 

EUROPA-PARK RUST 

INFO & ANMELDUNG: 

WWW.WORLDHOSTINGDAYS.COM 

KOSTENLOSE TEILNAHME 

EXKLUSIV FÜR 

INTERNET MAGAZIN LESER! 

CODE: M6S4JQ89 



Apple Xcode 

Webdesign für iOS-Geräte 

Apples Entwicklungsumgebung Xcode eignet sich nicht nur zur 

Erstellung mobiler Apps für das iPhone oder iPad, sondern kann 

durchaus - wenn auch mit gewissen Einschränkungen - genutzt 

werden, um Webseiten auf verschiedenen iOS-Geräten oder im 

Simulator zu testen. So können Sie Ihre Webseiten auf einem 

simulierten HiDPI-Display unter die sprichwörtliche Lupe nehmen, 

auch wenn Sie momentan nicht über ein Gerät mit Apples 

Retina-Display verfügen. Alles was Sie benötigen, sind ein 

Entwickler-Account bei Apple und ein Mac. 

Schritt 4: In den „Systemeinstellungen...“ navigieren Sie jetzt 

zur Systemerweiterung „Monitore“. Verfügt Ihr Mac über mehrere 

Displays, wählen Sie den betreffenden Bildschirm aus, auf 

dem Sie den HiDPI-Modus simulieren möchten. 

Schritt 5: Im Abschnitt „Auflösung“ auf der Registerkarte „Monitor“ 

wählen Sie nun die Einstellung „Skaliert“ und geben die 

gewünschte Auflösung an. Es ist darauf zu achten, dass die Bezeichnung 

des aktiven Eintrags zwingend auf „(HiDPI)“ enden 

muss. 

Schritt 1: Installieren Sie Apples kostenlose Graphics Tools für 

Xcode auf Ihrem Rechner. 

Schritt 2: Starten Sie die Quartz Debug-Applikation und rufen 

Sie darin den Menüpunkt: „Windows > UI Resolution“ auf. 

Im folgenden Dialog aktivieren Sie die Option „Enable HiDPI 

display modes“. 

Simulieren eines Retina-Displays: Mit Hilfe von Graphics Tools 

für Xcode können Sie die HiDPI-Fähigkeiten eines gewöhnlichen 

Displays freischalten. 

Aktivieren der HiDPI-Fähigkeiten eines gewöhnlichen Displays 

mit Hilfe von Apples Entwicklertools unter OSX. 

Schritt 3: Melden Sie 

sich in dem System 

ab und wieder an. 

Schritt 6: Ihr Bildschirm läuft nun im HiDPI-Modus und simuliert 

Apples Retina-Display. Abschließend noch ein wichtiger 

Hinweis: Wer eine perfekte Simulation eines HiDPI-Displays 

auf einem gewöhnlichen Bildschirm erwartet, wird sicherlich 

enttäuscht sein. Insgesamt ist die vorgestellte Lösung lediglich 

als Behelf gedacht, der dem Entwickler ermöglichen soll, die 

Retina-Displays der neuesten iPad-Generationen zu simulieren 

und Ihre Projekte trotzdem zu verwirklichen. Genau diese Aufgabe 

erfüllt dieser Workaround durchaus. 

Bevor Ihnen die 

soeban freigeschalteten 

HiDPI- 

Modi zur Verfühung 

stehen müssen Sie 

ab- und wieder 

anmelden. 

Javascript 

Ereignisauswertung beschleunigen 

Die Stärken von Javascript im Hinblick auf die Ereignisauswertung 

können einer Webapplikation auch zum Verhängnis 

werden, vornehmlich dann, wenn man diese nicht minimiert. 



Probleme treten etwa bei einem Markup eines Navigationsmenüs 

wie diesem 

 

Home 

Produkte 

Portfolio 

Shop 

Über Uns 

Anmelden 

Kontakte 

 

oder mit diesem Javascript-Code auf: 

document.getElementById(‚home‘).addEventListener 

(‚click‘,goHome); 

document.getElementById(‚produkte‘).addEventListener 

(‚click‘,goProdukte); 

// ... 

document.getElementById(‚kontakte‘).addEventListener 

(‚click‘,goKontakte); 

In diesem Beispiel wurde an jedes Listenelement des Menüs ein 

Ereignis-Listener angehängt. Sieben Ereignis-Listener kümmern 

sich nur um ein einziges Navigationsmenü - das ist alles andere 

als effizient. Man könnte es aber auch anders lösen: 

var menuHandler = function(event) { 

event = event || window.event; 

var target = event.target || event.srcElement; 

if (target.id === ‚home‘) { 

// gehe zu Home 

} 

// andernfalls ... 

} 

document.getElementById(‚menu‘).addEventListener 

(‚click‘,menuHandler); 

Hier überwacht genau ein einziger Ereignis-Listener das ganze 

Menü und delegiert Anweisungen an die jeweiligen Kind- 

Elemente. Das resultiert, wie gewünscht, in einer deutlich 

höheren Leistung. 

Die deutsche Edition von Wall Street Journal begrüßt den 

Webbesucher bereits mit einem smarten Web-App-Banner; 

da die zugehörige mobile App bereits installiert ist, lässt sie 

sich aus dem Banner heraus komfortabel ausführen. 

Website über die Verfügbarkeit der App, sofern diese mit dem 

betreffenden iOS-Gerät kompatibel und im betreffenden Land 

verfügbar ist. Der Banner prüft außerdem, ob der Besucher die 

App möglicherweise bereits installiert hat. 

Der Besucher kann die App mit Hilfe des smarten Banners herunterladen 

oder - falls diese bereits installiert sein sollte - sofort 

starten und nutzen. 

Um einen smarten App-Banner zu erstellen, fügen Sie dem 

-Abschnitt der App ein Metatag mit den Eigenschaften 

name=“apple-itunes-app“, content und app-argument zu. Als 

Wert der content-Eigenschaft tragen Sie die AppStoreID der 

App ein, um sie eindeutig zu identifizieren. Innerhalb der optionalen 

Eigenschaft app-argument können Sie zudem eine URL- 

Adresse übergeben, um innerhalb der App die gewünschten 

Inhalte zu präsentieren. Konkret sieht das Ganze so aus: 

 

_056AF_Weber_pcm_N_05.ps;S: 1;Format:(90.00 x 60.00 mm);02. Mar 2011 07:54:29 

Web-Apps für iOS 

Smarte App-Banner in iOS 

Wer eine mobile App für iOS möglichst vielen Nutzern zur 

Verfügung stellen möchte, der kann seine Website mit seiner 

mobilen App über einen Banner verbinden. Apple spricht hierbei 

von „Smart App Banners“. 

Ein „smarter“ Web-App-Banner informiert die Besucher einer 

www.internet-magazin.de 

77 

M51


Der Banner nimmt die Höhe von 156 beziehungsweise 312 

Pixeln (auf HiDPI-Geräten) in Anspruch, und lässt sich durch 

den Besucher bei Bedarf schließen. 

Chrome, Javascript 

Javascript-Snippets in Chrome ausführen 

Wenn Sie einen Schnipsel Javascript ausprobieren möchten, 

können Sie das auch ohne eine große Entwicklungsumgebung 

tun, mit dem Entwicklungswerkzeuge von Chrome 

nämlich. Klicken Sie hierzu in Chrome innerhalb des Dokumentfensters 

mit der rechten Maustaste und wählen Sie aus 

dem nun aufgeklappten Menü den Befehl „Inspect element“ 

aus, um Zugriff auf die eingebauten Entwicklungstools zu 

bekommen. Hier wechseln Sie auf die Registerkarte „Console“, 

tragen Ihren Code in die Kommandozeile ein und 

führen diesen aus. 

CSS 

Overflow:Hidden oder wie Sie Floats 

mit Eleganz abschließen 

Bei Layoutkonstruktionen auf Basis der float-Eigenschaft muss 

man dem Browser bekannterweise klar Grenzen aufzeigen, indem 

man die Floats abschließt. Wer die ultimative semantische 

Reinheit des Markups anstrebt, kann sich mit der Eigenschaft 

overflow behelfen. Indem Sie einem Element die Eigenschaft 

overflow:hidden; 

oder 

overflow:auto; 

zuweisen, schließen Sie nicht nur die Float-Konstruktion wirkungsvoll 

ab, sondern bringen den Inhalt des aktuellen Elementes 

dazu, elegant entlang seiner inneren Konturen zu fließen. 

Mit Hilfe der Eigenschaft 


stellen Sie zudem sicher, dass der Inhalt des aktuellen Container-Elementes 

um benachbarte float-Elemente nicht umbricht. 

Allerdings hat diese Lösung auch ihre Tücken: Wenn Sie nicht 

richtig aufpassen, bekommt das betreffende Element möglicherweise 

Scrollbalken. Der Effekt trifft dann auf, wenn die Inhalte 

- beispielweise eine lange URL oder ein überdimensioniertes 

Bild - den verfügbaren Rahmen des Containers sprengen. Im 

Fall von Textinhalten beheben das Problem, indem Sie dem 

Container-Element die Eigenschaft 

word-wrap:break; 

hinzufügen. Um auch Bilder in den Griff zu bekommen, können 

Sie sich die Eigenschaften 

max-width: 100%; 

height: auto; 

zu Nutze machen. Das Problem mit den unerwünschten Scrollbalken 

tritt nicht auf, wenn Sie anstelle der Eigenschaft 


die Eigenschaft 

overflow:hidden; 

nutzen; in diesem Fall müssen Sie allerdings damit rechnen, 

dass überschüssige Inhalte im Nichts verschwinden, wenn sie 

die Grenzen des übergeordneten Containers überschreiten. 

Website-Branding 

Favicons schnell erstellt 

Aufgabe dieser Miniatursymbols ist es, Ihre Website unter anderem 

in der Adressleiste des Browsers zu schmücken. Wer die 

Gestaltung eines Favicons immer auf die lange Bank geschoben 

hat, der kann nun endlich aufatmen. Mit einem kostenlosen 

Online-Editor namens Xiconeditor auf der Seite 

xiconeditor.com 

gelingt die Erstellung von Favicons in allen benötigten Größen 

von 16x16 bis 64x64 Pixeln durch den Import einer Bilddatei sowie 

den Einsatz einiger intuitiver Werkzeuge direkt im Browser. 

Das Highlight dieses Dienstes ist die Vorschaufunktion. Anhand 

der Vorschau lässt sich das resultierende Icon unter anderem im 

Kontext einer typischen Browseradressleiste sowie innerhalb der 

Windows-Taskleiste begutachten. So können Sie überprüfen, ob 

Ihr aktuelles Design bereits brauchbar ist oder doch noch Verbesserungsbedarf 

bestehen könnte. Die Exportfunktion schreibt 

natürlich das Dateiformat .ico. 

Internet Explorer 

Entwicklungswerkzeuge 

Nicht nur Chrome und Firefox halten Entwicklungswerkzeuge 

bereit. Im Internet Explorer 9 und 10 können Sie eine ähnliche 

Funktion mit der Taste F12 aktivieren. Sie können hier 

unter anderem HTML und CSS bearbeiten, die UA-Kennung 

des Browsers bearbeiten, um zum Beispiel mobile Websites 

zu testen, und auf der Registerkarte „Netzwerk“ die Netzwerkaktivitäten 

des Browsers inspizieren. 

Anna Kobylinska und Filipe Pereira Martins 


BRANCHENVERZEICHNIS 

Alle Einträge finden Sie mit direktem Link zum Anbieter auf der Heft-CD für Abonnenten oder online unter www.internet-magazin.de/branchenverzeichnis 

@ APPLICATION SERVICE PROVIDER 

PLZ 

38100 

datenbanken24.de 

Ein Service der MANETEC GmbH & Co. KG 

Lange Straße 61 

38100 Braunschweig 

Tel.: (0531) 12 08 480, Fax: (0531) 12 08 499 

info@datenbanken24.de 

www.datenbanken24.de 

Ihre eigene Datenbank im Web: Erstellen Sie sich online in wenigen Minuten 

Ihre individuelle Datenbank-Komplettlösung. Ohne Programmierung. Mit 

Zugriffsregelung, Formulargenerator, Kategorie- oder Listendarstellung und 

Suchfunktionen. 

Für professionelle Webdatenbanken jeder Art. Genial einfach. 

datenbanken24.de – Ein Service der MANETEC GmbH & Co. KG 

@ CONTENT 

PLZ 

32051 

content.de AG 

Nordstr. 14 

32051 Herford 

Tel.: (05 22 1) 85 49 9 0 

Fax: (05 22 1) 85 49 9 - 99 

info2012@content.de 

http://www.content.de 

Suchmaschinenoptimierte Texte für erfolgreiche Webprojekte! 

content.de, die technische Plattform mit persönlicher und kompetenter 

Kundenbetreuung, liefert mit seinen mehr als 4.000 Autoren einzigartige, 

suchmaschinenoptimierte Texte (unique content). Diese Fakten haben 

schon viele Kunden von uns überzeugt: 

- attraktive Preise pro Wort 

- einfach zu bedienendes System 

- viele Lösungen (SEO-Texte, Produktbeschreibungen, Blogbeiträge, etc.) 

- übersichtliches Projektmanagement (für viele Textaufträge ausgelegt) 

- durchdachte Features mit Mehrwert (Wordpress-API, Keyword-Generator) 

- u.v.m. 

Wann steigern Sie Ihren Traffic durch neue Texte? 

@ E COMMERCE 

PLZ 

36041 

PSW GROUP GmbH & Co. KG 

Flemingstraße 20-22 

36041 Fulda 

Tel.: (0661) 48 02 76-10 

Fax: (0661) 48 02 76-19 

Hotline: (0800) 50 37 50-1 

Fax: (0800) 50 37 50-9 

support@psw.net 

www.psw.net 

Die PSW GROUP GmbH & Co. KG ist einer der führenden deutschen Full Service- 

Provider für Internetlösungen mit einem besonderen Schwerpunkt auf Internet 

Security. Als solcher bietet das Unternehmen – sowohl für das Web als auch für die 

E-Mail-Kommunikation – Zertifikats-, Signatur-, Verschlüsselungs- und Authentifizierungslösungen 

an. 

Das umfassende Produktportfolio reicht von SSL-Zertifikaten über Code-Signing- 

Zertifikate bis hin zu qualifizierten elektronischen Signaturen und DE-Mail. Aber 

auch Sicherheitslösungen wie das PCI- und Malware-Scanning, Secure CDN, DNS- 

SEC und AntiSpam sowie Gütesiegel und Kundenbewertungssysteme speziell für 

E-Commerce-Anbieter finden sich im Repertoire der PSW GROUP. Darüber hinaus 

verfügt das Unternehmen über eine fast 12-jährige Expertise in den Bereichen 

Internet-Sicherheit, IT-Recht sowie Hosting- und Domaindienstleistungen. Zu den 

Kunden der PSW GROUP zählen Webhoster, Webdesign- und Marketing-Agenturen 

sowie Online-Shops. 

@ E MAIL MARKETING 

SuperMailer 

PLZ 

04319 

Mirko Böer Softwareentwicklungen 

Malachitstraße 16 

04319 Leipzig 

Tel.: (03 41) 8 63 28 42, Fax: (03 41) 8 63 28 43 

info@wt-rate.com 

www.supermailer.de/ 

Ansprechpartner: Mirko Böer 

Versand von personalisierten Newslettern, Marketing-Newslettern, 

Produktinfos, weitere Internetsoftware, Entwicklung von Windows-Software 



Wollen Sie sich auch im Internet Magazin präsentieren? • Jürgen Auselt • Telefon 0 89/2 55 56-11 72 • Telefax 0 89/2 55 56-11 96 • jauselt@wekanet.de 

@ E PAYMENT 

PLZ 

50679 

Deutsche Card Services GmbH 

Kaltenbornweg 1–3 

50679 Köln 

Tel.: (0221) 9 95 77 - 0, 

Fax: (0221) 9 95 77 - 720 

info.deucs@db.com 

www.deutsche-card-service.com 

www.deucs.com 

Als Teil der Deutschen Bank Gruppe bietet die Deutsche Card Services 

internationale Full-Service-Lösungen für den bargeldlosen kartengestützten 

Zahlungsverkehr von der Kreditkarte über Maestro, ELV und giropay aus 

einer Hand. Sie baut dabei auf das jahrelange Know-how und die bewährte 

technische Plattform der Pago eTransaction Services auf. Bewährte Risikominimierungssysteme 

sorgen dafür, dass bargeldloses Bezahlen im 

E-Commerce, im Versandhandel und am Point of Sale einfach, schnell 

und sicher abläuft. Einzigartige Online-Steuerungssysteme bieten Kunden 

weltweit jederzeit den vollen Überblick über ihre Transaktionen. 

@ FULL SERVICE PROVIDER 

PLZ 

12165 

http.net Internet GmbH 

Grunewaldstraße 22, 

12165 Berlin 

Tel.: (030) 21 00 90-0, Fax: (030) 21 00 90-90 

info@http.net 

www.http.net 

Ansprechpartner: Helga Krüger 

Seit 1996 hat sich die http.net auf Lösungen für Wiederverkäufer und 

Geschäftskunden spezialisiert. Unser Schwerpunkt liegt im Bereich der 

Domainservices. Bei http.net können Sie über 500 Domain-Endungen 

registrieren. Darüber hinaus bieten wir SSL-Zertifikate, Webspace, Hosting 

und individuelle Virtualisierungs-Lösungen. 

PLZ 

40599 

OpenIT GmbH 

In der Steele 33a–41 

40599 Düsseldorf 

Tel.: (02 11) 23 95 77-0 

Fax: (02 11) 239577-10 

isp@openit.de 

www.openit.de 

Full-Service-Provider für Businesskunden, von virtuellen Servern bis zu 

dedizierten Clusterumgebungen im BSI zertifizierten Rechenzentrum inkl. 

24/7 Support. Weiter im Portfolio: Typo3 Hosting, SMS Versand und 

Anwendungsentwicklung für den B2B Bereich. 

@ INTERNET FOREN 

PLZ 

10827 

TwoCom 

Hauptstraße 26 / 2. Hof - 2. OG 

10827 Berlin 

Tel.: (0 30) 78 00 09 4 - 0, 

Fax: (0 30) 78 00 09 4 - 9 

sales@2-com.de 

www.2-com.de 

Ansprechpartner: Sascha Petruschke 

Draytek Online Forum – Hilfe von Usern für User rund um Produkte der 

Draytek Familie & Online Shop 

@ ONLINEMARKETING & SUCHMASCHINENMARKETING 

PLZ 

44139 

SUMAX® 

Rheinlanddamm 199 

44139 Dortmund 

Tel.: 49 - (0) 231 / 53 46 1 00 

Fax: 49 - (0) 231 / 53 46 1 100 

www.sumax.de 

info@sumax.de 

(Google AdWords Qualified Company) 

Google AdWords- & Suchmaschinenoptimierung, Suchmaschinenmarketing, 

Webshops, Usability 



Alle Einträge finden Sie mit direktem Link zum Anbieter auf der Heft-CD für Abonnenten oder online unter www.internet-magazin.de/branchenverzeichnis 

@ SHOP-SYSTEME 

PLZ 

45964 

Webagentur Niewerth – Internetlösungen 

Humboldtstr. 2, 45964 Gladbeck 

Tel.: (0 20 43) 20 97 - 0 

FreeCall: (0 800) 34 56 90 0 

info@weban.de 

www.webagentur-online.de 

Ihr Shop-System das sich an Ihre Bedürfnisse anpasst. Mit Schnittstellen zu 

Ihrem ERP-System und zur Logistik. Alle gängigen Zahlungsarten, Schnittstellen 

zu Preisagenturen. Bestellverwaltung, Rechnungsmodul und Marketingtools. 

Mit Amazon- und Ebay-Anbindung und vieles mehr. 

Die Webagentur Niewerth betreut Sie von der Strategieberatung bis zum 

optimalen Marketingmix. Wir sind Trusted-Shops Partner, Google Adwords 

Professional und Facebook-Experten. 

Jetzt anrufen und unverbindlich beraten lassen! 

@ SMS DIENSTLEISTER 

PLZ 

73262 

mes.mo GmbH 

Stuttgarter Str. 4 

73262 Reichenbach 

Tel.: (0 71 53) 55 88 35 

Tel.: (0 71 53) 55 88 36 

office@mesmo.net 

www.any-sms.info 

Ansprechpartner: Christian Rapp 

Ihr Partner für mobile Messaging: High Quality SMS/MMS-Versand, 

individuelle inbound Lösungen für SMS/MMS-Empfang, SMS-Marketing, 

HTTP/UCP/SMTP-Schnittstelle, 24/7 Premium Support. 

@ WEB AGENTUREN 

PLZ 

81927 

MAXXmarketing GmbH 

Englschalkinger Straße 224 

81927 München 

Tel.: (0 89) 92 92 86 - 0 

Fax: (0 89) 92 92 86 - 75 

marketing@maxx-marketing.net 

www.webdesigner-profi.de 

Ansprechpartner: Klaus Huber 

Webdesign und Webprogrammierung für nur 19,- Euro per Arbeitsstunde 

Spürbar mehr Erfolg durch Ihren professionellen Webauftritt! Bereits ab 

19.-Euro/pro Stunde entwickelt MAXXmarketing für Sie Webseiten in PHP, 

HTML, Flash, Javascript & Java. Besonders das hochwertige Design, Beispiele 

dazu auf www.maxx-marketing.net unter Punkt Beispiele/Webdesign, 

erzeugt den bekanntlich sehr wichtigen ersten positiven Eindruck für Ihren 

Webbesucher. Sprechen Sie uns jetzt an und testen Sie uns! Durch unsere 

günstigen Preise haben auch andere Werbeagenturen die Möglichkeit, uns 

als SUB-Unternehmen für die Erstellung Ihrer Projekte einzusetzen. 

Faszination iPhone! 

Geheime Funktionen nutzen 

Freiheit für IhriPhone: SIM-Lock legal entfernen, versteckteFeatures freischalten. 

iOS, iTunes,iCloud verständlich erklärtund die besten iPhone-Apps für Heimnetz- 

Steuerung, Reise,Musik &mehr.Alles steht in diesem Buch. 

FRANZIS 

ISBN 978-3-645-60146-7 

10,– EUR 

Praxiswissen vonFranzis 

www.franzis.de 


Service | Vorschau 

Ausgabe 4/2013 erscheint am 8. März 2013 

Bessere Performance 

Flexbox – das vielversprechende 

Layoutmodul 

Der attraktive Newcomer unter den Layoutmodulen 

aus CSS3 ist Flexbox: Es erlaubt eine ganz 

flexible Anordnung von Bereichen. 

Daneben lassen sich viele klassische 

Layoutprobleme elegant 

mit Flexbox lösen. Der Artikel 

zeigt, wie Sie damit arbeiten. 

Da beim Responsive Webdesign dieselbe Code- und Ressourcenbasis für alle Geräteklassen 

verwendet wird, sind die Ladezeiten auf mobilen Geräten schlechter als 

bei einer separaten mobilen Webseite. Glücklicherweise gibt es aber Methoden, die 

Performance zu verbessern. 

Wordpress Multisite 

Wir zeigen Ihnen ein System, mit dem 

Sie mehrere Wordpress-Installationen 

komfortabel installieren, pflegen und 

verwalten können. 

Weitere Themen 

Map-APIs 

Geolocation auf dem Prüfstand 

Design mit Illustrator 

Webgestaltung in Perfektion 

Yeoman 

Tools für moderne Web-Apps 

Impressum 

Redaktion 

Bereichsleiter: Jörg Hermann 

Chefredakteurin: Daniela Schrank (verantw. i. S. d. P.) 

dschrank@internet-magazin.de 

Projektleiter: Stefan Schasche (sschasche@wekanet.de) 

Producer: Rene Wirth 

Mitarbeiter dieser Ausgabe: Daniel Dubsky, Carola Heine, 

Andreas Hitzig, Anna Kobylinska, Stephan Lamprecht, Barbara 

Liebermeister, Filipe Pereira Martins, Dr. Florence Maurice, Franz 

Neumeier, Susanne Noetscher (Korrektorat), Dr. Holger Reibold, 

Michael Rohrlich 

Redaktionsassistenz: Gerlinde Drobe, Sabine Steinbach 

Produkt-Manager Software/Lizenzen: Arnd Wängler 

Business Development Manager: Anja Deininger 

Leitung Layout: Sandra Bauer, Silvia Schmidberger 

Layout: Marcus Geppert, Andreas Geyh, Michael Grebenstein, 

Dorothea Voss, Rene Wirth 

Fotografie: Josef Bleier, Stefan Rudnick 

So erreichen Sie die Redaktion: 

Redaktion Internet Magazin 

Telefon: (089) 2 55 56-11 11, Fax: (089) 2 55 56-16 27 

E-Mail: redaktion@internet-magazin.de 

Web: www.internet-magazin.de 

Manuskripteinsendungen: 

Manuskripte, Programme, Tipps & Tricks, Leserbriefe bitte an die 

Redaktionsanschrift. Für unverlangt eingesandte Manuskripte, 

Datenträger sowie Fotos übernimmt der Verlag keine Haftung. Die 

Zustimmung zum Abdruck wird vorausgesetzt. Das Verwertungsrecht 

für veröffentlichte Manuskripte, Fotos und Programme liegt 

ausschließlich beim Verlag. Mit der Honorierung von Manuskripten 

und Programmen erwirbt der Verlag die Rechte daran. Insbesondere 

ist der Verlag ohne weitere Honorierung berechtigt zur weltweiten 

und uneingeschränkten Veröffentlichung auf Papier und elektronischen 

Trägermedien. Der Autor erklärt mit der Einsendung, 

dass eingereichte Materialien frei sind von Rechten Dritter. 

Eine Haftung für die Richtigkeit der Veröffentlichung kann trotz 

sorgfältiger Prüfung durch die Redaktion vom Herausgeber nicht 

übernommen werden. Für veröffentlichte Manuskripte übernimmt 

der Verlag weder Gewähr noch Haftung. Schaltungen und verwendete 

Bezeichnungen müssen nicht frei sein von gewerblichen 

Schutzrechten. Die geltenden Bestimmungen sind zu beachten. 

Nachdruck, Übersetzung sowie Vervielfältigung oder sonstige 

Verwertung von Texten sind nur mit schriftlicher Genehmigung des 

Herausgebers erlaubt. Namentlich gekennzeichnete Beiträge geben 

nicht in jedem Fall die Meinung der Redaktion wieder. 

Anzeigenabteilung 

Ihr Kontakt zum Anzeigenteam 

Gerlinde Drobe und Sabine Steinbach 

Telefon: (089) 2 55 56-11 71, Fax: (089) 2 55 56-11 96 

Anzeigenleitung (verantwortlich für Anzeigen): 

Gisela Nerke (-12 11) gnerke@wekanet.de 

Mediaberatung: 

Markus Matejka (05655) 92 48 94, mmatejka@wekanet.de 

Direktmarkt/Stellenmarkt: 

Jürgen Auselt (-11 72) jauselt@wekanet.de 

Leitung Sales Corporate Publishing & Media Services: 

Richard Spitz (-11 08) rspitz@wekanet.de 

Head of Digital Sales: 

Christian Heger (-11 62)cheger@wekanet.de 

International Representatives 

UK/Ireland/France: Huson International Media, Ms Rachel Di 

Santo, Cambridge House, Gogmore Lane, Chertsey, GB - Surrey 

KT16 9AP, phone: 0044-1932-564999, fax: 0044-1932-564998, 

rachel.disanto@husonmedia.com 

USA/Canada - West Coast: Huson International Media 

(Corporate Office), Huson International Media (Corporate Office) 

Ms Allison Padilla, Pruneyard Towers, 1999 South Bascom 

Avenue, Suite #450, USA – Campbell, CA 95008, phone: +1 408 

8796666, fax: +1 408 8796669, allison.padilla@husonmedia.com 

USA/Canada - East Coast: Huson International Media, 

Mr Jorge Arango, The Empire State Building, 

350 5th Avenue, Suite #4610, USA - New York, NY 10118, 

phone: 001-212-2683344, fax: 001-212-2683355, 

Jorge.arango@husonmedia.com 

Korea: Young Media Inc., Mr Young J. Baek, 408 Jinyang Sangga, 

120-3 Chungmuro 4 ga, Chung-ku, Seoul, Korea 100-863, 

phone: 0082-2-2273-4818, fax: 0082-2-2273-4866, 

ymedia@ymedia.co.kr 

Anzeigendisposition: Astrid Brück (-1471) abrueck@wekanet.de 

Sonderdrucke: Marion Werber, Tel: (089) 2 55 56-1101, 

mwerber@wekanet.de 

Anzeigengrundpreise: 

Es gilt die Preisliste Nr. 17 vom 01.01.2013 

Verlag 

Anschrift des Verlags: 

WEKA MEDIA PUBLISHING GmbH 

Richard-Reitzner-Allee 2, 85540 Haar bei München, 

Telefon: (089) 2 55 56–10 00, Fax: (089) 2 55 56-11 99 

Geschäftsführung: Wolfgang Materna, Werner Mützel, Kai Riecke 

Herstellungsleitung: Marion Stephan 

Vertriebs-/Marketingleitung: Robert Riesinger 

Vertrieb Handel: MZV GmbH & Co. KG, Ohmstraße 1, 85716 

Unterschleißheim, Telefon: (089) 319 06-0, Fax: (089) 319 06- 

113, E-Mail: info@mzv.de 

Aboservice 

Abonnementverwaltung: 

Burda Direct GmbH, Postfach 180, 77649 Offenburg, 

Telefon: (0781) 639 4548, Fax: 0781/639 4549, 

E-Mail: weka@burdadirect.de 

Einzelheftbestellung: 

Burda Direct GmbH, Postfach 180, 77649 Offenburg, 

Telefon: (0781) 639 4548, Fax: (0781) 639 4549, 

E-Mail: weka@burdadirect.de 

Erscheinungsweise: monatlich 

Abonnementverwaltung Schweiz: 

Thali AG, Industriestrasse 14, CH-6285 Hitzkirch, 

Tel: 041 919 66 11, Fax: 041 919 66 77, 

E-Mail: abo@thali.ch, Internet: www.thali.ch 

Premium-Abonnement mit Jahres-CD: 

Abo mit 12 Ausgaben 60,90 Euro 

Studenten-Abo 

53,90 Euro 

Europäisches EU-Ausland 77,90 Euro 

Schweiz 

121,90 sfr 

Classic-Abonnement ohne Jahres-CD: 

Abo mit 12 Ausgaben 52,90 Euro 

Studenten-Abo 

47,90 Euro 

Europäisches EU-Ausland 69,90 Euro 

Schweiz 

105,90 sfr 

Außereuropäisches Ausland auf Anfrage 

Das Jahresabonnement ist nach Ablauf des ersten Jahres 

jederzeit kündbar. Alle Abonnementpreise incl. MWST und 

Versandkosten. 

© 2013 WEKA Media Publishing GmbH 

Druck: Vogel Druck und Medienservice, Leibnitzstr. 5, 

97204 Höchberg 

ISSN: 1433-3511 

Mitglied der Informationsgemeinschaft zur Feststellung 

der Verbreitung von Werbeträgern e.V. (IVW), Berlin. 


„Kein Hosting-Paket ist 

günstiger als bei STRATO. 

Außer bei STRATO!“ 

4 Domains, 10 MySQL- 

Datenbanken inklusive 

10.000 MB Speicher 

und 5 GB E-Mailspace 

Profi-Features: PHP, 

Perl, BackupControl 

0,– 

0,– 

0,– 

1-Klick-Installation mit 

zahlreichen Apps 0,– 

Webhosting 

PowerWeb Basic 

für ein ganzes Jahr 

€/Mon.* 

JETZT 30 TAGE 

KOSTENLOS TESTEN! * 

HOSTED 

IN GERMANY 

* Aktion bis 28.02.2013. PowerWeb Basic 30 Tage kostenlos testen, danach 12 Monate 0 €/Mon., danach 4,99 €/Mon. 

Einmalige Einrichtungsgebühr 8,60 €. Mindestvertragslaufzeit 24 Monate. Preis inkl. MwSt. 

Servicetelefon: 030 - 300 146 - 21

Und wie flexibel ist Ihr Server? 

Flexibel skalierbare CloudServer On Demand 

mit nutzungsbasierter Abrechnung 

JiffyBox direkt einrichten und 24 Stunden gratis testen 

www.jiffybox.de 

Foto: Akhilesh Sharma / Fotolia

Internet Magazin Responsive Webdesign (Vorschau)

Erfolgreiche ePaper selbst erstellen

Template löschen?

Als Template speichern?