How to Migrate Your Adobe BC Website to Webflow

The ‘End of Life’ announcement by Adobe Business Catalyst has made it clear that businesses will now have to look for an alternative platform to build and manage their websites from 20th March 2021. While many website owners have already started the process of migration, there are many that are still looking for a viable and user-friendly option that meets their business requirements.

If you belong to the latter group, don’t panic. We’ve already covered a post that lists all the affordable and efficient alternatives to Adobe BC. IF you’ve made your choice and selected Webflow as your new website builder, here’s a step by step tutorial that will help you migrate your Adobe BC website to Webflow.

Since migrating your entire website to a different platform is a big decision, it is possible that you are hesitant to finalize a particular website builder. This is why, before we get down to the details of how you can migrate your website by yourself, let us try to understand ‘why’ Webflow is one of the most favored options in the market today.

Why Choose Webflow?

Webflow has quickly gained popularity in the market owing to its simplicity. It is obvious that when you are changing your platform from an efficient and easy to use one like Adobe BC, you want something that is swift, very similar to what you have already been using and doesn’t involve too much technical expertise.

Webflow is extremely simple to use. This makes it a great platform for even beginners to start developing their websites. It most certainly pays attention to non-technical users as it requires minimal coding to ensure that your final website is fully functional and user-friendly.

It is no secret that the success or failure of a website depends largely on the design. A captivating, fresh, and functional design is something that can help in skyrocketing your website’s overall traffic. Webflow, being a visual platform, enables designers to harness the potential of their creativity and ensure that the communication gap between a designer and developer is no longer a hurdle in developing high-quality websites.

Webflow designers work essentially on HTML and CSS. However, in case, your designer feels the need to add any additional feature, Webflow allows a one-click export feature that will allow your designer to expert a semantic version of the design that has been pre-coded.

Typically, website development is a time-consuming task because prototyping and development is undertaken in two stages. However, Webflow enables you to prototype and develop simultaneously. This allows you to finish developing your website much faster and with little or no technical know-how.

Webflow is meant to empower designers and entrepreneurs to get a successful up and running website quickly and efficiently. Even if you don’t have a team of designers, you don’t need to get too worried about it because it will allow you the flexibility and creativity which can propel your website to the heights that you deem fit for it.

A very challenging ordeal for non-technical website owners is testing the final website across various platforms. Since Webflow is cross-browser compatible, it eliminates this cycle for you. It also doesn’t require a lot of effort in testing and bug fixing once the design has been finalized.

Also Read: How to Migrate Your Adobe BC Website to WordPress

How to Migrate Your Website from Adobe BC to Webflow

Now that we have discussed why Webflow is a great Adobe BC alternative for your business website, it is time to get cracking!

Step 1: Design with Develop The Website

The first step is to get the skeleton built for your website. For this, you will have to generate the code for your website using the visual designer rather than writing each line of the code independently. Since Webflow is a powerful platform, you will be able to utilize CSS, HTML, and JavaScript to its fullest potential.

This set up of generating visual codes will enable you to move around your designed blocks, add any kind of feature necessary and thereby make customizations as per your business requirements.  While all of this is happening, your designers can continue to make the design of an optimized website with the help of clean and semantic codes.

Webflow Dashboard - Design Develop The Website

Webflow Dashboard - Design With Develop The Responsive Website

Webflow offers responsive designs, which means that once you have created the design of your website, you will be able to preview it across different modern devices and screen sizes.

Check Website Responsiveness Inside Webflow CMS

Check Website Responsiveness Inside Webflow

P.S: Please note that while all of this is pretty easy to manage, you will need to have some basic coding skills. There are a few aspects in designing a custom website with Webflow that is best handled with some coding expertise. Of course, you don’t need to be a coding ninja, but using, scaling, mapping, designing and laying out your website to have the right flow may require you (or your designer-developer) to code.

Step 2: Content Migration

Once the design is set, it is time for you to migrate the content from your existing website to the Webflow one. However, unfortunately, as of now, there isn’t any automated solution to migrate the entire content.

You will have to manually copy and paste each page individually. While this may seem like a little tedious, you might use this as an opportunity to get rid of any kind of redundant content from your existing website.

It is our strong recommendation that you go through the entire content volume of your site including:

  • Text
  • Image
  • Video
  • Icons
  • Elements

Take stock of the functionality and purpose of each of these aspects. Make sure that anything that seems out of place, unnecessary or redundant is immediately scraped off.

Design Friendly Webflow CMS Dashboard

It is important to understand that Webflow is primarily a designer-friendly CMS. It is aimed to provide better design flexibility and creative potential to the website owners with the help of design tools and content management tools.

The best part about the design flow offered by Webflow works by enabling you to create a custom database that is visual in nature and then connecting this database to the design and eventually turning it into a fully functional, yet beautiful, website.

Once you have migrated the content from your website to the new Webflow site, any member of your team (you have to give rights) can alter and update it right on the page. IT also gives you the flexibility to make your content portable using API. This means that once you have created the content, you can publish it on multiple platforms.

One of the biggest challenges that business owners face while building websites is that they superimpose the content on a particular design layout. This restricts the flexibility in what they want to communicate and gives them limited on-page real estate to actually make content available.

Sometimes, designs are built with placeholder texts, images, and banners which the website owner has to adhere to while putting in the content. The biggest advantage of Webflow is that it allows you to build the website around the content that you have.

So, you are no longer facing a cut-off for the amount of content that you want to make available on your website. From blogs to videos, there is really no limit to what kind of content you may publish on your website.

Apart from the conventional content, you may also publish:

  • Events
  • Product pages
  • Feature pages
  • Portfolio items
  • Recipes
  • Case studies
  • News stories

