Da hilft es eigentlich nur jede Menge Tests durchzuführen, denn die Unterschiede in den Browser-Ansichten können doch enorm sein und irgendein Browser muss natürlich auch immer aus der Reihe tanzen und den Code anders darstellen, als alle anderen (meist ist dies dann natürlich unser Freund Internet Explorer…). Damit du dir die Arbeit beim Testen deines neuen Webprojekts in den unterschiedlichen Browsern etwas erleichtern kannst, habe ich hier im Artikel einige praktische Tools, Tipps und eigene Erfahrungen zusammengestellt.

Hilfreiche Online-Tools fürs Cross-Browsertests

Es gibt einige kostenlose Online-Tools und besonders, um eine Webseite schnell in älteren Internet Explorer Versionen oder in nur wenigen verschiedenen Browser-Versionen zu testen, können diese Tools schon sehr hilfreich sein. Für Internet Explorer Tests gibt es z.B. den IENetRenderer. Hier kannst du Webseitenansichten im IE 5.5 bis 9 testen.

Internet Explorer Ansichten online im IE NEtRenderer testen.

Ein extra Browser, den du dir kostenlos auf den eigenen Computer installieren kannst ist außerdem der IETester. So kannst du deine Webprojekte auch offline in den unterschiedlichen Internet Explorer Versionen testen.

Eines der umfangreichsten, kostenlosen Browsertest Online-Tools ist wohl Browsershots.

Die Browser-Auswahl bei Browsershots

Brosershots bietet wirklich jede Menge Browser-Ansichten zu Auswahl und wenn man nur wenige zum Test auswählt, klappt der Test auch recht gut. Bei mehreren Browsern dauert der Test meiner Erfahrung nach allerdings sehr lange oder bricht ab und zu auch komplett ab. Ich bin mir nicht sicher, ob andere diese Erfahrung teilen können, über Feedback würde ich mich daher sehr freuen.

Für wirklich umfangreiche Tests gibt es einige Profianbieter, die allerdings in den meisten Fällen kostenpflichtig sind. Einer der größten Profianbieter ist Cross-Browsertesting. Ein großer Vorteil ist, dass der Anbieter auch Tests für mobile Geräte mit anbietet.

Professionelle Cross-Browsertesting Angebote mit kostenlosen Optionen sind außerdem Adobe Browser Labs (derzeit noch bis April 2012 kostenlos in der Beta-Phase) oder Saucelabs (bietet ein kostenlose Account-Version mit 200 freien Minuten Testzeit im Monat).

Ein noch recht neues, ebenfalls praktisches Angebot (derzeit noch in der öffentlichen Beta-Phase und daher komplett kostenlos) ist FWP Screenshots. Ich teste das Tool seit ein paar Wochen und bin derzeit mit dem Angebot sehr zufrieden. Man kann die eigenen Tests speichern und bei Bedarf einen Test schnell wiederholen. Außerdem gibt es eine praktische Überlagerungsoption, um zwei Browser-Ansichten direkt miteinander vergleichen zu können.

Die Browser-Vergleichsansicht von FWP Screenshots.

Gespeicherte Tests können schnell wiederholt werden.

Webseiten möglichst live testen

Mit Hilfe dieser praktischen Cross-Browsertesting Tools kannst du dir die Arbeit also schon ganz schön erleichtern, auch wenn die Tools einen Live-Test natürlich nicht ganz ersetzen können. Daher habe ich immer möglichst viele Browser auf einem Test-Computer installiert. Außerdem versuche ich immer, die Programmierung schon während der Entwicklung in regelmäßigen Abständen zu überprüfen. Wenn man an einem responsive Webdesign arbeitet ist es ebenfalls sehr hilfreich, so viele Live-Tests auf verschiedenen Geräten wie möglich zu machen.

Ich habe mir inzwischen angewöhnt, ein Design erst einmal komplett in der Standardansicht fertig zu programmieren, bevor ich mich an die Anpassungen des responsive Webdesigns mit Hilfe von CSS3 Media Queries mache. Um das responsive Design dann zu testen, kannst du z.B. das kostenlose Online-Tool Screenfly nutzen. So kannst du dir deine Webseite schnell und übersichtlich in verschiedenen Größen anzeigen lassen.

Screenify ist sehr praktisch, um die Styles in den CSS3 Media Queries zu testen.

Um die Webseite aber wirklich zu überprüfen und so auch die Anzeige und Funktion von Formularen, Buttons, Navigationselementen oder Images testen zu können, solltest du deine Webseite aber zusätzlich unbedingt auf so vielen Geräten wie möglich anschauen und ausprobieren.

Natürlich kann nicht jeder die unterschiedlichsten mobilen Geräte fürs Testen zur Verfügung haben. Eventuell kann man auch Kollegen oder Bekannte bitten, sich die Seite einmal anzuschauen und über eventuelle Fehler zu berichten. Zusätzlich dazu habe ich mich z.B. auch schon des öfteren in einen Apple-Store oder in ein anderes Computergeschäft aufgemacht, um mir eine neue Webseite selbst auf möglichst vielen verschiedenen Geräten anschauen zu können.

Wie testet du deine neuen Webseiten-Projekte? Kennst du weitere praktische Tools und Angebote, um die Programmierung in verschiedenen Browsern oder auf verschiedenen Geräten möglichst gut zu testen? Über deine Erfahrungen und weitere Tipps freue ich mich sehr!

Tipps zum Weiterlesen

• Umfangreicher und ganz aktueller Überblick verschiedenster Services und Angebote für Cross-Browser Tests: Review Of Cross-Browser Testing Tools bei Smashing Magazine
• Interessante Umfrage bei Webdesigntuts+: Readers’ Poll: How Do You Cross-Browser Test?

Als erstes musst du dir bei Polldaddy.com ein Account einrichten. Diesen gibt es kostenlos, sofern du nicht mehr als 10 Fragen pro Umfrage stellen möchtest und dir ein Basisreport der Umfrageergebnisse ausreicht (dieser ist meiner Ansicht nach bereits sehr umfangreich). Für größere Umfragen gibt es auch zwei kostenpflichtige Profi-Accounts als Option.

1. Die Umfrage im Polldaddy-Account anlegen

Nachdem du dich bei Polldaddy angemeldet hast, kannst du deine erste Umfrage im Account erstellen. In deinem Dashboard findest du dazu die Option Create new… Poll. (Neben Umfragen gibt es übrigens auch noch die Möglichkeit Ratings, Quizzes oder Surveys anzulegen.)

Eine neue Umfrage im Polldaddy-Account anlegen.

Da Polldaddy nur in Englisch zur Verfügung steht, solltest du dir für deine Umfragen ein Language Pack anlegen. Dieses kannst du dann in den Poll Options beim Anlegen einer Umfrage auswählen.

Du kannst dir dein eigenes Language Pack für deutschsprachige Umfragen anlegen.

