Content-Strategie: Welche Texte kommen auf die Webseite?

Alle warten darauf, dass die neue Webseite endlich online geht. Das Web-Team arbeitet schließlich schon eine ganze Weile daran. Momentan diskutiert das Team über die Frage: Welche Inhalte kommen rein in die Webseite und welche bleiben draussen?

Diese Frage hat es in sich. Denn über nichts kann man sich schöner in die Haare kriegen.
Hier hilft ein Blick auf die drei Leitfragen der Content-Strategie:

  1. Mit wem wollen Sie ins Gespräch kommen?
  2. Welche Botschaft möchten Sie vermitteln, was wollen Sie [als Unternehmen] erreichen?
  3. Mit welchen Fragen kommen die Besucher auf Ihre Seite?

Aus diesen Leitfragen lassen sich objektive Kriterien zur Bewertung der Inhalte ableiten. Jeder Text, jedes Bild, Video usw. kann anhand dieser Kriterien auf seine Verwendbarkeit abgeklopft und eingeordnet werden.

  1. Welche Nutzergruppe spricht Text A an?
  2. Welche Botschaft vermittelt Text B?
  3. Welche Fragen der Besucher beantwortet Text C?

Weiterlesen →

Inhalte in WordPress über Kategorien organisieren

Inzwischen laufen ein Viertel aller Webseiten da draussen unter WordPress. Aber wie tickt WordPress? Wie werden Inhalte in WordPress organisiert?

WordPress funktioniert ein bisschen anders als Vieles, das man so aus dem Alltag kennt. Nehmen wir zum Beispiel ein Word-Dokument. Es besteht in der Regel aus mehreren Seiten, Überschriften gliedern den Text. Wenn das Dokument etwas umfangreicher ist, gibt es noch ein Inhaltsverzeichnis.

Linear ist gleich statisch

Ein Word-Dokument funktioniert nach einem linearen Prinzip: Eins nach dem anderen.

Auch eine Webseite könnte man so aufbauen: Man beschreibt ein paar Seiten und verteilt Überschriften. Unser Inhaltsverzeichnis ist die Navigation.

Der Haken dabei: Es ist nicht sonderlich dynamisch.
Weiterlesen →

Webdesign: Statisch, adaptive oder responsive?

In diesem Artikel möchte ich erklären, was der Unterschied ist zwischen einer statischen und einer responsiv programmierten Webseite. Ich habe dazu ein paar kleine Animationen gebastelt. (Ich wollte schon immer mal was mit animierten Gifs machen.)

Im Responsive Design wird das Layout der Webseite per CSS so programmiert, dass es sich automatisch allen möglichen Bildschirmgrößen anpasst. Aber was bedeutet das konkret oder besser gesagt:

Wie muss ich mir das vorstellen?

1. Das klassische, statische Layout

Nehmen für den Anfang den Fall einer Webseite, die nicht im Responsive Design programmiert ist. Alle Inhalte haben feste Breiten. Wird der Bildschirm kleiner, bleiben die Elemente unverändert.

view Klick aufs Bild startet die Animation

Weiterlesen →

Responsive Design ist schön, macht aber viel Arbeit

Responsive Webdesign ist heute State of the Art im Webdesign. Alle Kunden wollen eine Webseite, die auch auf mobilen Geräten gut funktioniert. Das stellt uns Designer vor neue Herausforderungen.

Beim Entwerfen des Designs für eine Webseite beginnt man in der Regel mit der Desktopansicht. Ich mache das jedenfalls so, auch wenn der Code später „mobile first“ gebaut wird. Die Desktopansicht ist ein guter Einstieg und man bekommt schnell ein Gefühl für die Gestaltung.

Dann wäre da noch die Frage
„Wie sieht das Design auf einem kleinen Bildschirm aus?“

illu-rwd-2-frei

„Auf dem Tablet wird dann alles irgendwie schmäler.“

Okay. Aber was passiert, wenn die Spalten so schmal werden, dass man den Text nicht mehr lesen kann? Und kann man dieses Bild da noch erkennen, wenn es nur noch 30×50 Pixel groß ist? Und wie soll man diesen winzig kleinen Link mit dem Finger anklicken?

Es hilft nichts. Damit die Seite auch auf kleinen Bildschirmen lesbar und bedienbar muss man verschiedene Szenarien durchspielen.
Weiterlesen →

WordPress absichern: 5 Goldene Regeln