Webflow’s CMS collections are very similar to Adobe BC’s Web Apps. So, since you are already familiar with the BC platform, you will be able to do manage Webflow too quite easily. You will not require any kind of coding for the front end or back end.

Webflow CMS - Create New Collection

Webflow CMS - Create New Collection Fields

Editing Web Content Using Webflows Editor

a) Editing Web Content Using Webflow’s Editor

Editing content is a piece of cake while using Webflow. If you were worried about coding, well, forget about it. Webflow has made sure that adding or altering any content on the website is similar to filling up a form. Just make the required changes and hit the ‘Publish’ button.

There is also a ‘Live Preview’ button that enables you to see how the changes that you made will look like. Webflow’s visual interface provides you with full control over CSS with features like:

  • Dashboard with a list of sites (not grouped)
  • Coding support
  • User-friendly visual editor
  • CMS Editor for clients
  • Client Billing
  • Customer billing
  • WebForms (drag and drop interface)
  • Hosting
  • Multiple blog support
  • E-commerce

Head Code Space For Website

Webflow Account Setting - Billing Details

b) Building And Managing E-Commerce Websites On Webflow

E-commerce has become a necessary part of most businesses today. If your website offers online shopping, here’s what you must now about Webflow.

Webflow offers pre-set templates for e-commerce stores. It is loaded with all the features that are necessary to run a successful online shopping website including:

  • Custom product grids
  • Custom product pages
  • Custom shopping carts
  • Check out pages

Webflow’s e-commerce tool is fully functional and in the beta stage as of right now. Webflow’s e-commerce platform will enable you to manage your online business store effectively by:

  • Managing your inventory
  • Fulfilling orders
  • Customize receipts
  • Update emails
  • Create new landing pages
  • Create blogs
  • Enable secure check-out from your own domain

Step 3: SEO And URL Redirections

Now that your content has been migrated and you’ve seen the live version on various screens to know if it responsive and working well, all you need to do is move on to the next step, which is SEO and URL redirection.

Search Engine Optimization is key to the access and success of your website. While in other platforms you may have to depend on various plug-ins and widgets for content SEO, but with Webflow, there is no such requirement.

Webflow Search Engine Optimization Settings

Webflow’s editor offers by default, the ability to edit/add Meta description and Meta title on your web pages. You will also be able to instantly preview what your website’s entry will look like when it’s live on the internet.

Webflow Editor Edit - Add Meta Description And Meta Title On Web Pages

Being able to view where your keywords are going, (title, description, URL, H1s and 2s, etc.) makes it very easy for you to see how your well you can optimize your website.

Webflow CMS Dashboard - Blog Posts Template Settings

When you migrate your website from Adobe BC to Webflow, you don’t have to worry about losing the rank that you already had. 301 redirects preserve the ‘link-juice’ which enables your webpage to enjoy the same rank as it did earlier.

Webflow CMS Dashboard - Custom Domains-301 Redirection Setting

Step 4: Hosting & Pricing

Finally, it is time to choose a plan that meets your business requirements. The good news is that you don’t have to purchase any hosting provider since all websites on Webflow are powered by top-notch

You won’t need to find a hosting provider, because all Webflow sites are stored on AWS (Amazon Web Services) and delivered by a Fastly network. The reliability of Webflow is evident because it relies on the same CDN as some of the best businesses in the world including New York Times and The Guardian.

Webflow also offers free SSL to each website when you purchase any plan with them to ensure that you can offer a secure surfing experience to your users. Based on your business requirements, you may choose from any of the following plans:

  • Site plans – The site plan is essentially your hosting plan. There are free, enhanced and business plans available that you may choose from. With a site plan, you may
  • Connect your custom domain
  • Invite collaborators
  • Enable checkout on eCommerce stores
  • Account plans – This is essentially the monthly fee that you pay Webflow to lift any limitation on your free site. It is also applicable when you have more than two free websites on Webflow.

Webflow Site-Website Plans

What Kind of Support to Expect

Regardless of how proficient you are with technology, there is a definite possibility of needing support on your website from time to time. With Webflow, you can rest assured that you will not face any delay in getting help when needed.

There is a huge community of Webflow users that access various forums with discussions for the users. You may visit these forums to identify if your issue has been addressed there. Otherwise, the reviews available for Webflow support are indicative of a very helpful support team.

A Peek Into The Future

It is no secret that Adobe Business Catalyst boasts of a few very user-friendly features that Webflow lacks in. However, they are coming soon with the beta version of a Native E-commerce tool which can be integrated with Shopify, Foxy, and others. We will have to keep our eyes peeled for everything new that Webflow has to offer in the coming year.

Conclusion

Migrating your existing website on any other platform is not easy. It is a tough choice to begin with and then a slightly hard road to achieve a perfect website at the end of it all. However, we hope that this post helped to see why Webflow can be a good choice for you and if it is the option of your choice, how you can migrate your website to it by yourself.

P.S: Like we’ve mentioned before, you do not need to be a coding expert in order to do this, however, there are some places where you need to exercise caution or learn a few basic coding skills. If you have any questions or are still confused about any step, feel free to put in a comment below and we’ll get back to you with more answers.

  • Hiren is a Project Manager at E2M and looking after the Website Design and Development Team. Hiren fosters an environment of teamwork and ensures that the process of the Website Design and Development will become smooth from Estimation to the project Execution. He is responsible for Project Management, Resources Allocation and Management, On-time Delivery of the Projects, Overall Performance of the team etc. His strong communication and client service skills enhance E2M’s performance-driven management philosophy.
4 Shares
Buffer
Share
Tweet4
Share
Pin