I have previously blogged about a Responsive Screen Mockup Pack that we use. This is a Photoshop file that lets you embed screenshots of your website within images of laptops, iPhones, iPads etc.
This week we discovered a WordPress plugin that does this using a simple shortcode! This was really exciting as Barn2 - and our clients - create lots of images like this and are always looking for ways to make the process more efficient. So we decided to test the plugin straight away.
About the plugin
Device Mockups is a WordPress plugin that provides a collection of shortcodes to display screenshots, videos, or any content on a computer screen, mobile or tablet.
The plugin has loads of handy options - you can change the colour of the device, choose from a list of 8 devices, show a single device or stacked devices, and even add your own image or video to appear on the screen of each device. You can also choose the orientation (portrait or landscape) and whether the stacked devices appear on the left or right.
The Device Mockups WordPress plugin has a useful toolbar button that lets you to select your options and insert the basic shortcode automatically, although you still have to edit the shortcode with the required options and add your image.
Ease of use
Even though I'm a WordPress web designer, I must admit that I found the instructions on the Device Mockups website a bit confusing! The example shortcode didn't say that you need to replace the word 'CONTENT' with the actual image you wish to place within the screen (i.e. via the Add Media option in WordPress). I tried a few things that were wrong such as pasting the URL of the web page or the image URL in the media library. The correct way is to add the actual image via the Add Media button, i.e.:
Sarah Gooding's blog post How to create responsive image mockups with WordPress contains more detailed instructions to help you avoid making the same mistake as me! However, this shouldn't really be necessary and it would be good if the plugin author could make the instructions a bit clearer.
Once I had figured out how to add the images, it took a bit of time to get them the correct proportions. The plugin page tells you the correct dimensions, and it's best to use image editing software such as Photoshop to size your images before uploading them. This was a little disappointing because it means it's not much easier to use than simply buying a responsive screen mockup pack in Photoshop - I had been hoping that it would resize them as cleverly as PlaceIt. However, some people will find the Device Mockups WordPress plugin easier as it requires less advanced Photoshop skills than doing it manually using a mockup pack.
I found 2 bugs with the plugin which prevented it from displaying properly. I sent a support request and the plugin author fixed the bugs within 1 day - pretty impressive!
The fact that the device mockups are created via a shortcode means they can't be used as a WordPress featured image. I often create blog posts with this style of featured image, so I will have to continue adding these manually - as I did for this post. The below image is a real example of Device Mockup in action, but I wasn't able to use it for this post's featured image.
Overall, Device Mockups is a fantastic idea and a useful WordPress plugin. The plugin author is helpful and is actively developing the plugin, so it will get better and better over time.
I'm really impressed with the way the plugin author has automated such a complex process, using a WordPress shortcode to allow you to choose your device, add your image, choose the position, colour etc.
Personally, I didn't find Device Mockups any easier to use than the Photoshop mockup pack that I had previously been using - it took me roughly the same amount of time to create each image. If you don't have Photoshop or aren't comfortable using layers etc. then Device Mockups is a good alternative for you. However, Device Mockups isn't quite ready to give PlaceIt a run for its money - PlaceIt remains the easiest way of creating this type of image.