Auch das Styling der Umfrage kannst du in den »Poll-Options« mit Hilfe eines Custom Designs anpassen oder du wählst einen der vorbereiteten Styles aus.

2. Die Umfrage auf einer Webseite einfügen

Nachdem du die Umfrage erstellst hast, erhältst du in einem Popup-Fenster den Einbetten-Code für deine Umfrage. Alternativ kannst du deine bei Polldaddy erstellte Umfrage auch einfach direkt Twittern, bei Facebook posten oder auf deinem WordPress.com oder Posterous-Blog veröffentlichen.

3. Das WordPress-Plugin Polldaddy Polls & Ratings nutzen

Wenn du eine selbst gehosteten WordPress-Webseite hast, kannst du dir auch das bereits oben im Artikel erwähnte Plugin Polldaddy Polls & Ratings installieren, um deine Umfragen auf deinem Blog zu veröffentlichen.

Mit Hilfe des Plugins kannst du dann übrigens nicht nur deine bereits erstellten Umfragen verwalten und auf Artikeln, Seiten oder in deiner Blog-Sidebar einbinden, sondern du kannst auch direkt über den WordPress-Adminbereich neue Umfragen erstellen.

Eine neue Polldaddy-Umfrage kann auch direkt im WordPress-Adminbereich erstellt werden.

Über den Punkt Polls / All Polls kannst du dann den Einbetten-Code, den Shortcode oder eine Kurz-URL deiner Umfrage abfragen und diese entsprechend auf deinem Blog einsetzen.

4. Umfrageergebnisse auswerten

Für die Auswertung deiner Umfrage findest du sehr schöne Optionen direkt im Polldaddy-Account. Über das Dashboard deines Account kannst du übrigens auch leicht festlegen, wie lange du deine Umfrage laufen lassen möchtest. Ist eine Umfrage geschlossen, kannst du in der Auflistung unter Reports die Ergebnisse in einer ansprechenden Grafik einsehen (in den Profi-Accounts hast du hier auch noch weitere Optionen, z.B. die Analyse nach IP Adresse, Location oder eine Export-Funktion der Ergebnisse).

Die Umfrageergebnisse werden ansprechend aufbereitet. So kannst du sie nach Abschluss der Umfrage als Screenshot an deine Leser weitergeben.

Wie du siehst gibt es wirklich jede Menge Möglichkeiten, um mit Hilfe von Polldaddy Online-Umfragen zu erstellen. Eine Umfrage anzulegen und auf deiner Webseite einzubinden, nicht auch wirklich nicht sehr viel Zeit in Anspruch. Und wenn du vorhast öfters Umfragen auf deinem Blog durchzuführen, ist das WordPress-Plugin ebenfalls eine praktische Option.

Der einzige kleine Nachteil aus meiner Erfahrung ist, dass man erst ein eigenes Language Pack anlegen muss, um Umfragen auch deutschsprachig zu veröffentlichen. Außerdem musste ich noch ein paar kleinere CSS-Anpassungen vornehmen, um die Umfrage auch in unserem responsive Webseiten-Layout flexibel einzubinden. Dies war aber mit recht wenig Arbeitsaufwand erledigt.

Hast du ebenfalls Erfahrungen mit dem Polldaddy-Umfragen oder einen anderen Umfragen Tool/Plugin machen können? Über deine Erfahrungen und weitere Tipps freue ich mich sehr!

Mit dem WhatFont-Tool kannst du mit Hilfe eines Bookmarklets oder der Google Chrome Erweiterung super schnell herausfinden, welche Schriften auf einer Webseite genutzt werden. Wenn dir eine Schrift auf einer Webseite gefällt, klickst du einfach die Browser-Erweiterung an. Dann bewegst du deinen Mauspfeil über den entsprechenden Text und schon wird dir der Name der Schrift in einem kleinen Feld angezeigt. Klickst du den Text noch einmal an, erscheinen weitere Infos zur Schrift wie font-weight, font-style, font-size und line-height. Das Tool ist ein praktischer, kleiner Helfer für alle Webdesigner und Typo-Fans und erspart einem die aufwendigere Recherche nach Schriftarten mit einem Webdeveloper-Tool.

Um diese erste Projektphase möglichst effizient anzugehen, gibt es glücklicherweise etliche hilfreiche Tipps und Tools, mit denen du deine Arbeitsweise ganz leicht optimieren kannst.

1. Der Projekt-Fragebogen

Jedes Webdesign wird gestaltet, um einen bestimmten Zweck zu erfüllen. Diesen Zweck gilt es im ersten Schritt zu analysieren. Denn wenn man sich erst einmal Gedanken darüber gemacht hat, welche Anforderungen das Webdesign und Webseitenkonzept erfüllen muss, ist es meist schon sehr viel leichter ein passendes Konzept zu entwickeln.

Um die wichtigsten Fragen zum Projekt zu klären, ist es sehr hilfreich ein Projekt-Fragebogen vor Beginn der Arbeit an einem neuen Design zu beantworten. Hier sollten z.B. folgende Fragen beantwortet werden:

• Für welche Zielgruppe ist die Webseite?
  (z.B. für ein jüngeres Publikum, für ein älteres Publikum, für Computer-Fachleute, für Privatpersonen, für Partnerfirmen, für die eigenen Kunden, für potentielle, neue Kunden…)
• Welchen Zweck soll die Webseite erfüllen?
  (z.B. zur Vermittlung von Informationen, zum Verkauf eines Produkts, zur Präsentation des eigenen Angebots, als Portfolio der eigenen Arbeiten, zur reinen Unterhaltung, als persönliche Online-Plattform…)
• Wer sind die Mitbewerber? Gibt es bereits Webseiten mit einem ähnlichen Konzept?
• Welche Funktionen soll die Webseite haben?
  (z.B. einen Onlineshop, Blog, Portfolio, Bildergalerie, Forum, Newsletter-Abo…)
• Wer wird die Webseiten-Inhalte pflegen, aktualisieren? / Soll es ein Content Management System geben? (Wenn ja, welche Funktionen eines CMS werden benötigt?)

Natürlich sind dies nur einige Beispiele dafür, was in einem Projekt-Fragebogen alles geklärt werden kann bzw. sollte. Wenn du mit einem Kunden zusammenarbeitest solltest du allerdings auch darauf achten, dass der Fragebogen nicht zu lang ist und möglichst viele Beispiele enthält (so vermeidest du, dass dein Kunde mit den Fragen überfordert ist).

Weitere Tipps für die Erstellung eines Projekt-Fragebogens kannst du auch im Artikel »Hilfreiche Tipps und Tools für die Zusammenarbeit von Webdesignern und Kunden« nachlesen.

Ein solcher Fragebogen ist übrigens nicht nur bei Kundenprojekten sinnvoll. Auch für deine eigene Webseite oder dein neues Redesign solltest du wichtige Fragen vorab für dich klären, um unnötige Arbeit zu vermeiden.

2. Imageboard und erste Skizzen

Nachdem du die wichtigsten Fragen zum Projekt in einem Fragebogen festgehalten hast, bist du dir über den Zweck und die Ziele deines neuen Projekts bereits sehr viel klarer geworden.

Bei den meisten Kreativen beginnen an diesem Punkt bereits die ersten Ideen zu Farben, Layout, einer allgemeinen Stimmung und Atmosphäre des Designs herauszusprudeln. Um diese ersten Ideen und Stimmungen zu konkretisieren, kannst du ein Imageboard oder eine erste Konzeptskizze erstellen.

Auf einem Imageboard kannst du schnell und unkompliziert Ideen und Gedanken zu Layout, Farben, Inspirationsquellen etc. festhalten.

Auf einem Imageboard kannst du schnell erste Projekt-Ideen festhalten.

Diese Aufgabe macht jede Menge Spaß und da das Ergebnis ja keinen Schönheitspreis gewinnen muss, sondern lediglich der Sortierung deiner Inspirationen und Gedanken dient, nimmt dir diese Arbeit auch gleich die Hemmungen vor dem »leeren, weißen Blatt Papier«.

Ob du dein Imageboard in einem Grafikprogramm am Computer, als Collage von Hand oder in Form von Skizzen in einem Notizbuch umsetzt, ist deinen ganz eigenen Vorlieben überlassen. Wenn du in einem Team zusammenarbeitest, ist es aber auch in jedem Fall hilfreich, wenn du deine Skizzen online (z.B. über Google Text&Tabellen) zur Verfügung stellst.

Ein sehr inspirierenden Artikel zum Thema Handzeichnungen und Skizzen finde ich übrigens den Beitrag »Sketching: The Visual Thinking Power Tool« von Mike Rohde bei A List Apart.

3. Das Webseiten-Mockup

Bei der Erstellung von ersten Skizzen und einem Imageboard bekommt man bereits ein sehr gutes Gefühl für den Stil und die Atmosphäre, welche das Webdesign vermitteln soll. Um auch das Layout und die Verteilung der Inhalte zu konkretisieren, bevor es mit der Erstellung des Designs losgeht, hilft ein einfaches Webseiten-Mockup (Modell der Seitenaufteilung und der Anzahl/Verteilung der Seiten).

Dein Webseiten-Mockup kannst du entweder ebenfalls per Hand skizzieren oder in einem praktischen Mockup-Programm (z.B. Mockingbird) erstellen.

Die Benutzeroberfläche von Mockingbird.

In einem Mockup-Programm kannst du bereits die konkreten Maße deiner Webseiten-Elemente bestimmen und die einzelnen Seiten untereinander verlinken. Wenn dir die Arbeit mit einem Mockup-Programm zu aufwendig ist, kannst du auch das Zeichnen-Tool (unter Neu erstellen / Zeichnung) von Google Text&Tabellen nutzen.

Mockups mit Hilfe von Google Text+Tabellen anlegen.

Hier kannst du schnell einfache Skizzen in einem Online-Dokument anlegen und das Dokument dann leicht mit anderen teilen bzw. gemeinsam bearbeiten (mehr Infos zu Google Drawings kannst du auf dem Google Docs Blog nachlesen).

Weitere Tipps zur Projektplanung

Ausgestattet mit einem Projektfragebogen, ersten Skizzen, einem Imageboard und einem Webseiten-Mockup bist du gut vorbereitet, um mit der eigentlichen Arbeit an deinem neuen Webdesign (im Grafikprogramm oder direkt in HTML/CSS) zu beginnen.

Um auch während des weiteren Projektverlaufs nicht die Übersicht zu verlieren und keine Arbeit doppelt oder umsonst machen zu müssen, ist es auch noch hilfreich sich ein Gesamtkonzept für die Arbeit am Projekt zu erstellen. Hier kannst du die einzelnen Projektphasen notieren und dich so Schritt für Schritt voran arbeiten. Arbeitest du mit einem Team zusammen, ist ein Google Dokument oder ein Google Kalender auch hier wieder eine praktische und unkomplizierte Option.

In dieser Projektübersicht ist es auch sinnvoll, einen Zeitplan für die einzelnen Arbeitsschritte (Designphase, Überarbeitung, Programmierung, Browser-Tests etc.) zu notieren. So vermeidest du, dass einzelne Arbeitsschritte zu viel Zeit in Anspruch nehmen und du mit dem Zeitrahmen für das gesamte Projekt nicht mehr auskommst.

Welche Erfahrungen und Tricks nutzt du, um dir die ersten Arbeitsschritte an einem neuen Projekt zu erleichtern? Und welche Vorgehensweisen, Tools oder Programme verwendest du am liebsten, um erste Ideen-Skizzen, Mockups und Imageboards für ein neues Webdesign zu erstellen? Über deine Erfahrungsberichte und Tipps freue ich mich sehr!

Was ist eigentlich ein CSS-Reset?

Jeder der sich mit Webdesign und CSS auseinandersetzt, hat den Begriff CSS-Reset sicher schon einmal gehört oder nutzt bereits ein vorbereitetes CSS-Reset in seinen Stylesheets. Dennoch ist vielleicht vielen nicht gleich klar, wofür die Reset-Styles eigentlich benötigt werden.

Da Browser Webinhalte uneinheitlich darstellen, nutzt man die CSS-Reset Styles zu Beginn des Stylesheets, um die Werte von font-size, line-height, margin oder padding auf einen einheitlichen Wert zubringen.

Durch die Verwendung eines CSS-Resets sichert man sich also eine einheitliche Ausgangsansicht in allen Browsern, von der aus man dann mit der Umsetzung des eigenen Webseiten-Layouts beginnen kann.

Das CSS-Reset von Eric Meyer

Mit der Zeit haben sich bestimmte vorbereitete CSS-Reset Styles durchgesetzt. Eines der beliebtesten Dateien ist z.B. Eric Meyer’s CSS-Reset. Hier der CSS-Code der neustes Version:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

(Code-Quelle: meyerweb.com)

Eric Meyer empfiehlt es allerdings, seine CSS-Reset Styles nicht einfach nur in das eigene Stylesheet zu kopieren, sondern man soll die Styles viel mehr als Vorlage verwenden, und sie je nach Bedarf für das eigene Projekt anpassen.

Wenn du in deinem Webdesign-Layout z.B. einen Standard-Zeilenabstand von 1.4 planst, macht es Sinn diesen Wert auch gleich im CSS-Reset zu definieren, anstatt den Wert im Reset auf 1 zu lassen, nur um ihn gleich gleich wieder in den eigenen Styles mit 1.4 zu überschreiben.

In other words, this is a starting point, not a self-contained black box of no-touchiness.
– Eric Meyer

Weitere CSS-Reset Vorlagen

