Kategorien
HTML/CSS Responsive Design Webdesign

Modernes Webdesign: Diese Fehler solltest du vermeiden

Webdesign und -entwicklung haben sich in den vergangenen Jahren enorm geändert. Daran ist vor allem auch das mobile Internet verantwortlich, was die Art und Weise, wann und wie wir das Internet nutzen, verändert hat. Vieles, was vor zehn Jahren noch gängig war, gilt heute als überholt. Selbst vieles, was vor zwei bis drei Jahren noch völlig aktuell war, gilt heute als veraltet. Welche Dinge solltest bei der Gestaltung und Entwicklung moderner Websites lieber nicht (mehr) machen?

Layouts nur für Desktopgeräte und Smartphones

Die Zeiten, in denen du deine Website nur für eine Ansicht entwickelt hast, sind ja nun schon lange vorbei. Und man findet mittlerweile nur noch wenige Websites, die ohne responsives Layout auskommen.

Doch häufig werden beim responsiven Layout nur zwei Geräte- beziehungsweise Displaytypen berücksichtigt: der klassische Monitor und das Smartphone. Dabei erhält zumindest das Desktoplayout eine feste Breite, während das mobile Layout häufig auf die gesamte Breite des Browserfensters ausgedehnt wird.

Die Unterscheidung nur zwischen Desktop und Smartphone ist mittlerweile jedoch viel zu kurz gegriffen. Denn es gibt mit Tablets und Phablets mittlerweile eine Vielzahl unterschiedlicher Geräte mit diversen Auflösungen. Die Unterscheidung zwischen nur zwei Typen wird dieser Entwicklung nicht gerecht. Daher solltest du dein Layout so flexibel halten, dass es auf allen Auflösungen funktioniert.

Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben. Und auf Tablets sollte nicht das Layout für Mobilgeräte dargestellt werden.

Eigene Mobilversion deiner Website

Bleiben wir beim mobilen Webdesign. Als die Möglichkeiten responsiver Websites noch sehr eingeschränkt waren, wurden eigene Mobilversionen für Websites entwickelt. Noch heute haben vor allem große Newsportale immer noch eigene Mobilversionen, die meist über eine eigene Subdomain zugänglich sind.

Hier ergibt sich natürlich dasselbe Problem mit den Layouts. Darüber hinaus sind immer zwei Versionen einer Website zu pflegen. Und häufig funktioniert die Ausgabe der richtigen Version nicht. Da wird auf Tablets gerne mal die Mobilversion geladen, obwohl die Auflösung eigentlich problemlos die Desktopversion anzeigen könnte.

Inhalte fürs mobile Internet verstecken

Websites werden zunehmend komplexer. Das gilt für den Inhalt, aber auch für die Gestaltung. Großformatige Bilder und Grafiken werden kombiniert mit mehrspaltigen Texten und zusätzlichen Sidebars.

Und auch der Unterschied zwischen den Display- beziehungsweise Monitorgrößen wird immer größer. So gilt es heutzutage, Websites zu gestalten, die auf großen Monitoren ebenso gut aussehen wie auf kleinen Smartphones.

Das ist durchaus eine Herausforderung. Viele Webdesigner gehen da einen einfachen, aber nicht empfehlenswerten Weg. Angeblich verzichtbare Inhalte werden auf Smartphones einfach versteckt. Das mag im ersten Moment sinnvoll sein, um die Übersichtlichkeit einer Website auf einem Smartphone zu gewährleisten.

Aber da Websites oft häufiger mobil besucht werden als über einen Desktoprechner, ist dieses Vorgehen natürlich nicht im Sinne des Besuchers. Daher sollten auf Smartphones keine Inhalte vorenthalten werden. Vielmehr solltest du schauen, wie du alle Inhalte platzsparend und übersichtlich präsentierst. So kannst du Slider einsetzen oder Inhalte über eine Sidebar ausblenden und per Button einblenden lassen.

