Technische Umsetzung

Das geplante Szenario, in welchem ein Webdesigner mit der Infografik seine Kunden und Interessierte informieren will, gibt eigentlich die Technik der Umsetzung und das Zielmedium bereits vor.

Es ist sehr wahrscheinlich, dass er die Infografik in seine Website integrieren will. Sie muss auch auf dem iPad betrachtet werden können, weshalb wir Flash nun ausschließen. Die Infografik wird also voraussichtlich mit HTML, CSS & Java Script umgesetzt.

Wir streben außerdem an, die Infografik selbst reaktionsfähig (responsive) zu gestalten. Da wir aber bisher nur Erfahrung mit der Umsetzung einer reaktionsfähigen Website haben, auf der außer Buttons keine interaktiven Elemente vorhanden sind, müssen wir zunächst abschätzen, wie aufwändig dieses Vorhaben werden würde. Wir sehen dies als Herausforderung und werden natürlich versuchen unser Vorhaben umzusetzen.

Getaggt mit , , , , , ,

Zielgruppe und Typologie der Infografik

Zielgruppe

Verschiedene Zielgruppen sind denkar:

  1. Unternehmen, die durch die Infografik informiert werden, warum es Sinn macht die Website responsive zu gestalten (Redesign)
  2. Designer, die sich im Bereich Responsive Webdesign weiterbilden wollen
  3. Studenten (Bereich Design)
  4. Web-Entwickler
  5. Interessierte, die sets auf dem neuesten Stand sein wollen

Für die verschiedenen Zielgruppen sind unterschiedliche Themen von Relevanz. Beispielsweise sind für die erste Zielgruppe Inhalte wie die technische Umsetzung und der geschichtliche Hintergrund eher uninteressant. Wodurch 2 von unseren 3 geplanten Themen wegfallen würden. Die zweite Zielgruppe interessiert sich dagegen vermutlich für alle drei Themen: geschichtlicher Hintergrund (inkl. Ausblick in die Zukunft), technische Umsetzung und Gründe für Responsive Webdesign – jedoch werden sie den Fokus eher auf die Technische Umsetzung legen. Innerhalb der Zielgruppen lassen sich ebenfalls Unterschiede festmachen, da die Relevanz der Thematiken auch von deren Vorkenntnissen abhänget.

Aus diesem Grund versuchen wir eine alternative Herangehensweise:

Anbieter

Anstatt zu fragen für wen die Infografik geeignet ist, beschäftigen wir uns mit der Frage wer die Infografik anbietet, warum er dies tut und welche Mittel er dafür einsetzen wird.
Als Anbieter haben wir einen Webdesigner gewählt. Dieser will zum Einen seine Expertise, Know How & „Best Practice“ Erfahrungen teilen, zum Anderen möchte er seine Kunden informieren und ihnen Gründe für den Umstieg auf eine reaktionsfähige Website liefern.

Typologie

Der geplante Typ der Infografik ist eine Mischung aus dem Instruktiven und dem Explorativen Typ. Das heißt, dass zwar ein roter Faden gegeben sein wird, der Nutzer aber dennoch die Möglichkeit hat, sich durch die verschiedenen Themen zu navigieren. Dieses Vorgehen wählen wir deswegen, weil es uns wichtig ist, dass der Nutzer selbst entscheiden kann, wann er welche Informationen erhält. Zum Anderen kann jedoch eine  sinnvolle Abfolge der Themen herausgestellt werden, weshalb wir die Möglichkeit der linearen Benutzerführung nicht ausschließen wollen.
Lesen Sie hierzu auch unseren Blog Post „Aufbau

Getaggt mit , , ,

Daten- und Informationsgrundlage

Wir beschäftigen uns nun schon seit längerem mit dem Thema Responsive Webdesign. Neben dem Buch „Responsive Webdesign“ von Christoph Zillgens sind uns die unten aufegührten Artikel besonders im Gedächtnis geblieben. Sie bilden die Grundlage für unsere Interaktive Infografik die aus der grundsetzlichen Frage: „Was ist Responsive Webdesign?“ und den 3 Themengebieten Geschichte (sowie Ausblick in die Zukunft), Technische Umsetzung und Gründe für Responsive Webdesign besteht.

