tagSeoBlog redesign

Ok, der Titel ist widersprüchlich. Ich habe den TagSeoBlog zwar design-technisch überarbeitet. Aber ein richtiges Redesign ist es nicht, dafür sind die Veränderungen doch zu nah am bisherigen Zustand. Mir fällt allerdings kein passenderes Wort ein ;-). Ich hoffe, dass Euch der neue Look gefällt. Im Vordergrund standen Usability-Überlegungen. So habe ich zum Beispiel die obere Headerzeile um einiges gekürzt, damit der Inhalt weiter ins Blickfeld rückt. Den ganzen Social-Media-Krams habe ich nun rechts reingepackt. So richtig glücklich bin ich damit nicht. Na, mal sehen. Facebook habe ich ja schon abgestoßen… Social Media ist eh schlecht für die Augen!

Die rechte Sidebar habe ich um 20 Pixel auf 300 verbreitert. So haben die Blog-Werbepartner etwas mehr Entfaltungsmöglichkeiten. Weiterhin habe ich endlich – Danke an all die Drängler – eine Blog-interne Suche eingebaut. Oben in der Mitte, so wie bei Google ;-)

Die entscheidende Neuerung ist jedoch bei den Kommentaren zu finden: nun kann man endlich direkt anworten. Das wurde dringend Zeit, denn zuletzt hatte ich mich teilweise 10 oder mehr Kommentare später vie “@…” Auszeichnung auf einen weit zurückliegenden Kommentar bezogen. Alles andere als elegant.

Im Folgenden noch einmal die “Design-Schritte” des tagSeoBlog. Eine gewisse “Sprödheit” habe ich bei jedem Design belassen. Denn man kann nach meiner Einschätzung mit zu wenig Ecken und Kanten eine Sache vernebeln und verwässern. Und schließlich soll das Design ja auch  zum “häßlichsten Namen der Seosphäre” – Zitat Eisy ;-) – passen. Und, nicht zu vergessen: Der tagSeoBlog soll auch als Thumbnail identifizierbar sein.

Hier noch mal die bisherigen Designschritte des tagSeoBlog:

tagSeoBlog Redesign August 2011

tagSeoBlog Redesign Oktober 2009

tagSeoBlog Redesign März 2009

Und falls es jemanden interessiert: hier mein “Opening” vom Januar 2009.

Google Startseite Hintergrundbild

Eieiei – seit heute zeigt die Google Startseite ein Hintergrundbild. Und zwar ohne das man sich das ausgesucht hätte. Vor zwei Tagen habe ich über das neue Feature berichtet: Google erlaubt es nun, die Startseite durch ein eigenen Hintergrundbild zu personalisieren (siehe “Eigenes Hintergrundbild auf der Google Startseite einstellen [Update]“). Allerdings war diese Möglichkeit nur auf diejenigen beschränkt, die ein eigene Google-Konto besitzen. Nur dann konnte man durch einen Klick links unten auf der Google-Homepage (“Hintergrundbild ändern”) ein neues, eigene Bild einstellen. Ansonsten sah die Startseite bis gestern weiss aus wie bisher.

Heute zeigt Google ein, um es freundlich zu sagen: für viele gewöhnungsbedürftiges Hintergrundbild. Und zwar, ohne dass man das ausgesucht hätte. Und was noch schlimmer ist: man kann es offenbar gar nicht ändern. Bzw: man kann es nur ändern, wenn man sich einloggt. Viele haben aber keinen Google-Account. Wenn ich es richtig sehe, ist das nur auf der deutschen Google-Startseite so. Wie man das Bild los wird, weiß ich ebensowenig wie Stefan: “Wie kann ich das Google Hintergrundbild deaktivieren?”

Es ist eine ziemlich aggressive Promotion-Kampagne: offenbar will Google die Leute “zwingen”, sich anzumelden, um das Hintergrundbild zu ändern. Quasi mit dem Vorschlaghammer als Pinsel. Es ist so ähnlich wie mit dem Pacman-Doodle, dass auch ungefragt losgepiepelt hat: Google nutzt seine Startseite immer mehr, um auf sich aufmerksam zu machen. Sehr ungeschickt ist es allerdings, ein Bild zu wählen, bei dem man den Text kaum lesen kann…

Ich bin gespannt, wie lange Google das durchzieht und wie die Reaktionen auf die neue Startseite mit Hintergrundbild sein werden. Nach dem, was ich auf Twitter lese und was hier im Blog an Kommentaren kommt, schießt sich Google mit dem Bild wieder voll ins Knie. Wenn sie wenigstens ein “massentaugliches Geschmacksbildchen” genommen hätten. Die Bilder wechseln offenbar alle 2 Stunden. Ich finde sie übrigens gar nicht so schlecht, um nicht zu sagen: gut :-) Problematisch ist nur, dass man das ohne Google-Account nicht deaktivieren kann.

Hier endlich ein offizieller Post von Google: “The art of a homepage“. Das Spektakel wird also einen Tag dauern. Schade, wenn sie die Aktion vorher angekündigt hätte, wäre sie richtig schön gewesen, finde ich…

Google Startseite Hintergrundbild

Bild Nummer 2:

Fixes Google Startseitenbild Nummer 2

Bild Nummer 3:

Google Startseite Hintergrundbild Nr. 3

Bild Nummer 4:

Google Startseitenbild Nr. 4 ("Florale Skulptur")

Bild Nummer 5:

Google Startseite : Jeff Koons Blumen

Google Hintergrundbild - schön farbig