Fenster und Videos ungefragt über den Inhalt legen

Zu einer regelrechten Unsitte haben sich sogenannte „Modal Boxes“ entwickelt, die beim augenscheinlichen Verlassen einer Seite über den gesamten Inhalt selbiger gelegt werden. In solchen Bereichen wird dann beispielsweise auf den Newsletter oder auf irgendwelche Angebote hingewiesen.

Wenn man tatsächlich dabei ist, eine Seite zu verlassen, sind sie nicht störend. Wer aber nur versehentlich die Maus aus dem oberen Bereich der Seite hinausbewegt, wird bereits mit einem solchen Screen belästigt.

Wer seine Besucher also nicht verärgern will, sollte auf diese Pop-ups des modernen Webdesigns verzichten – so schön sie auch für einen Betreiber einer Website sein mögen.

Gleiches gilt für Videos, die ungefragt den Inhalt einer Website verdecken.

Einfache Auflösungen und falsche Bildformate

Das Internet ist nicht nur mobiler geworden; es ist auch hochauflösender geworden. Bei Displays und Monitoren spielt längst nicht mehr nur die Größe eine Rolle, sondern auch die Auflösung. So nimmt die Pixeldichte zu und die Auflösung wird immer schärfer.

Bei Bildern macht sich das zunehmend bemerkbar. In einfacher Auflösung sieht ein Bild auf einem hochauflösendem Display verwaschen und unscharf aus. Doch HTML5 und CSS3 erlauben es dir, Bilder für verschiedene Pixeldichten zu hinterlegen.

Nutze diese Möglichkeit, damit deine Website auch auf neuen Geräten nicht nur gut aussieht, sondern auch gestochen scharf ist. Wähle zudem das richtige Format für deine Bilder und Grafiken aus. Nutze JPEGs für Fotos, PNGs für Grafiken und SVGs für Vektorzeichnungen.

Systemschriften und zu kleine Schriften

Seit es Webschriften nach vielen Jahren in alle Browser geschafft haben, ist die Verwendung von Systemschriften nicht mehr nötig. Es gibt unzählige kostenlose und kostenpflichtige Schriften, die du in dein Webprojekt übernehmen kannst. Achte darauf, dass du es diese Schriften im neuen Format WOFF2 gibt. Dieses löst das bisherige Standardformat WOFF ab und ist dank besserer Komprimierung noch platzsparender. Und das ist gerade im mobilen Internet ein großer Vorteil.

Achte zudem darauf, dass du Schriften nicht zu klein einsetzt. Vor allem setze nicht auf eine einheitliche, feste Schriftgröße. Auf Smartphones sollten Schriften eine andere Größe haben als auf großen Monitoren.

Den Besucher warten lassen

Heutzutage erwartet man zurecht, dass Websites sich schnell aufbauen. Daher solltest du deine Website so entwickeln, dass sie schnell geladen wird. Optimiere Bilder und verwende das richtige Format.

Nutze Techniken wie das „<picture>“-Element, um immer passend große Bilder auszuliefern. Lade auf Smartphones Bilder in kleinerer Auflösung und nicht in einer Auflösung, wie sie auf einem großen Monitor benötigt wird.

Achte darauf, dass JavaScript die Ausgabe von HTML nicht blockiert oder verlangsamt und versichere dich, dass extern eingebundene Dateien deine Ladezeiten nicht negativ beeinflussen.

Kategorien
Apps Inspiration Programmierung Showcases

Mockups: 50+ kostenlose Design-Ressourcen für deine Präsentation

Du kennst das. Du hast eben begonnen, an der Kunden-Website zu arbeiten, da will der Kunde schon mal sehen, wie das so aussehen wird, am besten auch gleich auf mehreren Geräten. Und natürlich so, dass er sich darunter was vorstellen kann.

