Start a conversation

Preview Mode

How to Use Preview Mode

We’ll cover  How to make the most out of Preview, Device Support, and Fliplet Viewer.

Preview 

Now that we know how to build and app and have explored the different Edit options the time has come to Preview our app. 

We even recommend doing this each time you build a new feature, to ensure it works correctly. 

Testing as you go along limits the number of errors that are likely to occur but if you’re on a roll, testing may not be the number one thing on your mind. 

Once you're ready to test, simply switch into Preview mode and start going through your app screen by screen. You can do this from the screen list on the side or from the Main Menu (if you have one in your app). If you do, you should probably do this anyways to ensure the Menu works properly. 


It’s good to have a separate document open or a good old pen and paper to take some notes on errors, overall flow of the app through the screens, and any improvements you might be wondering about. 

When testing your app, you should be sure to click on every single button, link, image etc. inside the Previewer to ensure the end user won’t run into any errors. 

You can also see when each screen was last edited, so if you haven’t made any changes to the screen since the last time you tested, chances are nothing has changed… it’s always a good idea to test everything just in case though. 

Device Support

You should always Preview each screen of your app using the device preview of every single device that will be using it to make sure nothing looks wonky or hasn’t translated well to a particular device or resolution. 

All Fliplet apps are responsive in that they adapt to the size of the screen they’re being viewed on, but there’s still a chance something may look off. For example, if the wrong image size/resolution was used the app may look fine on mobile but be terribly pixelated on web. Always good to check these things out. 

It’s fairly easy to narrow down which devices to Preview on as we provide a handy list for each mobile, tablet, and web views. And if your app will only be available on iOS because that’s the device your company provides, you’ve just narrowed down your testing window. 


You can view our documentation on supported devices by selecting the link at the bottom of the device previewer window to learn more. 

We always recommend using the preview function on your browser with the most up to date version of Google Chrome. 

Fliplet Viewer 

As you can see on the right hand side of my screen, there’s a reminder to download and test in Fliplet Viewer.


Simply search for the app in the App or Play stores, download it to your device, and login with your Fliplet credentials to test. 

As long the most up to date version of your app is saved in Fliplet, you’ll be able to view and interact with updates in real time on your mobile device. 

One major benefit to this is viewing the app through Fliplet Viewer is that you’ll be able to see the transition animations the way they were designed on your mobile device. Inherently, they just look a bit different on the computer ;)

Additionally, if your app is already live and launched in the public app stores, this is a way to preview updates before sending them live to your users. 

Most app users are pretty keen to let you know if there is a bug in your update but to keep everyone happy you should test the updates first!

When you click to download Fliplet Viewer, there are some handy instructions that pop up, along with a link to our blog post on the key stages of mobile app testing. 

You’ll see that this video just covers mostly the first stages of testing, since we’re only using Fliplet Viewer and haven’t launched the app to anyone, let alone any users. That’s okay! 

Test away and let us know how it goes :)


Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Olivia Hoskin

  2. Posted
  3. Updated

Comments