Nachdem das Orga-Team des BarCamps die letzten Wochen damit zugebracht hat, Texte und Bilder zu überarbeiten, ist es nun endlich vollbracht: Die neue Website für das BarCamp Kiel 2013 ist online. Für mich war es ein spannendes Nebenprojekt abseits vom Agenturalltag. Ich arbeitete nicht nur mit völlig neuen Leuten zusammen, sondern entwickelte auch mein erstes Child-Theme für WordPress.

Und da BarCamps sich vor allem dadurch auszeichnen, dass man sein Wissen und seine Arbeit mit anderen teilt, biete ich das BarCamp WordPress Theme zum freien Download an. Jeder, der ein BarCamp veranstaltet und bei der Website auf WordPress setzt, kann das Theme gerne nutzen. Natürlich könnt ihr das Theme auch einsetzen, wenn ihr kein BarCamp veranstaltet.

Infos zum Theme:

• zur kostenlosen Nutzung, GPL Lizenz
• Das BarCamp Theme ist ein Child-Theme und setzt das Standard-Theme Twentytwelve voraus.
• es ist optimiert für LESSCSS bzw. LESSPHP, genauso gut kann aber normal CSS geschrieben werden.
• es ist responsive für Smartphones, Tablets und Desktops
• das BarCamp Theme nutzt die Artikelbild-Funktion für Headerbilder

Der Link im Footer ist nicht zwingend erforderlich, ich würde mich allerdings über eine Erwähnung freuen. Ebenso über eine Mail/ein Kommentar, wo das Theme zum Einsatz kommt.

Download auf Github Live-Demo BarCamp Kiel

Gefühlte 95% aller Websites arbeiten mit Slidern auf der Startseite. Sie sollen dem Nutzer einen umfassenden Eindruck vermitteln oder auf Angebote hinweisen. Der wiederum ignoriert sie.

Egal ob man sie nun Slider, Carousel oder Image Rotator nennt. Sie gehören mittlerweile zum Standard-Repertoire eines jeden Webdesigners bzw. einer jeden Internetagentur. Und auch wir haben Slider in der Vergangenheit sehr häufig auf Websites verwendet und dabei nicht immer an den Internetnutzer auf dem Dorfe mit 384 kBit/s bzw. mit gedrosselter Geschwindigkeit gedacht.

Es musste erst ein Brad Frost kommen und uns mit einem Blogpost wachrütteln, dass Slider nicht nur die Ladezeit verlängern, sondern auch in den meisten Fällen total nutzlos sind. Denn die viele Nutzer interagieren mit dem Slider gar nicht so, wie wir als Designer uns das ursprünglich mal gedacht haben.

Die Idee hinter Slidern

Der ursprüngliche Gedanke für Slider war, verschiedene Einstiegspunkte für Seitenbesucher möglichst platzsparend unterzubringen. Nehmen wir z.B. den Online-Shop unseres neuen Kunden Pick Up Möbel, für den wir künftig im Bereich Conversionoptimierung tätig sein werden. Durch den Slider sollte sowohl der Nutzer, der eine Couch sucht, als auch der, der einen Wandschrank benötigt, angesprochen werden.

Anhand dessen wird bereits deutlich, dass es bei Shops mit größerem Sortiment schwer wird, allen Produkten bzw. Nutzerinteressenten gerecht zu werden. Gut, dann beschränkt man sich eben nur auf die Highlights.

Immer häufiger wurden Slidern aber auch als Kompromiss genutzt, um unterschiedliche Meinungen und Interessen auf der Startseite zu vereinen. Zum Beispiel wenn sich Geschäftsführung, Marketing und Personaler nicht einigen konnten. Jeder wollte seinen Bereich so prominent wie möglich auf der Startseite platzieren. Um einen Streit zu vermeiden, griffen Agenturen tief in die Trickkiste und präsentierten das Allheilmittel Slider. Und auf einen Schlag waren alle glücklich. Abgesehen vom Nutzer.

Der Nutzer hat gelernt, dass der wichtige Inhalt unterhalb des Sliders beginnt.