Oder will dein Chef die App, an der du gerade die ersten Umsetzungsschritte vornimmst, jetzt schon aussagekräftig vermarkten? Ober benötigst du gar selber für deine tolle Idee zu einem Kickstarter-Projekt ein Mockup deiner App, das die Leute überzeugt und zum Investieren animiert? Egal, ob diese oder ähnliche Szenarien, du benötigst etwas, das es noch gar nicht gibt. Zauberei. Das ist ein Fall für Dr. Web.

Wir haben uns in die Weiten und die Tiefen des Webs begeben und unsere Netze ausgeworfen. Hängen geblieben sind fast 60 Dienste und Vorlagen auf Foto- oder Vektorbasis, mit denen deine Präsentation zumindest potenziell ein Erfolg werden kann. Sagen wir es so: Wenn du trotz unserer Hilfe keinen Erfolg haben solltest, lag es an was anderem ;-)

Abschnitt #1: Dienste

Placeit

placeit
Erstellt von/für:   placeit

Device Art Generator

device-art-generator

Erstellt von/für:   Android Developers

Mockuphone

mockuphone

Erstellt von/für:   mockuphone

ShapeItApp

shapeitapp

Erstellt von/für:   shapeitapp

Am I Responsive

am-i-responsive

Erstellt von/für:   responsivedesign

Abschnitt #2: Fotorealistische PSD-Mockups

iPhone Mockups

iphone-mockups-by-regy-perlera

Erstellt von/für:   Regy Perlera

iPad & iPhone 5s Mockups

ipad-&-iphone-5s-mockups-by-regy-perlera

Erstellt von/für:   Regy Perlera

iPhone 5s Mockup in Gold

iphone-5s-mockup-gold-by-christoph-gromer

Erstellt von/für:   Christoph Gromer

Flat iPhone 5S Mockup

flat-iphone-5S-mockup-by-george-vasyagin

Erstellt von/für:   George Vasyagin

iPad Mini

ipad-mini-by-kenny-sing

Erstellt von/für:   Kenny Sing

Nexus 5 Mockup

nexus-5-mockup-by-kreativa-studio

Erstellt von/für:   Kreativa Studio

Xperia Mockup

xperia-mockup-by-josé-polanco

Erstellt von/für:   José Polanco

Notemockup2

notemockup2

Erstellt von/für: webvilla

Surface 2

surface-2-by-sam-withey

Erstellt von/für:   Sam Withey

iPhone 5 Foto-Mockup

iphone-5-photo-mockup-by-brandon-brown

Erstellt von/für:   Brandon Brown

Notemockup3

notemockup3

Erstellt von/für:   webvilla

iPhone & MacBook Pro

iphone&probook-by-anpsthemes

Erstellt von/für:   anpsthemes

iPad 3

ipad-3-by-brandon-brown

Erstellt von/für:   Brandon Brown

Nexus 5

nexus-5-by-vector-square

Erstellt von/für:  Vector Square

Nokia Lumia 2520

nokia-Lumia-2520-by-andrii-sydorov

Erstellt von/für:   Andrii Sydorov

Iphone 5S & 5C Mockup

iphone-5s-&-5c-mockup-by-gwénolé-jaffrédou

Erstellt von/für:   Gwénolé Jaffrédou

iPhone 5

iphone-5-by-paul-flavius-nechita

Erstellt von/für:   Flavius Nechita

iPad Mockup

ipad-mockup-by-petter-berg

Erstellt von/für:   Petter Berg

Macbook Mockup

macbook-mockup-by-petter-berg

Erstellt von/für:   Petter Berg

MacBook Air Mockup

macBook-air-mockup

Erstellt von/für:   ninetofive

MacBook Air Mockup

macBook-air-mockup-1

Erstellt von/für:   ninetofive

The Desk Template

the-desk-template

Erstellt von/für:  Jérémy Paul

iPhone 5 schwebend

iphone-5-levitation

Erstellt von/für:   Jérémy Paul

iPhone 5 3D

