When we create an application or a Web design it is very common to show it to our clients (even if they are internal) in various devices and aspect relationships.
On other reasons, being able to simulate the operation directly within a website is also very interesting.
Most of the times, we try to make it look like they are inside certain devices: an iPhone, a tablet, a Mac desktop, a laptop etc. For which many times all we do is try to fit them inside of a graph and little else.
Angelos Arnis and Tomi Hiltunen, two Finnish designers have created a small framework that is really interesting. It is called Pixelsign and it is a utility that allows us to create a wrapper for our HTML code that simulates almost any device.
Device Mockup in HTML5
To do this you only have to copy the framework to your project, add a reference to a stylesheet on the page with a code as simple as this:
<div class="device-mockup" data-device="iphone5" data-orientation="portrait" data-color="black"> <div class="device"> <div class="screen"> <!-- THE CONTENT OF YOUR APP HERE --> </div> <div class="button"> <!-- You can link events to this start button --> </div> </div> </div>
we get this:
And inside will be the code we’ve entered, pretending to be inside an iPhone 5.
Notice how simple it is to generate it, since just decorate the elements with a couple of CSS classes and that’s it. With this we can simulate several types of phone, tablets and computers, and it is also possible to choose colors and orientations in the same way.
The project is Open Source and of course free. You can find more information and access the code from the Pixelsign page in GitHub.