Management of Staging Environment on Webflow for the organization.

The web is broken at two o'clock! The real problem in the life of a webmaker

Have you ever felt the spine every time you have to press the 'Publish' button on the company's website? Especially the website that has people use all the time Or is going to have a big campaign the next day The marketing team wants to fix the promotion a bit, the design team wants to move the button to be more beautiful, and we are the caretakers, would like to update some code ... everyone has a good intention. But the frequent results are "solve this here to break there."

The classic situation is to edit CSS only one line, but the Layout page that used to be beautiful, broken in some mobile phones. Or worse is The most important customer contact form Unable to use after the latest update Before realizing it passed half a day Losing a tremendous business opportunity ... This is not just a technical matter. But it is a problem that creates stress, distrust in the team, and makes the work delay unnecessarily.

-Prompt for illustrations-

The picture of the team is pain in the computer screen that shows a crazy web. With an arrow pointing back and forth Convey the confusion and chaos in the correction of the web that is actually live

Why is the website that I intend to do? Easy to break at the fingertips?

The little disaster tree that accumulates until it becomes a big problem. Usually not from the not the team's badness But caused by "Lack of systematic processes", especially when working as a team on a high independent platform like Webflow

The main causes are as follows:

• There is no "rehearsal practice": all the amendments on the "real stage" (Live Site) is like actors who didn't practice the script before actually acting. The chances of mistakes are very high. We do not have a safe area to trial and error.
• "One-Man-SHOW" Workflow: Many organizations still use traditional methods. That is to let the person press Publish causing the bottleneck problem And if that person makes a mistake No one helped to check first.
• Misunderstanding about Webflow: Some people may think that the webflow is easy to use, just drag the pool and press Publish, which is half the truth. The simplicity may become a double -edged sword if there is no "fence" or "practice" that is clear in working together.
• Overlook the importance of Testing: In the world of professional software development No one released the code without testing. But in the world of web Many teams overlook this step because they think that "Just a little bit of the website." This is the beginning of all problems. If wanting to see the overall picture of a good organization website Take a look at this check list. The Ultimate Corporate Website Checklist

-Prompt for illustrations-

Easy Infographic images showing many arrows from many people (Marketing, Design, DEV) points to the same website icon until becoming a "error" symbol or "broken".

If letting the "web break down" will affect more than expected

The website has frequent errors. Even if it's just a small point, it's not just a waste of time to sit and fix. But it affects the chain in a more terrifying business level

• Loss of the brand's credibility: the website is the look of the company. Customers will see your brand. "Non -professional" and the confidence that has been reduced will decrease immediately.
• Destroy the user experience (User Experience): Customers who encounter problems will feel frustrated and immediately leave the website (High Bounce Rate). The chances that he will come back again is almost zero. And that means losing customers to competitors forever
• Losing business opportunities directly: If the "order button" or "request a quotation", not working in a short time. That may mean a hundred thousand or millions that are missing in the air.
• The performance of the team decreased: instead of the team spent time creating new things. Instead have to waste time and energy with the "fire extinguishing" to solve the same problems That should not happen repeatedly This is easy to undermine and create conflicts in the team. Consider Webflow for large organizations. It is necessary to consider this very much.

Letting this problem chronic Is like having a small leak In the boat that you refuse to fill In the end, it may cause the whole boat to sink.

-Prompt for illustrations-

The graph of the bar that shows the Conversion Rate, Customer Trust, and Team Morale are plummeted with a frowning icon beside the graph.

How to solve the problem at the source: Get to know "Staging Environment" on Webflow.

The good news is Webflow. Understand this problem and prepare the most powerful tools to solve this problem for us. ** Staging Environment ** or many people are familiar with the domain name. ** ". Webflow.io" **

Speaking to the easiest understanding of Staging Environment is ** "Modeling website" ** that is the cloning of the real web (Live Site) in all respects, but it is a private space that outsiders or even Google can't see it is a "practice field" that is 100% safe for your team to:

• Test all changes: Whether it is a new design, adding new content, or entering the Custom Code, can try and see the results on this simulated website first.
• Check the accuracy: can send links Thiswebflow.io` This boss, customer, or related teams can help check the order on various devices and browsers.
• Approved before PUBLISH: When everyone involved, check until satisfied and "approval", so we then press the Publish. All changes to the actual website in one click.

This concept is not new. It is a standard in the software development industry called CI/CD (Continuous Integration/Continuous Deployment), which helps to reduce errors and increase the speed of work. Read more about CI/CD. Here, the application of this process is the beginning of a truly professional work.

-Prompt for illustrations-

Simple diagram shows on the left side of the left side is "Staging Environment (Site.webflow.io)" with an enlarged icon and the tools are testing the web. There is a green mark. Then there is an arrow pointing to the right side, "Live Site (YourDomain.com)" with a shield and smiling user icon.

Examples from the real thing: when the Marketing team stops being afraid of pressing "Publish"

One Tech Startup that provides SAAS services used to have a headache problem. Their Marketing team is very good in launching new campaigns. And want to update the Landing Page all the time, while the product team has to improve the features on the website As a result, the website crashes weekly because of overlapping work. Until they decided to use "Staging Workflow" seriously

Original problem: Marketing team, edit promotion page But pushed to affect the Global CSS, causing the button on the PRICING page of the product team to show a distortion.

Staging Workflow:

1. Clear policy: "Do not Publish on the actual website (Production) directly. Every change must pass Staging first. "
2. Create a process: The Marketing team has a solution to the Landing Page and Publish to 'Staging.company.webflow.io` only, then send a link to the Slack group to allow the Project Manager and the product leader.
3. Check and approve: Everyone helps to test on Staging Site until confident that nothing is broken. When approved (printing "Approved" in the Slack), the person responsible for the publish on the actual web.