iphone-5-3d

Erstellt von/für:   Jérémy Paul

iPhone 5s

iphone-5s-mockup

Erstellt von/für:   graphicburger

Macbook Air Screen

macbook-air-screen

Erstellt von/für:   pixeldima

iPhone5 fotorealistisch

iphone5-photo-realistic-mockup

Erstellt von/für: Tomas Korosi

Desktop-Ständer

phone-Holder

Erstellt von/für: Danny Johnson Junior

3D iPhone

3d-iphone

Erstellt von/für: nickmurphy

Abschnitt #3: Vektor-basierte PSD-Mockups

Ipad Air Mockup

ipad-air-mockup

Erstellt von/für:   blugraphic

iPhone

iphone-by-graph-concepts

Erstellt von/für:   Graph Concepts

Minimal Flat Iphone5

minimal-flat-Iphone5-by-rahul-dass

Erstellt von/für:   Rahul Dass

Samsung Galaxy S4 

samsung-galaxy-s4

Erstellt von/für:   Valentin Scholz

Simple Flat iPhone 5S Vektor

simple-flat-iphone-5s

Erstellt von/für:   Alberto Ziveri

Nexus 5 

nexus-5-by-greg-moore

Erstellt von/für:   Greg Moore

Samsung Mobile 

samsung-mobile-by-monkeytempal

Erstellt von/für:   monkeytempal

iPhone und Android 

iphone-and-android-by-billy-kiely

Erstellt von/für:   Billy Kiely

Apple-Armada im Flat Design

flat-apples-devices

Erstellt von/für:   Michal Jakobsze

BlackBerry Z10

blackberry-z10

Erstellt von/für:   graphicburger

Smartphones

smartphones

Erstellt von/für:   Jérémy Paul

Nexus 5 in Flat

nexus-5-flat

Erstellt von/für:   Christian Björkman

Flat Showcase mit mehreren Geräten

flat-showcase-presentation

Erstellt von/für:   victorsosea

 Illustrator-Vorlage mit verschiedenen Geräten

mobile-devices-illustrator-template

Erstellt von/für: uxkits

Diverse Mobilgeräte im Flat Design

flat-mobile-devices

Erstellt von/für: Herr Henning

HTC One

htc-one

Erstellt von/für: Ben Mildren

iPhone 5c, gewohnt farbenfroh

iphone-5c-colorful

Erstellt von/für: Anton Kudin

Nexus 7

nexus-7

Erstellt von/für: Tim Gale

(Der Beitrag wurde im April 2019 zuletzt geprüft und um tote Links bereinigt.)

Kategorien
Essentials Freebies, Tools und Templates

Remote Debugging: Mobile Webseiten am PC oder Mac untersuchen

Beim Entwickeln von mobilen Webseiten kommt man irgendwann unweigerlich an den Punkt, an dem man auf dem Smartphone oder Tablet die Entwicklertools im Browser starten möchte, um das HTML und CSS genauer untersuchen zu können.

Dieser Beitrag zeigt Ihnen, wie Sie Webseiten auf Android- und iOS-Geräten mit den Browserentwicklertools auf einem PC oder Mac untersuchen können, und zwar weitgehend mit Bordmitteln und ohne die Installation zusätzlicher Software wie Android SDK, Adobe Edge Inspect oder Weinre (WEb INspector REmote).

Die Hardware

Bevor Sie loslegen, überprüfen Sie kurz die Hardware. Sie benötigen:

  • Smartphone oder Tablet mit Android oder iOS
  • USB-Kabel, um das Gerät mit dem Rechner zu verbinden
  • Mac mit OS X oder PC mit Windows (oder beides)

Am besten funktioniert die im Folgenden beschriebene Vorgehensweise auf Macs unter OS X ab 10.8, denn dort können Sie ohne viel Aufwand sowohl iOS- als auch Android-Geräte untersuchen. Auf PCs hingegen kann man nur Androids debuggen und muss zunächst einen USB-Treiber für das Gerät installieren, was Windows in der Regel allerdings automatisch erledigt.

