Testing on iPhone & iPad using Adobe Device Preview

Alright, Adobe preview or device preview is a way of showing what you’re working on on photoshop directly onto a mobile device - either an iPhone or iPad while you’re working. So this means that you can be making your mockups on your computer, and actually seeing what it looks like on a mobile device. Now this app only works for iPhone and iPad at the moment, there’s no Android equivalent yet, and probably won’t be, but keep checking to see whether Adobe release anything for Android.

Next thing you need to do is you need to download the app for your iPhone and iPad. Now I’ve got it on the iPhone here, - ignore the wallpaper there of my very handsome son. Once you’ve done it, you open it up and in there you’ll have to sign in with what’s called your Adobe ID. Now if you don’t have an Adobe ID - you probably do but you just don’t know what it is. So the way to find out is to go up other, - go up to help, I’m in photoshop - go up to help and you can see here mine is Daniel at Bring Your Own Laptop. Now don’t click sign out, this is just a guide here to know what your email address is for your Adobe ID. If you can’t remember you password try using this email address in Adobe.com and try to sign in, and if you can't remember your password click the button that says send me a new password. Once you’ve got that sign into your app from there. One or two things need to happen,- you need to have a connector like I have to your plug, this is just a plug that comes with your charger. Plug it into your computer, and use that to connect it up, or you can us wifi without the plug. Now using wifi just means that this phone needs to be connected up to the same router as your computer . They need to be hooked up to the same network, and then it will work wirelessly.

Now what we need to do is we need to have our Device Preview open. You can see it here, it’s this little icon. If you can’t see it there, it’s in the window and it’s called Device Preview. Now if they’re both connected up, you’ll see on your screen it will have the name of your phone, and on your app it will have here that you’re connected. The next thing to do is to make sure you have a file open in photoshop. I’m going to open up the file that we are going to be using or creating during this course. That is the final version. You can see here on my phone it’s all being displayed. Now the really nice thing here is that it’s usable, I can scroll through it and see what all the design looks like on this phone. It’s independent of photoshop - you can see it’s not doing anything - but it’s displaying here. Now a really nice thing is that it’s dynamic, which means that when I update something in photoshop it’s going to instantly update on my phone without me doing anything. So watch this - I’ve noticed on my phone that it’s both the BYOL and navigation bar are quite big. So what I’m going to do is, - I’m going to make it smaller. I’m going to zoom in on this top part here and you’ll notice that if find my navigation and I make it nice and small. You’ll see that if I grab my navigation and I make it a bit smaller - click enter - You’ll notice that very quickly that it’s updating on the phone. It takes about a second or two, but totally usable.

Same thing with the BYOL here, the fonts too big. Grab the font and make it smaller, just turn it down to something like 45, and move it along and around, and you’ll notice that it kind of updates as I’m moving around with about a second or two delay. Let’s do the same for this text here, this text, white text here looks a little smaller on the mobile device, so I’m going to grab the type tool. I'll select it all and I’ll move it from 16, and bump it up to say 18, and you’ll notice on my phone it will update automatically. A couple of things that you can do with the device preview, is if you click it once up the top here there is a drop down, and it means that you can shuffle through the different artboards you’ve got. So for me it’s not that useful because I’ve got the different artboards on tablet and desktop, and it’s interesting to see it down on the site, but it’s not really not going to help me with my workflow.

So what it’s really good for, is say your developing an app or say you’re at concept stage from mobile, and you’ve got a couple of different versions, it means you can toggle through, and click the different artboards to see them in comparison to each other.

One thing to note as well, is you don’t actually have to have artboards set up in photoshop for this to work. You can open up any old file, and it will load up in the app.

Now I’m the first one in when there’s any sort of tech that connects my phone and my computer and does demoing and often it doesn’t work very well, and I’ll struggle along with them for quite a time, but this particular one, Adobe Preview is brilliant. OK It works, it’s quick and it really does help my workflow. Now if you’re designing for mobile and tablet now you should be using something like this throughout your build, because so many designers wait till right at the end , till the website is actually built, before they really get down, and test what it’s really going to do on mobile and tablet, and that’s far too far along the design process to be doing something like that, so be testing, have it open, have it on the whole time, so you can kind of see a review as you go along.

Now probably the most important thing to remember when you re using Adobe Preview is to make sure you connect up a couple of phones, a couple of iPads, - you pin them all around your screen here. OK to make it look like you’re super important. OK It will also - it’ll look like you are working on the minority report like Tom Cruise, moving things around, swiping them around and it will totally impress your colleagues.

Alright that's it for Adobe Preview.