Apps

HTML5 Device Mockups: Populäre Geräte als Rahmen für Live-Webinhalte auf der eigenen Site nutzen

6. Juni 2013
von

Das hier macht Freude. Wir kennen Finnland ja bereits für eine ganze Reihe toller Dinge, etwa Gummistiefel und – äh – Helsinki. Die Entwickler Angelos Arnis und Tomi Hiltunen wollen diesem famosen Portfolio finnischer Bekanntheit eine weitere Facette hinzufügen. Sie veröffentlichten vor wenigen Tagen auf Basis von PNG und HTML5/CSS3 einen Satz an Mockups verschiedener populärer, vor allem mobiler Geräte, nebst der Möglichkeit, den Viewports dieser Geräte echte Webinhalte, nicht etwa nur Screenshots, zu implementieren. Das ist ideal, wenn man demonstrieren will, wie das eigene Portfolio, etwa als Entwickler mobiler Web-Apps, auf verschiedenen Geräten angezeigt werden wird. Ich bin sicher, die Lösung von Arnis und Hiltunen wird schnell Freunde finden…

html5-device-mockups-w640

Pures CSS oder HTML5 Data-Attribute steuern das Look & Feel

Aktuell besteht das Set von HTML5 Device Mockups aus acht populären und verbreiteten (mit Ausnahme des Lumia 920 und des Surface-Tablets) Geräten. Es gibt das iPhone5 und das iPad in Hoch- und Querformat, jeweils in weiß und schwarz. Desweiteren steht ein iMac und ein MacBook Pro bereit. Die Android-Fraktion freut sich über das Galaxy S3 in blau und weiß und verschiedenen Ausrichtungen, sowie ein Nexus 7. Last und auch least ist es möglich, Webinhalte zusätzlich in den Viewport eines Lumia 920, sowie eines Surface-Tablet zu stecken. Schön am Lumia, es ist in gelb implementiert…

Neben den für die Darstellung erforderlichen PNGs mit Alpha-Transparenz liefern Arnis und Hiltunen die PSD-Dateien zu den einzelnen Geräten mit. Auf diese Weise kann man die Mockups auch für Druck-Präsentationen, Flyer und ähnliches nutzen.

Der Motor des Projekts, das auf Github gehostet wird, besteht aus zwei CSS-Dateien. Beide erledigen die gleiche Aufgabe. Der Unterschied besteht darin, dass die Datei device-mockups.css mit zusätzlichen CSS-Klassen arbeitet, während die Datei device-mockups2.css das gleiche Ergebnis unter Verwendung von HTML5 Data-Attributen erzielt.

Das folgende Beispiel arbeitet auf der Basis der zweiten Variante, aber greifen wir nicht zu weit vor. Als erstes bauen wir das entsprechende CSS in unsere Website ein:

1
<link rel="stylesheet" type="text/css" href="device-mockups/device-mockups2.css" />

Dann verwenden wir die mitgelieferte Mockup Device Generator.html, indem wir sie in einem Browser unserer Wahl aufrufen, alternativ verwenden wir den Generator der Demo-Site. Jetzt klicken wir das gewünschte Mockup zusammen und lassen uns den korrespondierenden Code anzeigen. Per Copy & Paste übernehmen wir diesen in unsere Website.

Ich wählte entsprechend ein weißes iPhone im Querformat. So sieht das aus:

white-iphone5-landscape-w640

Und dieser Code gehört dazu:

1
2
3
4
5
6
7
8
9
10
<div class="device-mockup" data-device="iphone5" data-orientation="landscape" data-color="white">
    <div class="device">
        <div class="screen">
            <!-- PUT CONTENTS HERE -->
        </div>
        <div class="button">
            <!-- You can hook the "home button" to some JavaScript events or just remove it -->
        </div>
    </div>
</div>

Wie Sie sehen, erfolgt die Definition des entsprechenden Geräts komplett mittels Data-Attributen. Die andere Variante hätte zusätzliche CSS-Klassen verwendet.

Der wichtigste Teil innerhalb dieses kleinen Code-Schnipsels findet sich als das div mit der Klasse screen. Hier können Sie den gewünschten Inhalt einfügen. Dieser Inhalt kann im Grunde alles sein, was man auch ansonsten auf Websites präsentieren würde, also beispielsweise Medien, wie Videos und Bilder, oder JavaScript-Anwendungen oder was auch immer man in einen iframe packen kann. Das div mit der Klasse button erlaubt es, dem Home-Button eine Funktionalität zuzuweisen. Kann man machen, oder man entfernt das Div komplett.

embedded-content-w640
Beispiele von der Projekt-Website

Viel Fantasie bedarf es nicht, den Nutzen der Lösung zu erkennen. Der offensichtlichste Anwendungsfall dürfte wohl der sein, für mobile Geräte konzipierte Lösungen auch außerhalb dieser Geräte auf der eigenen Website zu zeigen.

Die HTML5 Device Mockups, so der offizielle Projekt-Name, stehen kostenfrei, sowohl zur privaten, wie kommerziellen Nutzung zur Verfügung. Auch die Modifikation ist erlaubt, wie mir einer der beiden Entwickler eben per E-Mail bestätigte..

Was halten Sie von dem Projekt? Lassen Sie es mich wissen.

Links zum Beitrag

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , , , ,

Ein Kommentar zu „HTML5 Device Mockups: Populäre Geräte als Rahmen für Live-Webinhalte auf der eigenen Site nutzen
  1. James Vornhagen am 6. Juni 2013 um 13:49

    Wow, das ist ja mal was richtig Tolles! Ich danke Ihnen für das Vorstellen, Hr. Petereit. Ich finde das ein tolles Projekt und werde mal schauen, ob ich das nicht irgendwo verwenden kann ;)

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!