4 ms·

HTML5 mockups of popular devices

132 points by tilt 12y ago

victoriap 12y ago
Unfortunately, the demo link doesn't work (http://aarnis.com/demo.html http://aarnis.com/demo.html).
- tilt 12y ago
  You can still checkout or use some tool like http://htmlpreview.github.io/?https://github.com/pixelsign/html5-device-mockups/blob/master/Mockup%20Device%20Generator.html http://htmlpreview.github.io/?https://github.com/pixelsign/h...
- caseyhen 12y ago
  Found the correct link at (http://aarnis.com/pixelsign/demo.html http://aarnis.com/pixelsign/demo.html)
madeofpalk 12y ago
Somewhat dissapointed to find that the devices are not actually HTML/CSS mockups, but just a background image of each device sourrounding the screenshot.
- hiphopyo 12y ago
  They could at least be vector. And, could we have flat, solid-color silhouettes of each model? Also: http://techradar.com/news/phone-and-communications/mobile-phones/iphone-6-release-date-news-and-rumours-1099865 http://techradar.com/news/phone-and-communications/mobile-ph...
- prezjordan 12y ago
  Not sure why you would want to compromise on browser support just to have some fancy CSS3 in there. Background image is totally acceptable (in fact, I think that was a great design decision). This library does exactly what the author claims it does.
TazeTSchnitzel 12y ago
Landscape Lumia920 seems broken, all the gradients are in the wrong directions. (Firefox/Chrome, OS X)
alexchamberlain 12y ago
Looks good, but I think it's too detailed for the intended use case. If you're trying to demo your website in a phone, you want a generic smart phone, that emphasises your app, not your choice of phone.
jonaldomo 12y ago
I like this, I think the more common use case is to showcase mobile apps though.
higherpurpose 12y ago
It needs a 1080p phone too.
cenhyperion 12y ago
I (apparently unlike every other commenter) really love this and think it'll be a great way to showcase some of my projects. Thanks!
bellerocky 12y ago
Nice, but the white iPhone home button looks a little weird. Otherwise super cool.
muratmutlu 12y ago
Great stuff, we also made some flat style devices in css http://marvelapp.github.io/devices.css/ http://marvelapp.github.io/devices.css/
coherentpony 12y ago
The outer antenna on the black iPhone 5 is not grey, it's black. The white iPhone 5 has the correct (grey) antenna. Otherwise, good job.
owenversteeg 12y ago
What makes this "HTML5"? I don't see any use of the new semantically-meaningful elements.

132 points by tilt 12y ago

victoriap 12y ago

Unfortunately, the demo link doesn't work (http://aarnis.com/demo.html http://aarnis.com/demo.html).

tilt 12y ago
You can still checkout or use some tool like http://htmlpreview.github.io/?https://github.com/pixelsign/html5-device-mockups/blob/master/Mockup%20Device%20Generator.html http://htmlpreview.github.io/?https://github.com/pixelsign/h...
caseyhen 12y ago
Found the correct link at (http://aarnis.com/pixelsign/demo.html http://aarnis.com/pixelsign/demo.html)

madeofpalk 12y ago

Somewhat dissapointed to find that the devices are not actually HTML/CSS mockups, but just a background image of each device sourrounding the screenshot.

hiphopyo 12y ago
They could at least be vector. And, could we have flat, solid-color silhouettes of each model? Also: http://techradar.com/news/phone-and-communications/mobile-phones/iphone-6-release-date-news-and-rumours-1099865 http://techradar.com/news/phone-and-communications/mobile-ph...
prezjordan 12y ago
Not sure why you would want to compromise on browser support just to have some fancy CSS3 in there. Background image is totally acceptable (in fact, I think that was a great design decision). This library does exactly what the author claims it does.

TazeTSchnitzel 12y ago

Landscape Lumia920 seems broken, all the gradients are in the wrong directions. (Firefox/Chrome, OS X)

alexchamberlain 12y ago

Looks good, but I think it's too detailed for the intended use case. If you're trying to demo your website in a phone, you want a generic smart phone, that emphasises your app, not your choice of phone.

jonaldomo 12y ago

I like this, I think the more common use case is to showcase mobile apps though.

higherpurpose 12y ago

It needs a 1080p phone too.

cenhyperion 12y ago

I (apparently unlike every other commenter) really love this and think it'll be a great way to showcase some of my projects. Thanks!

bellerocky 12y ago

Nice, but the white iPhone home button looks a little weird. Otherwise super cool.

muratmutlu 12y ago

Great stuff, we also made some flat style devices in css http://marvelapp.github.io/devices.css/ http://marvelapp.github.io/devices.css/

coherentpony 12y ago

The outer antenna on the black iPhone 5 is not grey, it's black. The white iPhone 5 has the correct (grey) antenna. Otherwise, good job.

owenversteeg 12y ago

What makes this "HTML5"? I don't see any use of the new semantically-meaningful elements.