Remote Debugging mit Android-Geräten (für Win und OS X)

Zum Debuggen von Webseiten auf Androids benötigen Sie folgende Software:

  • als Browser: Googles Chrome ab V28 auf beiden Geräten
  • auf dem PC oder Mac die Chrome-Erweiterung ADB
  • PC mit Windows (ideal 7) oder Mac mit OS X (ab 10.8)
  • unter Windows: USB-Treiber für das Android-Gerät

Und los geht’s.

1. Die Chrome-Erweiterung ADB installieren

Im Chrome auf dem PC oder Mac installieren Sie zunächst die Erweiterung mit dem schönen Namen „ADB“, die innerhalb von Chrome die „Android Debug Bridge“ zur Verfügung stellt und Ihnen damit die Installation des kompletten Android SDK erspart.

Zur Installation der Erweiterung suchen Sie im Chrome Web Store einfach nach den Buchstaben „ADB“ oder klicken auf den Direktlink, den Sie weiter unten bei den „Links zum Beitrag“ finden. Unter Windows 8 klappt die Installation aus dem Chrome Webstore nicht, aber bei Github gibt es genaue Anweisungen zur manuellen Installation. Einen Link dazu finden Sie ebenfalls am Ende des Beitrags.

Nach der Installation der ADB-Extension finden Sie im Chrome rechts oben einen kleinen grauen Androiden.

01-chrome-adb-installed

2. Debugging auf dem Android-Gerät erlauben

Auf dem mobilen Gerät müssen Sie das Debugging gleich zwei Mal erlauben, und zwar einmal in den Einstellungen des Gerätes und einmal im mobilen Chrome. Gehen Sie zunächst in die Einstellungen des Gerätes und erlauben bei den Entwickler-Optionen das USB-Debugging.

02-s2-usb-debugging-quer

Ab Android 4.2 sind die Entwickler-Optionen standardmäßig versteckt. Um sie einzublenden, rufen Sie in Einstellungen die Option Info zum Gerät (4.2) bzw. Über das Telefon (ab 4.3) auf. Dort tappen Sie dann sieben Mal auf die Buildnummer. Unglaublich aber wahr. Nach Absolvierung dieses Rituals gehen Sie wieder eine Seite zurück und finden dann dort die Entwickler-Optionen, in denen Sie wie oben beschrieben das USB-Debugging aktivieren können.

Starten Sie jetzt Chrome auf dem Android-Gerät und aktivieren Sie im Menü Einstellungen - Entwickler-Tools die Option Web-Debugging über USB, indem Sie auf die Option tappen und dann rechts oben den Schiebeschalter auf Ein stellen. [EDIT 2013-11-26: Falls diese Option nicht vorhanden sein sollte, machen Sie einfach mit Schritt 3 weiter. Siehe Kommentar weiter unten.]

03-s2-chrome-web-debugging-ein

Danach rufen Sie im mobilen Chrome die Seite auf, deren Quelltext Sie gleich am PC oder Mac untersuchen möchten.

3. Geräte verbinden und Quelltext untersuchen

Zum Verbinden der Geräte stöpseln Sie unter OS X einfach das USB-Kabel ein und bestätigen eventuelle Sicherheitsabfragen.
Auf dem Android-Gerät erscheint die Meldung Als Mediengerät verbunden und oben in der Statusleiste wird oben links das USB-Symbol sichtbar. Eine eventuelle Meldung „Es wurde keine Software auf Ihrem PC gefunden, die das Gerät erkennt“ können Sie ignorieren bzw. mit OK bestätigen. Es funktioniert trotzdem.

