Wenn du das Bild anklickst, kannst du dir ein größeres Vorschaubild der Dateivorlage anschauen.

So musst du dir die Maße nicht mühselig jedes mal neu anlegen, sondern kannst deine Layout-Blöcke einfach in die Datei einfügen und dein responsive Design testen.

Anwendungsbeispiel

Hier ein Beispiel, wie du mit der Vorlage arbeiten kannst (grobe Layout-Skizze für die iPad-Ansicht eines Designs):

Die Arbeits-Vorlage downloaden:
Screen Resolution Worksheet (.zip, 470KB)

Ich hoffe, dir kann diese kleine Freebie-Datei bei der Arbeit an deinen eigenen Webdesigns weiterhelfen. Falls du findest, dass eine bestimmte Auflösung noch unbedingt mit in der Vorlage aufgenommen werden sollte, schreibe mir deinen Vorschlag doch einfach in einem Kommentar. Ich freue mich auf dein Feedback!

Alle Bilder sind in kleinen Formaten als JPGs vorbereitet, so dass du sie mit CSS »background repeat« einfach wiederholend kacheln kannst. Hier eine Gesamtübersicht der Hintergründe.

Hintergrundbilder in der Übersicht

Alle Wallpaper in der Übersicht

Die Wallpaper sind in verschiedenen Größen vorbereitet. Der Tiername (weißer Text) ist nur hier auf der Übersicht vorhanden.

Wallpaper downloaden

• Chinesische Tierkreiszeichen Wallpaper für Android (980x800px, .zip-Ordner)
• Chinesische Tierkreiszeichen Wallpaper für iPhone4 (640x960px, .zip-Ordner)
• Chinesische Tierkreiszeichen Wallpaper für iPhone3G(S) (320x480px, .zip-Ordner)

Finde das richtige Wallpaper für dich

Falls du noch nicht weisst, welches Tier du im chinesischen Horoskop bist, findest du hier eine Auflistung, welches Geburtsjahr die Tiere jeweils vertreten.

• Ratte: 1912, 1924, 1936, 1948, 1960, 1972, 1984, 1996, 2008
• Büffel: 1913, 1925, 1937, 1949, 1961, 1973, 1985, 1997, 2009
• Affe: 1920, 1932, 1944, 1956, 1968, 1980, 1992, 2004
• Tiger: 1914, 1926, 1938, 1950, 1962, 1974, 1986, 1998, 2010
• Hase: 1915, 1927, 1939, 1951, 1963, 1975, 1987, 1999, 2011
• Hund: 1922, 1934, 1946, 1958, 1970, 1982, 1994, 2006
• Drachen: 1916, 1928, 1940, 1952, 1964, 1976, 1988, 2000, 2012
• Schlange: 1917, 1929, 1941, 1953, 1965, 1977, 1989, 2001
• Hahn: 1921, 1933, 1945, 1957, 1969, 1981, 1993, 2005
• Pferd: 1918, 1930, 1942, 1954, 1966, 1978, 1990, 2002
• Ziege: 1919, 1931, 1943, 1955, 1967, 1979, 1991, 2003
• Schwein: 1923, 1935, 1947, 1959, 1971, 1983, 1995, 2007

Ich hoffe dir gefällt diese kleine Wallpaper-Serie. Wenn du Ideen oder Vorschläge für weitere Wallpaper-Freebies hast, sag mir doch einfach bescheid, ich freue mich über dein Feedback :-)

Icons in der Vorschau

Die Icons sind als Vektor-Datei und als PNGs in zwei verschiedenen Größen vorbereitet.

Freebie Icon Set downloaden:
Post Format Icons (eps+png, .zip 283KB)
Ich hoffe dir gefallen die Icons und du kannst sie für dein nächstes Blog-Design im Tumblr-Style gut gebrauchen. Über dein Feedback oder deine Ideen für weitere Icon Sets freue ich mich sehr!

Du kannst dir die Wallpaper herunterladen, indem du auf das jeweilige Vorschaubild klickst.

Third Floor

Letterbox

Coffeebot

Capitol

Colorfall

Spring Spring

Wau Wau

Zeverest

Ich hoffe du kannst die Wallpaper als Hintergrundbild für deinen Monitor gut gebrauchen. Über dein Feedback oder deine Vorschläge für weitere Motive freue ich mich sehr!

Vorschau des Fragebogens