[Noch'n Update: Heute. 9. Juni 2010, ist ein Hintergrundbild für alle zu sehen. Da sich Fragen und Beschwerden häufen, habe ich einen aktuellen Post geschrieben: "Google Startseite mit Hintergrundbild – aggressive Feature-Kampagne"] … [Update: ab heute, 8. Juni 2010, ist dieses Feature auch bei Google.de aktiv] … Seit einigen Tagen kann man die Google Startseite mit einem Hintergrundbild verschönern. Das funktioniert zwar bislang nur auf der englischen Version, wird aber demnächst auch in Deutschland eingeführt. Ich habe das neue Feature mal ausprobiert. Es ist tatsächlich sehr einfach. Wenn man eigene Hintergrundbilder hochspielen möchte, sollte man ein paar Dinge beachten. Außerdem habe ich mal zwei Hintergründe angelegt, die jeder gerne kostenlos als Google-Startseitenbild benutzen darf.

Die Geschichte von Google ist sicherlich auch durch die puristische Startseite geprägt. Das hat nicht nur erheblich die Marke Google geprägt, sondern auch immer klar signalisiert: Das hier ist eine Suchmaschine – aller Werbung und anderen Aktivitäten zum Trotz.

Bing - wie alles begann

Nun hat Bing jedoch bei seinem Launch vor gut einem Jahr ein anderes Startseiten-Konzept realisiert. Ausgewählte, hoch-ästhetische Bilder zieren die Bing-Startseite. Und zwar täglich neu. Häufig sind es spannende Geschichten, die sich dahinter verbergen. Für Bing ist das recht einfach: mit dem Bilderportal Corbis hat Microsoft einen starken Bilderpartner mit einem immensen Fundus an erstklassigen Bildern. Btw: Auch Flickr, das ja zu Yahoo gehört, könnte mittelfristig viel dazu beitragen.

So etwas kann Google nicht vorweisen. Deshalb geht man dort einen anderen Weg: das Hintergrundbild der Startseite bleibt dem Benutzer überlassen. Er/sie kann es individuell einstellen, oder eben alles so lassen. Während bei Bing jeden Tag etwas neues gezeigt wird, bleibt das Startseitenbild bei Google (bislang) so lange stehen, bis man es selber wieder ändert.

Google "Change Background image"

Das Prinzip ist einfach: es ist ein Feature der “personalisierten Suche“. Nur im eingeloggten Zustand kann man ein eigenes Hintergrundbild für die Google Startseite auswählen oder sehen. Auf der englischen Seite funktioniert es schon: links unten zeigt sich ein Textlink: “Change Background image“. In einigen Tagen wird auf der deutschen Seite das Pendent “Hintergrundbild ändern” stehen.

Klick man dort, dann öffnet sich ein Fenster “Select a background image for your Google homepage” (“Wähle ein Hintergrundbild für deine Google-Startseite“). Man hat vier Auswählmöglichkeiten:

• Eigenes Bild vom Computer hochladen
• Eigenes Bild aus dem Picasa-Webalbum auswählen (wenn man denn ein solches hat)
• “Public Gallery” – ausgewählte Picasa-Bilder, die zur Nutzung freigegeben wurden
• “Editors pick” – eine Auswahl an Bildern, die offenbar extra für die neue Startseite angeboten werden

Google "Select background image"

Das ausgewählte Bild wird dann auf der Startseite angezeigt. Dabei wird das Bild skaliert, so dass es immer format-füllend passt.

Im Grunde basiert das Feature auf Picasa: ein eigenes Bild wird immer in eine Picasa-Galerie abgelegt. Wenn man schon eine hat, dann wird es dieser Galerie hinzugefügt. Ob man bereits ein eigenes Picasa-Webalbum hat, kann man unter “Mein Konto” auf der Google-Startseite (rechts oben) einsehen. Falls nicht, ist es ziemlich einfach, ein solches anzulegen.

Ich finde dieses neue Feature sehr interessant. Ich ahne schon, dass in Zukunft auf Millionen von Google-Startseiten nun die Liebste, die Kinder oder Enkelkinder prangen. Eben so, wie es viele schon von ihrem Desktop-Bild machen. Außerdem bin ich gespannt, ob Bing nun darauf reagiert und ebenfalls die Möglichkeit bieten wird, eigene Bildern einzustellen. Und es bleibt abzuwarten, ob Google in nächster Zeit das Feature so erweitert, dass man sich auch in regelmäßigem Wechsel andere Bilder anzeigen lassen kann. Auf jeden Fall ist – zusätzlich zu den Google Doodles – nun endlich mal optische Bewegung auf die Google Startseite gekommen…

Wer bei den von Google angebotenen Bildern nicht fündig wird, kann sich auch gerne eines der beiden folgenden Motive kostenlos herunterladen. Das erste ist einfach eine leuchtende Farbwolke, in der der Google-Gott thront:

Google Startseite: Gott Farbwolke

Der “Gott” stammt übrigens von Julius Schnoor zu Carolsfeld, aus der Serie “Die Bibel in Bildern“.

Das zweite Bild ist einfach nur goldig: wer sich dieses Bild als Hintergrundbild für die Google Startseite installiert, wird in Zukunft von einem warmen, edlen Gold empfangen.

Google Startseite: edles, warmes Gold

Beide Bilder biete ich für den privaten Gebrauch als gemeinfrei an. Eine gewerbliche Nutzung ist untersagt. Und so funktioniert es: einfach das Bild anklicken und die große Version ohne Goolge-Elemente herunterladen. Dann auf die englische Startseite gehen, und im eingeloggten Zustand auf “Change background image” klicken. Im Auswahlfenster oben  “From my Computer” wählen und das Bild hochladen. Fertig :-)

Falls es bei jemandem nicht funktioniert, bitte kurze Rückmeldung. Ich weiß nicht genau, was passiert, wenn man kein eigenes Picasa-Webalbum hat. Warum Google dieses neue Feature im offiziellen Google-Blog unter dem Titel “Freeze frame!” angekündigt hat, bleibt mir ein Rätsel… Im Googlephotos-Blog (was es nicht alles gibt…) wird es unter “Search engines make the best picture frames” beschrieben.

An Deutschland wurde die neue Google-Startseite bislang irgendwie vorbeigegangen. Nur die Kollegen von t3n und SEO.at haben es kurz angekündigt. Naja, kommt vielleicht noch, wenn es tatsächlich bei uns losgeht…

Coole Bilder-Rezepte

Bilder für Blogartikel… Wenn man es blumig beschreibt, öffnet ein Bild ein emotionales Tor, das die intellektuelle Rezeption vereinfacht. Der Text wird einfach besser lesbar – nicht physisch, sondern psychisch. Ein oder mehrere Bilder in einem Blogartikel bilden eine Art atmosphärischen Rahmen, der den Text zusammenbindet. … Nagut, das ist einigen jetzt vielleicht etwas zu theoretisch schwammig. Aber Fakt ist: Bilder gehören zur Lesegewohnheit. Ein längerer Text ohne Bilder hat ein dröges Fachbuch-Image – mit Bildern wird er lebendig. Man kann einfach lockerer lesen. Allerdings fällt es vielen schwer, ihre geistreichen Artikel auch noch originell zu bebildern. Wie man auch ohne Vorkenntnisse spannende und lustige Bilder für den eigenen Blog erstellen kann, beschreibt dieser Artikel.

Bilderrezepte - Entstehung

Was tun, wenn man gerne Bilder einsetzen würde, aber nichts angemessen Originelles zur Verfügung hat? Wie kann man solche Bilder selber erstellen? Was sollte man dabei bedenken? Dieser Artikel kann hoffentlich helfen.

Kostenlose Software zur Bildbearbeitung: PhotoFiltre

Zum Erstellen eines Bildes benötigt man eine Bildbearbeitungssoftware. Für diejenigen, die sich kein teures Photoshop leisten können oder wollen, hier ein Vorschlag für eine kostenlose Freeware. Das Programm “Photofiltre” wird hier kurz beschrieben und liegt als kostenloser Download bereit. Wer bereits ein anderes Programm hat (Gimp etc), kann natürlich auch das verwenden. Im Prinzip gleicht sich die Vorgehensweise.

Optimale Bildgröße – Eine Frage des Formats

Eine “optimale” Bildgröße gibt es zunächst nicht – zumindest solange man die Bilder nur für die Besucher, und nicht für Maschinen erstellt. Für Suchmaschinen ist es allerdings empfehlenswert, sich zwischen 16:10 Rechtecken und Quadraten zu bewegen. Extreme Hoch- oder Querformate sehen in den Serps unschön aus. Ich vermute, dass Google sie deswegen nicht so gut gewichtet wie “normale” Formate.

Wer sein Bild potentiell auch im Rahmen der Universal-Search sehen möchte, sollte sich überlegen, ob nicht ein Querformat besser geeignet ist als ein Hochfomat. Hier ein Screen, der das veranschaulicht:

Screenshot Bildformat Universal-Search: Giraffen-Bilder

Man erkennt deutlich, dass aufgrund der einheitlichen Bildhöhe die Querformate bevorzugt werden: sie bieten einfach doppelt so viel Information. Natürlich spielt das Motiv eine wichtige Rolle, aber potentiell bieten Querformate eine höhere Klickwahrscheinlichkeit, weil sie größer sind. Zumindest ist das der Stand der Dinge.

Doppelte Bildgröße für die Bearbeitung

Feng Shui (modern)

Ok, wenn man nun ein neues Bild öffnet, sollte man am Besten das finale Bild in doppelter Größe erzeugen. Also: wer in seinem Blog ein Bild mit den Maßen 500 x 300 Pixel einbauen möchte, erzeugt zunächst ein neues Bild im Format 1000 x 600 Pixel. Der Grund für die Bearbeitung in doppelter Zielgröße ist einfach: die finalen Bilder sehen besser aus. Häufig entstehen beim bearbeiten unschöne Kanten oder Effekte. Wenn man zum Beispiel mit einem Lasso oder einem Radierer etwas ausschneidet, gibt es oft pixelige Kanten. Auch viele Malwerkzeuge hinterlassen diese unschöne, grobe Anmutung. Durch das finale Herunterrechnen werden solche unsauberen Kanten automatisch geglättet. Das Bild sieht besser aus.

Fotomaterial – woher nehmen?

Zu dieser Frage gibt es hunderte Artikel. Für die Bilder dieses Artikels habe ich Fotos bei quarknet.de benutzt. Mehr Bildportale in diesem Artikel: “Bildersuche online: TOP Bilder-Suchmaschinen für Gratis Bilder” oder in dem Klassiker von Malte Landwehr: “117 Quellen für kostenlose Bilder“.