Geschichte:

Responsive Web Design
Blogpost in dem das erste Mal der Begriff Resvonsive Web Design vorkam

Responsive Webdesign – Eine Herausforderung für Webdesigner
Was ist Responsive Webdesign?

Um dieser Gerätevielfalt gerecht zu werden, müssen wir uns auf die Flexibilität des Webs rückbesinnen sowie einen verbesserten Workflow in Zusammenarbeit mit Entwicklern und Auftraggebern etablieren.

Entwicklung des Web Designs
Kurz und knackig: Wie hat sich das Webdesign (von HTML bis CSS) entwickelt?

The Evolution of Webdesign
Hier kann die Entwicklung des Webdesigns von 1993 bis heute live nachempfunden werden.

Die Entwicklung des Webdesigns
Eine Infografik über die Entwicklung des Webdesigns

Die Evolution des Webdesigns
Wie hat sich das Webdesign seit der ersten Website 1991 entwickelt?

The Evolution of Web Design: 1990 – Present
Wie hat sich das Web seit 1990 bis heute entwickelt?

Technische Umsetzung:

Breaking Development: 20MB Responsive Websites
Erklärung, wie man Responsive Websites performant gestaltet

A Advanced Guide to HTML & CSS
Anleitung um Websites Responisive zu gestalten

Using decimal percentage values in responsive design
Wie man prozentuale Größenangaben richtig einsetzt

Responsive Navigation: Optimizing for Touch Across Devices
Wie gestalte ich für Touch-Geräte?

Logical Breakpoints For Your Responsive Design
Wo setzte ich die richtigen Breakpoints auf meiner Responsive Website

Building A Better Responsive Website
Erfahrungsbericht zum Erstellen einer Responsive Website

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
Wie setzt man die in CSS3 eingeführten Media Queries ein

CSS Media Query for Mobile is Fool’s Gold
Kritische Auseinandersetzung mit Media Queries. Wann man sie benutzen sollte und wann nicht

Gründe für Responsive Webdesign – Statistiken zur Nutzung des Internets auf verschiedenen Endgeräten:

Navigating the new multi-screen world: Insights show how consumers use different devices together
Google Blogpost darüber, wie Nutzer bei erledigen ihrer Aufgaben zwischen verschiedenen Geräten und damit Bilschirmgrößen wechseln.

17% of cell phone owners do most of their online browsing on their phone, rather than a computer or other device
Ergebnisse einer Studie über die Handynutzung

Smartphone Screen Sizes Keep On Growing — But Not for Much Longer
Wired Artikel über die Entwicklung der Bildschirmgrößen im Smartphonebereich

Data Monday: Impact of Responsive Designs
Große Websites veröffentlichen Daten, wie sich die Nutzung ihrer Seiten nach der Umstellung auf RWD verändert hat

How To Sell The Value Of Mobile To Clients
Wie man als Webdesigner seinen Kunden die Vorteile von RWD klar macht

Getaggt mit , ,

Infografiken als „Lernmedium“

Infografiken helfen beim Verstehen von Sachverhalten.

Rückblick, Technische Biologie Studium:

Wenn sie nicht bereits gegeben waren (beispielsweise im Biologiebuch von Perves) habe ich mir selber welche gezeichnet: einfache, modellhafte Skizzen.  An der Zeichnung habe ich mir dann die Thematik erklärt und Notizen dazu gemacht. Ich habe einige Beispiele abfotografiert:

Foto 22.04.13 15 45 10 Foto 22.04.13 15 45 36 Foto 22.04.13 15 46 40 Foto 22.04.13 15 48 15 Foto 22.04.13 15 48 31 Foto 22.04.13 15 48 43 Foto 22.04.13 15 49 15

