Jun 05 2013

Freebie of the Day: Spice Up Your Website With Live HTML5 Device Mockups

Advertisement

This is great, I promise. We know Finland for a lot of things, rubber boots for instance or – ehm – Helsinki. Angelos Arnis and Tomi Hiltunen want to add to this ample variety. They just published a set of device mockups, all in PNG and CSS, that you can actually bring to life with real content. You’ve got a web app for mobile clients you want to show on your website? Not very impressive, unless you present it inside the frames of its mobile boundaries. That’s what Arnis and Hiltunen have built…

html5-device-mockups-w550

Pure CSS or HTML5 Data Attributes Control The Look & Feel

At the time of writing, the set of HTML5 device mockups consists of eight popular and common (besides the Surface and the Lumia 920) pieces of hardware. There are the iPhone 5 and the iPad in portrait and landscape orientation, both in black and in white. Then we have the iMac and the MacBook Pro. For the Android fraction, we see an Galaxy S3 in blue and in white with different orientations and last and as well least you can have your website, web app or other content embedded into the viewport of a Surface tablet or a Lumia 920. One good thing about the Lumia, it comes in yellow…

Besides the necessary PNGs, Arnis and Hiltunen also deliver the source PSD files. That way you can even produce static mockups or presentations in flyers or wherever you might need them.

The heart of the project, which is hosted over at Github, are two CSS files. Basically they both perform the same tasks. The difference is that device-mockups.css works using CSS classes, while device-mockups2.css uses HTML5 data attributes.

The following example works with the second variant. But first things first. To start we import the CSS into our website.

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

Next, we fire up the included Mockup Device Generator.html (or the one from the demo site, for that matter) in our browser. Now we can choose our desired mockup device, the generator – well – generates the necessary code we will then embed into our webside.

I chose an iPhone in white and landscape orientation like this:

white-iphone5-landscape-w550

This is the code that got generated:

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>

As you can see, the device is defined via data attributes. As I said, the other variant is going to use additional CSS classes instead.

The most important part in this little piece of code is the div with the class screen. This is where you will want to enter the actual content. And this content can be media, such as video, images or JavaScript apps or any other content able to be displayed in an iframe. The div with the class button lets you assign a function to the home button. You might do that or remove the section altogether.

Examples From The Project Homepage

Examples From The Project Homepage

You don’t need too much fantasy to be able to see the benefits. The most obvious use case is to show your specialized web apps for mobile devices inside the mockup of the very device you created them for.

The HTML5 device mockups, as the official project title goes, can be used free of charge in both private as well as commercial projects, Arnis tells me in an email.

So, what is your take on the project? Let me know in the comments below!

Related Links

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description