Das Problem: Nutzer ignorieren mittlerweile Slider — ähnlich wie Banner — da sie auf vielen Seiten schlecht bedienbar sind und durch ihr „Rumgeflackere“ einfach nur stören. Man könnte fast behaupten, wenn man Inhalte vor dem Nutzer verstecken will, sollte man sie einen Slider packen.

Wann sind Slider überhaupt noch sinnvoll?

Bei uns kommen Slider in den neuesten Projekten nur noch selten zum Einsatz. Wir verwenden ihn vor allen Dingen als eine Slideshow, um ein paar Eindrücke von einer Veranstaltung, den letzten Projekten etc. zu zeigen. Sozusagen der Couch-Mode für die Bildergalerie. Wenn es allerdings darum geht, Inhalte anzuteasern und der Nutzer dabei auch noch aktiv werden soll, dann sind Slider keine Option mehr.

Wie seht Ihr das? Setzt Ihr Slider immer noch bei Webprojekten ein? Wie geht ihr mit mobilen Geräten und den langsameren Leitungen um? Eure Meinung könnt Ihr gerne in den Kommentaren hinterlassen.

Weiterführende Infos

• That big sliding banner? Yeah, it’s rubbish
• Carousel Conversion Rate Eye Tracking

Derzeit wird viel über Responsive Webdesign, mobile Geräte oder das beste Framework diskutiert. Bilder müssen verkleinert und Spalten vergrößert/verkleinert oder verschoben werden. Viel zu kurz kommt dabei oftmals aber der Inhalt, sprich der Text.

In den letzten Jahren hat sich viel im Bereich der Webtypografie getan. Deutlich größere und besser lesbare Schriften, Webfonts und Silbentrennung sind nur 3 Beispiele. Gerrit van Aaken hat sogar ein Buch darüber geschrieben. Und auch t3n berichtet immer häufiger über Typografie im Webdesign, wie zuletzt im Artikel von Sébastien Bonset über Typografie für mobile Geräten. Und doch wird das Web vor allen Dingen von Webentwicklern vorangetrieben, für die Texte meist nur Beiwerk sind und denen deswegen keine besondere Aufmerksamkeit geschenkt wird (bspw. line-height in px in Bootstrap). Ein paar Designer wiederum lassen den Text zwar besser aussehen, tragen aber auch nur begrenzt zur besseren Lesbarkeit bei. Aber werden über 90% der Websites nicht eigentlich mit dem Gedanken erstellt, dass man sich durch Texte über ein Thema informieren kann?

Die richtige Schriftauswahl und -verwendung

Die Vielzahl der Webfonts hat die Auswahl der richtigen Schrift ein wenig schwieriger gemacht. Statt einer Hand voll können wir nun aus Millionen von Schriften wählen. Während Schreib- und Handschriften generell nur sparsam und eher für dekorative Zwecke eingesetzt werden sollten, sollte man gerade für Überschriften und Fließtexte genau hinsehen. Hier spielt die x-Höhe, also die Höhe eines kleinen x im Vergleich zu Großbuchstaben genauso eine Rolle wie die Strichstärke. In den meisten Fällen ist die Lesbarkeit von Schriften mit einer höheren x-Höhe besser.

Ebenso sollten Schriften nicht zu fett aber auch nicht zu dünn sein. Denn durch die Strichstärke ändert sich auch der Kontrast einer Schrift. Hier ist ein wenig Augenmaß gefragt. Prinzipiell lässt sich aber sagen:

dünne Schriften = stärkerer Kontrast, dicke Schriften = weniger Kontrast

Der Webfont-Anbieter Typekit gibt in seinem Font-Browser klare Empfehlungen, welche Schriften sich für beispielsweise Überschriften oder Fließtexte besonders eignen.

Selbst wenn man die perfekte Schriftart gefunden hat, kann man es dennoch schaffen, diese schlechter lesbar zu verwenden. Überschriften in Versalien sind so ein Beispiel. Sie sind deutlich schlechter zu lesen ist, als eine normale Überschrift mit einem Wechsel aus Groß- und Kleinbuchstaben. Das Gleiche gilt für Condensed-Schriftschnitte, die nur in ausreichender Größe gut lesbar sind. Es hat schon seine Gründe, warum man sie früher vor allen Dingen für das Kleingedruckte verwendet hat.