Wie bereits erwähnt werden im Perves sehr viele Grafiken verwendet. Es fällt auf, dass stets zunächst ein grober Überblick über die Thematik gegeben wird, der sowohl mit Grafiken als auch mit Texten erklärt wird. Erst wenn das „Grobe“ erklärt wurde, folgen die Details. Die Grafiken sind meist ein Zusammenspiel aus Bildern und Texten. Die Texte haben oft eine Reihenfolge und befinden sich an der Stelle im Bild, welche sie erklären. Wenn sie keinen direkten örtlichen Bezug zum Bild haben, sind sie teilweise auch am Rand der Grafik zu finden.

Foto 19.04.13 08 56 43 Foto 19.04.13 08 56 48

Ich denke es könnte uns helfen, wenn wir uns daran Anleihen nehmen. Wir sollten immer daran denken, dass die Infografik ein Lernmedium ist, sie soll INFORMIEREN und in unserem Fall erklären. Das heißt sie soll in erster Linie zu einem schnellen und leichten Verstehen beitragen. Außerdem wollen wir, wie im Post zur Didaktik schon erwähnt, eine ähnliche Strategie wählen wie sie im Perves zu finden ist: Zunächst einen groben Überblick geben und dann ins Detail gehen.

Getaggt mit , , , ,

Benchmarking – Was gibt es schon?

Neben den Interaktiven Infografiken, die als Inspiration für unsere Infografik fungieren, gibt es auch einige, die sich sogar mit dem selben Thema auseinander setzen. Auf diese haben wir einen genaueren Blick geworfen und stellen im Folgenden eine interaktive und zwei statische Infografiken vor:

Interaktive Infografik

Im Web findet man aktuell viele Informationen rund um das Thema Responsive Webdesign.
Darunter ist auch eine Interaktive InfografikDer Aufbau dieser Infografik ist relativ simpel: Gezeigt wird eine Art Spielfeld mit dreidimensionalen Spielfeldern, die teilweise klicksensitiv sind. Beim Klick öffnen sich Fenster mit der jeweiligen Information.
Die Infografik ist trotz ihres einfachen Aufbaus recht unübersichtlich. Auf dem ersten Blick ist nicht ersichtlich, welche Informationen geboten werden. Nur das Spielfeld mit kleinen Icons auf verschiedenen Feldern sind zu erkennen. Erst beim Hover werden textuelle Informationen geboten, welche meist aus einem ganzen, recht klein gedruckten Satz bestehen. Beim Klick folgen dann nähere Informationen.

Bildschirmfoto 2013-04-25 um 09.58.08

Statische Infografiken

Neben dieser Interaktiven Grafik findet man auch einige statische Infografiken:
Beide Infografiken setzen sich mit der Frage auseinander, ob und warum das Umstellen der Website Sinn macht. Die erste Infografik ist dreigeteilt: Was ist responsive Webdesign, wie funktioniert es und was sind die Vorteile?
Was uns hier gut gefällt ist, dass sie in sich (in der Darstellung) sehr konsistent ist. Die verwendeten Icons sind von der Anmutung identisch und die Farbwelt ist auf der gesamten Infografik durchgängig. Neben den verschiedenen Grautönen wurden lediglich zwei Akzentfarben verwendet. Dadurch und aufgrund des sehr reduziert eingesetzten Textes, wirkt die Infografik relativ ruhig und übersichtlich. Auch der Aufbau, also die Anordnung der Themen ist schlüssig.

Auch die zweite Infografik startet mit der Frage: Was ist responsive Webdesign? Danach folgen 3 Schlüsseleigenschaften des Responsive Webdesigns und die Frage, warum die Umstellung Sinn macht. Zum Schluss folgen noch einige Daten und Fakten über mobile und Desktop Internet Nutzung. Im Prinzip kann man sagen, dass diese Infografik gestalterisch nahezu die invertierte erste Infografik ist. Allerdings wirkt sie etwas mehr überladen, da mehr Elemente enthalten sind.

responsive-design-infographicdic_responsive_web_design_body

Getaggt mit ,

Inspiration: Websites, die als Interaktive Infografiken fungieren

Into the Arctic