Natürlich gibt es nicht nur das CSS-Reset von Eric Meyer, sondern eine ganze Reihe weiterer CSS-Reset Vorlagen, wie zum Beispiel das ebenfalls sehr beliebte YUI 3 CSS Reset vom Yahoo Developer Network. Interessant ist vor allem die Integration moderner HTML5-Elemente ins Reset (diese sind ja übrigens auch in der neusten Version von Eric Meyers Reset bereits integriert).

Eine Erweiterung von Eric Meyer’s Reset ist das HTML5 Doctor Reset. In der Beschreibung zur überarbeiteten HTML5 Reset-Variante erklärt Richard Clark genau, welche Elemente und Styles er dem Reset hinzugefügt, und welche er entfernt hat.

Argumente gegen die Verwendung eines CSS-Resets

Allerdings hält nicht jeder Webentwickler die Verwendung von CSS-Resets überhaupt für sinnvoll. Es gibt seit langem schon eine Diskussion über die Notwendigkeit von Reset-Styles. Ein Argument gegen die Verwendung ist zum Beispiel, dass für das Web flexibel gestaltet werden muss, und daher nicht alle Browser die selben, pixelgenauen Ansichten eines Webdesigns generieren müssen.

Die Technik, erst einen Wert im CSS-Reset zu definieren und diesen dann gleich wieder mit den eigenen Styles zu überschreiben, scheint manchen Webentwicklern nicht sonderlich sinnvoll. Ein interessanter Artikel mit Argumenten gegen die Verwendung eines CSS-Resets ist auch Jonathan Snooks Artikel »No CSS Reset«.

Noch mehr Infos und Link-Tipps

Die Artikel »The History of CSS Resets«, »A Comprehensive Guide about CSS Resets« und »Should you reset your CSS?« bei Six Revisions bilden zusammen eine ausführliche Artikel-Serie zum Thema CSS-Reset.

Eine sehr nützliche Webseite, auf der du die unterschiedlichen Reset-Styles selbst testen kannst, ist der CSS:resetr. Hier kannst du verschiedene Inhaltstypen und CSS-Resets aus einer Liste auswählen, und dir in unterschiedlichen Browsern anschauen.

Was hältst du von der Verwendung eines CSS-Resets? Hast du weitere Tipps oder Artikel-Vorschläge, die zum Thema nützlich sind? Über deine Einschätzung und weitere Tipps freue ich mich sehr!

1. Die Server-Voraussetzungen überprüfen

Da dein Kunde bisher eventuell nur eine statische Webseite genutzt hat kann es sein, dass die Server-Voraussetzungen nicht für eine WordPress-Installationen ausreichen. Auch eine zu alte PHP-Version kann im Einsatz sein oder es kann vorkommen, dass ein WordPress-Plugin bei einem bestimmten Hosting-Anbieter einfach nicht funktionieren will (ich hatte diesen Fall einmal mit dem Contact 7 Kontaktformular-Plugin).

Um die Wahrscheinlichkeit für spätere, technische Probleme schon vor Projektbeginn zu reduzieren, solltest du deinen Kunden gleich zu Beginn über die Voraussetzungen für eine WordPress-Installation informieren. Auch sollte vorab geklärt sein, ob dein Kunde sich selbst um die Bedingungen kümmern wird, oder ob du diese Aufgabe auch für deinen Kunden übernehmen wirst.

Am einfachsten ist es natürlich, wenn es für das Projekt bisher noch keinen Webauftritt gibt. Du solltest deinen Kunden auf Anfrage einen Hosting-Anbieter deines Vertrauens nennen können und auch abwägen, welchen Hosting-Plan du für das geplante Projekt empfehlen kannst. Arbeitest du auch mit Kunden im Ausland zusammen, ist es wichtig, sich auch über Hosting-Anbieter im jeweiligen Land zu informieren.

Außerdem solltest du mit deinem Kunden besprechen, ob du als Webdesigner auch für die Installation von WordPress auf dem Server zuständig sein wirst, oder ob du nur die Einrichtung des individuellen WordPress-Themes übernimmst. Wenn du beim Projekt mit einem Systemadministrator deines Kunden zusammen arbeitest, ist es immer sinnvoll, vor Projektbeginn direkt mit diesem Kontakt aufzunehmen. Schließlich ist nicht jeder Systemadiministator auch gleichzeitig WordPress-Experte, und durch ein kurzes Gespräch können spätere Probleme oder Missverständnisse meist schnell geklärt werden.

2. Wer übernimmt spätere WordPress- und Plugin-Updates?

Der große Vorteil von einem System wie WordPress ist natürlich, dass Webseiteninhalte später leicht aktualisiert und neue Seiten oder Artikel hinzugefügt werden können. Dieser Vorteil bringt aber auch mit sich, dass sich ein so großes System, wie WordPress ständig weiterentwickelt und regelmäßige Updates von WordPress selbst und von verwendeten WordPress-Plugins anstehen.

Die Updates regelmäßig durchzuführen ist sehr wichtig. Ganz besonders auch, um die Sicherheit es Systems und die Funktionalität der Plugins gewährleisten zu können.
In der Regel erscheint alle 1-3 Monate ein WordPress-Update, Plugin-Updates gibt es häufiger. Durch die automatische Update-Funktion im WordPress-Admin ist das regelmäßige Updaten sehr viel leichter geworden. Doch auch beim automatischen Update ist es wichtig, vorab ein Backup aller Daten und der Datenbank vorzunehmen. Und das führt auch gleich zum nächsten Punkt, den du auf alle Fälle vor Projektbeginn mit deinem Kunden besprechen solltest – dem Backup-Plan.

3. Der Backup-Plan

Es gibt zwei Bereiche, die bei einer WordPress-Webseite gesichert werden müssen. Die Daten der WordPress-Installation und die Datenbank. Für beide Bereiche sollte ein regelmäßiger Backup-Plan erstellt werden. Da es jede Menge Möglichkeiten für einen Backup-Plan gibt, solltest du als erstes mit deinem Kunden besprechen, wieso ein Backup so wichtig ist, wie viel Zeit und Budget für das Backup investiert werden soll, und wer sich nach Projektende um das Backup kümmern wird.

Verschiedene Backup-Optionen habe ich bereits im Artikel »Backup-Plan für WordPress-Webseiten: Hilfreiche Tipps, Programme und Plugins« angesprochen. Die Firma Automattic der Wordress-Macher bietet mit Vaultpress außerdem eine neue, praktische All-in-One Lösung für Backups an. Vaultpress ist zwar noch in der Beta-Phase, dennoch können dort schon Pakete für das Komplett-Backup Tool in einer Basis-Version (15$ im Monat) und einer Premium-Variante (40$ im Monat) gebucht werden.

4. Wer wird die Seiteninhalte pflegen?