Empfehlungen für Zeilenlänge und Zeilenabstand

Seit den frühen Anfängen des Webdesigns wurden Websites mehrspaltig angelegt. Denn schon damals wusste man, dass Texte sich — gerade am Monitor — nicht gut lesen lassen, wenn sie eine gewisse Anzahl von Zeichen pro Zeile überschreiten. Bis heute liegt die optimale Zeilenlänge bei 50-80 Zeichen. Will oder muss man diese Zeilenlänge überschreiten, sollte man auf jeden Fall auch den Zeilenabstand zu erhöhen (line-height zwischen 1.4 und 1.6). Dadurch findet das Auge besser den Anfang der nächsten Zeile. Bei weniger als 50 Zeichen sorgt ein geringerer Zeilenabstand (line-height 1.1 bis 1.3) für angenehmes Lesen.

Diese Regeln sind zunächst allgemein gültig. Allerdings haben auch Displaygröße, der Abstand zum Display und die Umgebung, in der wir uns befinden Auswirkungen auf die Lesbarkeit von Texten. Im Büro sitze ich vor einem 24″ Monitor in ca. 80 cm Entfernung, während mein Macbook mit 11″ zu Hause eher in vielleicht 50 cm auf meinem Schoß liegt. Smartphones und Tablets werden, je nach Situation, z.B. zu Hause oder im Bus auf dem Weg zur Arbeit, in 20 bis 60 cm Entfernung gehalten. Deswegen kann es durchaus sinnvoll sein, die Schriftgröße anzuheben, so dass die Zeilenlänge vielleicht nur 40 Zeichen lang ist, die Lesbarkeit dennoch insgesamt verbessert wird.

Die Hierarchie von Texten

Ob ein Text lesefreundlich ist, hängt nicht zuletzt auch von seiner Struktur ab. Ohne zu sehr auf den Inhalt eingehen zu wollen, sollten Texte so angelegt sein, dass man durch kürzere Absätze und Zwischenüberschriften als Leser immer wieder die Chance bekommt, einzusteigen. Damit dies klappt, sollten der Inhalt auch visuell so aufbereitet sein, dass eine Zugehörigkeit von Überschrift und Text eindeutig ist. Es kommt also auf die richtigen Abstände an.

Ob man seinen Job gut gemacht hat, lässt sich herausfinden, indem man seine Texte als Blöcke betrachtet. Alternativ könntet Ihr auch die Schriftart BLOCKK benutzen.

Weiterführende Links

• Interactive Guide to Blog Typography
• Designing for a Responsive Web Means Starting with Type First
• Responsive Typography – The Basics

Nach gut 3 Monaten Arbeit ist es vollbracht. Mittwoch ging die MEDJOB SH Website online, ein Portal für Arbeitsuchende aus dem Gesundheitsbereich. Unternehmen können offene Stellen einstellen, Interessierte können sich online bewerben oder über die Sehenswürdigkeiten Südholsteins informieren.

Unter der Haube arbeitet wie gewohnt Contao, ergänzt durch ein wunderbares Video von Robert Quentin, die Jobs-Erweiterung von Jan Theofel sowie Twitter Bootstrap für Responsive Webdesign und die bestmögliche Optimierung für mobile Geräte. Solltet Ihr beim Besuch der Website Fehler entdecken, könnt Ihr mir gerne eine Mail schreiben.

Zur Website

Letztes Jahr habe ich gefühlte 1001 Methoden getestet, um Bilder vom iPhone so leicht wie möglich auch im Blog zu posten. Zwar bietet die iOS App für WordPress die Möglichkeit, auch Bilder zu bloggen, aber die Bedienung der App ist alles andere als schnell und einfach. Es sind einfach zu viele Taps bis zum Ziel, außerdem fehlten mir die Bearbeitungsmöglichkeiten.

Meine Suche nach Foto-Apps, die nicht nur auf Facebook & Twitter, sondern auch im WordPress Blog posten blieb leider erfolglos. Deswegen habe ich mir mal die WordPress Plugins angesehen und bin durch einen Tipp von Michael auf Instagrate to WordPress gestoßen. Nach der Einrichtung in WordPress wird jedes Foto, dass man in Instagram macht, auch automatisch im Blog gepostet. Besonders gut gefällt mir dabei, dass die Bilder in der eigenen WordPress Bilderbibliothek abgespeichert werden. So sind sie auch im Falle einer Schließung von Instagram sicher.