Eine interaktive Infografik mit der die Arktik erkundet werden kann, mit dem Ziel den Betrachter für das Thema Umweltschutz zu sensibilisieren.

Uns gefällt hier das Zusammenspiel aus gewaltigen Bildern und Videos und den schlichten, reduzierten Grafiken. Hinzu kommen tolle Animationen und eine riesen Vielfalt an Informationen. Obwohl die Informationsmenge wirklich gewaltig ist, wirkt die Grafik nie überladen.

Einziger Kritikpunkt ist, dass zu Beginn nicht klar ist, welche Informationen die Website beinhaltet. So wirkt zwar nicht die jeweilig dargebotenen Information unübersichtlich, aber es ist nicht ersichtlich welche Information im Gesamten geboten wird.

Bildschirmfoto 2013-04-25 um 10.00.38 Bildschirmfoto 2013-04-25 um 10.01.02

Evolution of Webdesign

Eine weitere Website ist uns bei der Recherche ins Auge gefallen. Hier geht es um die Evolution des Webdesigns seit 1993. Sie ist für uns also nicht nur als Infografik sondern auch inhaltlich von Relevanz und bildet somit (auch) die Grundlage für unsere Recherche im Bereich Geschichte.

Besonders gut gefällt uns an dieser Website, dass der Nutzer live nachempfinden kann, wie die Websites zum jeweiligen Zeitpunkt aussahen, alternativ können sie sich aber auch Informationen zum Webdesign im entsprechenden Jahr aussuchen. Insgesamt ist die Website sehr schlicht gehalten. Der Nutzer hat zu Beginn lediglich die Wahl zwischen der erlebnisreichen Sicht (Websites anschauen) oder der informativen Sicht (Informationen zum jeweiligen Webdesign erhalten). Nach dieser Auswahl stehen ihm die verschiedenen Jahreszahlen, in welchen er sich erkundigen kann zur Auswahl. Dadruch ist die Website sehr übersichtlich und der Betrachter kann je nach Interesse selbst wählen, was er sich anschaut und wie er die Informationen erhalten will.

Bildschirmfoto 2013-04-26 um 09.19.24Bildschirmfoto 2013-04-26 um 09.19.07

Getaggt mit , , , , , ,

Nächste Schritte

Benchmarking:

  • Was gibt es schon?
  • Wie wurde erklärt?
  • Wie wurde es umgesetzt?

Recherche

  • Mögliche Aspekte herausfiltern
  • Thema eingrenzen
  • Theme fixieren

Zielgruppendefinition

  • Wen könnte die Infografik interessieren?
  • Warum braucht die Persona die Infografik?
  • Welchen Nutzen hat die Persona?
  • In welchem Zusammenhang (wann, wo, wie) wird die Infografik benutzt

Foto 18.04.13 12 10 06

Typ der Infografik

  • Welcher Typ ergibt sich aus dem Erklärziel?
  • Narrativ
  • Instruktiv
  • Explorativ
  • Simultativ

Zielmedium

  • Welches Medium passt zum Thema?
  • Welches Medium passt zu der Zielgruppe?

AUSBLICK:

Bildschirmfoto 2013-04-18 um 11.14.09

Aufbau

Der „Startpunkt“ der Infografik steht fest und ist fix.

Nun stellt sich die Frage, wie wir den Nutzer von dort aus weiter führen. Hierbei haben wir 2 Möglichkeiten ausgearbeitet:

  1. Der Nutzer wird linear durch die Infografik geführt, das heißt er hat nicht die Möglichkeit auszuwählen, wann er welches Thema erkunden will.
  2. Der Nutzer kann vom Startpunkt ausgehend frei entscheiden, was er als nächstes erfahren will.

Foto 11.04.13 10 23 55

Die lineare Variante ist dann von Vorteil, wenn die Informationen auf einander aufbauen. Wenn der Nutzer Thema 3 nur verstehen kann, wenn er zuvor Thema 2 gelesen hat, dann muss diese Variante gewählt werden. Außerdem ist sie sehr übersichtlich, da der Betrachter stets nur eine Möglichkeit hat. Jedoch muss der Nutzer jedes Thema durchlaufen und hat nicht die Möglichkeit eines auszulassen. Er weiß außerdem zu Beginn noch nicht, welche Themen erklärt werden.