Neben dem sehr wichtigen Backup-Plan musst du außerdem mit deinem Kunden besprechen, wer nach Projektende die regelmäßige Pflege der Inhalte und das Einstellen neuer Seiten und Artikel übernehmen wird.

Wenn auch du diese Aufgabe übernimmst, ist es eventuell sinnvoll ein monatliches Support-Budget oder einen festen Stundenlohn für diese Arbeiten vorab zu vereinbaren.

5. Video-Anleitungen und Schulungen

Aus meiner Erfahrung kann auch eine kleine Schulung oder eine Serie von Video-Anleitungen sehr hilfreich sein, um einen Mitarbeiter mit dem WordPress-Adminbereich (Umgang mit Widgets, den individuellen Menüs oder dem Artikelbereich) vertraut zu machen und die Einpflege neuer Inhalte oder Bilder zu erklären. Auch hier solltest du den Bedarf für eine Einarbeitung und das benötigte Budget mit deinem Kunden vorab besprechen.

Hilfreiche Tipps für die Erstellung von Video-Screencasts findest du übrigens im Artikel »Tipps für Kundenprojekte: WordPress-Funktionen in kurzen Screencasts erklären«.

Programme für die Aufnahme von Screencasts sind z.B. Camtasia Studio (Profi-Programm, kostenpflichtig) oder Screenr (verknüpft mit Twitter, 5 Minuten Screencasts kostenlos) oder Jing (kostenfreies Screencast-Programm von Camtasia).

6. Die Sicherheit von WordPress optimieren

Da du für deinen Kunden natürlich eine möglichst sichere WordPress-Installation vorbereiten möchtest, solltest du auch das Thema Sicherheit mit deinem Kunden besprechen, und WordPress-Plugins zur Optimierung der Sicherheit einer WordPress-Installation empfehlen. Nützliches Plugins sind z.B. Secure WordPress oder WP Security Scan.

Wichtig ist auch, dass du und dein Kunde sichere Benutzernamen und Passwörter für die WordPress-Installation wählst, hierzu findest du im Artikel »WordPress 3.0: Die Sicherheit beginnt beim Anlegen eines Blogs« von Sergej Müller hilfreiche Tipps.

7. Die Suchmaschinenoptimierung

WordPress bietet jede Menge Möglichkeiten und praktische Plugin-Lösungen zur Suchmaschinenoptimierung einer Webseite. Selbstverständlich sollte bei der Programmierung des Themes schon auf eine suchmaschinenfreundliche Programmierung geachtet werden (z.B. durch die Nutzung von h1-h6-tags, einer korrekten Nutzung des title-tags etc.).

Darüber hinaus solltest du mit deinem Kunden besprechen, welche zusätzlichen Plugins zum Einsatz kommen sollen, und wie wichtig auch die regelmäßige Aktualisierung von Inhalten für eine gute Platzierung bei Google & Co ist. Hilfreiche Plugins für SEO sind u.a. All in One SEO PAck, wpSEO oder Google XML-Sitemaps. Weitere Plugin-Tipps findest du auch im Artikel »8 Excellent WordPress SEO Plugins« bei Six Revisions.

Wichtig!

Meiner Ansicht ist es ganz wichtig darauf zu achten, möglichst alle offenen Fragen vor Projektbeginn mit einem Kunden zu besprechen. Dabei solltest du immer bedenken, dass die meisten deiner Kunden wahrscheinlich keine Technik- oder Computerexperten sind, oftmals noch nicht mit einem Content Management System gearbeitet haben oder garnicht so genau nicht wissen, was ein Server oder eine Datenbank eigentlich ist.

Daher finde ich es ganz wichtig mit dem Kunden zu sprechen, und möglichst ohne allzu viele Fachausdrücke alle Fragen zum Thema WordPress, Content Management System, SEO, Backups etc. vor Projektbeginn zu klären.

Hast du noch mehr Tipps und Vorschläge, um diese Auflistung um weitere, wichtige Punkte zu ergänzen? Welche Erfahrungen hast du bereits mit WordPress bei Kundenprojekten gemacht?

Über deine Tipps und Erfahrungsberichte freue ich mich sehr!

I’ve come to the conclusion that a website’s design should begin where it’s going to live: in the browser.
Meagan Fischer, »Make your Mockup in Markup«

Außerdem stellt sich die Frage, ob diese Arbeitsweise nicht sogar viel effizienter ist, da man Änderungen wie Farben, Schriften oder Schriftgrößen im CSS ja viel schneller anpassen kann. Und bei einem Kundenprojekt kann man so schnell mehrere Design-Optionen direkt in der Browser-Ansicht präsentieren, ohne das gesamte Layout im Grafikprogramm umgestalten zu müssen.

Besonders Für Designer, die über das klassische Grafikdesign zum Webdesign gekommen sind (wie ich selbst), ist das Konzept im ersten Moment sicher etwas ungewohnt. Dazu kommt, dass man alte Gewohnheiten bekanntlich ja immer nur sehr schwer wieder los wird. Da ich aber ebenfalls der Meinung bin, dass die Webseiten-Gestaltung im Browser letztendlich zeitsparender, effizienter und moderner ist, habe ich hier praktische Tools für diese Arbeitsweise zusammen gestellt.

1. Hilfreiche CSS / HTML Vorlagen

Bei der Erstellung einer Webseite musst du auf keinen Fall jedes mal wieder komplett neu mit der Programmierung anfangen. Es gibt etlich praktischen HTML / CSS Vorlagen, die dir beim Projektbeginn weiterhelfen können.

HTML5 Boilerplate

Möchtest du deine Webseite in HTML5 umsetzen, kannst du den Code der HTML5 Boilerplate als Vorlage verwenden. Das praktische Kit für Webseiten-Entwickler bietet eine Code-Vorlage in HTML5, die auch kompatibel für ältere Browser ist und außerdem eine praktische Code-Vorlage für die Nutzung von CSS3 Media Queries anbietet.

Ein Auszug aus der Code-Vorlage von HTML5 Boilerplate.

Eine genaue Beschreibung (in deutscher Sprache) findest du auf der Webseite http://de.html5boilerplate.com.

1140px flexibles Grid mit CSS3 Media Queries

Das 1140px CSS-Grid ist eine interessante Option, wenn du deine Webseite mit CSS3 Media Queries für verschiedene Screen-Größen optimieren möchtest. Du kannst das Grid-System als HTML/CSS Vorlage nutzen, und darauf aufbauend mit deinem CSS-Styling beginnen.

Aus meiner eigenen Erfahrung ist des bei der Arbeit mit CSS3 Media Queries besonders sinnvoll, direkt im Browser zu gestalten. Denn durch die flexiblen Größen solltest du dein Design sowieso ständig im Browser testen und die Gestaltung eventuell anpassen.

Im Artikel »Das 1140px Grid-System: Mit CSS3 Media Queries für mobile Geräte optimiert« findest du außerdem eine ausführliche Beschreibung zum 1140er Grid.

