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

  • By Angelos Arnis
  • Last update: Dec 14, 2022
  • Comments: 14

Gitter GitHub release Bower npm License: MIT

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.

Github

https://github.com/pixelsign/html5-device-mockups

Comments(14)

  • 1

    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!

  • 2

    Added an scss version

    Added npm scripts to compile the scss Added folders for the less and the scss code Changed the path to the less version in the Gruntfile

    You can now overwrite the image path by setting the $rel-mockup-path variable to the correct path, before importing the device-mockups.scss from the node_modules.

  • 3

    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

  • 4

    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

  • 5

    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)

  • 6

    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

  • 7

    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.

  • 8

    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?

  • 9

    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

  • 10

    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 )

  • 11

    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

  • 12

    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

    • Packages updated: grunt, grunt-contrib-cssmin, grunt-sass
    • Package added: sass
    • added implementation: sass in Gruntfile.js
  • 13

    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?

  • 14

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

Popular Tag

Related