Archiv der Kategorie: Recherche

Warum Responsive Webdesign?

Um zu begründen warum Responsive Webdesign eine sinnvolle Strategie im Web ist, bietet es sich an, die Entwicklung der Nutzung mobiler Endgeräte zu betrachten. Um überzeugen zu können, müssen wir darauf achten, die Grafiken geschickt zu wählen. Die absoluten Zahlen der Nutzung mobiler Geräte sind unter Umständen noch geringer als die Zahlen der Nutzung von Desktops. Jedoch steigt die mobile Nutzungskurve sehr stark an. Es ist also sinnvoller Kurven zu nutzen, die das Wachstum zeigen, als Balken, die nur absolute Werte veranschaulichen.

Das mobile Web wächst:
Bildschirmfoto 2013-05-30 um 17.31.03

Es gibt inzwischen unheimlich viele unterschiedliche Bildschirmauflösungen:
Bildschirmfoto 2013-05-25 um 15.42.40

Bildschirmgrößen

Der Smartphone- und Tablet-Markt hat den Desktop-Markt überholt:
globale_smartphone_tablet_und_pc_lieferungen_in_millionen_d

Mobile knackt die 10% Marke
Bildschirmfoto 2013-05-30 um 17.46.52

Time.com RWD

23% mehr Besucher der mobilen Website

Die Anzahl der besuchten Unterseiten pro Besuch ist deutlich gestiegen

Die Zeit die auf der Website verbracht wird ist um 7.5% gestiegen

O’Neil RWD

101,2% Gewinnsteigerung auf iPhone

591,4% Gewinnsteigerung auf Android Geräten

41,1% Gewinnsteigerung auf nicht-mobilen Geräten

407,3% mehr Umtausche auf Android Geräten

65,7% mehr Umtausche auf iPhone

20,3% mehr Umtausche auf nicht-mobilen Geräten

Skinny Ties RWD

42% Gewinnsteigerung auf allen Geräten

377,6% Gewinnsteigerung auf iPhone

13,6% mehr Umtausche auf allen Geräten

71,9% mehr Umtausche auf iPhone

Anteile mobiler Nutzung bestimmter Websitearten
Bildschirmfoto 2013-05-30 um 17.49.48

Anteile mobiler Geräte am Webtraffic
Bildschirmfoto 2013-05-30 um 17.55.14

Getaggt mit , ,

Geschichte des Webdesigns

Im Folgenden sind die Ergebnisse unserer Recherche zur Geschichte bzw. zu der Entwicklung des Webdesigns aufgelistet. Mit diesem Teil unserer Infografik wollen wir zeigen, dass Responsive Webdesign das Ergebnis einer Rückbesinnung auf die Flexibilität des ursprünglichen, textbasierten HTML Webdesigns ist. Zudem spielt in diesem Zusammenhang natürlich die Entwicklung von mobilen Endgeräten eine wichtige Rolle. Wir werden im weiteren Verlauf entscheiden, welche der gesammelten Informationen für unsere Infografik von Bedeutung sind, wie wir diese präsentieren müssen und ob weitere Informationen für das Verständnis erforderlich sind.

1991 – 1993
Einspaltige, textbasierte Seiten mit sehr kleinen Bildern und blauen unterstrichenen Links, reines HTML, Text passte sich an Bildschirmgröße an, Umbrüche wurden automatisch generiert – die Website hat ein flexibles Layout.

1994
Gründung des World Wide Web Consortium W3C, welches HTML als Standard Auszeichnungssprache festlegte.

Mitte der 1990er
Tabellenbasiertes Design (ermöglicht Strukturierung des Contents), gekachelte (tabellarisch zerteilte) Hintergrundbilder, animierte GIFs, schrille Farben, Ästhetik steht über der Struktur: Spacer GIFs werden als Platzhalter im Tabellen Layout eingesetzt.
Entwicklung der ersten WYSIWYG-Web-Design-Applikationen die mit Tabellen als Layout Grundlage arbeiteten und in der Lage waren, Tabellen von enormer Komplexität zu generieren.
1996: Macromedia stellt Flash vor

Ende der 1990er
Flash nahm bei Webdesignern an Beliebtheit zu. Websites waren oft eine Mischung aus Flash- und tabellenbasierten Seiten. Websites werden interaktiv. Musik wird eingesetzt. 1998 wurde PHP3 vorgestellt (dynamische Design Sprache)

2000
Cascading Style Sheets (CSS) gewinnt an Beliebtheit. Es stand zwar bereits vorher zu Verfügung, aber die Unterstützung in vielen Browsern war noch nicht ausreichend gewährleistet. CSS erlaubt die Trennung von Struktur (HTML) und Design (CSS) und bietet eine effektive Alternative zu tabellenbasierten Layouts mit HTML. Durch die Trennung von Design und Inhalt wird die Verwaltung von Websites enorm erleichtert, da das Layout unabhängig vom Inhalt verändert werden kann.

Anfang 2000
JavaScript, welches bereits im Jahre 1995 vorgestellt wurde, nimmt an Beliebtheit zu. Mit JavaScript entstanden bzw. entwickelten sich folgende Elemente :

  • Navigationsmenüs (die nun ganz Oben an der Seite platziert sind)
  • Drop-down Menüs
  • Web Formulare (Zur Eingabe durch Nutzer)
  • Vom Nutzer generierter Inhalt (Profile, Journals, Foto-Sammlungen)

Zudem entstehen die ersten Sozialen Netzwerke wie Friendster oder MySpace: das Web wird mehr und mehr zum Informationsaustausch (Foren, Wikis & Blogs) sowie zur Selbstdarstellung eingesetzt.

Mitte 2000
2005 geht die Video Plattform YouTube das erste Mal online. Blogs, Soziale Netzwerke, Wikis und Foren werden immer populärer. Das Web wird vom Nutzer mit Informationen gefüllt und gestaltet. Das Web sollte also möglichst Nutzer freundlich gestaltet sein und die Anmutung des Design sollte dem Nutzer Freude machen. In dieser Zeit sind unter Anderem Design-Elemente mit Hochglanzeffekten sehr beliebt. Die Websites sind bunt, verschiedene Brushes und Verläufe werden eingesetzt und die Webelemente wirken plastisch.

2008
Das Web wird mobil. Es gibt zum ersten Mal spezielle mobile Websites, die für die Nutzung auf einem mobilen Gerät angefertigt sind. Diese Websites wurden zu dieser Zeit noch separat von der Desktop Variante entwickelt.

2012 Responsive Webdesign
In seinem Artikel “Responsive Webdesign” spricht ETHAN MARCOTTE (2010) bereits von der Notwendgkeit eines reaktionsfähigen Webdesigns und bietet als Lösung die Verwendung von Media Queries. Er prägt außerdem (wie der Titel) verrät den Begriff Responsive Webdesign.
Obwohl CSS3 seit 2001 entwickelt wird sind die “Media Queries” erst seit 2012 ein vom W3C anerkannter Standard.

Getaggt mit , , , , , ,

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 , ,

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 , , , , , ,

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 , , ,