Unter Windows werden nach dem Einstöpseln des USB-Kabels zunächst die Treiber für das Android-Gerät installiert. Im Idealfall passiert dies automatisch und sie brauchen dafür nichts, außer ein paar Minuten Geduld. Falls die Installation aus irgendeinem Grunde nicht klappen sollte, müssen Sie den USB-Treiber für das Androidgerät manuell installieren. Einen Link für Windows OEM USB Treiber finden Sie am Ende des Beitrags.

Nach dem Verbinden der Geräte starten Sie im Chrome auf dem PC oder Mac die weiter oben installierte Erweiterung ADB, indem Sie zunächst auf den grauen Androiden klicken und dann auf den Befehl Start ADB. Daraufhin färbt sich der Android grün.

04-chrome-adb-view-targets

Klicken Sie auf das jetzt grüne Android-Symbol und wählen Sie im ADB-Menü die Option View Inspection Targets. Chrome öffnet die Seite chrome://inspect, auf der Sie eine URL eingeben und damit auf dem mobilen Chrome einen neuen Tab öffnen können. Darunter werden im mobilen Chrome bereits geöffnete Seite gelistet. Sie können sie untersuchen, indem Sie auf den Link Inspect hinter dem Namen der Seite klicken.

Die folgende Screenshot-Montage zeigt auf der linken Seite die Developer Tools im Chrome auf dem Desktop, in denen das HTML-Element für das Menü ausgewählt wurde. Auf der rechten Seiten sehen Sie, wie das auf dem Desktop-Chrome selektierte Element im Chrome auf dem Android-Gerät hervorgehoben wird. Änderungen in den Developer Tools auf dem Desktop werden live und in Farbe im mobilen Browser umgesetzt. Remote Debugging.

05-chrome-devtools-desktop-webseite-mobile

Remote Debugging mit iOS-Geräten (nur OS X)

Zu Analyse von Webseiten auf iOS-Geräten benötigen Sie mindestens iOS 6 und einen Mac. Der wesentliche Unterschied liegt darin, dass das Debugging im Safari stattfindet und nicht im Chrome.

Gleich zu Beginn der Hinweis, dass Sie statt eines echten iOS-Gerätes auch den in der Programmierumgebung Xcode enthaltenen iOS-Simulator benutzen können. Die folgenden Schritte können Sie also auch dann abarbeiten, wenn Sie gerade weder ein iPhone noch ein iPad zur Verfügung haben. Xcode selbst können Sie aus dem Appstore heraus installieren. Im Menü Xcode - Open Developer Tool wird dann der iOS-Simulator gestartet.

1. Im Safari die Entwicklertools aktivieren

Zunächst aktivieren Sie im Safari auf dem Mac und auf dem mobilen Gerät (oder im iOS-Simulator) die Entwicklertools. Auf dem Mac finden Sie dazu in den Einstellungen im Abschnitt Erweitert die Option Menü "Entwickler" in der Menüleiste anzeigen.

06-safari-einstellungen-erweitert

Im iOS-Gerät gehen Sie in die Einstellungen - Safari - Erweitert und aktivieren dort mit dem Schieberegler die Option mit dem unscheinbaren Titel Webinformationen. In der englischen Version heißt der Befehl Web Inspector.

07-ipad-einstellungen-safari-erweitert

2. Geräte verbinden und Quelltext untersuchen

In diesem Schritt verbinden Sie iOS-Gerät und Mac mit dem USB-Kabel. Danach öffnen Sie auf dem Mac den Safari und finden dort im Menü Entwickler relativ weit oben das per USB-Kabel angeschlossene Gerät und bzw. oder den iOS-Simulator.

08-safari-entwicklermenü-ios-devices

Für die gefundenen Geräte werden alle im Safari geöffneten Webseiten angezeigt. Ein Klick auf die gewünschte Seite, und schon sehen Sie auf dem Mac die Entwicklertools mit dem Quelltext der auf dem mobilen Safari geöffneten Webseite. Auch hier werden Änderungen in den Entwicklertools auf dem Mac sofort im mobilen Safari umgesetzt.

