Denis Potschien 4. Oktober 2012

ReView.js: Viewports responsiver Layouts per Mausklick wechseln

Dank Media Queries ist es einfach geworden, Weblayouts für unterschiedliche Geräteauflösungen zu erstellen. Da ein manuelles Umschalten zwischen den unterschiedlichen Layouts nicht vorgesehen ist, ist man zwangsläufig an das Layout gebunden, das einem aufgrund der Auflösung zur Verfügung gestellt wird. ReView.js erlaubt das gezielte, manuelle Umschalten der Breakpoints per Mausklick und bringt den Besuchern Ihrer Websites ein Stück Wahlfreiheit zurück..


ReView.js

ReView.js: Der Sinn der Sache

Der „Responsive Viewport“ – kurz ReView – ist in erster Linie dazu gedacht, um auf mobilen Geräten manuell in die Desktop-Ansicht wechseln zu können. Oft werden für die mobile Ansicht Inhalte ausgeblendet, da der Platz auf einem Smartphone recht begrenzt ist. Mit ReView.js kann man jeden Benutzer selbst entscheiden lassen, ob er auf seinem Mobilgerät nicht lieber die volle Desktop-Version der Website sehen möchte. Gerade bei der stetig wachsenden Auflösungs- und Gerätevielfalt auf dem Android-Markt ergibt die Vorgehensweise Sinn.

ReView.js einbinden

Um das manuelle Umschalten zu ermöglichen, muss zunächst die JavaScript-Datei im HTML-Head eingebunden werden – und zwar direkt nach der Viewport-Angabe:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />
<script type="text/javascript" src="ReView.js"></script>

Anschließend wird an einer beliebigen Stelle innerhalb des HTML-Body ein Link zum Umschalten des Layouts eingebunden. Diesem Link muss die Klasse „review“ zugewiesen werden. Nur so kann ReView.js den Link mit der entsprechenden Funktionalität versehen:

<a class="reView" href="/">ReView</a>

ReView.js ist so konfiguriert, dass der entsprechende Umschalt-Link nur auf mobilen Geräten angezeigt wird. Befindet man sich in der Mobil-Ansicht, ist der Link mit „Default View“ beschriftet. Hat man auf die Desktop-Ansicht gewechselt, ändert sich die Beschriftung in „Core View“. Der Wechsel zwischen den Layouts erfolgt ohne erneutes Laden der Seite.

Die Beschriftung der Links kann per Data-Attribut verändert werden. So ist es möglich, zum Beispiel eine deutsche Beschriftung zu verwenden:

<a class="reView" data-defaultText="Mobil-Ansicht" data-coreText="Desktop-Ansicht" href="/">ReView</a>

Fazit: Mit ReView.js geben Sie Ihren Besuchern mehr Freiheit, da sie beim Besuch per Smartphone nicht mehr an die vorgegebene Mobil-Ansicht gebunden sind und bequem in die jeweilige Desktop-Ansicht wechseln können.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

4 Kommentare

  1. Hab jetzt eine Ewigkeiten herumprobiert damit, weil ich den Ansatz super find! Wie auch immer auf meinem htc One S, funkts nicht – der ReView Link wird nie sichtbar, auch auf deren Website nicht …

  2. Da wäre doch mal ein Browserplugin eine Idee…

  3. Ich habe da letztens eine handgestrickte Version davon gefunden: http://creativeandcode.com/responsive-view-full-site/

    Und aus letzter Erfahrung kann ich sagen, dass man dieses Konzept in der kommenden Zeit öfter sehen wird, weil es manche Kunden dann doch haben wollen, dass man die full-featured site mobil sehen kann.

  4. Die Idee klingt gut, die Umsetzung könnte man allerdings gezielter auch selbst realisieren. Aber wirklich nette Idee, ich denke so eine Funktion könnte auch ich mal in Bedracht ziehen für ein zukünftiges Projekt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.