📱
💻
HTML5 device mockups v3 You can view the demo page here: https://pixelsign.github.io/html5-device-mockups/
Use on...
- Your website / splash screen
For...
- Displaying photos
- Displaying screenshots of your app(s)
- Displaying reference works / illustrations
- Displaying a content rotator / slideshow
- Embedding a JavaScript app inside the device
- Embedding a YouTube video
Why?
- Looks cool
- Attracts customers
- Makes your site look professional
- Give people the idea that your app/site works on mobile
- Give the impression that your illustrations are meant for web/mobile
- Lots of screenshots in just one "device"
Features:
- Maintains the device's aspect ratio when scaled
- Perfectly aligned screen content containers
- Some devices have "home button" layer defined for possible click event bindings
- Multiple color schemes
- Multiple orientations
- 86 different device images
Devices
Name | Filename | Orientations | Colors |
---|---|---|---|
Chromebook | Chromebook | portrait | black |
Galaxy S3 | galaxyS3 | portrait, landscape | black, white |
Galaxy S5 | galaxyS5 | portrait, landscape | black, white, gold |
Galaxy Tab 4 | galaxyTab4 | portrait | black, white |
HTC One M8 | HtcOneM8 | portrait, landscape | black |
Huawei P8 | HuaweiP8 | portrait, landscape | gold |
iMac | iMac | portrait | black |
iPad | iPad | portrait, landscape | black, white |
iPad Air 2 | iPadAir2 | portrait, landscape | black, white, gold |
iPad Pro | iPadPro | portrait, landscape | black, white, gold |
iPhone 6 | iPhone6 | portrait, landscape | black, white, gold |
iPhone 6 Plus | iPhone6Plus | portrait, landscape | black, white, gold |
iPhone SE | iPhoneSE | portrait, landscape | black, white, gold, pink |
iPhone 5 | iPhone5 | portrait, landscape | black, white |
iPhone 6 Hand | iPhone6Hand | portrait | black, white |
iPhone 7 Hand | iPhone7Hand | portrait | black |
iPhone 7 Hand 2 | iPhone7Hand_2 | portrait | black |
iPhone 7 | iPhone7 | portrait, landscape | black, white, gold, pink, red |
iPhone X | iPhoneX | portrait, landscape | black |
Lumia 930 | Lumia930 | portrait, landscape | black, white |
Macbook | Macbook | portrait | black, white, gold |
Macbook 2015 | Macbook2015 | portrait | black, white, gold |
MacbookPro | Macbook2015 | portrait | black |
Pixel | Pixel | portrait | black, white |
Samsung TV | SamsungTV | portrait | black |
Surface Pro 3 | SurfacePro3 | landscape | black |
Surface Studio | SurfaceStudio | portrait | black |
Integrating to your website:
Bower
bower install html5-device-mockups
npm
npm i html5-device-mockups
Old traditional way
<link rel="stylesheet" type="text/css" href="dist/device-mockups.min.css">
Usage
Use this example or grap the code from the HTML generator on our demo site:
<div class="device-wrapper">
<div class="device" data-device="iPhone5" data-orientation="portrait" data-color="black">
<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>
FAQ
"I can not control the height of the device"
https://github.com/pixelsign/html5-device-mockups/issues/47
Created by:
Tomi Hiltunen
Angelos Arnis
Benjamin Bortels
Credits for the original graphical renderings of the devices used in this package are found in a separate file which is provided with this package.
iPhone 8 and iPhone X
Excellent tool, thank you guys so much for developing device mockups! Are there any plans to add the iPhone 8 and iPhone X to the lineup? Is there anything I can do to help? Thanks again!
Added an scss version
Added
npm
scripts to compile thescss
Added folders for theless
and thescss
code Changed the path to theless
version in the GruntfileYou can now overwrite the image path by setting the
$rel-mockup-path
variable to the correct path, before importing thedevice-mockups.scss
from thenode_modules
.folder name fix
This updates folder names to be consistent with their file paths. It only changes the letter casing (which causes the file lookup to fail for some webservers).
closes #48
Device doesn't appear
Hi. I've added CSS file which was mentioned in the documentation. Also added HTML code which was generated by the device while the device doesn't appear. The part of the page where it should appear is empty. Can you help me to solve that problem? Thanks
height controls not working
Is it only possible to set the width of devices?
Here's an example where I try to use height: https://jsbin.com/qosejiyuji/edit?html,css,output (for simplicity in the JSBin the device assets aren't there, but the CSS effect is the same)
Photoshop PSD as "png"
In your most recent update, you several of the PNG images are actually Adobe Photoshop PSD files. Looks like you did a "Save As..." and saved a PSD with a ".png" extension instead of a PNG export. Opening these in a basic image viewer/editor will yield an error about the file being corrupted, because these aren't actually PNG images.
There could be more, I just happened to notice it for the Galaxy S5 images. I used the 'file' command (native to Linux, Mac, other Unix-like systems) to detect the mismatches:
MacMini:galaxy_s5 billy$ file * galaxy.psd: Adobe Photoshop Image, 1239 x 2406, RGBA, 4x 8-bit channels galaxy_s5_land_black.png: Adobe Photoshop Image, 2406 x 1239, RGBA, 4x 8-bit channels galaxy_s5_land_gold.png: Adobe Photoshop Image, 2406 x 1239, RGBA, 4x 8-bit channels galaxy_s5_land_white.png: Adobe Photoshop Image, 2406 x 1239, RGBA, 4x 8-bit channels galaxy_s5_port_black.png: PNG image data, 1239 x 2406, 8-bit/color RGBA, interlaced galaxy_s5_port_gold.png: PNG image data, 1239 x 2406, 8-bit/color RGBA, interlaced galaxy_s5_port_white.png: PNG image data, 1239 x 2406, 8-bit/color RGBA, interlaced
Device frames not showing in mobile view
Everything works normally from Desktop and Tablet.
However, when I open the website from mobile the device frames simply disappear.
Already tried to play with z-index but it's not the cause as it is working properly elsewhere.
Please let us know of any workarounds.
Can not reach to the content inside mockup
Hello, I'm trying to click to button inside mockup but I couldn't reach to the button. Tried z-index but didn't help. Could you tell me how can I reach to content inside mockup?
The license information for this library
Hi @pixelsign , I am a contributor of cdnjs and willing to host this library. In
LICENSE.txt
, the license is MIT, but inpackage.json
, the license field is ISC. The information does not correspond. Could you let me know which license are you using?If you have any suggestions, please let me know. Thank you.
cdnjs/cdnjs#12283
Is it legal to use Apple-logo as a part of an mockup in a website?
Are there any experiences in about:
generally, if it is legal to use device-mockups, by using the original products as images?
particularly when using mockups showing the Apple-Logo? ( https://github.com/pixelsign/html5-device-mockups/blob/master/device-mockups/iMac/portrait_black.png )
Bower install does not work
When trying to install via "bower install html5-device-mockups" I get this output: "Unexpected token } in JSON at position 565"
bower.json is valid
New build process
I wanted to contribute to this package but I could not get it to build on my machine
npm i
fails with a lot of errors and deprecation warnings (macOS)Changes
grunt
,grunt-contrib-cssmin
,grunt-sass
sass
implementation: sass
in Gruntfile.jsConent inside wrapper not reachable
Hi, I am trying to show a video inside the mockup, but nothing (video controls, buttons or text) is reachable inside the wrapper. Even if I set .device .screen { ... pointer-events: auto } to pointer-events: all. I am using the plain HTML5 video player.
I tried to follow the instructions of other issues, but nothing worked (#68 #21 #65 )
Any ideas?
[Question] How do you set it to the actual size of the device?
I'm working on a content editor.
I want to be able to show previews of what the content would look like on e.g. a mobile, Tablet, desktop etc.
To show an accurate preview the "device mockup" needs to be the actual size of the device.
Right now this seems to make a mockup with just the correct aspect ratio, but I don't see any way to set the size to set the screen size to the actual size of the device? Am I missing something or is this not supported?