Smartphone Verbreitung

Smartphoneverkäufe / Jahr

Test
  • 800
  • 700
  • 600
  • 500
  • 400
  • 300
  • 200
  • 100
  • 0
  • 2007
  • 2008
  • 2009
  • 2010
  • 2011
  • 2012

in Millionen verkaufter Einheiten

Aktueller Marktanteil

Test
  • Android
  • iOS
  • Blackberry
  • Windows Phone

App Verfügbarkeit

Test
  • 1000
  • 900
  • 800
  • 700
  • 600
  • 500
  • 400
  • 300
  • 200
  • 100
  • 0
  • Q1-2010
  • Q1-2011
  • Q1-2012
  • Q1-2013

in Tausend

  • Android
  • iOS
  • Blackberry
  • Windows Phone
UserEin Projekt von Michael Braunegger und Chrisitan Hackel

Dokumentation

Vorgehensweise zur Erstellung der Infografik

Nach dem wir uns für das Thema Smartphone entschieden haben, erstellten wir als erste Maßnahme eine Mindmap. Beim Ausarbeiten der Mindmap wurden Aspekte wie Inhalte, Aussehen, Umfang und Struktur der Infografik bearbeitet und diskutiert. Anschließend haben wir einige Scribbles und Zeichnung zur Papier gebracht um erste Ideen festzuhalten. Währenddessen recherchierten wir im Internet nach Statistiken über Smartphones und über mögliche interaktive Grafiken. Als das Konzept für das Projekt fertig war, arbeiteten wir einen Zeitplan aus. Wir gestalteten in Photoshop das Design der Infografik. Dazu erstellten wir einige Grafiken in Illustrator oder besorgten uns fertige aus dem Internet. Wir arbeiteten zum Teil mit Platzhaltern und Blindtext. Außerdem suchten wir nach passenden Schriften und entschieden uns schließlich für die Open Sans von Google Fonts. Die Kennzahlen der recherchierten Statistiken wurden in eine Exceltabelle eingetragen. Nachdem wir mit dem Design und Recherche fertig waren, begannen wir mit der Umsetzung in HTML.

Mindmap

Vorgehensweise zur Erstellung der Präsentationsseite

Bei der Erstellung der Präsentationsseite sind wir ähnlich vorgegangen wie bei der Infografik. Wir haben uns zusammengesetzt und Ideen aufgeschrieben und uns Gedanken übers Aussehen und Funktionalität der Website gemacht. Nachdem wir uns einig waren, wie die Website auszusehen hat und funktionieren soll, erstellten wir ein Layout in Photoshop. Auch hierfür wurden Grafiken in Illustrator angefertigt und anschließend mit der Umsetzung in HTML begonnen.

Idee und Umsetzung der Infografik

Gestalterische und funktionelle Aspekte

Die Infografik besteht aus mehreren Bereichen. Ein Bereich sind die Infografiken innerhalb des Smartphones. Dort finden wir die interaktiven Grafiken wieder. Zum Thema «Smartphone», war es für uns naheliegend, die Infografiken in einem Smartphone zu platzieren. Wir haben drei verschiedene Arten von Grafiken gewählt, da sie sich für verschiedene Daten-Vergleiche anbieten und um Abwechslung einzubringen. Alle Grafiken werden beim runterscrollen eingeblendet und besitzen einen Mouseovereffect. Außerdem wird das Smartphone durch die Hand vom oberen Teil der Website eingeschaltet. All diese Effekte, Einblendungen und Mouseovereffekte sollen beim User Spaß und Interesse wecken.

Scribble zur Infografik

Ein weiterer Bereich ist der Hintergrund. Dort finden wir weitere Informationen über die Nutzung von Smartphones. Die Informationen im Hintergrund sollen die Website aufwerten und ein gewisses Look and Feel verleihen. Es soll den Anschein haben, dass das Smartphone vor einer beschmierten Wand steht. Des weiteren findet man neben dem Smartphone einige Grafiken, die zum Thema passen.

Für uns war es wichtig, dass die Website von Anfang bis Ende eine Stilrichtung hat. Es sollte kein großer Stilbruch entstehen. Daher wurden Grafiken ähnlich gestaltet. Zum größten Teil haben die Grafiken, Hintergründe und Schriften eine Körnung. Die Informationen im Hintergrund haben eine Transparenz, damit sie nicht zu stark in den Vordergrund rücken und vom eigentlichen Inhalt ablenken. Wir haben uns dazu für eine die Open Sans für die Überschriften und Mengentexte sowie für die Coming Soon für die Hintergrundgrafik entschieden.

Auch die Dokumentation und das Kontaktformulars sollte sich dem Rest der Website der Infografik anpassen. Daher haben wir die Breite der Dokumentation und des Kontaktformulars so breit gemacht wie der Inhalt des Smartphones.

Scribble zu Dokumantation und Kontaktformualr

Technische Aspekte

Nachdem wir das Grundgerüst in HTML gebaut hatten, begannen wir damit, die Hand-Illustration in ihrer Position zu fixieren, während das Smartphone frei nach oben und unten scrollen kann. Damit die Hand ab einer bestimmten Position wieder in ihren Normalzustand (nicht fixiert) übergehen kann, haben wir die erforderliche Scroll-Position abgemessen und eine Regel mit Javascripts window.scrollTop(); definiert. Diese Methode wurde außerdem verwendet um die Diagramme bei einer bestimmten Scroll Position einzublenden.

