Freebie of the Day: Spice Up Your Website With Live HTML5 Device Mockups
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…
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.
<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:
This is the code that got generated:
1 2 3 4 5 6 7 8 9 10
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
div with the class
button lets you assign a function to the home button. You might do that or remove the section altogether.
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!
- Spice up your website with live HTML5 mockups of popular devices | Aarnis.com
- pixelsign / html5-device-mockups | Github Repository
- The Mockup Generator on the Demo Site
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?