Gridinator

Mit dem kleinen, praktischen Online-Tool Gridinator kannst du eigene CSS / HTML Vorlagen für deine Webdesigns erstellen.

Das Tool ist simpel aufgebaut, so dass du dir schnell ein Grid erstellen, und die CSS- und HTML-Vorlage dann anschließend als erste Grundlage für deine Programmierung verwenden kannst.

2. Browser-Tools für Grid-Layouts

Nachdem du die HTML/CSS Grundlage für deine Webseite erstellt hast, kannst du mit der Layout-Gestaltung im CSS beginnen. Praktische Helfer sind dabei Grid-Layout Tools und Addons, mit deren Hilfe du dein Design im Browser viel leichter testen kannst.

Grid-Fox

Grid-Fox ist ein praktisches Tool, um Webseiten-Layouts in Mozilla Firefox zu überprüfen.

Das Grid kannst du über die Addon-Einstellungen in Firefox anpassen.

Bookmark für das 960er Grid

Gestaltest du ein Webdesign im 960er Grid, kannst du das praktische Bookmark Gridder nutzen, um dein Layout in verschiedenen Browsern zu kontrollieren.

Grid-Bookmark von Allan Jardine

Ein eigenes, flexibles Grid-Bookmark für den Browser kannst du dir mit dem JavaScript-Bookmarklet Grid erstellen.

Slammer für Mac

Mit Slammer (das Tool kostet 20$) haben Mac-User die Möglichkeit eigene Grids aufzubauen, und als Overlay für Safari und andere Programme zu nutzen. Es gibt jede Menge Anpassungs-Möglichkeiten und Layout-Themes für das Programm.

3. Test und Entwicklung des Designs

Während du an der Gestaltung deines Webdesigns arbeitest, sind praktische Entwickler-Tools für deinen Browser unverzichtbar. so kannst du deine CSS-Styles und den HTML-Code im Browser schnell überprüfen.

Das Entwickler-Tool von Google Chrome

Mein derzeitiger Lieblings-Browser ist Google Chrome, daher nutze ich inzwischen eigentlich nur noch das praktische Chrome Entwickler-Tool (rechte Maustaste, »Element untersuchen« auswählen), um Code im Browser zu überprüfen.

Die Übersichtlichkeit gefällt mir bei der HTML/ CSS Entwicklung in Chrome besonders gut.

Firebug für Firefox und Chrome

Um deine Webseite in Firefox zu testen und den Code gegebenenfalls anzupassen, kannst du das beliebte Firebug-Addon nutzen. Firebug gibt es übrigens auch als Chrome-Erweiterung.

Web Developer-Addon für Firefox

Neben Firebug ist auch noch das Firefox-Addon Web Developer-Addon für Firefox hilfreich.

Wie ist deine Meinung?

Bist du ein großer Fan von Photoshop & Co oder kannst du dir durchaus vorstellen, auf Grafik- und Bildbearbeitungsprogramme bei der Gestaltung von Webseiten komplett zu verzichten? Welche Arbeitsweise ist deiner Meinung nach effizienter, und welche Vor- oder Nachteile siehst du in der Webseiten-Gestaltung direkt im Browser?

Über deine Einschätzung zum Thema, und deine weiteren Tipps und Tools für die Webdesign-Gestaltung im Browser würde ich mich sehr freuen!

1. Das 1140px Grid-System im Überblick

Die Demo-Seite des Grids.

• Das Layout ist 1140px breit, ideal Bildschirmgrößen von 1280px (auf kleineren Monitoren passt sich das Grid entsprechend an).
• 12 Spalten (Spaltenbreiten in Prozent, bei vollen 1140px sind die Spaltenzwischenräume ca. 40 Pixel breit), Layout kann so leicht in 6, 4, 3 oder 3 Spalten unterteilt werden.
• Flexibles Layout durch CSS3 Media Queries (optimiert für Table-PCs und Smartphones).
• Browser-Unterstützung: Chrome, Safari, Firefox, Internet Explorer 7 + 8, bedingt auch auf IE6 (die Bildschirm-Breite wird hier komplett ausgenutzt, da keine Unterstützung für CSS max-width).
• Bisher vom Entwickler getestet auf verschiedenen MacBooks, iMac, PC Laptop, älteren PC, Eee PC, iPad, iPhone 3G, iPhone 4, Android Smartphones, Samsung Galaxy Tab, BlackBerry und einem älterem Nokia.
• Bilder werden je nach Bildschirm-Ansicht flexibel kleiner skaliert.
• Inklusive Photoshop-Vorlage zum Herunterladen.
• Lizenz des Gridsystems: Creative Commens License, Attribution Share-Alike (3.0 Australia)

2. Grid herunterladen

Downloaden kannst du dir das Grid-System entweder direkt auf der Webseite cssgrid.net oder bei GitHub.

Für die Gestaltung des Layouts findest du unter Photoshop-Template auch noch eine praktische PSD-Vorlage zum Herunterladen auf der Webseite.

Die PSD-Vorlage für das 1140er Grids.

3. Und so funktioniert das 1140er Grid

Wenn du dir den .zip Ordner des Grids heruntergeladen hast, findest du die CSS-Dateien 1140.css, ie.css, layout.css, mobile.css, smallerscreen.css und typeimg.css in einem Extra-Ordner. In der beigefügten index.html Datei findest du den benötigten HTML-Code, der die Grundlage für deinen eigenen Code ist. Alle Dateien sind ausreichend und leicht verständlich dokumentiert, so dass eigentlich nichts schief gehen kann, sobald du dich ein wenig ist das System eingearbeitet hast.

In der Beispiel-Datei index.html werden innerhalb des head-tags alle notwendigen Stylesheets mit Hilfe von link-tags aufgerufen.

Beispiel-Code innerhalb des head-tags.

Außerdem findest du hier auch den für die Media Queries benötigten viewport meta-tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Im body-tag von index.html ist eine vierspaltige Vorlage des Grids vorbereitet.

Beispiel-Code innerhalb des body-tags.

Die wichtigsten CSS-Klassen und CSS-Dateien erklärt

Die CSS-Klasse .container wird im Grid genutzt, um den Content der Webseite einzubinden. Der container-Div enthält 20px padding rechts und links.

Die nächste CSS-Klasse .row legt fest, dass alle Elemente zentriert und in voller Breite (max-width: 1140px) angezeigt werden.

Dann kannst du die Spalten definieren, hierzu sind die 12 CSS-Klassen .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol .twelvecol vorbereitet.

Für den Div mit der letzten Spalte benötigst du außerdem noch die CSS-Klasse .last, um den margin-right Wert für diese Spalte auf 0px zurück zu setzen.

Alle Schriften-Styles (Font-Styles von body, h1, h2, h3, p, blockquote), Links (a, a:hover, a img) und img-Styles, kannst du in der typeimg.css Datei im CSS-Ordner anpassen.