Es ist ein wenig paradox. Einerseits versuche ich wieder Herr über meine Daten zu werden, andererseits geht dies noch immer am Besten, in dem ich Dienste wie Instagram nutze. Für die Zukunft würde ich mir eine Foto-App wünschen, die es einem möglichst leicht macht, Fotos zu bearbeiten und danach direkt zu WordPress zu schicken.

Noch zwei Tipps, falls ihr Instagrate to WordPress ebenfalls nutzen wollt:

1. Es gibt auch eine kostenpflichtige Pro Version, die ein paar Dinge mehr kann
2. Wenn ihr wie ich immer mal wieder phasenweise Fotos macht, solltet ihr u.U. die Kategorie für eure Bilder aus dem RSS-Feed entfernen. Wie das geht, steht z.B. hier.

Wer in Webentwicklung tätig ist, wird schon häufiger über Dateien wie readme.md gestolpert sein, die typische Endung für Textdateien, die in Markdown geschrieben sind. Ich benutze Markdown nun schon seit mehr als 1,5 Jahren, um Notizen und längere Blogartikel zu verfassen. Warum? Ganz einfach: alle in Markdown formatierten Texte lassen kinderleicht als HTML exportieren und so auf Websites einfügen.

Wie schreibt man Markdown?

Ich will hier gar nichts zu sehr ins Detail gehen und lediglich ein paar Beispiel für die vereinfachte Schreibweise in Markdown zeigen:

Kursiver Text wird in einfachen Sternchen gesetzt:
Das ist *kursiver Text.* wird zu: Das ist kursiver Text.

Für fetten Text nimmt man einfach 2 Sternchen:
Das ist **fetter Text.** und heraus kommt: Das ist fetter Text.

Und so gibt es für jedes HTML Element die passende, vereinfachte Schreibweise. Überschriften beispielsweise wird durch eine voranstellende Raute gekennzeichnet. die Anzahl der Rauten bestimmt die Überschriftenhierarchie, also

# Das ist eine H1
### Und dies ist eine H3

Weitere Informationen zur Schreibweise findet ihr u.a. beim Miterfinder John Gruber und auf der Seite whatismarkdown.com.

Editoren für Markdown

Editoren für die Markdown Syntax gibt es mittlerweile beinahe genauso viele wie Todo-Listen Apps. Deswegen verweise ich an dieser Stelle auf den Artikel von Uemit, der sich bereits im Januar in aller Ausführlichkeit dem Thema gewidmet hat.

Ich persönlich bevorzuge als Editor den iA Writer, da er sowohl für Mac, als auch für iOS-Geräte zur Verfügung steht und die Dateien über den iCloud-Sync immer aktuell gehalten werden. Alternativ habe ich auch mal darüber nachgedacht, Markdown direkt in WordPress zu schreiben, z.B. mit dem Plugin WP-Markdown, aber irgendwie ist mir das Risiko zu hoch, dass da was schief läuft.

Habt ihr bereits Erfahrungen mit Markdown gemacht? Vielleicht habt ihr auch einen Editor oder eine Erweiterung für WordPress oder Contao im Einsatz, die man sich ansehen sollte? Kritik und Anmerkungen wie immer gerne in den Kommentaren.

Erinnert ihr euch noch? Ende letzten Jahres entschloss ich mich dazu, Facebook nicht weiter zu nutzen, da mich so einiges an dem Netzwerk störte und ich immer mehr das Gefühl hatte, meine Zeit besser nutzen zu können.

Nach über 3 Monaten ohne Facebook wird es nun Zeit für ein erstes Fazit:

