Why You Should Always Preview Your Pages on a Real Device

When building a website, there’s lots to take into account before going live. Is the code right? Does it match the designs? Does all the functionality work? Are there any bugs? The list goes on.

Theory ≠ Practice

So how do you make all those checks? Firstly, there’s Quality Assurance and Testing your code. But what about how your users will actually experience your site? It’s all well and good to make sure everything works in theory and tick off your list of functionalities. Without truly experiencing what your users will see, you’ll never know the surprises that’ll come across in reality.

And we’re not just talking about the role of a Developer or a Storefront Manager. Everyone in your team should be checking everything. Five sets of eyes is better than one, and it’s even better if not everyone knows all the requirements needed, it can be more revealing that way. Your whole team should also know what it’s like to use your website so that everyone can help improve the experience for your users.

What You See Is What You Get?

A lot of companies provide a preview function that helps you make these checks before going live. But for mobile devices, it’s usually a representation of a phone and how it looks, it’s not the real experience. So you can never tell if it’s exactly what your customers will see or not.

Real-life Testing with Frontastic’s Preview

For Frontastic customers, we provide a live interactive preview that you can use on any device. You can even scan a QR code on your phone to open it easily. For all other devices, you just input the URL provided to go to your site.

By experiencing the usability of your site on the actual device rather than using tools on a desktop that simulate the experience, you can really see where the issues could be. You can try out the exact interface that your users will see on mobile, the device they’re most likely visiting your site on, and you can be truly developing for mobile first. For example, using your thumb instead of a mouse makes a major difference on how a site is used. But the usage of fingers as an “interaction device” can’t be simulated with any preview tools out there, it has to be done on the device itself. And if your site isn’t working for mobile interactions, then it won’t be working for your customers.

Better Safe Than Sorry

You also get to see your pages and changes before it goes live, you don’t have to wait until the publish button is clicked. You can see the changes as you’re creating your site, whenever you want. This means that you won’t risk losing visitors after go-live due to you fixing bits that you didn’t realize didn’t work because you didn’t have a real preview for your devices.

How Does the Preview Work?

So how does the Frontastic preview work? As a Frontastic customer, you get a Project in the Frontastic repository which is where your code lives. You also get a Project within the Frontastic Editor. The two systems communicate and work together to build your site.

Within the Frontastic Editor, you can edit individual pages. It’s here that you can Preview each page separately or even navigate through your whole site. We provide you with a URL that you can click directly on your Desktop or you can enter it into any browser on any device to see your site there. We also provide a QR code that you can easily scan on your phone or tablet that’ll open a real-life preview directly on your device.

Now that previewing your sites on any device has become so easy, we really recommend you use the preview functionality on as many different devices as you can. Anybody who’s developed a site for different devices and different operating systems knows that there’s never one single truth. What looks great on iOS mightn’t work so well on an Android device. So, better to be safe and save yourself some unpleasant surprises.

Real Life, Real-time

You can then keep your Preview open while you edit your pages and as you make changes, your Preview will automatically update. If you want to see what a different title would look like, make the change in the Editor and check your phone straight away. It’s a pretty cool feature that we’re really proud of.

How it works in the backend is just like it would work on your real site. You visit the URL and you get all the data from you APIs and code. Then as you make changes in the Editor, what we call the Notifier lets the website know that a change has been made and updates it. Pretty simple, right?

Final Words of Wisdom: Check, Check and Double-check

All this being said, we think that you should never rely fully on a Preview. There’ll always be some nuances, especially when it comes to the data from an API. So even though we’re super proud of our preview capability, we’d always recommend checking your site once it’s live. It’s always best to check it exactly how a customer would see it and experience what they’ll experience. That way, your users will always get the best possible experience and keep coming back to your site.