Die eigenen Styles deines Themes kannst du dann in der layout.css Datei einfügen.

Wie gefällt dir das 1140px Grid-System? Hast du Fragen zur Verwendung des CSS-Rasters oder hast du bereits eigene Erfahrungen mit dem Grid machen können? Über dein Feedback, Fragen oder weitere Tipps freue ich mich sehr!

1. Die benutzerdefinierte Google-Suchmaschine für deinen Blog erstellen

Egal, ob du ein Plugin nutzen möchtest, oder den Code lieber selbst integrierst, im ersten Schritt musst du deine individuelle Suchmaschine erst einmal auf der Google-Seite www.google.de/cse/ erstellen.

Dazu benötigst du ein eigenes Google-Konto, indem du eingeloggt sein musst. Dann kannst du die Daten für deine Suchmaschine eingeben, und genau festlegen welche URLs oder Seiten mit aufgenommen werden sollen.

Wenn du keine Google-Adwords Werbung in den Suchergebnissen angezeigt haben möchtest, gibt es neben der kostenlosen Suchmaschinen-Variante auch noch die Option für ca. 100 US Dollar eine Premium-Suchmaschine einzurichten.

Unter Aussehen und Verhalten im Anpassungsmenü deiner neuen Suchmaschine solltest du jetzt die Option iframe wählen. Außerdem kannst du hier noch die Optik deiner Suchmaschine anpassen.

Jetzt kannst du deine Einstellungen speichern, und den Code für dein Suchfeld und die Ergebnisseite abrufen. Hier musst du auch noch bestimmen, auf welcher URL deine Suchergebnisse angezeigt werden sollen, und wo die Google-Werbung auf der Seite plaziert werden soll.

Deine eigene Suchmaschine ist jetzt fertig eingerichtet. Du kannst die von Google angezeigten Code-Schnipsel für die Sucheingabe und die Suchergebnisseite jetzt entweder mit Hilfe eines Plugins oder selbst in deine WordPress-Seite einfügen.

2. Code-Schnipsel selbst ins Theme integrieren

Um deine Google-Suchmaschine ohne ein Plugin auf deiner WordPress-Seite zu integrieren, solltest du als erstes den oberen Code für das Sucheingabe-Feld kopieren, und diesen dann innerhalb der header.php Datei oder der sidebar.php Datei platzieren.

Wenn du Sidebar-Widgets nutzt, kannst du den Code auch über ein einfaches Text-Widget in dein Theme einfügen.