Soviel zum Vorgeplänkel. Im folgenden ein paar simple Rezepte zum Erstellen von Bildern. Wie bei allen rezepten sind sie als Anregung zu verstehen, die Appetit auf eigene kreative Entfaltung machen sollen. [Klick auf die Bilder öffnet die Vergrößerung]

Rezept 1: Bild selber malen und mit Text würzen

Handgemalte Bilder

• Neues Bild erstellen (doppelte Zielgröße)
• Hintergrund mit Farbe füllen
• Mit Pinselwerkzeug rummalen
• Mit Effekten und Filtern spielen
  
• Text platzieren, mit Schlagschatten versehen
• Copyright-Zeile einfügen (oben oder unten)
  
• Bildgröße halbieren, fertig in 10 Minuten.
  
• Gelingt mit einiger Erfahrung immer besser!

Rezept 2: Photo benutzen und “Stilbalken” ergänzen

Foto mit Balken: Blog-Stilelement

• Foto öffnen (ggf. im Web kopieren und in neues Dokument einfügen)
• an einer Kante eine farbigen Balken (ca. 15%) erzeugen
• ggf. mit einem Begriff oder kurzen Text verfeinern
• Copyright-Zeile nicht vergessen
• Bild auf Zielgröße verleinern, fertig in 3 Minuten.
  
• Sehr einfach – gelingt immer!
• Diese Methode kann zu einer Art Markenzeichen werden, wenn der gewählte Balken (oder die Ecke oder was auch immer) zu einem wiederkehrenden Stil-Element wird.
  

Rezept 3: Photomontage aus leckeren Vorlagen

Fotomontagen (Bilder-Rezept)

• Foto öffnen (ggf. im Web kopieren und in neues Dokument einfügen)
• einen Bereich mit einem farbigen Fläche zumalen (Pinselwerkzeug, ggf. Lasso-Tool) – siehe Abbildung oben rechts. Achtung: immer einen Farbton wählen, der sonst nicht im Bild vorkommt.
  
• die gemalte Fläche mit dem “Zauberstab-Tool” auswählen
• ein zweites Bild öffnen und / oder aus dem Web kopieren
• dieses Bild in die Auswahl einfügen
• Diesen Vorgang ggf. mehrfach wiederholen
• Wenn gewünscht, kann ein Text weiteren Pfiff ins Ergebnis bringen
• Copyright-Zeile nicht vergessen
• Bild auf Zielgröße verkleinern, fertig in 15-30 Minuten.
  
• Gelingt mit etwas Übung! (Achtung: hier ist die finale Verkleinerung besonders wichtig. Also so groß wie möglich arbeiten.)
  

Rezept 4: Foto mit Handillustration

Foto von Hand illustriert

• wie 2., nur dass man mit dem Pinsel oder Airbrush-Tool von Hand noch im Bild rummalt.
• Copyright-Zeile einfügen
• Bild auf Zielgröße verkleinern. fertig in 5-10 Minuten.
  
• Gelingt mit etwas Übung!
  

Rezept 5: Filter und Effekte

• Alle genannten Bildrezepte können durch einen Filter verfeinert werden. Diese Effekte (unter “Filter”) erlauben eine spielerische Variation ohne Aufwand.
• Achtung: Text immer erst nach dem Filter-Effekt einfügen.
• Wer ein wenig mit verschiedenen Schriften herumspielen möchte, findet bei 1001FreeFonts.com sehr viele Schriften zum kostenlosen Download. Die Typen sind zwar für einen professionellen Einsatz nicht zu gebrauchen, weil sie viele kleine Macken haben. Aber für ein paar originelle Blogbilder eignen sie sich gut.
  

Zeitaufwand

Bilder selber zu erstellen, so dass sie sich von der Masse abheben, kostet Zeit. Zumindest mehr Zeit, als wenn man nur ein unbearbeitetes Bild benutzt. Ich brauche pro Bild ca. 10 – 20 Minuten. Meist erstelle ich pro Artikel ein oder zwei neue Bilder und benutze noch ein oder zwei, die ich bereits früher verwendet habe. Am Anfang sollte man sich jedoch seine Zeit nehmen und zunächst kleine Brötchen backen…

Kleine Brötchen

Ich kann das nicht!

Viele scheuen vor dieser Arbeit zurück, weil sie glauben, ihre Bilder würden “schlecht” sein. Stattdessen verzichten sie lieber auf Bilder oder nehmen o815-Fotos. Das ist falsch. Man muss nur die Brille wechseln. Ein originelles Bild muss nicht schön oder harmonisch sein. Es soll auch nicht im Museum hängen. Es soll den Blogartikel bereichern. Und für diesen Zweck sind Bilder, die sich aus der Masse abheben, besonders geeignet. Eine vermeintliche Schwäche kann somit zu einer echten Stärke werden, wenn man nur ein wenige Geduld und Zeit aufwendet.

Last Minute im Urlaub

Für alle, die bereits eine andere Vorgehensweise haben: Es gibt zahlreiche Wege, um Bilder für Blogartikel zu erstellen. Die genannten Rezepte sind als Appetitanreger gedacht – für all die, die bisher nicht so recht wissen, wie sie in einen geeigneten Workflow reinfinden können. Hoffe, es hilft…

Dieser Artikel ist im Rahmen des Webmasterfriday (Thema “Bilder erstellen für Blog-Artikel“) entstanden. In diesem Zusammenhang haben auch schon andere über “Bilder in Blogs” geschrieben: So zeigt Andreas, das sein Blog ohne Bernhardiner-Bilder nicht denkbar wäre. Andreas von WP-Zone ist der Ansicht, dass man Bilder nicht unbedingt braucht. Der Blogschreiber schreibt über Pro und Contra zum Thema Bilder in Blogartikeln.Und soeben lese ich noch bei SEO-Blog.ch einen klasse Artikel (“Bilder für Blogs erstellen“) mit vielen hilfreichen Quellen.

Ach ja: alle Bilder in diesem Artikel wurden mit Bildern von Quarknet.de erstellt. Der Backlink dorthin ist zwar nicht Pflicht, aber guter Stil. Wer kostenlose Bilder im Netz benutzt, sollte den Backlink als Dankeschön nicht vergessen.

Wenn jemand weitere schöne Bilder-Rezepte hat: nur her damit :-)

Coole Bilder-Rezepte

Weiterführende Artikel

• Bildersuche online: TOP Bilder-Suchmaschinen für Gratis Bilder
• Bilder optimieren für Google Image search / Bild SEO
• Bildersuche News: Universal-Search, Bilder-Indexierung, Hotlinks etc.

Neues Blogdesign

Jetzt war ich mal kurz Essen, und schon hat die Nachricht via Twitter schon die Runde gemacht. Danke @seo2feel, @dernetteseo, @seounited, @zeejott, @Seodeluxe. Der tagSeoBlog hat ein neues Design bekommen. Wie schon Ende März in dem Beitrag “ReDesign – tagSeoBlog.de aufgefrischt” angedeutet, tritt dieser Blog nun in “Phase 3″. Wesentliches Neuerung ist die überarbeitete Navigation im Kopfbereich der Seite. Der harte Kontrast musste einer eher weichen und harmonischen Erscheinung weichen. Das Design-Konzept ist in “Phasen” gestaffelt.

Hier die beiden Versionen im Vergleich. Links die Version, die von Juli bis September 2009 zu sehen war. Man sieht deutlich die “Verweichlichung”/ “Verharmlosung” des Kopfbereiches.

Blog-Design im Vergleich: vorher (links) und nachher (rechts)

Zum Vergleich nochmal die Entwicklung von Ende April. Links die Version, mit der dieser Blog von Januar bis Ende März gestartet war. Rechts die Version nach dem Redesign Ende März. Diese Version war von April bis ca. Mitte Juli online. Im Juli habe ich dann einen kleinen Adsense-Block in die Sidebar integriert und in diesem Zusammenhang ein paar Details geändert, die jedoch kein echte Re-Design waren (Farben einiger Überschriften).

Re-Design April 2009 Januar bis März (links) - April bis August 2009 (rechts)

Ein paar Details sind nach wie vor “unrund” – zum Beispiel der gesamte Kommentar-Berecih. Aber ich kann damit leben. Das kommt dann in der nächsten Runde im Frühjahr 2010. Falls jemand noch funktionale Fehler entdeckt, bitte ich um kurze Meldung. Es gibt übrigens Leute, die glauben, mir stünde das Wasser bis zum Hals. Hehe, kann man so sehen…

