In the fast moving and constantly changing landscape of web development, codeless solutions like Webflow and Squarespace have emerged as an alternative to more traditional development. These platforms allow users to design and build websites through intuitive visual interfaces, and are viable solutions for many use cases out there. 

For the past several months, I've been working as a frontend development support specialist alongside one of our talented designers, Blair Culbreth, who is managing a large, established Webflow project. Here are my candid thoughts and impressions from this experience, along with some critical considerations for those looking to integrate Webflow into their own workflow. Spoiler alert: while Webflow has some impressive strengths, it also comes with limitations that can be both unexpected and frustrating at times.

What Webflow Does Really Well

Small Team Efficiency

Webflow truly shines for smaller teams or products, especially those with limited resources. For a team that’s just a single designer or a small development crew, Webflow can help lower the technical debt involved with getting a website to production. By mitigating some of the more complex aspects of development such as responsive design, cross-browser compatibility, and hosting, teams are able to focus on other aspects of the site. This makes it a strong option for startups, freelancers, or small businesses looking to create professional-grade websites efficiently and effectively without the necessity of a developer.

Animation Tooling

When I say professional-grade websites, I’m talking about more than just functional designs. Webflow has some fantastic animation tooling making it incredibly simple to build rich, full-page animations and interactions without ever touching a line of code. Users can create scroll-bound animations or interactive moments of joy all from the comfort of a relatively simple and straightforward GUI. Through the use of animation keyframes, you can elevate a static site into something that feels modern and expensive. Heck, I could even see using the animation tooling itself as a prototyping tool for design handoff in a more traditional web development process. This ability to easily add sophisticated animations allows smaller teams to produce polished, dynamic websites that rival those created by much larger teams with dedicated development resources.

Documentation & Education

Beyond its design capabilities, Webflow also stands out for its educational impact. The platform offers incredible documentation that covers core frontend principles, effectively bridging the divide between design and development. Through simple, digestible, and intuitive videos and written documentation, Webflow equips designers with knowledge that shores up many concepts and intricacies of web development.

Working with Webflow provides designers with numerous takeaways they can apply to future projects, including those outside the realm of Webflow. The platform educates users on HTML structure, CSS styling properties, and responsive design. This deeper understanding of web development makes designers more versatile and effective in their roles and inherently benefits communication between designers and developers, as their thinking will be more aligned with one another.

Navigating Webflow’s Limitations

Class Styles

Webflow's class-based styling system is a standout feature, especially to those familiar with CSS. It allows you to bundle properties into classes and apply them efficiently across different elements, minimizing code duplication. When used effectively, this approach facilitates the creation of reusable styles and design systems; however, mastering it requires attention to detail, similar to working with CSS directly, which can be made challenging within the Webflow UI.

Due to the separation of pages and content in Webflow, tracking down existing CSS classes and applying styles consistently throughout a project can be challenging. Keeping track of which class names apply what styles can be a struggle. While Webflow offers a Style Manager to help organize and manage classes, it can be difficult to use for quickly identifying how styles are being applied across the platform.

Moreover, the inability to open multiple pages in designer mode at once presents a significant frustration. Without the ability to compare elements across different pages simultaneously, users may face challenges in ensuring consistency and troubleshooting design issues efficiently. This limitation may lead to a slower, more cumbersome workflow, particularly in larger projects where maintaining a coherent design system is critical.

Another struggle with managing styles within the UI comes in the form of applying styles to combo classes. Combo classes are when you combine multiple classes together to create a variation or modified state of an element. Inadvertently applying styles to a combo class when intending to apply a style for the base class was a common issue I found myself running into, highlighting some challenges users should be aware of, especially when getting more familiar with Webflow.

These challenges underscore the value of implementing a strong and consistent CSS class naming system, such as BEM (Block Element Modifier). Adhering to a standardized naming convention will help mitigate some of the challenges posed by Webflow's class-based styling system, but it does come with the added overhead of needing to learn a new class naming convention.

Preset Web Elements