Hacker nehmen gerne WordPress-Installationen unter Beschuss. Das liegt aber nicht daran, dass WordPress besonders unsicher ist. der Grund ist, dass WordPress so weit verbreitet ist. WordPress-Installationen sind also rein von der Masse her ein lohnendes Ziel.

Ein weiterer Grund ist, dass WordPress häufig von Leuten installiert wird, die sich nicht so gut auskennen. Sie sind sich nicht klar darüber, dass ein Redaktionssystem nichts ist, dass man einmal installiert und dann vergessen kann. Das System braucht Aufmerksamkeit, man muss es pflegen. Und man sollte bei Installieren ein paar Regeln beachten.

Weiterlesen →

Icon Font oder SVG?

Es gibt immer wieder Diskussionen darüber, ob man kleine Symbole auf einer Webseite über einen Icon-Font oder besser über SVG-Grafiken einbinden sollte.

Icon-Fonts werden deshalb mit SVG-Grafiken auf eine Stufe gestellt, weil SVG ein Vektorformat ist und man diese Grafiken über CSS einfärben kann. Das kann man mit „normalen“ Pixelbildern (PNG, JPEG) nicht machen. Hier braucht man für jede Farbe ein eigenes Bild.

Bei der Entscheidung für oder gegen Icons-Fonts gibt einige Vor- und Nachteile abzuwägen. Ich fasse mal die Wichtigsten zusammen:

Nachteile Icon-Fonts

  • Opera Mini kann keine Icon-Fonts darstellen
    Opera Mini hat einen sehr hohen Marktanteil in Regionen, die keine gute Internet-Infrastruktur haben (Asien, Afrika). Seiten laden schneller, weil Opera Mini „überflüssige“ Daten ausblendet. Icon-Fonts, die über @font-face eingebunden sind, findet Opera Mini überflüssig.
  • Manche Browser (Chrome, Firefox) in manchen Versionen haben Rendering-Probleme.
    Das heisst, die Symbole können unscharf aussehen.

Vorteile Icon-Fonts

  • Über Standard-CSS integrierbar, keine Umbauten am HTML-Code notwendig
  • Auch alte Browser (IE 7 und IE 8) können Icon-Fonts darstellen.
  • Es müssen keine Fallback-Lösungen eingebaut werden.
    Für SVG-Icons braucht man Fallback-Lösungen für ältere Browser

Schlussfolgerung

Jedes Projekt ist anders. Aber wenn man sich sicher ist, dass man auf Opera Mini verzichten kann, dann ist die Entscheidung für einen Icon-Font in Ordnung. Das Einbinden von Icon-Fonts geht schnell, man braucht keine Fallback-Lösungen und für das Styling über CSS braucht man kein Expertenwissen.
Der Umgang mit SVG ist deutlich anspruchsvoller und erfordert mehr KnowHow.


Dieser Artikel beschreibt ausführlich die Vor-und Nachteile beider Herangehensweisen:
Ten reasons we switched from an icon font to SVG

 

Tipps für gute Texte im Web

Nicht jeder Text eignet sich für die Veröffentlichung auf einer Webseite. Eine „Zweitverwertung“ bereits vorhandener Texte gelingt daher am besten, wenn man mit kritischem Blick auswählt und das Textmaterial mediengerecht aufbereitet.

3 Kriterien für gute Texte

  1. Komm auf den Punkt
  2. Gliedere Deinen Text
  3. Fasse Dich kurz

1. Komm auf den Punkt

Ein guter Text – im journalistischen Sinn – ist das Gegenteil von dem, was man uns in der Schule und an der Uni beigebracht hat. Dort haben wir gelernt, dass man erst Mal alle Argumente sammeln muss. Dann folgt eine ausführliche Betrachtung sämtlicher Aspekte und erst ganz am Schluss präsentieren wir das Ergebnis unserer Überlegungen.
Weiterlesen →

Anleitung Childtheme anlegen (Update)

Dies ist eine überarbeitete Version des Artikels „Ein WordPress-Child-Theme anlegen“

Torsten Landsiedel hat auf dem WordCamp Köln 2015 einen sehr spannenden Vortrag gehalten: „Das Childtheme Dilemma“. Darin hat er gezeigt, in welche Fallen man tappen kann, wenn man mit Childthemes arbeitet. Diesen Vortrag habe ich zum Anlass genommen, die Childthemes-Anleitung hier im Blog endlich mal zu aktualisieren.

Ein WordPress-Theme an die eigenen Bedürfnisse anzupassen ist gar nicht so schwer. Die meisten Anpassungen kann man über die CSS-Datei des Themes umsetzen. Bei WordPress hat diese Datei immer den Namen style.css. Man findet sie auf der obersten Ebene des Theme-Ordners.

