Do you want to join our team? We're hiring!
  • Product
    • Features
    • Why Frontastic
    • Pricing
  • Partners
  • Use Cases
  • Documentation
  • Contact
  • Request a demo
  • Menu Menu
You are here: Home1 / Insights2 / Why you should always preview your pages on a real device

Why you should always preview your pages on a real device

Always preview your website on a real device

When building a commerce site, 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 doesn’t equal 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 customers 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 are 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 customers.

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 studio. The 2 systems communicate and work together to build your commerce site.

Within the Frontastic studio, 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 Frontastic studio 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 your APIs and code. Then as you make changes in the studio, 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 exactly how a customer would see it and experience what they’ll experience. That way, your customers will always get the best possible experience and keep coming back to your site.

Portrait Catherine Jones

Catherine Jones

Catherine’s the Lead Editor at Frontastic. She’s worked in many different positions at different levels but always with a customer focus and is always looking to create the best experience for users.

Stay in the loop

Subscribe to our newsletter to keep up-to-date on all the latest Frontastic news.

Related

operational efficiency as metric for headless commerce

Operational efficiency: The future metric for headless eCommerce platforms

Insights, Tech Talk
This blog post explores how operational efficiency will be the future metric for headless eCommerce platforms. If you've moved to headless or are planning towards headless transition then this article will serve as the best guide for you.
Read more
April 28, 2022
https://www.frontastic.cloud/wp-content/uploads/2021/07/Operational-efficiency-Li.jpg 1260 2400 Zoya Ruhe https://www.frontastic.cloud/wp-content/uploads/svg/frontastic-commercetools-logo-gradient.svg Zoya Ruhe2022-04-28 08:00:052022-04-12 13:53:28Operational efficiency: The future metric for headless eCommerce platforms

Frontastic architecture: Frontastic studio

For developers, Tech Talk
In our architecture blog series, we'll look at each part of the Frontastic architecture, how it works, and what you can do with it. In this post, we'll focus on the Frontastic studio.
Read more
February 24, 2022
https://www.frontastic.cloud/wp-content/uploads/2021/07/Devs_5.jpg 630 1200 catherine@frontastic.cloud https://www.frontastic.cloud/wp-content/uploads/svg/frontastic-commercetools-logo-gradient.svg catherine@frontastic.cloud2022-02-24 08:00:452022-02-21 10:14:11Frontastic architecture: Frontastic studio

Progressive web apps vs native apps: Pros and cons

Insights, Tech Talk
Just because websites are online storefronts doesn't mean you should ignore improving your user's experience. If anything, that fact alone should encourage you to offer up-to-date website experiences. This blog post explains why brands need to experiment when developing digital experiences.
Read more
November 4, 2021
https://www.frontastic.cloud/wp-content/uploads/2021/11/PWA-vs-Native-app-Ln.jpg 1260 2400 Zoya Ruhe https://www.frontastic.cloud/wp-content/uploads/svg/frontastic-commercetools-logo-gradient.svg Zoya Ruhe2021-11-04 14:11:252021-11-04 14:11:25Progressive web apps vs native apps: Pros and cons

Categories

  • Product and Functionalities
  • Company News
  • Tech Talk
  • Partnerships and Integrations
  • Insights
  • Remote Work
  • What others say

Product

  • Why Frontastic
  • Features
  • Product Tour
  • Use Cases
  • Pricing

Partners

  • Agencies
  • Tech partners

Resources

  • Blog
  • Documentation

Company

  • About us
  • Careers
  • Events

Contact

  • Contact sales
  • Support
  • LinkedIn
  • Facebook
  • Twitter
MACH Alliance Logo
Data privacy     Legal     ©2022 Frontastic
Scroll to top
  • Ready to innovate?

    Fill in the details below and we’ll find a personalized plan that works for you.

  • We store your name, your email address, and your message in our CRM ProsperWorks to ensure timely and reliable processing. Without your consent, we won't use your email address for newsletters or similar but to answer your request. We can also delete your data if you want us to. Just let us know!
    If you select this checkbox, we'll regularly send you news. You can unsubscribe at any time using the link in the newsletter.
  • Seeing is Believing

    Fill in the details below to take a personalized guided demo.

  • We store your name, your email address, and your message in our CRM Copper to ensure quick and reliable processing. The data transfer is encrypted. Without your consent, we won’t use your email address for newsletters or similar but just to answer your request. By clicking on “Request demo” you confirm that you’ve also read our data privacy terms and that you consent your data is processed as described.
  • We save your name and email to send you regular news. For this purpose, we use the service Mailchimp, to which we transfer your data. You can always unsubscribe from the newsletter using the link at the end of the newsletter.
  • Let’s get together

    Fill in the details below to join us on our mission to create extraordinary digital customer experiences.

  • We store your name, your email address, and your message in our CRM ProsperWorks to ensure timely and reliable processing. Without your consent, we won't use your email address for newsletters or similar but to answer your request. We can also delete your data if you want us to. Just let us know!
    If you select this checkbox, we'll regularly send you news. You can unsubscribe at any time using the link in the newsletter.