Und? Wie gefällts Euch?

Neues Blog-Design

Weiterführende Artikel

• ReDesign – tagSeoBlog.de aufgefrischt (April 2009)
• Website optimieren – Relaunch oder permanent?
• Die besten SEO-Blogs – Suchmaschinenoptimierung pur

CSS optimieren

Ein Website lässt sich grob vereinfacht als eine Sammlung von Text und Medien beschreiben, die auf eine adäquate Weise vom Browser dargestellt werden. Den Text und die Medien kann man auch Inhalt nennen, und die Art der Darstellung Form. Für eine effektive Weiterentwicklung einer Website macht es Sinn, Form und Inhalt zu trennen. Auf diese Weise lassen sich ohne Probleme neue Inhalte hinzufügen. Auf der anderen Seite kann man auch Änderungen am Design vornehmen, ohne alle Seiten überarbeiten zu müssen. Aus diesem Grund wird heutzutage die Gestaltung einer Website über Cascading Style Sheets (kurz CSS) definiert. Aber wie kann man diese CSS-Datei(en) optimieren?

Es gibt zwei Kriterien, die für ein “gutes” CSS entscheidend sind: die Dateigröße und die Übersichtlichkeit. Meine CSS-Tipps stehen vermutlich in keinem Handbuch, und werden vermutlich (zum Teil) von den Fachlauten zerrissen werden. Ich schreib sie trotzdem auf, weil sie einfach nach meiner Erfahrung sinnvoll sind…

Die CSS-Washing-machine

Mein erster CSS-Optimierungstipp ist gar keiner, sondern eine Bitte an alle pfiffigen Programmierer. Was wirklich fehlt ist eine CSS-washing-machine. Also ein Programm, mit dem man überflüssigen Code aufspüren kann. Eine Software, die alle CSS-Definitionen abscannt – und zwar nicht auf einer Seite (wie es eine Firefox-Extension kann), sondern bezogen auf die gesamte Site. Denn viele styles kommen ja nur auf bestimmten Seiten vor. So was fehlt mir, ich habe noch keine gute und sichere Lösung gefunden. Vielleicht schreibt ja jemand beim Webmasterfriday darüber und gibt mir den entscheidenden Tipp.

Eindeutige Bezeichner zum besseren Aufräumen

Viel Arbeit mit Aufräumen

Ein wesentliches Problem bei CSS-Dateien ist sicherlich die Dateigröße. Nichts ist schlimmer als ein über die Jahre vollgerumpeltes CSS. Aber oft ist es so. Auch ich ergänze laufend hier und da Kleinigkeiten. Aber zum richtigen Aufräumen komme ich selten. Eine effektive “CSS-wasching-machine” (wie oben beschrieben) kenne ich leider nicht. Ich räume immer von Hand auf, mit der Suchfunktion. Und das nervt. Aber muss aben ab und zu mal sein. Das funktioniert jedoch nur, wenn man CSS-Bezeichner hat, die wirklich eindeutig sind. Denn dann kann man nach diesen Namen sidewide suchen (btw: ich benutze seit Urzeiten Dreamweaver, mit dem ich auch ganz zufrieden bin). Wenn der Name nur noch in der CSS-Datei gefunden wird, kann man ihn getrost löschen. Aber wie gesagt: es geht nur, wenn der Bezeichner eindeutig ist. Es macht daher Sinn, ein Kürzel voranzustellen, also zum Beispiel: “.tsb_search” – (tsb für tagseoblog).

Leerzeichen löschen?

Leerzeichen (space) löschen?

Wenn man eine CSS-Datei durch den CSS-Valitator des W3C jagt, wird am Ende des Checks die CSS-Datei noch mal aufgelistet. Wie man sieht, sind dort irre viele Leerzeichen eingefügt, die überflüssig sind. Ein Leerzeichen ist ein Zeichen wie jedes andere, es braucht auch Speicherplatz. Bei längeren Dateien läppert sich darüber ganz schön was zusammen. Hierfür gibt es viele Programme, mit denen sich ein CSS daraufhin optimieren lässt. Ganz gut und sauber finde ich CSS-Tidy. Damit wird der CSS-Code gesäubert. Neben den überflüssige Leerzeichen werden auch andere Details wie z.B. überflüssige Padding- und Margin- Nullen gesäubert. Das bringt meistens immerhin ein paar Prozent weniger Dateigröße. Für Leute, die ein WordPress-Theme benutzen und ihre CSS-Datei nie angefasst haben, gibt es eine spezielles WordPress-CSS-Optimierungstool: Wp CSS (Habe es nicht ausprobiert, bitte bei negativen Erfahrungen kurz kommentieren).

In dem Zusammenhang geht mir der CSS-Compressor dann doch etwas zu weit. Er löscht nämlich nicht nur überflüssige Leerzeichen, sondern auch die Zeilenumbrüche. Das geht zuweit! Womit ich beim zweiten Punkt wäre:

CSS Formatierung

Eine übliche, anerkannte und saubere CSS-Formatierung sieht so aus – für jede Definition eine neue Zeile.

body  {
   margin:0;
   padding:0;
   background:#fff;
   color:#433;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
   padding:0;
   margin:0;
   text-indent:-9999px;
   font-size:1em;
}
...

Auch wenn es so richtig ist – ich arbeite anders. Ich hasse es einfach, während der Arbeit ständig hoch und runter zu rollen. Ich habe gerne möglichst viel Code zur gleichen Zeit im Blick. Ich formatiere meine CSS-Dateien daher so:

body  { margin:0; padding:0; color:#433; background:#fff; }
h1    { margin:0; padding:0; color:#093; font-size:1em; }
...

Das erklärt sich vielleicht auch aus meinem Arbeitsplatz: ich habe zwei Screens mit 1600 x 1200 Pixeln Auflösung. Auf einem ist immer nur der Quelltext, auf dem anderen die Vorschauseite. Mit “meiner” Formatierung passen meist 50% oder mehr auf den sichtbaren Screen. Ich bin dadurch wesentlich schneller beim Arbeiten. Wenn ich in einem laufenden Projekt eine CSS-Datei jemandem anderen übergeben muss, schicke ich die Datei schnell durch CSS-Tidy und ab damit. Wenn ich eine normal fromatierte CSS-Datei bekomme, dann ebenfalls schnell durch CSS-Tidy und anschließend die Umbrüche durch ein Leerzeichen ersetzen.

Redundanzen vermeiden

Redundanz ist die Wiederholung einer bereits gesetzten Information. Bei mir tritt der Fall am häufigsten bei Farben auf. Beispiel: die Fareb blau soll in drei verschiedenen Layer als Hintergrundfarbe erscheinen. Dann kann man das so schreiben:

.tsb_layer_1 { ..., margin:0; padding:0; background:#ff0; }
.tsb_layer_2 { ..., margin:0; padding:0; background:#ff0; }
.tsb_layer_3 { ..., margin:0; padding:0; background:#ff0; }

oder man schreibt die Layer-definitionen ohne Farbwert. Stattdessen legt man für die Farbe eine eigene Klasse an.

.tsb_color_blue { background:#ff0; }

In den entsprechenden Tags setzt man dann einfach zwei Klassen ein (“multiple CSS-Klassen“):

<div class="tsb_layer_1 tsb_color_blue">...

Durch dieses Prinzip kann man, je nach dem, auch eine ganze Menge Code sparen.

Wie wichtig ist die Backgroundcolor?

An diesem Punkt bin ich mir unsicher. Einerseit gibt der Validator bei jeder Klasse oder ID, bei der eine Textfarbe gesetzt ist, eine Warung aus, wenn die Hintergrundfarbe nicht gesetzt ist. Es wäre also sauberer, immer auch den Hintergrund zu definieren. Aus besagten Dateigrößen-Überlegungen mache ich das aber nicht. Ich bemühe mich stets, nur die relevanten Formatierungen zu setzen. Was meint ihr?

CSS-Design – von der Pike auf lernen

CSS Design Buch Cover

Dieser Artikel war mal ungefähr zehn mal so lang. Ich habe dusseligerweise eine Art “Einführung in die CSS-Technologie” begonnen und bin dann von Hölzchen aufs Stöckchen gefallen (oder wie man so sagt). Ich hab das alles wieder gelöscht. Denn es war zuviel und fehl am Platz. Ich möchte stattdessen auf eine sehr gute Einführung in das Thema hinweisen.  Nein, ich möchte sie sogar empfehlen:

CSS-Design – Das Buch – von Heiko Stiegert (Webstandard-Blog) – Galileo-Design Verlag

Es ist nicht nur für Einsteiger gut geeignet, sich einen Überblick zum Thema CSS zu verschaffen, sondern auch für Fortgeschrittene eine gute Möglichkeit, das Bekannte zu überprüfen und eingeschliffene Unsauberkeiten zu optimieren. Daneben werden viele konkrete Beispiele erläutert, wie man seine Seiten schnell und effektive attraktiver und damit erfolgreichen machen kann. Naja, ihr könnt das alles direkt bei ihm nachlesen:

• http://webstandard.kulando.de/static/css-design

Fazit: CSS-Optimieren

Die von mir genannten Punkte beziehen sich alle nur auf den Code.

• CSS-washing-machine (fehlt!)
• Eindeutige Bezeichner
• Leerzeichen löschen
• Redundanzen vermeiden (multiple CSS-Klassen)
• Backgroundcolor weglassen (?)

Unter dem Stichwort CSS-optimieren kann man natürlich auch “Design optimieren” verstehen. Das ist mir jedoch etwas zu weit gefasst. Das adäquate Design einer Website hängt natürlich immer auch vom jeweiligen Inhalt ab. Das kann man zwar mittels CSS codieren – aber gestalten muss letzlich immer ein Auge (bzw. zwei) …

Externe Links zum Thema:

• http://wiki.aki-stuttgart.de/mediawiki/index.php/CSS
• http://www.css4you.de
• http://www.psychic-seo.de/993-zen-und-die-kunst-des-css-designs/

Cascading Style Sheets - CSS optimieren

Weiterführende Artikel

• Website optimieren – Relaunch oder permanent?
• Google ist behindert – Barrierefreiheit für Mensch und Maschine
• Neues WordPress theme: Mondrian Style

Websites optimieren

Jeder, der eine Website betreibt, kennt das: Von Zeit zu Zeit muss die Sache aufgefrischt werden. Eine gute Website entwickelt sich weiter. Und zwar nicht nur bezogen auf Inhalte oder SEO-Optimierung, sondern auch in Bezug auf Erscheinung, Atmosphäre und Usability. Auf einer optimierten Website hat der Besucher ein gutes Gefühl – und zwar ohne zu wissen, warum. Die Optimierung einer Website kann auf zwei Wegen stattfinden: als Relaunch von heute auf morgen – oder schleichend, so dass es keiner kaum einer merkt. Um diese beiden Methoden geht es in diesem Artikel …

Dieser Blog ist im Januar gestartet. Ich hatte damals hoppla-hopp ein recht grobschlächtiges Design erstellt. Mir war eigentlich nur die Wieder-Erkennbarkeit wichtig. Spröde Ecken und unfeine Details fallen vielleicht etwas störend auf, sind aber in der Startphase weitestgehend tolerabel. Ein sub-optimales Design bietet dann aber natürlich die Gelegenheit zu verbessern. Der positive Effekt für die wiederkehrenden Besucher ist ungleich größer, als wenn man sein Pulver am ersten Tag verschossen hätte.

Anders formuliert: Ich habe nicht absichtlich ein schlechtes Design erstellt, sondern mir absichtlich nicht so viel Zeit dafür gegeben. Das hatte auch ganz praktische Gründe: ich wollte einfach loslegen, statt endlos über ein “perfektes Design” oder eine “optimale Struktur” nachzudenken. Optimale Erscheinung oder Usability kann es ohne Inhalte gar nicht geben. Hier das, was ich damals dazu geschrieben habe: “Neuer Seo und Webdesign Blog – Fokus Bildersuche”]

Ende März habe ich dann eine Überarbeitung dieses Blogs vorgenommen (“ReDesign – tagSeoBlog.de aufgefrischt“. Und damals habe ich angekündigt, “im Sommer” das gesamte Design inklusive Navigation überarbeiten zu wollen. Zum Glück wird in diesem Jahr kein Sommer…

Aber was nicht ist, kann ja noch werden. Daher frage ich mich: soll ich die Veränderungen an diesem Blog als Relaunch einführen – oder ihn besser permanent Stück für Stück weiterentwickeln? Denn einen Bedarf für Optimierung sehe ich – zumindest bei diesem Blog -  laufend: überall gibt es kleine unschöne Details, über die das Auge stolpert, und ständig habe ich das Gefühl, dass die  Navigationsstruktur noch nicht wirklich gut ist.

Optimierung des Webdesigns – Website-Relaunch oder schleichender Prozeß?

Unter einem Relaunch verstehe ich eine überarbeitete Version einer Website, die an einem Tag, dem Relaunch (also Neustart), live geschaltet wird. Im Gegensatz dazu steht die “schleichende Weiterentwicklung”, bei der es keinen plötzlichen Wechsel gibt. Stattdessen werden Veränderungen in kleinst-Schritten vorgenommen, so dass sie für den User kaum wahrnehmbar sind.

ReDesign - tagSeoBlog.de aufgefrischt

In den meisten Fällen ist der Relaunch das übliche Verfahren. Aktuell prahlt Yahoo damit, die Homepage neu zu launchen. Auch Bing ist im Grunde nichts anderes als ein Relaunch, der einfach nur fett aufgeblasen wurde. Ein gutes Gegenbeispiel ist Google. Wie man in den Zeitraffer-Filmen “Mona-Lisa-Dance” und “Twitter-Dance” sehen konnte, verändert Google (in diesem Fall die Bildersuche) laufend kleine Details. Googles Websites befinden sich in einem permanten Weiterentwicklungsprozess.

Relaunch – kalkulierbarer Knaller

Universal Search Usability : Google’s Layout-Problem

Ein Relaunch hat im Grunde einen entscheidenden Vorteil: er ist ein kalkulierbares Projekt. Zumindest scheint es so. Das gilt sowohl finanziell als auch technisch und organisatorisch. Üblicherweise setzen sich Website-Betreiber alle zwei, drei Jahre ein “Relaunch-Budget” in den Haushalt und beauftragen dann eine Agentur (normalerweise die vom letzten Mal). Die neue Version wird dann intern erstellt, auf einem Testserver implementiert, kommuniziert, verbessert und auf allen Ebenen abgenommen. Und dann kommt der große Tag, wo die Seite live geschaltet wird. Die Abteilung “PR” (nicht pageRank, sondern Public Relations) kann dann noch mal ordentlich auf die Pauke hauen. Tschingerassassa – unsere neue Website ist online! Die kleinen Details, die noch nicht richtig fluppen, werden innerhalb weniger Tage ausgebessert – und dann läuft die Sache. Bis in zwei, drei Jahren der nächste Relaunch ansteht.

Vorteile eines Relaunch:

• Kalkulierbare Kosten
• Gut geeignet für externe Beauftragung
• Fertige neue Seiten auf Testserver für interne Abstimmung
• Hierarchische Abnahme möglich
• Relaunch Termin: viel Traffic / Aufmerksamkeit / PR
• Seite erfordert im laufenden Betrieb nur wenig Know-How und Ressourcen

Nachteile eines Relaunch

• Kurzfristige Änderungswünsche nicht möglich
• Relaunch wird (nicht selten) aus Kostengründen hinausgezögert
• Fehler in Analyse und Neu-Konzeption zeigen sich oft erst später (Beispiel Yigg)
• SEO-Maßnahmen werden nicht integriert, sondern separat bearbeitet
• Insgesamt: Unflexibel

Permanente Weiterentwicklung

Demgegenüber steht das Konzept der permanenten, schleichenden Optimierung. Ich nenne das auch “Inhouse Optimierung”. Darunter verstehe ich nicht nur Suchmaschinen-Optimierung, sondern ein ganzheitliches Konzept, das beide Seiten (Suchmaschinen und Besucher) gleichermaßen mitbedenkt. Und ich meine damit nicht, dass man täglich Änderungen vornimmt. Viel eher wird alle drei bis vier Wochen mal an dieser oder jener Ecke geschraubt und verbessert.

Google Image Search: Mona Lisa Dance

Wie gesagt: ein gutes Beispiel ist Google. Google optimiert in Kleinst-Schritten. Und zwar mit dem (vermeintlichen) Risiko, das etwas nicht klappt und schnell wieder zurückgedreht wird. Diese Risiko hat bei Google durchaus Methode: die neuen Features werden einige Zeit öffentlich getestet und anschließend ausgewertet. Wenn etwas gut funktioniert, wird es einige Zeit später tatsächlich dauerhaft implementiert. Andere Features, die nicht so gut angekommen sind, werden in die Mottenkiste verfrachtet. Hin und wieder kommt es dabei auch zu “Bugs”, die dann mehr oder weniger weite Kreise ziehen. Ich persönlich vermute allerdings, dass diese Bugs nicht die gerne kolportierten Praktikanten-Fehlerchen sind. Ich glaube eher, dass Google die “Bugs” vorher penibel getestet hat und die Neuentwicklung damit wirksam ins Gespräch bringt. Denn: noch kein Bug hat Google bisher geschadet. Im Gegenteil: Google hat den Ruf, permanent dynamisch und flexibel weiter zu entwickeln.

Vorteile der permantenten Weiterentwicklung

• Flexibel: Sofort ändern, wenn Verbesserungsmöglichkeit deutlich werden
• Schnelles Aufgreifen von aktuellen Ideen oder Konzepten
• Keine punktuellen Projektkosten
• Website-Optimierung wird zu einem Prozess, in den auch Benutzer eingebunden sind sein können
• SEO-Maßnahmen können in den Prozess integriert werden bzw. sind selbstverständlicher Bestandteil der fortlaufenden Optimierung
• Laufende, kleine Änderungen vermittelt ein dynamisches, flexibles Image

Nachteile ( Schwierigkeiten)

• kompetentes Optimierungsteam notwendig
• jederzeit volle Kontrolle über alle Bereiche erforderlich
• Laufende Kosten für Optimierungsteam (inkl. SEO)
• Risiko: unkalkulierte (echte) Bugs (erfordern kreative Öffentlichkeitsarbeit)

Kosten, Entscheidungen und Risiko

Blog Statistik

Bei dem Punkt Kosten wird deutlich, dass beide Methoden als Vorteil gesehen werden können. Nach meiner Einschätzung nimmt sich das nicht viel. Es bringt keinen wesentlichen Kostenunterschied, ob man sich eine kleine, kompetente Inhouse-Truppe leistet oder nur alle zwei, drei Jahre einen (dann allerdings) großen Posten ausschüttet. Der wesentliche Unterschied liegt in den Entscheidungsstrukturen. Um effektiv arbeiten zu können, braucht die Inhouse-Website-Optimierungstruppe das volle Vertrauen der Entscheidungsgremien. Sozusagen volle Rückendeckung für Spielereien. Das ist den meisten Chefetagen aber zu riskant. Egal ob Firma, Museum oder andere Kulturorganisation. Sie wollen lieber selber noch einen finalen Blick darauf werfen. Und sich den Relaunch dann womöglich als eigenhändige Leistung anheften.

Wie das grandios schief gehen kann, hat vor einigen Monaten das Beispiel Yigg gezeigt. Der damalige Relaunch war ungeschickt eingefädelt, aus einer offenbar nicht ausreichenden  Analyse wurden die falschen Schritte gezogen und das ganze Paket wurde dann schlecht vermarktet. Aus heutiger Sicht kann man klar feststellen: Die Google Methode, die man in Communities auch gerne als “Wir entwickeln gemeinsam” bezeichnen kann, birgt im Grunde wesentlich weniger Risiken.

Webmaster

Aber Yahoo, Bing oder Google… Was ist mit den kleinen Blogs? Wie läuft das hier? Hier kann der Designer als Vorstandsvorsitzender den Programmierer anzuweisen, eine Navigationsleiste einzufügen, die der Konzepter nach Rücksprache mit dem redakteur und den Benutzern für erforderlich hält. Und der Praktikant versorgt derweil die ganze Truppe (m.a.W. sich selbst) mit Kaffee… Ich trinke in solchen Phasen viel zu viel von der braunen Brühe. Um meinen Arbeitsplatz stehen eigentlich immer 4-5 halbvolle Tassen. Logisch, für jeden Projektbeteiligten eine. Wie viel Bier dieses Team in Personalunion dann nach Feierabend braucht, muss ich wohl nicht erwähnen :-)

Im Gegensatz zu einer Firmenwebsite, die Marken und Produkte vermittelt, ist ein Blog (oder eine Community) selber wie eine Marke / Produkt. Insofern ist die nötige Vorsicht bei der Überarbeitung geboten. Mühsam aufgebautes Vertrauen kann sehr schnell wieder zerstört werden. Dabei darf man nicht vergessen: Gestaltung und Struktur eines Blogs sind viel prägnanter als viele gemeinhin glauben. Denn die Erscheinung öffnet das emotionale Tor, durch das man hindurch muss, um zu den Inhalte zu gelangen. Ein Relaunch bedeutet soviel wie: dieses Tor ist geschlossen. Bitte nehmen Sie den neuen Eingang. Aber den muss man dann erst mal finden…

Wie denn nun?

Kurzum: ich halte es grundsätzlich für die bessere Alternative, Websites (inkl. Blogs) permanent weiter zu entwickeln. Die Antwort auf meine oben gestellte Frage lautet daher: es wird hier keinen Relaunch geben. Stattdessen wird dieser Blog fortlaufend in kleinen Schritten modifiziert. So alle 4 bis sechs Wochen nehme ich mir einen oder zwei Tage Zeit, diese Website zu optimieren. Die Frage, die sich allerdings daraus ergibt, lautet: Welche Ressourcen und Fähigkeiten braucht man als Blogger eigentlich dafür? Wie haltet ihr es mit der “Website-Optimierung”?

Update: Interessanterweise hat Google in Jahr 2011 zwei echte “Redesigns” hingelegt. Nach dem die Suche selber am 28. Juni 2011 komplett überarbeitet wurde, ist am 2. Dezember 2011 das neue youTube design veröffentlicht worden: “YouTube Redesign: alles neu und anders – Video-Channels gewinnen“.

Websites optimieren - Relaunch oder permanent?

Weiterführende Artikel

• ReDesign – tagSeoBlog.de aufgefrischt
• Google ist behindert – Barrierefreiheit für Mensch und Maschine
• Universal Search Usability : Google’s Layout-Problem

Wordpress theme design

Ein neues Design-Thema für WordPress-Blogs: heute habe ich mein zweites WordPress theme fertiggestellt. Ich nenne es “Mondrian Style”. Dem kunstliebenden Leser wird das schnell einleuchten. Die Webdesign-affinen Bilder von Piet Mondrian lassen sich nahtlos in eine digitalen Welt übertragen. Freundlich und heiter, aber konzentriert und fokussiert – ein idealtypisches Webdesign. Hier gehts zur Mondrian-Style-Demo-Seite. Wer es probieren möchte:

Free download : WordPress theme “Mondrian Style“ ( engl. Vers. 1.0, 39 kb, .zip )

Zwei Zitate können belegen, dass Mondrian als Visionär moderner Bloggestaltung angesehen werden kann. Im Jahr 1910 hat er unter eine Zeichnung geschrieben:

Masculine and feminime, vertical and horizontal.

Spannung ist also vorprogrammiert. Vertikale (Männer) und Horizontale (Frauen) bilden ein verwobenes Gerüst und treten auf lüsternen Kreuzungen in Kontakt. Trotz Ecken und Kanten entstehen harmonische Flächen. Die Wesen der Gestaltung entfaltet sich durch den Farbklang aus Gelb, Blau und Rot. Hinzu kommen unterwürfige hellgraue Balken sowie ein dunkelgraues Gegengewicht links unten. Das Design kann als Reduktion auf das Wesentliche beschrieben werden.

Im Jahr 1911 schreib Mondrian unter eine andere Zeichnung:

The surface of things gives enjoyment, their interiority gives life.

Schon vor fast 100 Jahren proklamierte Mondrian damit einen Satz, den sich jeder Blogger und Blog-Designer hinter die Ohren schreiben sollte (im übertragenen Sinne): die Oberflächen können zwar erheitern, aber das Wesen (Leben) liegt darunter. Ein gutes Blog-Design taugt nichts, wenn der Inhalt der Artikel oberflächlich bleibt. In diesem Sinne hoffe ich, dass dieses WordPress-Design dazu animiert, gute Artikel zu schreiben.

Bislang habe ich nur eine englische Version gebaut. Je nach dem, wie die Reaktionen sind, oder wenn es einen Bedarf gibt, werde ich auch eine deutsche Fassung zur Verfügung stellen.

Wordpress theme : Mondrian Style - Neues WordPress Blog-Design

Ich würde mich über Anregungen und Kritik freuen.

Weiterführende Artikel

• Neues WordPress theme “Bity Shark” für Blogs mit Biss
• ReDesign – tagSeoBlog.de aufgefrischt
• Wikipedia: Piet Mondrian (externe Seite, engl.)

Wordpress theme: Bity Shark

Heute starte ich mal (wieder) etwas Neues. Und zwar WordPress Designs. Wenn ich mir ansehe, was es so an Blog-Designs für wordpress gibt, dann fehlt mir irgendwie das Subversive, das Bissige und Gemeine. Ok – schon klar: ich habe nicht lange genug gesucht. Die Fachleute werden mir jetzt massenhaft klasse Themes nennen können. Aber darum geht es gar nicht. Ich erwähne das nur, weil es für mich der Anlass war, mal ein eigenes Design zu entwerfen. Und nach ca. 10 Stunden Arbeit ist ein, naja, hoffentlich originelles Design herausgekommen. Hinzu kam eine Anfrage, ob ich für einen Blog ein Design realisieren könnte. Da ich ja weiss, das man mit Bloggen nichts verdient, habe ich mir überlegt, einfach ein offenes Design zu entwerfen. Aber, Mirco: dieses Design ist nicht für Deinen Blog gedacht. Keine Bange…

Wie bin ich vorgegangen?

Ich habe mir einfach das klassische Standard-Wordpress-Theme “default” heruntergeladen und lokal bereit gelegt. Mit Photoshop in der einen und Dreamweaver in der anderen wollte ich gleich mit der Arbeit beginnen. – Aber leider: das Stylesheet war ein verlotterter Sumpf. Zumindest nach meiner Lesart. Daher habe ich erst mal das CSS entschlackt. Wenn nichts dazwischen kommt, werde in den nächsten Tagen mal ein “nacktes”, aus meiner Sicht aufgeräumtes  “default-Theme” zur Verfügung stellen. Dann geht das “neu-designen” erheblich schneller.

Das gute an WordPress ist ja, dass es so wunderbar templatiert ist. Es sind also nur einige Dateien (genau 15), die man ändern bzw. modifizieren muss. Damit ich nicht alles online machen muss, habe ich mir eine Testdatei in den Themes-Ordner gelegt, in der ich die lokale CSS-Datei verlinkt habe. Dadurch konnte ich prima lokal arbeiten.

Was steckt hinter dem Design?

Für die “Was hast Du Dir nur dabei gedacht…“-Frager seien hier ein paar kurze Gedanken zur Konzeption bzw. den grafischen Entscheidungen genannt:

• Bissig, kritisch, subversiv – aber auch funny
• Hohe Wiedererkennbarkeit – “Den Blog vergisst man nicht…“
• Gute Lesbarkeit – keine Experimente am Textbild
• Zweispaltig, weil das die optimale Lesbarkeit unterstützt
• Konzentration auf das Wesentliche – keine Navigationsexperimente

Die drei letzten Punkte sind einfach darin begründet, dass dieses mein erster Versuch ist. Da macht es Sinn, die Sache erst mal so einfach wie möglich zu halten. Mein Design bietet also nur die Möglichkeiten des klassischen WordPress, nicht mehr und nicht weniger. Man sollte es ohne Problem in jeden Blog implementieren können (hoffe ich).

Download & Demo

Falls jemand das Teil mal ausprobieren möchte, habe ich hier das Theme als ZIP abgelegt:

• Download: “Bity-Shark WordPress theme” (.zip, 255 kB).
• Demo-Seite: Blog-Design Bity Shark
• Screenshot-Bilder: (Benutzung natürlich gestattet)
  • Gross (1188 x 866 px, 256 kb)
  • Mittel (640 x 450 px, 91 kb)
  • Klein (320 x 113 px, 10 kb)

Wordpress theme: Bity Shark für Blogs mit Biss- Screenshot, der das Dsign zeigt.

Über Kritik, Fehlerbeschreibungen oder Anregungen würde ich mich natürlich sehr freuen…

Weiterführende Seiten

• Bity Shark – ein neues WordPress Design
• ReDesign – tagSeoBlog.de aufgefrischt
• Baynado: 10 Schritte zur Erstellung eines WordPress themes (externe Seite)
• Webdesignblog: Eigenes wordpress template (externe Seite)
• Webworkblog: Eigenes wordpress theme template erstellen – Tutorial howto (externe Seite)

Blindenzeichen: scharze Punkte auf Gelb

Gestern durfte ich an einer Weiterbildung teilnehmen, die das Aktionsbündnis für barrierefreie Informationstechnik veranstaltet hat. Thema: “Web 2.0 und Barrierefreiheit – Chancen und Herausforderungen”. Und ich muss sagen: selten habe ich so viel “kapiert”.

Das entscheidende Erlebnis war der Vortrag der blinden Frau Ruzica Jokic. Sie hat nichts weiter getan, als zu demonstrieren, wie sie das Internet benutzt. Sie saß vor ihrem Laptop, dessen Bild auf eine Leinwand projeziert wurde. Für die Nutzung des Computers bzw. des Internets vertraut sie einem Screenreader. Die künstliche Stimme dieses Screenreaders war über einen Lautsprecher für uns Anwesende zu hören. Logischerweise benutzen Blinde keine Maus. Stattdessen navigieren sie ausschließlich über die Tastatur.

Wie eine Blinde durchs Internet surft

Enter-Taste, los gehts. Stimme sagt: “Zwei Prozent geladen” – die Seite erscheint – Stimme: “100 Prozent geladen”. Dann wird der Seitentitel vorgelesen. Ruzica navigiert mit Hilfe verschiedener Tasten oder Tastenkombinationen in rasendem Tempo über die Seite. Sie hört immer nur die ersten Worte an und zack,  ab zum nächsten Punkt. Man kann mit den Augen überhaupt nicht so schnell folgen bzw. herausfinden, wo der Reader gerade ist. Die CSS-formatierten Seiten lassen nicht erkennen, in welcher Reihenfolge die Daten im Quelltext liegen.

Kann Bier fliegen? - Cartoon-Bild

Zunächst hört sich Ruzica die ersten Abschnitte (Tags) an. Jede Überschrift, jeder Absatz, jeder Alt-Text (eines Bildes) und jeder Link wird vorgelesen angelesen. Sie hat für uns extra die langsame Version der Screenreader-Stimme aktiviert, normalerweise hört sie es in vierfacher Geschwindigkeit. Für mich unfassbar – hatte ich doch schon bei der “langsamen” Stimme echte Schwierigkeiten, alles zu verstehen. Um Zeit zu sparen, hört sie immer nur die ersten zwei, drei Worte ab, und tabt dann weiter. Nach zirka zehn bis zwölf Tags bemerkt sie, dass die Seite relativ lang und umfangreich ist. Sie öffnet mit einer Taste ein Fenster, in der die Überschriften der Seite aufgelistet sind. Hinter jeder Überschrift steht verzeichnet, welche “Hierarchie” die Überschrift hat, also 1 für H1, 2 für H2 und so weiter. Durch das schneller Abklappern der Überschriften bekommt sie einen Eindruck über den Inhalt und Umfang der Seite.

Als nächstes öffnet Ruzica ein “Linkfenster”, in dem alle Links der Seite angezeigt werden. Erneut lässt sie sich die Liste vorlesen und ergänzt so ihren Eindruck über den Seiteninhalt. Ruckizucki findet sie so ein Formular, dass sie uns vorführen will. Ich war sehr beeindruckt, mit welcher Sicherheit und Geschwindigkeit auch eine Blinde das Internet benutzen kann. Das hatte ich nicht erwartet.

Wie Blinde Websites überfliegen

Ein Bild sagt: Mehr als tausend Worte. Cartoon

Der geschilderte Erlebnisbericht zeigt, dass die blinde Ruzica bestimmte Methoden hat, die sie benutzt, um Inhalt und  Relevanz einer Website zu überprüfen. Ich weiß zwar nicht, ob andere Sehbehinderte ebenso navigieren, aber ich will diesen Erfahrungsbericht einfach mal exemplifizieren. Da ist zunächst der Seitentitel, der zuerst vorgelesen wird. Er gibt den ersten, entscheidenden Hinweis, worum es geht. Als nächstes wird die Seite anhand der ersten Passagen überprüft, wie “glaubhaft” sie ist. Stehen dort tatsächlich sinnvolle Texte, oder kann die Seite nicht halten, was der Titel verspricht? Und dann wird es interessant: Zunächst werden nur die Überschriften abgescannt. Und diese Kurz-Zusammenfassung wird durch die Liste der Links ergänzt. Es wir schnell klar, wie wichtig sauber formulierte Überschriften und Linktexte sind. Ein Linktext wie “Hier klicken” bringt einfach nichts.

Ich hatte zwar schon vorher einige Artikel über SEO und Barrierefreiheit gelesen. Aber während des Vortrags wurde die ganze Sache plötzlich real. In meinem Kopf schoben sich zwei Bilder übereinander, die fast kongruent sind. Es gibt eine erstaunliche Übereinstimmung von Website-Kriterien, die sowohl für Behinderte als auch für Google etwas bringen hilfreich sind. Die Wichtigkeit des Seitentitels, die Bedeutung der Überschriften, die Linktexte, die Alttexte von Bildern, und vieles mehr – all das erinnerte mich plötzlich an die Ranking-Faktoren für die Google-Ergebnisseite.

Warum ist Google behindert?

Sehtest Nr. 8 - Relativ. Nur graue Punkte

Während die blinde Ruzica durch das Internet surfte, wurde mir klar: Google ist nicht nur blind, Google ist umfassend und völlig behindert – alle Kriterien des BITV (“Barrierefreie InformationsTechnik-Verordnung“) deuten darauf hin: Google kann nicht sehen, Google kann nicht hören, Google kann keine Maus bedienen, Google kann eigentlich fast gar nichts – außer lesen. Nagut, Google ist kein Mensch (was im BITV selbstverständlich gefordert ist). Aber aus Sicht der Websiteoptimierung ist es vergleichbar, denke ich. Findige Suchmaschinenoptimierer versuchen, die Barrieren für Google zu minimieren, um in den Ergebnissen weiter nach vorn zu kommen. Suchmaschinenoptimierung ist im Grunde nichts anderes als Barrierefreiheit für Maschinen. Zumindest die onpage-Optimierung. Eine nach den üblichen onpage-Kriterien optimierte Website verringert in aller Regel auch viele Barrieren für Behinderte. Und wenn man schon die Seiten für Google optimiert, kann man doch auch eben noch die Maßnahmen vornehmen, die die Barrieren für behinderte Menschen abbauen. Es sind eigentlich nur noch wenige.

Konkreten Maßnahmen zur barrierefreien onpage-Optimierung

Die für Suchmaschinenoptimierung üblichen onpage-Optimierungsmaßnahmen einer Website kommen auch Behinderten, insbesondere Blinden  zugute:

• Aussagekräftiger Seitentitel
• Klare sematische Struktur: Gliederung durch Überschriften, Absätze und Navigationsleisten
• Wichtiges am Anfang
• Linktexte aussagekräftig
• Bilder mit Alt-Texten
• Tabellen nicht für Layout, sondern für Tabellendaten

Das ist alles bekannt. Neben diesen üblichen onPage-Optimierungen sind nach der geschilderten Erfahrung nur wenige Punkte zu beachten, um eine Seite barrierefrei(er) für (seh-) behinderte Menschen zu machen:

• Navigationsmenüs als Listen ( <ul> oder <ol> ) aufbauen. Für Sehbehinderte sind sie dadurch als Navigationsblock erkennbar.
• Formularfelder immer mit Label-Beschriftungen. Nur so können Sehbehinderte Formularfelder eindeutig identifizieren.
• Immer Alternativen für Bild-Captchas anbieten. Durch diese weit verbreitete Nachlässigkeit werden Sehbehinderte aus einer Community ausgegrenzt, obwohl sie in vielen Bereichen sicherlich spannende Erfahrungen einbringen könnten.
• Bei “Schmuckbildern”, die nur dem Design dienen, den Alt-Text leer lassen, nicht weglassen. Also “alt=”". Dann wird dieses Element von Screenreader übergangen. Wenn man den Alt-Text weglässt, liest der Reader “Grafik: Url blablabla.jpeg”. Das nervt.
• Ajax-Lösungen immer nur als Alternative einer “Standard-Variante” anbieten. Test: JavaScript deaktivieren.

Blindenzeichen: Schwarze Punkte auf gelb. Bild zum Artikel: Barrierefreiheit für Mensch und Maschine

Kann eine Website für Blinde schön sein?

Zurück zu dem Vortrag: schon nach ein paar Minuten rauchte mir der Kopf von dem hektischen Gesabbel der künstlichen Stimme. Ich konnte mir gar nicht vorstellen, dass man so Spaß am Internet haben könne. Glücklicherweise konnte ich mich anschließend noch mit Ruzica darüber unterhalten. Die Benutzung des Internet bietet für Blinde nicht nur in praktischer Hinsicht mehr Lebensqualität. Zu meiner Überraschung kann eine Blinde auf einer Website auch ästhetische Erfahrungen machen. Und zwar nicht nur in Bezug auf den Text, sondern auch in Bezug auf die Seitenstruktur. Je übersichtlicher klarer und deutlicher sich eine Seite im Schnelldurchlauf darstellt, um so mehr macht es Sehbehinderten Spaß, sich dort weiter aufzuhalten. Der vor einiger Zeit im Webstandard-Blog diskutierte “Gute Code” ist also (auch) für Sehbehinderte und Blinde ein echtes Qualitätsmerkmal. Zwar nicht der Code direkt (den sie natürlich in aller Regel nicht beachten), sondern eben die semantische Struktur aus Überschriften, Links, Formularen etc. Und wenn Google blind ist, und Blinden eine gute semantische Struktur gefällt, dann wird das Google auch gefallen…

Schöne Bilder - Aquarell mit Marilyn Monroe

Wegen des erlebten Vortrages habe ich mich hier überwiegend auf Blinde oder Menschen mit Sehbehinderung bezogen. Für andere Behinderungen gibt es weitere Maßnahmen, die die Barrieren einer Website verringern. So ist es für Menschen mit eingeschränkter Motorik sinnvoll, Bedienelemente nicht zu klein zu gestalten. Allerdings scheint das eher eine Frage der Übung zu sein. Bei einer Vorführung mit einer Kopfmaus konnte auch ein ungeübter Teilnehmer ganz “normale” Websites relativ gut bedienen. Bei Menschen mit Hörbehinderung stellt sich das Problem erst dann, wenn man audio-Elemente benutzt.

Ich hoffe, es fühlt sich niemand durch den Vergleich mit einer Maschine gekränkt.

Weiterführende Artikel und Websites

• Schwieriges Rot-Grün Sehtest-Video [2] mit Graustufen Lösung
• Bilder: Alt-Text und/oder Title-Text? – Image-Tag Grundlagen
• Blogging Magazin: Seo und Barrierefreiheit (externe Website)
• Sistrix Blog: Barrierefreies Webdesign und dessen Schnittmenge mit SEO (externe Website)
• Blinde und Kunst (externe Website)