Das Stylesheet (style.css) im WordPress Theme könnt Ihr in einem Editor wie Textmate (Mac), Notepad (Windows) oder Coda (Mac) bearbeiten. Besser ist es aber, Ihr arbeitet mit einem Childtheme. Ein Childtheme ist ein kleiner Ableger des Original-Themes, das damit zum Parent (=Eltern)-Theme wird. Der Vorteil dabei: Das Eltern-Theme bleibt wie es ist und wird nicht angetastet. Wenn also mal etwas schiefgeht beim Basteln, dann ist nicht gleich das ganze Theme kaputt. Und wenn die Entwickler des Themes ein Update zur Verfügung stellen, könnt Ihr das Parent-Theme updaten, ohne dass Eure Anpassungen überschrieben werden.
Im Childtheme-Ordner liegen nur die Dateien, die tatsächlich verändert wurden. Das macht es leichter, die Änderungen nachzuhalten.

Weiterlesen →

Meldung für alte Artikel ausgeben

Wenn ein Blog schon eine Weile läuft, sammeln sich zwangsläufig Artikel an, die bereits ein gewisses Alter auf dem Buckel haben. Diese Artikel sind wahrscheinlich nicht mehr aktuell, denn die Welt im Web dreht sich schnell.

Man könnte nun auf die Idee kommen, alte Artikel zu löschen. Das ist aber keine gute Lösung, Suchmaschinen-Experten werden ganz blass bei diesem Gedanken. Denn Google & Co. haben auch die älteren Artikel im Verzeichnis. Wenn nun der Link dorthin ins Leere führt, weil Ihr den Artikel gelöscht habt, bekommt Google eine Meldung zurück (Fehler 404). Das kann sich negativ auf das Ranking der Seite auswirken.

Wie wichtig dieser Aspekt bei Eurem Blog ist und ob 404-Fehler wirklich so böse sind, darüber lässt sich streiten. Eines kann man aber sagen: Ihr verliert potenzielle Besucher, wenn der Artikel hinter dem Link plötzlich nicht mehr existiert.
Weiterlesen →

Das war das WordCamp Köln 2015

Banner_768_90

Kaum hat es angefangen, ist es schon wieder vorbei. Das WordCamp Köln ist Geschichte. Anstrengend war’s, toll war’s. Danke Köln, das habt Ihr Klasse gemacht!

Es gab vier Vortrags-Stränge parallel, da ist es vorprogrammiert, dass man jede Menge guter Vorträge verpasst. Ich wünschte, ich hätte mehr mitgekriegt.

Mein persönliches Highlight war der Vortrag von Ellen und Manuel „Pick Yourself – Warte nicht bis jemand Dein Talent entdeckt, wähle Dich selbst aus“. Ein inspirierender, sehr persönlicher Vortrag. Ich hab mich ungeheuer gefreut, die beiden endlich mal live und in Farbe kennen zu lernen. Danke Euch beiden und viel Glück in Neuseeland!

Daneben nehme ich jede Menge praktische Anregungen mit, zum Beispiel hat uns Heiko Mamerow eine sehr schöne, klare Anleitung gegeben, wie man mit einfachen Mitteln eine Seite performanter machen kann: Das kleine 1×1 der Website Performance. Auch auf den Vortrag von Torsten Landsiedel über Childthemes und ihre Tücken war ich gespannt: Das Child-Theme-Dilemma. Sehr aufschlussreich! Diese Themen und andere Erkenntnisse aus dem WordCamp werde ich hier im Blog noch einmal ausführlicher behandeln.

Vielen Dank auch an alle, die mir zu meinem Vortrag „Buzzword Information Architecture“ so freundliches Feedback gegeben haben. Die Slides gibts hier im Blog. Bei dem Thema IA gibt viele spannende Überschneidungen zu Elisabeths Thema „Barrierefrei – Internet für alle“ (Link zu den Slides kommt noch). Wir werden das weiter verfolgen und berichten.

Bei diesem WordCamp war ich zum ersten Mal beim Contributer Day dabei. Das war ein schöner Ausklang und ich habe meine erste Theme Review auf die Welt losgelassen. Tausend Dank an Ulrich für seine geduldige und kundige Einführung in die Welt der Theme Reviews.

P.S. Das nächste WordCamp ist in Nürnberg. Haltet Euch den April 2016 schon mal frei!