Als nächstes musst du noch die Suchergebnisseite einrichten. Dazu erstellst du eine neue Seite in WordPress mit dem Namen, den du zuvor in den URL-Optionen deiner Google-Suchmaschine eingetragen hast (z.B. http://www.deinedomain.de/suchergebnisse/).

Hier fügst du den zweiten Code-Schnipsel für Suchergebnisse von der Google-Seite ein.

Wenn du möchtest, kannst du noch die Breite deines iframes bestimmen, indem du den Wert googleSearchFrameWidth anpasst.

Mit Hilfe des CSS-ID #cse-search-results iframe kannst du den iframe der Suchergebnisse in deinem Stylesheet noch weiter anpassen.

Die benutzerdefinierte Google-Suche ist jetzt für deinen Blog einsatzbereit.

Das Suchfeld der Google-Suchmaschine ist mit Hilfe eines Widgets eingefügt.

So sieht die Ergebnisseite in der Standard-Ansicht der Google-Suche aus.

3. Das Google Custom Search for WordPress-Plugin nutzen

Möchtest du die Code-Schnipsel nicht selbst in deine Seite einfügen, kannst du auch das praktische WordPress-Plugin »Google Custom Search« nutzen.

In den Plugin-Einstellungen kannst du die Breite der Suchergebnisse angeben, einen Abstand mit Margins setzen und anschließend noch die beiden Code-Schnipsel für »Search Box« und »Search Results« in die entsprechenden Felder eintragen.

Die Google Suche wird so automatisch in deine WordPress-Seite integriert.

Wie gefällt dir die benutzerdefinierte Google-Suche? Hast du bereits Erfahrungen im Vergleich mit der Standard-Suche in WordPress sammeln können oder kennst du weitere Tipps, um die Google-Suche in WordPress anzupassen?

Über dein Feedback, deine Fragen und Tipps freue ich mich sehr!

Es gibt verschiedene Konzepte und Anbieter im Netz, um kreative Arbeiten online zu verkaufen und auch produzieren zu lassen.

1. Shop-Systeme für Kreative

Entweder du erstellst deine Produkte selbst in kleiner Auflage und verkaufst diese dann über ein reines Shop-System. Diesen Shop kannst du entweder auf deiner eigenen Webseite integrieren oder du richtest dir deinen Shop auf einer Seite des Anbieters ein. Bei dieser Lösung musst du allerdings auch den Versand deiner Produkte selbst übernehmen.

• die Produkte müssen selbst erstellt werden (z.B. Handarbeiten, Kunstwerke, Kleidung)
• du bist selbst für Versand und eventuelle Reklamationen verantwortlich

Big Cartel

Big Cartel ist eine schlicht gestaltete, einfache Shop-Software für Künstler, die selbst erstellte Produkte in kleinen Auflagen verkaufen möchten. Es gibt eine kleine kostenlose Variante des Shop-Systems mit maximal 5 Produkten und weitere Premium-Lösungen, wenn du mehr Produkte und mehr als ein Foto zu deinen Produkten einstellen möchtest. Deinen Big Cartel Shop kannst du dann auf deiner eigenen Webseite oder deinem Blog integrieren.

Zur Inspiration findest du auf dem Blog von Big Cartel jede Menge Shop-Beispiele und Erfolgsgeschichten.

Ein schönes Beispiel eines Big Cartel-Shops ist der auf dem Simplebits-Blog integrierte, kleiner Shop für T-Shirts und Drucke.

Ein kleiner Online-Shop bei shop.simplebits.com.

Etsy

Eine riesige Shop-Plattform für kreative Arbeiten, Handarbeiten und Designs ist Etsy. Alle angebotenen Produkte sind handmade. Die Produktion, sowie den Versand deiner Waren musst du bei Etsy selbst übernehmen. Der Anbieter berechnet dir pro eingestelltem Produkt in deinem Etsy-Shop 20 US Cent und je verkauftem Produkt einen weiteren prozentualen Anteil (hier weitere Infos zu den Preisen bei Etsy).

Hier kannst du genau nachlesen, wie die Etsy Shop-Plattform funktioniert.

2. Eigener Onlineshop, Druck und Versand durch einen Anbieter geregelt

Wenn du keine Möglichkeit hast deine Produkte selbst zu erstellen oder der finanzielle Aufwand der Produktionskosten zu groß ist, gibt es auch die Möglichkeit, die Produktion (z.B. den T-Shirt-Druck) und den Versand über einen Shop-Anbieter laufen zu lassen. Du erstellst also lediglich die Grafiken und bestimmst, auf welchen Produkten deine Werke gedruckt werden sollen. Dein Produkt wird dann jeweils auf Bestellung gedruckt (diese Vorgehensweise nennt sich auch „Print on Demand“).

• Produktion und Versand werden vom Anbieter übernommen
• Druck erst auf Bestellung

Spreadshirt

Bei Spreadshirt kannst du dir einen kostenlosen T-Shirt- und Klamotten-Shop erstellen und die Produkte mit deinen Motiven bedrucken lassen (es gibt auch einen Premium-Shopvariante gegen Gebühr).

Du kannst deine Motive auf T-Shirts, Pullis, Taschen oder Kappis drucken lassen und deinen Shop auch per iframe auf deiner eigenen Webseite integrieren. Die Qualität der Produkte und Drucke sind bei Spreadshirt sehr hoch, und es gibt auch hochwertige Marken-Shirts (z.B. von American Apparel und Bioshirts zur Auswahl). Ein weiterer Vorteil von Spreadshirt ist, dass die Produktion der Shirts und der Versand in Deutschland ist.

Ein besonders kreatives Beispiel für einen Spreadshirt-Shop ist z.B. der T-Shirt Shop Cute Monstr.

CafePress

CafePress ist ein ähnlicher Anbieter wie Spreadshirt. Die Auswahl an Produkten ist riesig, du kannst z.B. Kleidung, Karten, Kappis, Kalender und Karten, SIGG Trinkflaschen oder Yogamatten individuell bedrucken lassen. Hier findest du eine Übersicht über alle Produkte.

Auch bei CafePress kannst du dir einen eigenen Shop erstellen (es gibt eine kostenlose und weitere Premium-Shopvarianten) und diesen bei Bedarf auf deiner eigenen Webseite integrieren.

Ein Nachteil von CafePress ist allerdings, dass es die Webseite bisher nicht auf Deutsch gibt, und der Versand deiner Produkte über die USA läuft.

zazzle.de

Noch ein Anbieter, bei dem du deinen eigenen Shop mit deinen Motiven auf Kleidung, Schuhen, Grußkarten, Schlüsselanhängern, iPhone- oder iPad-Hüllen einrichten kannst, ist Zazzle. Zazzle hat auch eine deutschsprachige Webseite und die Einrichtung des Shops ist recht übersichtlich. Eine Übersicht über alle Produkte im Angebot kannst du dir auf der Zazzle-Webseite anschauen.

Weitere interessante Artikel zum Thema T-Shirt Shops

Wenn du von der Idee eines eigenen Shirtshops begeistert bist, findest du im Artikel „Showcase of Online-Shirt Stores“ jede Menge Inspirationen für die Umsetzung deines Shops.

Da die Erstellung eines T-Shirt Designs ganz eigene Herausforderungen bietet, kannst du dich im Artikel „The Ultimate Round Up of T-Shirt Design Tutorials“ über Tutorials und Anleitungen zum Thema informieren.

3. T-Shirt Designwettbewerbe

Wenn du nicht gleich einen eigenen Shop erstellen möchtest, aber ab und zu einfach Spaß daran hast ganz freie, kreative Grafiken oder Zeichnungen zu erstellen, kannst du auch bei einem der beliebten T-Shirt Designwettbewerbe mitmachen. Hier kannst du deinen T-Shirt Entwurf kostenlos einstellen. Dein Entwurf wird dann von den Nutzern der Plattform bewertet und die am besten bewerteten Designs werden dann gedruckt. Wird dein Entwurf ausgewählt, erhältst du einen entsprechenden Geldpreis. Diese Option ist sicherlich mehr aus Spaß an der Sache zu sehen, aber auch eine tolle Möglichkeit sich kreativ auszutoben und Inspirationen durch die Entwürfe der anderen Teilnehmer zu bekommen.

• aus Spaß an kreativen Grafiken und freien Entwürfen
• besonders geeignet, wenn du keinen eigenen Shop erstellen möchtest

DesignbyHümans

DesignbyHümens ist eine der beliebtesten Online T-Shirt Design-Wettbewerbe. Jeden Tag wird ein neues T-Shirt für den Druck ausgewählt und mit einem Preis gekürt (hier findest du mehr Infos zu den Wettbewerbsregeln und Preisen).

Du kannst dein Entwurf kostenlos auf der Webseite einreichen, und zur Bewertung durch die Community freigeben. Neben den täglichen „Shirt of the Day“ gibt es auch spezielle Wettbewerbe (z.B. für Band-T-Shirts) an denen du dich beteiligen kannst.

Threadless

Threadless funktioniert ähnlich wie DesignbyHümans, auch hier kannst du deinen T-Shirt Entwurf für den Wettbewerb einreichen und bewerten lassen.

Neben T-Shirt Designs kannst du auch einen kreativen Slogan für T-Shirts einreichen oder ein lustiges Foto, mit einem Threadless-Shirt. Eine Übersicht über die Bedingungen und Preise des Wettbewerbs findest du hier auf der Threadless-Webseite.

Weitere Infos gibt es auch noch auf der deutschspreachigen Version der Threadless-Webseite.

4. Eigene Bücher, Fotobücher, Kalender, CDs oder DVDs erstellen und verkaufen

Ähnlich, wie bei den T-Shirt Shops (Spreadshirt, CafePress etc.) gibt es auch Anbieter, die sich auf den Druck und den Verkauf von Büchern, Kalendern, CDs und DVDs spezialisiert haben. So kannst du z.B. dein eigenes Fotobuch oder Comic erstellen und drucken lassen.

Blurb

Auf der Plattform Blurb kannst du tolle Bücher (z.B. Fotobücher, Portfolios, Hochzeitsbücher, Reisedokumentationen oder Comics) erstellen. Es gibt verschiedene Buchgrößen und Materialien zur Auswahl. Hier findest du eine Übersicht.

Neben der Präsentation auf der Webseite kannst du dein Buch z.B. auch über das Bookshow-Tool auf deinem Blog oder über Facebook promoten.

Lulu

Ein weiterer Anbieter, der Bücher und Fotobücher, aber auch Kalender, Ebooks, CDs und DVDs anbietet ist Lulu. Die Webseite gibt es auch auf Deutsch. Hier findest du eine Übersicht über die bei Lulu angebotenen Produkte.

Weitere Anbieter für Erstellung deines eigenen Buches sind z.B. BoD (Books on Demand) und XinXii.

Wie gefallen dir die Optionen zur Herstellung und zum Verkauf kreativer Arbeiten? Hast du bereits eigene Erfahrungen mit einer der Shop-Lösungen gemacht oder kennst du weitere Möglichkeiten, eigene kreative Werke online zu verkaufen? Über dein Feedback und weitere Tipps freue ich mich sehr!