• Facebook hat mich nicht bekehren können. Zurzeit bin ich 1x im Monat für ca. 2 Minuten bei Facebook online. Falls doch jemand auf die Idee gekommen ist, mir eine wichtige Nachricht zu senden.
• Alle wichtigen Neuigkeiten haben mich auch so irgendwie erreicht. Sei es per E-Mail, Telefon oder im persönlichen Gespräch.
• Ich traue mich dennoch nach wie vor nicht, meinen Account bei Facebook zu löschen
• Privat nutze ich von den Social Networks nur noch Instagram. Das vor allen Dingen, weil alle Bilder automatisch und in der richtigen Größe auch gleich in meinem Blog landen.
• Alle anderen Netzwerke nutze ich hauptsächlich beruflich. Am Aktivsten bin ich nach wie vor bei Twitter (sagt auch Klout).
• Dadurch habe ich wieder mehr Zeit, zum Beispiel zum Bloggen.
• Ich habe es endlich geschafft, mich ein wenig mehr mit Google+ auseinanderzusetzen.
• Ebenso schaue ich momentan öfters mal bei App.net rein, sehe aber es aber noch lange nicht als Ersatz für Twitter.

Abgesehen davon, wollte ich endlich mal die Google Chart Tools testen. Funktioniert und ist super einfach.

Noch immer wird auf vielen Websites die Macht von Bildern und Bildsprache unterschätzt. Dabei gehören sie heutzutage zu den wichtigsten Instrumenten, um Nutzer emotional anzusprechen.

Ach, was war das alles einfach früher. In den Zeiten von Frontpage und Tabellenlayouts hat sich niemand ernsthaft Gedanken darüber machen müssen, dass Bilder auf einer Website mehr als nur einen dekorativen Charakter haben müssen. Bannerartig (z.B. 760 x 100 Pixel) zeigten sie häufig Bürobilder oder Außenaufnahmen im starken Anschnitt. Personen sah man eher selten. Wenn doch, hatte man Mühe sie gut sichtbar in diesem Panoramaformat unterzukriegen. Bilder zum Transport von Botschaften nutzen? Unvorstellbar.

Heute haben sich zwar Bildqualität und -größe weiterentwickelt, schließlich werden Bilder auf Websites immer größer, jedoch unterschätzen noch immer viele Unternehmen und Agenturen die Macht von Bildern auf Websites.

Warum sind Bilder auf Websites so wichtig?

Das Bilder auf eine Website gehören, zweifelt heutzutage kein Unternehmen mehr an. Doch fragt man Unternehmen nach dem Sinn von Bildern, hört man oftmals nur „Naja, der Nutzer soll sich vorstellen können, was wir machen“. Referenzen sollen dem Nutzer die Expertise des Unternehmens vermitteln, Infografiken werden genutzt, um (schwierige) Sachverhalte besser transportieren zu können.

Was viele Unternehmen allerdings vergessen: Bilder können und sollten auch dazu genutzt werden, um den Seitenbesucher in eine Stimmung z.B. in Kauflaune/Kontaktlaune zu versetzen. Gerade wenn der Seitenbesucher noch anonym ist, also bisher in keiner Verbindung zum Unternehmen steht, ist es wichtig den Nutzer davon zu überzeugen, dass seine Suche beendet ist und er das passende Unternehmen für die Lösung seines Problems gefunden hat. Ich habe das Gefühl, im Web gilt mittlerweile mehr denn je: Nicht das beste Unternehmen, sondern das beste Marketing gewinnt Neukunden. Durch hochwertige Bilder und Grafiken wird eine Website vom Besucher als attraktiver eingestuft. Doch wer Emotionen beim Nutzer erzeugen will, sollte noch einen Schritt weiter gehen.

Personen auf Websites

Unzählige Eyetracking-Analysen haben gezeigt, dass Emotionen sich besonders gut durch die Verwendung von Personen auf Websites erzeugen lassen. Denn unser Gehirn unterscheidet nicht zwischen Web und Alltag. Stets finden Abläufe wieder der „Freund- oder Feind“-Check statt.

„Ist mir die dargestellte Person sympathisch? Dann ist mir auch die Website sympathisch.“

Websites mit Bildern von Personen, die den Betrachter anschauen, werden in vielen Fällen als einladend empfunden und ziehen automatisch Blicke an. Der Grund ist einfach: Blickkontakt bedeutet Kontaktaufnahme und ist der erste Schritt zur Kommunikation. Innerhalb von Sekundenbruchteilen deuten wir dabei Stimmung und Gestik unseres Gegenübers, so wie bei dem Bild des „Handshake“-Mannes eingangs des Artikels.