Anschließend begannen wir mit der Evaluierung verschiedener Javascript Bibliotheken zur Erstellung von interaktiven Diagrammen. Nach den ersten Versuchen mit jQuery-Libaries wurde uns klar, dass dies nicht funktionieren kann, da diese alle auf ein HTML Canvas zeichnen, dass keine einzelnen Elemente für Mousover-Effekte o.Ä. besitzt. Nach weiteren Recherchen entschieden wir uns dafür, SVG-Dateien zu basteln und diese mit jQuery in den DOM zu laden und anschließend zu manipulieren. Da diese Technik allerdings noch nicht von allen Browsern unterstützt wird und die Libaries noch ziemlich experimentell und fehlerhaft sind, führte dies auch nicht zum gewünschten Verhalten. Schließlich entdeckten wir die Bibliothek svg.js, die keine Abhängigkeiten benötigte und das SVG direkt in den DOM zeichnen konnte. Dies zu implementieren war ziemlich aufwändig, da wir die kompletten Eigenschaften und Attribute aus den SVGs extrahieren mussten und per Javascript wieder definieren mussten (siehe scripts.js Zeile 82 bis 231). Dafür konnten wir diese Objekte dann wunderbar mittels jQuery selektieren und manipulieren.

Die Kennzahlen, die beim Hover über die Diagramme erscheinen, wurden in eine externe JSON-Datei ausgelagert und per AJAX-Request geladen. Da dies allerdings synchron zum Seitenaufbau geschehen sollte, musste die jQuery-AJAX-Funktion mit jQuery.extend() erweitert werden. Die Kommentare des Feedbackformulars werden mit der gleichen Methode geladen.

Das Feedback-Formular ist übrigens nur Semi-Funktionsfähig. Es ist möglich, Kommentare zu schreiben, die dann in einem Javascript-Objekt gespeichert werden. Beim Reload der Seite, sind diese allerdings wieder verschwunden, da wir nur mit clientseitigen Technologien gearbeitet haben und die keine Möglichkeit bieten, Daten auf einem Server zu speichern. Es wäre aber denkbar einfach, die Daten an einen PHP-Controller zu übergeben, der diese dann in eine Datanbank oder in ein JSON-File schreibt.

Idee der Präsentationsseite – gestalterische und technische Aspekte

Gestalterische und funktionelle Aspekte

Auf der Präsentationsseite sollte es die Möglichkeit geben, sich aus den verschiedenen Bereichen ein bestimmtes Thema auszusuchen. Dazu haben wir ein auf rechten Seite eine Seitennavigation platziert mit den jeweiligen Themen. Zur besseren und schnelleren Erfassung befinden sich vor den Themen passende Icons. Außerdem sind die Themen farbig unterteilt. Somit hat man die Möglichkeit sich alle oder nur ausgewählte Infografiken anzeigen zu lassen.

Scribble zur Präsentationsseite

Die Galerie auf der rechten Seite zeigt in den kleinen Thumbnails jeweils ein Screenshot der Infografik. Beim Anklicken eines solchen Screenshots, wird es links als größeres Bild angezeigt. Zusätzlich stehen unter dem großen Teaser weitere Informationen zur Infografik (Thema, Namen, Klasse, Datum). Druch das Anklicken des Screenshots gelangt man auf diese entsprechende Website der Infografik. Da der Trend immer mehr zu Responive Webdesign geht, haben wir auch die Präsentationsseite responsive gemacht. Der Aufbau erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird.

Technische Aspekte

Bei der Umsetzung in HTML und CSS standen wir zuerst vor dem Problem, dass Sidebar und Contentbereich die gleiche Höhe haben sollten, diese aber nur Geschwister-Elemente waren und somit nur so hoch sind, wie ihr Content. Abhilfe schaffte da die Deklaration des Wrappers als display: table; und von Sidebar und Content als display: table-cell.

Die Projekt-Daten werden wie bei der Infografik per AJAX aus einer JSON-Datei geladen und dann ins HTML gerendert. Dabei wird jedem Projekt eine Klasse mit der Kategorie-Bezeichnung angehängt, damit diese über die Sidebar filterbar sind. Es ist zudem möglich, auch direkt über die URL zu filtern, indem man #katrgoriename hinten anhängt. Mittels location.hash wird der Wert ausgelesen und danach gefiltert. Wenn der Filter keine Ergebnisse findet, oder kein Filter ausgewählt ist, wird außerdem das erste Projekt angezeigt.

Die Pflege der Projektdaten ist übrigens denkbar einfach. Der Aufbau der JSON-Datei, sieht ein JavaScript-Objekt pro Kategorie vor, in dem Kategoriename und der Hexadezimale-Farbwert definiert sind. Außerdem befindet sich darin jeweils ein Array mit den ganzen Projektdaten. Diese umfassen Key-Value-Felder für die Screenshot-URL, die URL zum Projekt und eine Komma getrennte Liste der Gruppenmitglieder (ohne Leerzeichen nach dem Komma!)