Der Fragebogen ist drei Seiten lang und bietet ausreichend Platz für dein eigenes Logo und deine Kontaktdetails. In der EPS-Version kannst du die Fragen auch noch individuell für deine eigenen Projekte anpassen.

Projekt-Fragebogen downloaden

Du kannst dir den Fragebogen entweder als PDF-Datei (hier ist der Platz für dein Logo und deine Kontaktdaten freigehalten) oder zur individuellen Bearbeitung als Vektor EPS-Dateien herunterladen.

Projekt-Fragebogen (PDF-Datei) Projekt-Fragebogen (.zip, EPS-Datei)

Ich hoffe du kannst die Vorlage des Projekt-Fragebogen gut gebrauchen. Hast du Anmerkungen oder Verbesserungsvorschläge für den Fragebogen? Ich freue mich über dein Feedback!

Die to-do Liste zur WordPress-Theme Entwicklung

Die erste Seite der to-do Liste für WordPress-Themes

• Vorschau
  .pdf-Datei, 2,14 MB
• Download
  .zip-Datei, 1,98 MB

Wie gefällt dir die WordPress-Theme to-do Liste zum Ausdrucken? Hast du weitere Tipps oder Vorschläge, was auf der Liste unbedingt beinhaltet sein sollte oder kennst du weitere Links, die zum Thema Theme-Programmierung hilfreich sind? Über dein Feedback und deine Tipps freue ich mich sehr!

1. Die Freebie Illustration für deinen Wartungsmodus

Hier kannst du dir eine größere eine Screenshot-Ansicht der Freebie-Illustration anschauen.

2. Das Freebie-Image mit dem WP-Maintenance Mode Plugin nutzen

Mit dem WP Maintenance Mode-Plugin von Frank Bültge hast du die Möglichkeit weiter an deinem WordPress-Theme zu arbeiten, während andere Besucher die Wartungsmodus-Seite angezeigt bekommen. Frank hat eine tolle Beschreibung zu seinem Plugin beigefügt, wie du dein eigenes Image und CSS-Styles für die Wartungsmodus-Seite verwenden kannst.

Um das Freebie-Image zusammen mit dem WP Maintenance Plugin nutzen zu können, hat Ellen die entsprechenden Images und CSS-Styles ebenfalls für den Download vorbereitet.

Um das Freebie zu verwenden, kannst du den Ordner auf deinen Server hochladen. Dann stellst du in der Plugin-Liste unter WP Maintenance Mode / Einstellungen bei Theme: »Eigenes Design« ein, und bei »Eigene Design URL:« gibst du den den Link zum CSS-Stylesheets »maintenance-css.css« an.

In den Plugin-Einstellungen kannst du dein eigenes Design aufrufen.

Achte dabei darauf, dass du den Images-Ordner nicht verschiebst, da du sonst auch die Pfade in der CSS-Datei anpassen müsstest. Nachdem du alle Plugin-Einstellungen gespeichert und den Wartungsmodus aktiviert hast, kannst das neue Bild sehen (sobald du aus WordPress ausgeloggt bist).

Artikel-Update

Frank Bültge hat unser Image inzwischen direkt in sein WP Maintenance Plugin eingebaut. Daher kannst du jetzt einfach das Theme »Chemistry« auswählen, um das Freebie zusammen mit dem Plugin zu verwenden. Hast du ein eigenes Wartungs-Modus Theme erstellt, gilt die Beschreibung Absatz 2 natürlich weiterhin.

3. Hier geht’s zum Freebie-Download

• Freebie Images
  en +de-Version, .pngs
• Images + CSS
  für die Plugin-Lösung
• Reagenzglas Icon
  plain .eps File, 1,67 MB

Wie gefällt dir das Wartungsmodus Freebie-Image? Findest du es sinnvoll, eine Nachricht für den Wartungsmodus einer Webseite anzuzeigen, und welche Infos findest du dabei am wichtigsten? Über dein Feedback und deine Tipps freue ich mich sehr!

1. Das 404 Monster-Klassenzimmer

Mit dieser lustigen Monster-Illustration kannst du deine Besucher bei Laune halten :-)

1. Die Skizzen-Vorlage

Mit dieser schnellen Skizze habe ich die Idee für die 404-Schulklasse entwickelt.

404 Fehlerseiten-Illustration downloaden

