pixelsign / html5-device-mockups

HTML5 mockups of popular devices, to showcase your portfolio and spice up your website.

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"

#47

Created by:

Tomi Hiltunen

• [email protected]
• http://innovaniac.com

Angelos Arnis

• [email protected]
• http://dribbble.com/pixelsign

Benjamin Bortels

• [email protected]
• https://benjaminbortels.de

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.

html5-device-mockups's Issues

Hiding div on generator

Firstly, thank you for sharing this, really nice!

Was wanting to use this in classroom project and stumped, but that not hard to do:)

On the "Mockup Device Generator.html" page: is there an easy way to simply hide the div with the generated code? Would like to use the page as a real mockup viewer. In other words display no code, just let users click on the buttons to view a site.

Thanks in advance!

Woody

New updates are no available

Most popular mobile and laptop are not included in this website and his performance are not better than

Demo site doesn't work

Your demo website doesn't work

Update device mockups

Would be great if this repo updated to the latest device mockups. Thanks!

Windows Laptops

We need new device

We need new device like Galaxy S8 & Google Pixel

LICENSE.TXT contains HTML source of a GitHub page?

It seems that in commit 02cce0b the contents of LICENSE.TXT got changed to (apparently) the source of the GitHub listing page for LICENSE.TXT instead of the contents.

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)

Make markup consistent with HTML5 structure

HTML5 provide you elements like <section> <footer> and many others, and I would recommend you to use them. These elements help screen readers to understand your website's structure.

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

iMac assets folder is named lowercase

The images is requested with (../device-mockups/iMac/portrait_black.png); but the folder named 'imac'. Doesn't work on case sensitive systems.

Tag releases

If a bower publication is not in the cards, tagging releases would be an easy way to still support the bower users of the world.

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.

Add TV MockUp

Hi,

great collection of devices. Although I miss a TV Mock-Up. I would be really great, if you add one. We need that for a project that we are starting in the next couple of weeks.

Many thanks,
Wolfie

Hand Mockups

Link to example page

Hi,

I was trying to show this to a colleague but had lost the link to the demo page and only had the repo. Because of this I had to clone it and show him a local copy of the site.

Can you please add the link to the example page in the readme/description or create a github pages for the repo.

Alan

New devices

Do you know this project?

http://marvelapp.github.io/devices.css/

Can i use this with angular? and is there any documentation for this?

iPhone X missing in NPM install

I installed your library via npm, but it seems that there I do not get the most current version? The iPhone X is missing. :( Would be nice to get a npm update!

Pixel 2 and Pixel 2 XL

Hey there! 👋

Thank you so much for making this! Cool stuff. 🙏

Would love to see device mockups for the Pixel 2 and Pixel 2 XL. 🤘

Cheers! 😃

Don't use a 3.3 MB default background image

Your default background image background-image: url("https://static.pexels.com/photos/50594/sea-bay-waterfront-beach-50594.jpeg"); is 3.3 MB, but most people will probably never use or see it. I suggest removing it, as it causes a lot of unnecessary network traffic.

[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?

CDN

Hi, can you please provide cdn link?

iPhone 7

3.0.0 Features

1. Clean up Repo
2. Complete new build process
3. New Devices
   3.1 Windows Laptops
   3.2 iPhone 7
4. Size Optimizations
5. Readme better explanation of devices

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

Website Optimization

1. Newsletter

Current 2.0 version is in the gh-pages branch

Could you move this to the master branch please?

Thanks!
Austin

Add to Bower

Go son.

device generator does not include all device mockups

Hi,
the css sheet and the html are missing nexus_6 and others,
i'd be happy of you could add the missing mockups.

thanks

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 in package.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

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!

Content borders

The content looks unnatural, as it doesn't have borders. Any way to fix that?

Conent 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?

can't scroll

even with overflow: auto; I can't scroll the content in the device.

Can't interact with the content of device

Is there any way to be able to interact with content of device? Any links/ buttons doesn't work, just like invisible layer covers it. Tried to change z-index but it didn't help. Any advice ?

New updates are not available.

There are more mistake

Update npm package

Npm package is still pointing to v3.0.0 with the broken case folders. Could it be updated to latest release, please?

Thanks!

New Project Page

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

Ok

Demo Page Not Working - Domain name expired

"Macbook" filepath mismatch of letter cases

The file path for Macbook is actually /macbook/ however it is referenced as /Macbook/ in device-mockups.css. This will work for some web servers (esp. those commonly used in dev mode), but will fail for others (e.g. those used by Amazon for a static S3 site).

I can submit a PR, but I'm not sure whether you want a change in the LESS or in the folder naming.

It looks like this is also the case for iPhone5/iphone5

Is it legal to use Apple-logo as a part of an mockup in a website?

Are there any experiences in about:

1. generally, if it is legal to use device-mockups, by using the original products as images?

2. particularly when using mockups showing the Apple-Logo?
   ( https://github.com/pixelsign/html5-device-mockups/blob/master/device-mockups/iMac/portrait_black.png )

Device frames don't load immediately

Insteat, they blink in after a small delay. Also, when the page is not active for some time, the same effect occurs.
Browser: Firefox 50.1.0.

npm i does not pull src folder

I would like to customize the

mockup-path

variable. However with npm install the src is not pulled, due to main property in package.json. Would appreciate a fix.

Add more Windows laptops and Windows Phones

Would love to see more Windows phones and windows pc's/laptops.

Demo Page not working

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?

Get code