Webflow provides users with a diverse selection of default web elements, ranging from simple divs to intricate lightbox elements, which serve as the foundational building blocks for websites. These preset elements occasionally impose rigid structural constraints. For instance, when attempting to create a tabs menu with a filter, users may encounter a problem with adding additional elements to the tab menu block. This restriction forces users to either conform their design to Webflow’s constraints or devise creative workarounds to achieve their desired functionality.

Navigating such limitations can be challenging, particularly when striving to realize a specific design vision. It may involve exploring alternative solutions or compromising on the original plan. Yet, as users gain familiarity with the platform, those limitations can be anticipated, allowing them to develop strategies to circumvent the constraints.

Custom Scripts

One of the most powerful aspects of Webflow is also one of the most challenging features to balance. It requires careful management to avoid issues like performance degradation and increased technical debt.  It’s incredibly easy to have a website get bogged down with bloat, especially when a larger team might be working on a project.

Webflow lacks a built-in feature to view all custom scripts at a glance, making it difficult to track and manage them. Maintaining a documented list of all custom scripts used in your project and detailing their purposes and locations can help mitigate this issue, but that’s a fair amount of overhead to maintain. Additionally, custom scripts do not function in Webflow’s editor mode, requiring a site deploy for testing and troubleshooting, which can be time-consuming. 

The ability to add custom scripts opens up a world of options, including third-party plugins and libraries that can expand Webflow's native features. Tools like Jetboost or Finsweet can help fill in the gaps, and are oftentimes worth the investment as they provide relatively easy-to-use integrations that will make for a better user experience.

That’s all to say that applying custom scripts to a Webflow project is not necessarily bad, but should be approached with considerations on how to mitigate technical debt. Here are a few suggestions to help with integrating custom scripts into your Webflow project:

• Maximize Native Features: Use Webflow’s built-in features as much as possible. If a design can be achieved with Webflow’s interactions and animations, avoid adding custom JavaScript.
• External Development: Develop and test scripts in an external environment to reduce time spent deploying and debugging within Webflow.
• Reusable Components: Save frequently used custom code as reusable components to simplify maintenance and ensure consistency across the site.
• Regular Audits: Periodically review and clean up scripts to ensure that only necessary ones are loaded, improving site performance and maintainability.

Mitigating Difficulty Through Teamwork

I started this article by mentioning that I recently served as a frontend development support specialist alongside our designer, Blair, on this project. Blair took on the primary responsibility of building many of the pages, and I want to share more about our collaborative experience. Webflow is as close as you can get to building a traditionally coded website without necessarily needing to touch code, but that doesn’t mean there’s no value in having someone more familiar with the technical side of website building available. From accessibility considerations to complex layout structures, a lot of time can be saved by having a developer serve as a pseudo consultant on the project.

On numerous occasions, Blair reached out to me to help set up more complex custom implementations that required JavaScript or weren’t coming together as expected. By being able to jump in and solve those issues quickly for Blair, she was able to focus on building out the other pages. Similarly, I was able to audit and review her work to ensure it was inclusive for all types of users.

There are various development tricks we can implement to enhance user experiences for visually impaired users. For example, hiding text specific to a screen reader to provide greater context is a technique that a designer might not generally think about or even be aware of, but a good frontend developer would know to include. By being involved in the building process, I was able to highlight and advise on such instances, ensuring our project was accessible and user-friendly for everyone.

Conclusion

Webflow presents a robust solution for web development, particularly for smaller teams or projects with limited resources. Its intuitive visual interface and powerful animation tools enable the creation of professional-grade websites without the need for extensive coding knowledge. Webflow’s educational resources also empower designers to deepen their understanding of web development, bridging the gap between design and development and fostering better collaboration.

Webflow is not without its limitations. The class-based styling system, while efficient, can be challenging to manage, and the need for site deployment to test custom scripts adds to both the complexity and time investment required to build a project. Despite these challenges, many of the difficulties can be mitigated through careful planning and teamwork. Leveraging native features, developing and testing scripts externally, and creating reusable components are all strategies that can help maintain site performance and manage technical debt.