Du kannst dir die Illustration als transparentes PNG für deine eigene Webseite herunterladen. Ich habe 3 verschiedene Größen in den ZIP-Ordner vorbereitet (850px, 600px und 450px breit). So hast du genug Optionen, die Illustration in der passenden Größe auf auf deiner 404-Seite einzubinden. Du kannst dir die Elmastudio 404-Fehlerseite als Beispiel anschauen.

• Download PNG
  .zip, 820 KB
• Download PNG
  English Version, .zip 806 KB

2. Nützliche Tipps für die 404-Fehlerseite

Neben einer Illustration auf der 404-Fehlerseite, kannst du deinen Lesern weitere Tipps geben, wie sie auf die passende Info auf deiner Seite finden können. Hier einige Inspirationen:

1. Informiere deine Besucher, in einem kurzen Text, warum es zu einem kaputten Link kommen kann.
2. Integriere eine Such-Funktion.
3. Behalte das Layout deiner Seite bei (Header, Navi, Sidebar etc.), so dass der Besucher sich wie gewohnt weiter navigieren kann.
4. Biete einen Link zum Kontaktformular an, falls ein Besucher dich direkt kontaktieren möchte.
5. Integriere einen Link zur Startseite oder zum Archiv deiner Webseite.
6. Biete deinem Besucher alternativen Lesestoff, indem du z.B. eine Auflistung der neusten Blog-Artikel einbindest.
7. Achte jedoch darauf, dass deine 404-Fehlerseite nicht zu viele Links und Infos enthält, und dadurch unübersichtlich wirkt.
8. Bring deine Besucher mit Humor zum schmunzeln, so dass sie nicht zu enttäuscht oder verärgert über den kaputten Link sind.

3. Die 404-Fehlerseite in WordPress

In den meisten Fällen enthält ein WordPress-Theme eine 404.php Datei. In dieser Theme-Datei kannst du deine 404-Seite anpassen. Um die Freebie-Illustration auf der 404-Seite zu integrieren, kannst du z.B. folgenden Code innerhalb des Content-DIVs einfügen.

<div class="error-404">
	<img src="IMAGE URL" alt="404 Error" width="850" height="700" />
</div>
<!--error page illustration-->

Eine weitere hilfreiche Option (falls nicht bereits in deinem Theme integriert) ist es, die Suche zu integrieren. Dazu kannst du folgenden Code in die 404.php Datei einfügen:

<p>Schau doch einmal in der Suche, ob du die passende Information finden kannst.</p>
<?php get_search_form(); ?>

Eine ausführliche Dokumentation zur Erstellung und Anpassung der 404-Fehlerseite in WordPress findest du im WordPress Codex.

4. Jede Menge kreative 404-Inspirationen

Es gibt zahlreiche Blogs und Webseiten, die sich mit der individuellen Gestaltung ihrer 404 Error Page sehr viel Mühe gegeben haben. Dort findest du tolle Inspirationen für deine eigene 404-Fehlerseite. Außerdem kannst du dir anschauen, welche Informationen und Links diese Webseiten ihren Besuchern im Falle eines kaputten Links geben.

Über 50 schöne Beispiele findest du z.B. im Artikel »54 Cool Examples of Custom Error Pages« von Dzine-Blog.

Ebenfalls kreative Beispiele bietet der Artikel »Beautiful and Useful 404 Error Pages for Inspiration« bei Six Revisions.

Ich hoffe, dir gefällt die 404 Monster-Illustration, und du findest die Tipps und Tricks zum Thema 404-Fehlerseiten ebenfalls hilfreich. Über dein Feedback und weitere Tipps freue ich mich sehr!

Du kannst dir die Icons als transparente PNG’s in zwei verschiedenen Größen oder als AI-Illustrator-Datei (Version CS4) herunterladen. Wir hoffen dir gefallen die Icons und du kannst sie gut gebrauchen, um deine nächste selbst gebastelte Geburtstags-Karte zu verzieren.

Detailansicht der Icons

Hier geht’s zum Download

• Download PNG
  .zip, 441 KB
• Download Vector
  .zip, 3,05 MB

Wir freuen uns schön auf ein weiteres, gemeinsames Blog-Jahr mit jeder Menge neuen, spannenden Artikeln :-) Über dein Feedback, Verbesserungsvorschläge und Tipps für unseren Blog würden wir uns sehr freuen!

Ellen, Manuel & Kubi :-)