Simple way to create Device Mockup in HTML5

Simple way to create Device Mockup in HTML5

html5 device mockup

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.

Device Mockup in HTML5

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:

Device Mockup in HTML5

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.

Written by
Shameem Reza
Join the discussion
1 comment

Shameem Reza

I am Father of a Son, blessed with a pious wife. I am a Web and Mobile Apps Developer, WordPress Ninja and Blogger. I love to work with PHP, JavaScript, VueJs and other web based technologies.

Howdy!

We are a dedicated, friendly team of professionals delivering world-class WordPress products & experiences.