Die freie Variante hingegen ermöglicht dem Benutzer zu wählen, welche Informationen er wann bekommen will. Er kann sich zudem entscheiden, ob er Informationen auslassen möchte. Dies ist dann von Nachteil, wenn alle Informationen für das Verständnis relevant sind.

Es gibt außerdem die Möglichkeit eine Mischform zu wählen. Wenn einige Informationen von einander abhängen, können diese linear verknüpft werden, obwohl der generelle Aufbau der Grafik frei ist. Zudem könnte man zwar eine Reihenfolge der Information vorgeben, dem Nutzer aber dennoch ermöglichen auszuwählen, wann er welches Thema erkundet.

In unserem Fall ist es so, dass einige Informationen allein durch ihren Inhalt verknüpft sind und deswegen auch in der Grafik verknüpft werden könnten. Die verschiedenen Größen der Geräte (welche wir im Abschnitt: Warum Responsive Webdesign?erklären) bedingen unmittelbar die Notwendigkeit von Mediaqueries. Auf der anderen Seite, ist dies nicht eine zwingende Abhängigkeit und der Nutzer sollte unserer Meinung nach die Möglichkeit haben auch frei zu wählen welche Informationen er wann erhalten möchte. Zudem ist es uns wichtig, dass er gleich zu Beginn eine Übersicht über die verschiedenen Informationen hat.

Deswegen wollen wir die genannante Mischform wählen. Zu Beginn der Grafik wird erklärt, was Responsive Webdesign ist. Wir vergleichen diesen Abschnitt mit der „homepage“ einer Website. Der weitere Verlauf ist inhaltlich sinnvoll vorgegeben. Das heißt, wenn der Nutzer nach unten scrollt, wird er diese Reihenfolge durchlaufen. Dennoch sind zu Beginn (Vergleich: Menü) alle Themen aufgelistet, zu welchen der Nutzer durch Klick springen kann.

Getaggt mit ,

Didaktisches Konzept

Inhaltlich wollen wir verschiedene Dinge erklären:

Warum Responsive Webdesign? 

  • Daten zur Nutzung von Smartphones, Tablets & Desktops
  • Daten von Firmen über die Auswirkung der Umstellung ihrer Websites
  • Überblick über Entwicklung der Diversität von Auflösungen

Geschichte – Entwicklung des Webdesigns

  • Ursprung
  • Entwicklung
  • Ausblick: z.B. Schriftgrößen, die sich an den Betrachtungsabstand zum Bildschirm anpassen

Wie funktioniert Responsive Webdesign?

  • Relative (prozentuale) Größenangaben -> fluid Images
  • Media Queries
  • relative Schriftgrößen
  • HDPI Display Optimierung

Bevor jedoch all diese Fakten erklärt werden können, muss der Betrachter zunächst wissen, um was es in der Infografik geht. Deswegen wollen wir ihm zu Beginn einen Ausblick geben, was Responisve Webdesign ist: -> Das Erscheinungsbild der Website passt sich an die Auflösung des Gerätes an.

Getaggt mit , , , , ,

Warum überhaupt Responsive Webdesign?

In letzter Zeit erkunden viele große Firmen das Thema Responsive Webdesign. Und es kommt noch besser, einige davon  veröffentlichen sogar Daten, inwieweit sich die Seitenzugriffe verändert haben und ob die Umstellung auf eine Responsive Website Einfluss auf die Benutzung von mobilen Geräten hat.

Das TIME Magazin hat folgende Zahlen veröffentlicht:

  • Pages per visit, across mobile, tablet and desktop are up considerably
  • Mobile is up 23% compared to what it had been
  • Homepage uniques are up 15%, and time spent is up 7.5%
  • The mobile bounce rate decreased by 26%

(Quelle)

Weitere Statistiken sind hier zusammengefasst.

Getaggt mit , , ,