Webwissenschaften

Ein Trend im Jahr 2013 zeigt eine vermehrte Ausrichtung auf die mobilen Endgeräte und der damit einhergehenden Technologie des responsive Webdesign. Im ersten Abschnitt meines Blogs möchte ich diesem Trend widmen.

Weiterhin bleibt der Gefällt-Mir-Button, mit dem sich Zuneigung und Sympathie im Web darstellen lassen als Trend erhalten. Auch die Einbettung des Gefällt-mir-Buttons in diverse Websites möchte ich in diesem Blog thematisieren.

Als weiteres und mehr denn je aktuelles Designelement im Web wird verstärkt auf Bannerwerbung gesetzt. In diesem Blog sollen die unterschiedlichen Formen, wie etwa der Skyscraper, der Content Ad oder Pop-ups vorgestellt werden.

1. Responsive Webdesign

„Responsive Design versteht man verschiedene Technologien die es ermöglichen, eine Website ohne zusätzliche Hilfsmittel wie spezielle Browser, extra gestaltete mobile Variante o.ä. für mobile Endgeräte (Smartphones, Tablets, Ultrabooks etc.) so aufzubereiten, dass sie optimal dargestellt wird.“ (droom! Internet-Agentur 2013: o.S.)

Der grafische Aufbau einer „responsiven“ Webseite orientiert sich an den unterschiedlichen Anforderungen des jeweiligen Endgerätes. Hierbei müssen Unterschiede bezüglich Größe und Auflösung der Displays von Laptops, Tablets, Smartphones oder E-Book-Readern beachtet werden.

Daher müssen komplexe Inhalte, wie etwa Navigationen, Seitenspalten und Texte durch bestimmte Techniken mit HTML5 und CSS3 und JavaScript transformiert werden um ein „adaptives Layout“ zu erhalten (vgl. Wikipedia 2013: o.S.).

Das heißt, das „responsive Design“ kann die Darstellung einer Website auf verschiedenen Endgeräten (auflösungsbezogen) ermöglichen und komplexe Inhalte transformieren (vgl. Droom! Internet-Agentur 2013: o.S.).

1.1 Responsive-Design-Techniken

1.  Scrolling
2. Spezielles Verhalten beim Überfahren von Menüpunkten (Hover vs. Hoverintent)
3. Die automatische Skalierung von Bildern und Videos (vgl. droom! Internet-Agentur 2013: o.S)

1.2 Faktoren um ein Webdesign „responsive“ zu gestalten:

1. Kann das Weblayout skaliert werden? (fixed vs. fulid/grid layout
2. Sind Einstellung auf fließende Breiten möglich?
3. Können Design-Elemente (z.B. Hintergrundbilder) in anderer Form dargestellt werden?
4. Kann auf die Verwendung von Zusatzplugins (wie z.B. Adobe Flash, Microsoft Silverlight etc.) aufgrund von der Anwendung mobiler Endgeräte verzichtet werden? (vgl. droom! Internet-Agentur 2013: o.S)

Hier noch mal zur Veranschaulichung ein wirklich kurzes Video, das durch eine äußerst simple Erklärung zu einem besseren Verständnis von Responsive Design beiträgt:

2. Der „Gefällt mir“ bzw. „Like Button“

Facebook hat eine spezielle Funktion für den „Like-Button“ bzw. den „Gefällt mir-Button“ eingeführt: Jeder externe „Like-Klick“ auf diversen Websites führt nun zu einer Veröffentlichung im eigenen Profil.

Die Website bindet für den „Gefällt mir“ Button einen sogenannten iFrame ein.

Dieser iFrame ist eine kleine Mini-Seite innerhalb der Seite, deren Quelltext von Facebook selbst stammt. Ruft man beispielsweise eine Website auf, bettet diese sofort den Facebook-Frame ein – bevor der Anwender auf „Gefällt mir“ klickt. Der Browser sendet dabei unter anderem als Referer die URL der gerade geöffneten Website. Des Weiteren schickt er dem/der Facebook-ServerIn auch das von ihm bereits früher gesetzte Cookie (vgl. Schmidt 2011: o.S.).

Bei jeder Verbindung mit einem Facebook-Server schickt dann der Browser dieses Cookie ungefragt mit und kann damit prinzipiell ein Profil erstellen, welche Web-Seiten der zu der Kennung gehörende Anwender aufgerufen hat (vgl. Schmidt 2011: o.S.).

Facebook bekommt hier die Information, dass der/die UserIn diese konkrete Seite gelesen hat. Da diese Buttons mittlerweile so gut wie omnipräsent sind, kann Facebook eine komplette Liste aller Websites erstellen, die von einer Person besucht wurden und dadurch ein Profil zu einer Person anfertigen (vgl. Schmidt 2011: o.S.).

Beispiel von einer "Gefällt mir- Button"-Einbettung auf einer Website

 3. Bannerwerbung

Ist eine Form der Werbung auf Websites, die möglichst lukrativ platziert werden. Hierbei existieren unterschiedlichste Formate wie Skyscraper, Content Ad oder Pop-ups (vgl. Hörner 2006: 158f.).

1.  „Skyscraper“ ist eine besonders hohe, am linken Rand der Website platzierte Bannerform. Unter
2. „Content Ad“ versteht man die auf einer Website unauffällig eingebaute Werbung.
3. Ein „Pop up“ ist ein Werbefenster, dass beim Besuch einer Website „aufpoppt“ und sich im Vordergrund platziert.

Quelle: http://www.leipzig-sachsen.de/werben.htm

Quelle:

• Droom! Internet-Agentur (2013): Responsive Webdesign. Online unter: http://www.droom.at/blog/2013/03/06/responsive-webdesign-losungen-der-trend-in-graz/ (20.04.2013).

• Hörner, Thomas (2006): Marketing im Internet. Konzepte zur erfolgreichen Online-Präsenz. München: Verlag C.H.Beck oHG.

• Schmidt, Juürgen (2011): Das Like-Problem. Was Facebooks Gefällt-Mir-Buttons verraten. In: heise

Securtiy vom 20.04.2011.

• Wikipedia (2013): Responsive Webdesign. Online unter: http://de.wikipedia.org/wiki/Responsive_Webdesign (21.04.2013).