Amazing results: Within 3 months, the rate of serious errors on the actual web is "Zero". The Marketing team can try the A/B Testing. New campaigns on Staging freely without fear of broken websites. The speed of releasing new jobs is 40% increased because it does not have to waste time sitting to solve fussy problems. And most importantly, everyone in the team works more comfortably and trusting each other This is the power of having Clear Enterprise

-Prompt for illustrations-

The picture of the first & after side is a stressful team, pointing to the computer screen that broke on the side, the same team, the same team is smiling and giving a thumbs up. With the backdrop of the graph that rises

If wanting to follow, what to do? (Can be used immediately)

You can start using this powerful Staging Workflow immediately in 5 simple steps to change your work forever:

Step 1: Amendment in the Designer as usual,
whether you design, edit content, or add code. Do everything on the Webflow Designer as you've ever done.

Step 2: Publish to Staging "only"
This is the most important step! When you press the blue publish button for you ** "Tik took the mark from your Custom Domain (the actual website)" ** and only the domain WEBFLOW.IO` only, press "Publish to Selected Domains". This will make all the changes on your simulation website.

Step 3: Check and test on Staging Link,
copy your `` Your-Site.webflow.io` link and send to everyone involved. Whether the leader, customers, or QA (Quality Assurance) team to help check the accuracy Try to click on every button to fill out every form and see the display on various devices (Desktop, Tablet, Mobile).

Step 4: Collect feedback and approval.
Use central communication tools such as Slack, Asana, or Trello to gather feedback and wait for the "confirmation" in writing from the authority. To make sure that everyone has already seen

Step 5: PUBLISH to the actual website (production)
when everything is perfect and has been approved. Go back to the Publish window again. This time, ** "Tik is right at your Custom Domain" ** (and may tick Webflow.io` Out) and press Publish. This is the second that you will release the work that has passed well to the world's eyes with 100% confidence. See more information from Webflow University directly.

-Prompt for illustrations-

The screen capture of the Publish window in the webflow that has a highlight to select the tick -tick ".webflow.io Domain" in step 2 and the tick "Custom Domain" in step 5.

Questions that people tend to wonder And the answers that are cleared

Q1: And the Staging website (.webflow.io) will be collected by Google to display?
A: No, the webflow is very smart, with the "Noindex" tag in your Staging Site automatically. To prevent Search Engines like Google to collect data and create duplicate content.

Q2: People who do not have an account Webflow. Can you come to see the Staging website?
A: Of course. You can send links `` Your-Site.Webflow.io` For anyone to see and test Like a normal website Which is very suitable for sending to customers or executives to inspect the work

Q3: If our real website has a password protection, will the staging pass the password as well?
A: Yes, the password settings will be used on both the actual web and the Staging website, allowing you to be confident that the work that is not finished yet will be seen by the licensed person only.

Q4: To move the web from other places to Webflow, such as WordPress, can you use Staging to test first?
A: Yes, and it's a very recommended method! You can create a new website on the webflow and use Staging Environment to test data moving, design, and all functions until 100% complete before the real domain switch. Read more about the web moving here. Web moving manual from WordPress to Webflow

-Prompt for illustrations-

Large question image icon (?) In the middle, there is a word FAQ and around there are small icons that communicate to google, lock key, and various people. To convey a variety of questions

Summary: Change the "fear" to "brave" every time Publish

Using Staging Environment is not just a technical matter. But is to change the corporate culture into full professionalism It is a change from "hope" to work "controlled" every step and change the feeling. "Typy" every time you press Publish into a "confidence"

The organization's website is a business tool that is too important to let the small mistakes destroy the opportunity and reliability. Time investment to create workflow works through Staging from today. Is one of the most worthwhile investments that you can make for your team and company.

It's time to upgrade your work on your webflow, more efficient, and more systematic. Try this process to apply to your next update. And you will find that the web for the organization has never been less headache before!

If you need a partner who is expert in systematic system, web website on Webflow, our team is ready to give advice. See our Advanced Webflow Development service , or if you are looking for all new organization websites. Click here to see the organization website development service.

-Prompt for illustrations-

The image of an astronaut is pressing a large "Publish" button on the control panel confidently. With a beautiful background Confidently releasing work to the public

‍