09-safari-devtools-ipad-simulator

Fazit

Das Debuggen von Webseiten auf mobilen Geräten von einem PC oder Mac aus ist auch ohne zusätzliche Software recht einfach möglich und erleichtert die Optimierung ganz enorm.

Links zum Beitrag

Remote Debugging für Android:
Chrome downloaden
Die Erweiterung ADB im Chrome Webstore
ADB unter Windows 8 – manuelle Installation.
Windows OEM USB Treiber für Android
– Artikel „Remote Debugging on Android“

Remote Debugging für iOS:
Safari 7
Xcode mit iOS Simulator
– Artikel „Using Web Inspector to Debug Mobile Safari“

Links zu weiteren Tools

(dpe)

Kategorien
Infografiken Inspiration

Bilder sind alles – fast [Infografik]

Die Designer des Bilder-, Illustrations- und Font-Providers Veer stellen eine schicke, animierte Infografik vor, die auf einen langen Blick zusammenfasst, was man als Entwickler und Content-Produzent an vielen Ecken und Enden des Web immer wieder vorgetragen bekommt. Es geht um die Wichtigkeit guter Bilder; naheliegend bei einem Bilderdienstleister, aber deswegen dennoch wahr. Schön, wenn man die wesentlichen Erkenntnisse an einer Stelle, noch dazu in ansprechender Aufmachung, gesammelt präsentiert bekommt. Und natürlich genau die richtige Beschäftigung für einen kalten Sonntagnachmittag…

Der Aufstieg visueller Medien steigert die Wichtigkeit von Bildern

Es ist eine alte Weisheit: Ein Bild sagt mehr als tausend Worte. Dass ein reich bebilderter Beitrag leichter lesbar ist und mehr Aufmerksamkeit erzeugt als eine reine Textwüste, ist eine weitere, unwiderlegbare Erkenntnis. Designer und Inhaltersteller sind sich dieser Umstände seit Dekaden bewusst.

Wie eine Bestätigung kann daher der Aufstieg der diversen bildorientierten Dienste gelten. Gerade der kometenhafte Aufstieg der Smartphones mit ihren stetig besser werdenden Kameras sorgt für eine immer visueller werdende Kultur. Instagram, Pinterest, Facebook, Flickr, 500px, Google+ und wie sie alle heißen, basieren teils vollständig, teils wesentlich auf der Verfügbarkeit von immer mehr Bildmaterial im sozialen Web.

Da ist es sinnvoll, sich die wesentlichen Fakten zum Thema Bildeinsatz in der Kommunikation noch einmal deutlich vor Augen (sic!) zu führen:

  • 55% der gesamten zwischenmenschlichen Kommunikation ist visuell
  • Unterstützt man eine Botschaft mit Bildmaterial, wird diese mit um bis zu 65% gesteigerter Wahrscheinlichkeit im Gedächtnis behalten
  • 30% aller Hirnzellen werden für das Sehen benötigt
  • Bildunterstützte Botschaften werden um 20% schneller aufgenommen, als solche ohne Bilder
  • Die Wahrnehmung der Umwelt wird durch das Sehen dominiert. Alle anderen Sinne spielen eine vergleichsweise geringfügige Rolle

Zusätzlich zu den Basics befasst sich Veers Infografik mit dem Anstieg der Bilder im historischen Vergleich, sowie konkreten quantitativen Angaben zu verschiedenen sozialen Netzwerken, etwa Pinterest, Facebook und Instagram. So werden allein auf Facebook pro Minute 174.000 Bilder hochgeladen. 70% der gesamten sozialen Kommunikation in Netzwerken dreht sich um oder bezieht sich auf Bilder.

Weitere interessante Fakten entnehmen Sie bitte der folgenden Infografik aus dem Hause Veer. Mittels Klick auf die Grafik gelangen Sie zur animierten Originalausgabe:

[Quelle: Veer.com]