Collaborative efforts between designers and developers can further enhance the process, as seen in my experience working alongside Blair. This teamwork allows for efficient problem-solving and ensures that accessibility and user experience are prioritized throughout the project. By combining the strengths of Webflow with thoughtful collaboration and strategic planning, teams can create dynamic, user-friendly websites that meet modern standards.

When we open an app or website, we do so to accomplish a task or find information. A well-designed user experience ensures users can achieve their goals efficiently. But what keeps us engaged beyond basic functionality? What differentiates a mundane interface from an exciting one? In my opinion as an up and coming UI developer, one key element is motion.

During my summer internship at Viget, I had the opportunity to dive deep into the world of agency work. From getting the chance to contribute to client sites to participating in a hackathon and pursuing a personal project, I seriously leveled up my stack and gained valuable development experience. Not to mention the amount I learned from exceptional, dedicated mentorship and micro-classes on everything from React to SQL to business models. 

However, coming into the internship, I had the specific goal of learning how to add motion to my web projects. I walked in on day one with no idea where to start, and now I’m leaving my last week with a complex knowledge of Rive, canvas elements, JavaScript animation, GSAP, and more. Here’s how… 

Spinet

In this two week hackathon project, I worked alongside Faye and Paul, the Product Designer and App Developer interns, to create a spinning wheel name picker. During the first week, I took on branding and visual design work. 

I spent the second week implementing wireframes. Through this project I learned how to transform client specifications into design directions, a style guide, and ultimately, UI components.

For this app, the motion of the spinning wheel was critical to the experience. Initially, client feedback indicated that the spin felt too uniform. I adjusted the motion parameters by extending the slowdown time and changing the easing function from linear to cubic, which increased feelings of suspense at the end of the spin animation. 

To add a level of joy and celebration to the winner announcement popup at the end of a spin, I incorporated confetti animations. In doing so, I discovered the world of JavaScript animation libraries that make implementing animations as easy as simple as adding the script to my HTML and adjusting the timing and placement of the animation object. Finally, we had ultimately decided on a modern, clean-cut video game aesthetic for the branding, and pulled this in through inspired sound effects, the logo design, and a 3D button component with a click animation accomplished entirely through Tailwind. 

Luna chatbot

After the hackathon, I got the chance to work on a personal project of my choice: an AI mental health chatbot inspired by tools like Woebot and EarKick. I was motivated by the question of what could make conversational AI feel less intimidating and more empathetic. My answer was an AI support companion with an animated avatar to enhance feelings of emotional connection and understanding. 

To get started, I experimented with various chatbot APIs and found that the Llama3 model was the best at following system prompts and offered the most natural interactions. A huge part of this project was the chatbot’s expression animations. I surveyed several popular tools and found Rive was the best fit for this, offering intricate animation capabilities, easy web integration, and a state machine for managing overlapping states and complex transitions.

The first step of animating in Rive is to create a design. Luckily, Rive has a vibrant open-source community, and I learned a lot from examining and remixing community files. The second step was learning to create the animations themselves. This was my first time animating anything, but the concept of keyframes was relatively intuitive, and the UI reminded me of video editing software, like iMovie, I’d used in the past.

The third and most challenging step for me was making all the animations work together in a state machine. 

This is the logic that connects animations together, taking input values that determine when to transition between states. Getting smooth animations between emotional states required a lot of rewiring and experimenting. Finally, embedding the Rive file in my project and linking the emotion data from API responses to the animation inputs was relatively straightforward using vanilla JavaScript. 

In conclusion

Animations, whether simple or complex, add a layer of interactivity and visual interest to digital products. Over a short 10 weeks, my internship projects allowed me to explore UI development, modern animation tools, and motion using CSS and JavaScript.

If you’re interested in bringing ideas to life and sparking joy through motion design, then diving into a passion project, seeking inspiration from the community, and exploring tools like Rive and GSAP will definitely kickstart your journey!

Behavioral analytics are a great way to get a sense of what users are or are not doing on your website or app. While behavioral analytics may not provide insights into why users are behaving a certain way, this method does provide a quick and cost-effective way to see what your users are currently doing at scale. Knowing how your users are engaging with your website or product can help you make informed decisions that have a positive impact on engagement and conversions.

