How do some web designers present their responsive website prototype in a computer, tablet and mobile presentation like thisenter image description here

  • By having those devices? Adobe Edge also let's you live preview your work on pretty much any device – Hanna Jul 26 '14 at 9:37
  • I've read some details on the live preview, but what if i don't have those devices,like i don't have an android or ios device to be used.. Is there any tool that can do this automatically? @Johannes – user3787192 Jul 26 '14 at 9:44
  • 1
    Yeah, the best way to test anything is natively on the device. Other than that I'd look into getting emulators for android/ios/etc. Finally you could get a browser add-on that re-sizes your window to a certain size to simulate a certain device. – Hanna Jul 26 '14 at 10:08
  • 2
    Last time I checked, Firefox had a tool for testing responsive websites. Dreamweaver also has an adjustable viewport, with presets for a few devices, and lots of different form factor measurements, at least in CC it does. – Dom Jul 26 '14 at 10:39
  • 2
    Prototype? You mean functional right? Cause what you're showing is just a mockup which you can easily get from a google search. – CheeseCake Jul 26 '14 at 13:40

There are PSD templates you can download and/or buy which typically come with actions that place your design into their (three different screens showing responsive design in your case). Just do a Google search for "mockup template psd" and you can click on just about any of the first few results.

  • ^ Exactly what I meant. Lol. He prolly wants a functional one. I'm not sure. – CheeseCake Jul 26 '14 at 17:09

I have 2 solutions for you :

First: you can do this in adobe photoshop. Choose your device frame and put your screenshot on it.

Second: if you want to invest, try some tools like https://placeit.net/ or http://picapp.net/. All you have to do is to choose what frame you like from their gallery and upload your screenshot.

Good luck !


If your question is how to see your website displayed on different devices if you don't have them, then a smart solution is using the Google Chrome Browser.

Here's how it works:

  1. Open your website in Google Chrome.
  2. Click the top right-hand menu icon (the one with 3 horizontal lines).
  3. Choose More Tools —> Developer Tools.
  4. Click the small mobile device icon in the developer panel - this will show a "Device" toolbar on top of your website.
  5. Choose the device you want to see how your website displays on.

This way you can take screenshots of your website on different devices. To get the result in your image, use Photoshop or a dedicated tool to place these screenshots inside the final image.

Hope this helps!

Not the answer you're looking for? Browse other questions tagged or ask your own question.