t3n News Design

Responsive Design extrem: Webseiten an Bildschirmentfernung anpassen

Responsive Design extrem: Webseiten an Bildschirmentfernung anpassen

Mit können Webworker derzeit nur auf Hardware-Spezifikationen reagieren. Diese responsive Typografie-Demo zeigt jedoch heute schon, wie in Zukunft auf Umgebungssituationen reagieren könnte – zum Beispiel auf die Entfernung des Nutzers vom Bildschirm.

Responsive Design extrem: Webseiten an Bildschirmentfernung anpassen

Responsive Design beschränkt sich derzeit noch auf die Abfrage von Browser-Eigenschaften. Für einige Einsatz-Szenarien dürfte das aber nicht reichen. So entstehen durch das Surfen bei höherer Entfernung vom Bildschirm immer noch Probleme mit der Lesbarkeit des Content. Dabei könnte sich spätestens mit der nächsten Konsolengeneration ein Trend zum TV-Surfen auf der Couch abzeichnen.

Marko Dugnonjic hat einen ersten Lösungsansatz für diese Problematik entwickelt und stellt diesen in einer kleinen Demo vor. Durch den Zugriff auf die Webcam des Computers und etwas JavaScript berechnet die Webseite den Betrachtungsabstand des Users und passt sich in Echtzeit an die Entfernung an. Rückt man näher an den Bildschirm, verkleinert sich die Schrift. Entfernt man sich davon, wird sie größer.

responsive_typography
Die Responsive-Typography-Demo.

Erster Einblick in eine mögliche Zukunft

Noch steckt die Technologie in den Kinderschuhen. So funktioniert das Face-Tracking nur im aktuellen Chrome und mit Opera und die Reaktion auf das Verändern des Abstandes ist nicht immer optimal. Die Demo zeigt aber, in welche Richtung sich Responsive Design mit entsprechenden APIs entwickeln könnte. Mit Zugriff auf verschiedene Sensoren der Endgeräte wären nicht nur die Reaktion auf die Hardware-Spezifikationen, sondern auch auf die Umgebung möglich.

Eine Live-Demo des Skripts findet ihr auf der offiziellen Projektseite. Wenn ihr selbst ein Face-Tracking-Projekt starten wollt, solltet ihr ebenfalls einen Blick auf headtrackr werfen.

Weiterführende Links

Artikel-Bild © lassedesignen – Fotolia.com

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von nazeK am 18.04.2013 (10:08 Uhr)

    Herrliches Spielzeug. Ich überlege nur, wo ich das mal einsetzen könnte. Im Prinzip Gestensteuerung für irgendwelche Browsergames ... ;)

    Antworten Teilen
  2. von corian am 14.05.2013 (02:40 Uhr)

    Nette Spielerei??? Also für meinen Geschmack dringt mir das zu sehr in die Privatsfähre ein!

    Antworten Teilen
  3. von kaibart am 12.01.2014 (20:34 Uhr)

    Also mir macht das Angst...
    Ein Besuch einer normalen Website XYZ.tld bewirkt dann in nicht allzuferner Zukunft das folgende (Fiktion):

    Die Website läd, die Webcam wirkt aktiviert. Natürlich schaue ich etwas grimmig nachdem ich das Aufleuchten der grünen Kontrolllampe meiner Webcam entdecke. Sofort springt mir das erste Ad-Layer entgegen: "Heute nicht gut drauf?" Resigniert klicke ich den Adlayer in das Nirvana in der Hoffnung den gewünschte Inhalt lesen zu können.
    Eigenartigerweise fällt mir auf, dass nur noch Männerspezifische Werbung für meine Altersklasse angezeigt wird. Logisch ... meine Webcam verrät ja auch mein Geschlecht/durchschnittliches Alter. Ich lege halb verzweifelt mein Tablet aus der Hand.... Wo ist meine Privatsphäre.. Aus dem Augenwinkel sehe ich noch: "Die Schriftgröße der Website verändert sich" ... Der Entfernungssensor wurde aktiviert und hat die Schriftgröße zu meinem Abstand angepasst. Ja.. so hatte es angefangen. Mit einem simplen Script um die "Lesbarkeit" von Inhalten anzupassen. Und wie so oft: Aus einer anfangs guten Sache wurde ein massiver Eingriff in die Privatsphäre.

    Ein kleines finsteres Gedankenspiel wie es mit dieser "Verbesserung" weitergehen könnte.

    Antworten Teilen
  4. von gravik am 27.02.2014 (16:04 Uhr)

    Also ich möchte nicht dass mich ständig die Webcam beobachtet...

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines
Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines

Im ersten Teil dieser Artikelserie über Typografie im Responsive Webdesign ging es um die Auswahl und Einbindung der richtigen Schrift. Nachdem ich darin die wichtigsten Punkte von reaktionsfähiger … » weiterlesen

Die Geschichte der Typografie: 5-minütiger Animationsfilm erklärt Old Style, Transitional und Modern
Die Geschichte der Typografie: 5-minütiger Animationsfilm erklärt Old Style, Transitional und Modern

Was zeichnet eigentlich Old Style, Transitional und Modern aus? Eine Animation von Ben Barret-Forrest erklärt die Geschichte der Typografie in 2.400 Bildern. » weiterlesen

Typografie im Responsive Webdesign – Teil 1: So wählt ihr die richtige Schrift
Typografie im Responsive Webdesign – Teil 1: So wählt ihr die richtige Schrift

Bei einem gelungenen und stimmigen Webdesign sind die Typografie und die allgemeine Schriftgestaltung wichtig. Daher unterstützt diese Artikelserie dich bei der Auswahl der richtigen Schriftart … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?