Here at Viget, we use behavioral analytics data for a number of use cases:

1. Our client has a specific question about a certain aspect of their website or app (e.g., a specific user flow or content type) and wants to learn more about how and when users are engaging. 
2. We are redesigning a client’s website and want to get a sense of where the current experience is excelling or falling short.
3. We are conducting an annual analysis to help clients keep an eye on potential areas of growth or stagnation. 
4. We are reviewing behavioral changes on a site or app after launching a new experience or feature to assess performance.

But what kind of insights can you expect to find from behavioral analytics data? 

It ultimately depends on the website or app, the users, and the kinds of questions you are asking, but let’s go through a few different examples of what kind of information you can gain from behavioral analytics tools.

Who is using your website or product?

Understanding who is using your website can provide helpful context on your user base and potentially unlock growth with new user groups you may have been unaware of. To investigate this, we may look at geographic location, language, device type, and any other demographic information that may be available. Sometimes this kind of data provides what I like to call descriptive information—information that often doesn’t feel immediately actionable but can become more useful relative to other data points. This could come from comparing your data to last year, to industry standards, to other content on the website, or it might come from comparing it to an assumption that an individual or organization holds. 

Here are some examples of findings that shed light on who was using the website or product:

How do users get to your website or product?

Knowing how users navigate to your website or product can highlight what traffic sources are particularly effective in driving conversions, but it can also help to provide important context on user expectations or goals. To understand this, we look at both the source/medium that brought them to the website as well as the first page they viewed. 

For example, users might:

• Come from google and land on a blog article
• Go directly to your home page
• Come from an email referral to a donation page 
• Learn about you from ChatGPT and land on your About page

From there, we might look at engagement rate, conversion rates, or other metrics to get a sense of what these users are doing and whether anything stands out as particularly effective or ineffective. 

Here are some examples of acquisition insights that informed our understanding and approach:

What content or features do users engage with?

Here is where we start to get to the meat of what your users are actually doing on your website or product. Knowing what users are doing and what they’re not using can help to establish priorities and inform decisions. You might be surprised to learn that users are actually engaging with specific features or content quite a bit, but others are barely used. If the content or feature is surprisingly popular, then we likely don’t want to outright remove it and may instead consider iterating or leveraging that offering more. If users aren’t engaging with content or a feature, it may be worth considering the effort to maintain and iterate on that offering. 

Here are some examples of engagement insights that helped us identify opportunities related to content or features:

What is the user journey or path?

Another major area of investigation is the sequence of steps users take when viewing content or completing certain actions. This could be perusing content on the website, going through a signup funnel, or checking out to make a purchase. 

This helps us identify:

• the actual paths that lead to conversions (which is not always the path we assume it is) 
• areas where users drop off at key points in the funnel
• moments where users have to “turn around” in the journey, because the path laid before them doesn’t align with their needs 

This information can help you build towards a frictionless experience that encourages users to sign up, complete a purchase, or find the resources they need.

Here are some examples of user journey insights that helped us understand where there were existing points of friction for users:

What “turning around” in the user journey can look like:

What dropoff can look like at different stages:

The Ecosystem at Large

Some clients have a larger ecosystem of products or services, and it’s important to look at how users engage with and navigate across the ecosystem. This might include subdomains for a shop, a marketing site versus the product site, help documentation, etc. By looking at the larger ecosystem we can reveal important connections that are missing or connections that could be strengthened.

Here are some examples of insights that demonstrated a need for changes in those ecosystem connections:

Here at Viget, there are a wide variety of insights we may discover for any one project through behavioral analytics. These insights can help to identify new user groups, help to prioritize content or features maintenance and updates, or bring to attention moments in the user journey that are causing friction. These opportunities can help you bring in new users and retain your existing users, by providing an experience that aligns with their needs, whether that is finding resources, getting involved in a community, or making a purchase.  

If you’re interested in making your website or application more effective for your users by leveraging the power of behavioral analytics data, we’d love to hear from you.