Aber auch Personen, die uns nicht anschauen, können eine Wirkung auf den Seitenbesucher haben. Denn der Mensch ist es gewohnt, den Blicken und Gesten anderer zu folgen. Mit anderen Worten: Die Aufmerksamkeit eines Textes oder Buttons lässt sich beispielsweise durch die Blickrichtung oder einen Fingerzeig vergrößern.

Bild: Flickr – patriziasoliani

Nutzer folgen unweigerlich der Blickrichtung einer Person auf einer Website. Das Gleiche gilt für Gesten und das Zeigen auf Objekte oder Elemente

Vorsicht ist allerdings bei gekauften Fotos (wie in meinen Beispielen hier) geboten. Wer glaubt, dass ein paar gekaufte Fotos von Katalogschönheiten eine jede Website emotional aufwerten, fällt damit höchstwahrscheinlich auf die Nase. Fotos von istockphoto oder fotolia sehen nicht nur häufig gestellt aus, sie werden auch bereits auf zigtausend Websites vewendet. Das nervt und führt im schlimmsten Fall dazu, dass der Nutzer die Website gleich wieder verlässt.

Produktfotos auf Websites und Shops

Und wie sieht es aus mit Produktfotos? Lassen sich auch durch Produktfotos Emotionen beim Betrachter erzeugen? Forscher fanden vor einiger Zeit heraus, dass allein die auf der Apple-Website verwendeten Produktfotos unser Gehirn stimulieren und das Gefühl des „Habenwollens“ erzeugen (s.a. die ARD-Reportage: Der Apple Check, ab Minute 7).

Nun wird sich nicht jedes Unternehmen makellose, aus dem 3D-Programm gerenderte Produktfotos leisten können bzw. wollen. Grundsätzlich gilt aber auch hier, dass je hochwertiger die Produktfotos sind, desto größer die Attraktivität des Produktes und das Vertrauen in das Unternehmen.

In einer Studie mit dem Titel „Exploring Human Images in Website Design“ von Dianne Cyr, Milena Head, Hector Larios und Bing Pan wurde getestet, ob sich Emotionen auch dadurch erzeugen lassen, indem man Produktfotos mit Personen kombiniert. Dafür wurde Teilnehmern ein Online-Shop für Elektroartikel also (TV, Laptops, Digitalkameras) in 3 Variationen vorgelegt:

• normale Produktbilder (ohne Personen)
• Produktbilder mit Personen im Anschnitt auf den Bildschirmen
• Produktbilder auf denen Gesichter auf den Bildschirmen zu sehen sind

Das Ergebnis der Studie:
Der Shop, bei dem Personen mit Gesicht auf den Bildschirmen dargestellt wurden, wurden generell als wärmer und emotional ansprechender empfunden. Kulturelle Unterschiede spielten hierbei keine Rolle, denn das Ergebnis fiel in allen 3 Testländern(Kanada, Deutschland und Japan) gleich aus.

Fazit:

Die meisten Unternehmen haben den Mehrwert von Bildern auf der Website erkannt. Wenn es jedoch darum geht Nutzer durch Bilder emotional anzusprechen, fehlt vielen Unternehmen aber auch einigen Internetagenturen das nötige Know-how. Ein Fehler bei der Bildauswahl oder -sprache kann im schlimmsten Fall dafür sorgen, dass Nutzer einen falschen Eindruck vom Unternehmen bekommen und die Website auf direktem Wege wieder verlassen.

Weitere Infos:

• Design im Wandel: Bei Corporate Websites
• Die Psychologie des Webdesign

Marc Thiele hat ein paar Videos von der letzten Smashing Conference 2012 online gestellt, so auch den Vortrag von Aarron Walter:

„While some companies use their brand as an opaque facade to hide their questionable practices, others are opening up to their audience and sharing their true personality. The result is a more honest relationship with customers.“

Die Slides zu meinem Vortrag „Flat Design – Der nächste große Designtrend?“, den ich auf dem 3. Webmontag in Kiel gehalten habe, sind nun auch online verfügbar.

Slides ansehen