Drücke die Tasten ◄ ► für weitere Artikel  

Responsive Design extrem: Webseiten an Bildschirmentfernung anpassen

Mit Responsive Design können Webworker derzeit nur auf Hardware-Spezifikationen reagieren. Diese responsive Typografie-Demo zeigt jedoch heute schon, wie Webdesign 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 und mit Opera und die Reaktion auf das Verändern des Abstandes ist nicht immer optimal. Die Demo zeigt aber, in welche Richtung sich 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

287 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
6 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 ... ;)

  2. von Michaels Tagebuch (Responsive Design ext… am 19.04.2013 (20:21Uhr)

    Responsive Design extrem: Webseiten an Bildschirmentfernung anpassen...Responsive Design extrem: Webseiten an Bildschirmentfernung anpassen......

  3. 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!

  4. von Wordpress Test – FROONT – Re… am 17.05.2013 (09:17Uhr)

    [...] Responsive Design extrem: Webseiten an Bildschirmentfernung anpassen – t3n News [...]

  5. 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.

  6. von gravik am 27.02.2014 (16:04Uhr)

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

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
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

Webdesign-Trends 2014: Das erwartet Webworker im neuen Jahr
Webdesign-Trends 2014: Das erwartet Webworker im neuen Jahr

Nur noch wenige Tage, dann ist es da – das neue Jahr. Wir lassen die Trends dieses Jahres Revue passieren und zeigen, welche Trends uns Webworker im Jahr 2014 erwarten. » weiterlesen

SVGMagic: Automatischer SVG-Fallback für deine Webseite
SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ... » weiterlesen

Kennst Du schon unser t3n Magazin?

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