Vorheriger Artikel Nächster Artikel

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 Bastey am 18.04.2013 (10:08Uhr)

    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:40Uhr)

    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:34Uhr)

    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:04Uhr)

    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
Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » weiterlesen

t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch … » weiterlesen

Responsive Webdesign verkaufen: So sieht der optimale Workflow aus
Responsive Webdesign verkaufen: So sieht der optimale Workflow aus

Mit „Responsive Webdesign“ werden oft nur die technischen Komponenten in Verbindung gebracht – wie Breakpoints, Responsive Images und progressive Enhancement. Kein Wunder, dass RWD-Projekte zum … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen