Component-First Building inWebflow Is Here to Stay

Published
Episode
#40
Guest
Alessia Sannazzaro
Length

My guest is Alessia Sannazzaro, co-founder and managing director of Code & Wander in London. We talk about BLOCKS, the Webflow framework she released, and why component-first building is here to stay.

Alessia Sannazzaro

Alessia Sannazzaro

Co-founder and Managing Director at Code & Wander

Alessia Sannazzaro is the co-founder and managing director of Code & Wander in London. She has been nominated for several Webflow awards and has spoken at many Webflow meetups and conferences.

Alessia Sannazzaro is the co-founder and managing director of Code & Wander, a design and development studio in London. She has been nominated for several Webflow awards and has spoken at Webflow meetups and Webflow Conf. She had just released BLOCKS, a component-first framework for Webflow. Its idea is that neither the client nor the developer should have to type class names.

What makes BLOCKS different

BLOCKS has been in the works at Code & Wander for about three years, used only by their own team. Then Alessia decided to share it.

It’s a component first framework.

Alessia Sannazzaro

It has a class naming structure and best practices. But everything is a component, built on variants, variables and design tokens.

I’m struggling a bit with the switch to building everything as components. So I asked how far she gets in practice.

At the moment, the sections that need to be unlinked are the ones that heavily use CMS or conditional visibility with components.

Alessia Sannazzaro

Everything else is components. BLOCKS is open components first, with layout components and element components inside them. But a section can still be wrapped as a closed component.

The way that I personally choose which way to go, whether open or closed, is highly client dependent.

Alessia Sannazzaro

A technical client gets the flexibility of open components. A less technical client with a simpler design gets closed ones, which are often built from open ones anyway.

Client-First was one of the first Webflow frameworks to name classes for the client, not just the developer. That fits Webflow’s whole message.

I don’t know any clients who sat down and start learning class naming.

Alessia Sannazzaro

I have one or two clients brave enough to use the Designer. They usually make new classes on the fly instead of following the framework.

But now with component variants, it’s a drop down.

Alessia Sannazzaro

Clients pick between variations, so they can’t really break anything. Which components go inside which is still a learning curve, but easier to teach. She prefers nested components to closed ones with 20 properties.

Even if you group them, you still have this wall of props.

Alessia Sannazzaro

From WordPress to Webflow

Code & Wander turns ten this year. They used to build custom WordPress themes and full-stack apps in React and Node.js, and always did design too.

It was actually sort of thanks to the pandemic that we started using Webflow.

Alessia Sannazzaro

Projects paused, which gave them time to try new tools. Alessia studied product design, the physical kind, then worked as a freelancer and in agencies. She taught herself HTML and CSS but struggled with JavaScript.

Without JavaScript, you can only get so far.

Alessia Sannazzaro

Her partner suggested Webflow, and it clicked because of what she already knew. Code & Wander no longer does WordPress. About 80% of their work is Webflow. They still do some Framer, but she recommends it only to clients with big design teams.

Still very good platform, but more tailored for designers.

Alessia Sannazzaro

What Webflow could add

Her near-term wish is fewer limits on components. No unlinking for conditional visibility with CMS items. And components that talk to each other, so a variant on the parent can set one on the child. Further out, she sees Webflow becoming a whole web experience, with analytics and optimisation for marketers.

One client took BLOCKS in-house and trained their designers on it. Now they are training their sales, content and marketing teams too.

Now the website is no longer a window shop.

Alessia Sannazzaro

The sales team builds landing pages to share after a call, instead of PDFs that go out of date. Shared libraries work well for one client with several sites. But they only work within a workspace.

If you want to share things with the wider community, don’t go there.

Alessia Sannazzaro

I’d love to copy a ready-made component from Lumos or MAST into another project. Right now it pastes unlinked, and all the properties are gone. She has the same wish.

The best thing would be to create a marketplace of components.

Alessia Sannazzaro

Some paid, some free, and whole frameworks could live there too. She is excited about Webflow Cloud and code components, which her full-stack co-founder handles. To me, Cloud, code components and AppGen feel a bit like a mess. They are kind of the same thing, but not quite. She agreed they are separate for now.

I can’t actually see the code, the raw code within the designer.

Alessia Sannazzaro

Code & Wander is building BLX, a JavaScript library with simple attributes that give BLOCKS superpowers. One example is turning any uploaded SVG into an embed, so you can change its colours. Code components are planned too, like WebGL effects for images. But sharing components is still the biggest hurdle.

AEO, content and freelancers

Clients are only starting to ask about AEO.

It’s more us pushing them and educating them on the new features.

Alessia Sannazzaro

That means llms.txt files and explaining how AEO differs from SEO. Some prospects ask what AI features Webflow has, maybe to tick a box for a superior. Code & Wander writes copy for some industries, but not all.

That’s the line of like, absolutely not, because we’re not trained lawyers.

Alessia Sannazzaro

For health care and law, they bring in specialist writers. Alessia finds freelancers in the community, on LinkedIn and X, often by getting nerdy about how they structure builds. Strangers get a small test.

We always try to keep our task quite small.

Alessia Sannazzaro

Anything bigger becomes a small paid job. They outsource copy and sometimes design, because few designers do every style well. She keeps one list of designers for edgy, editorial brands and another for corporate ones. Discovery is usually part of the whole contract, with payment at each milestone. Only product work gets a separate discovery phase first.

Partner points, mentoring and content

Webflow’s partner program now runs on points for new business. Long-term clients they keep on Webflow don’t count.

You can be a very good salesperson, introduce lots of clients to Webflow, deliver something that doesn’t quite work.

Alessia Sannazzaro

That person still gets the most points. You can earn some for community work. I agree it pushes volume over quality. A freelancer who does 10 or 12 proper sites a year probably won’t reach premium, however good the builds. I’ve had a couple of inquiries from the directory and zero projects. Code & Wander was in the first batch when the program opened.

We would get literally so many leads from there.

Alessia Sannazzaro

Then it opened to everyone, and leads stopped for a year or two. Before Code & Wander, Alessia co-founded a music discovery app and went through accelerators. She still mentors at university hackathons. She also wants to make videos again, this time for clients as well as the community.

It’s a lot easier to create for yourself.

Alessia Sannazzaro

That’s my challenge too. You make content for people like you, and they love it. But you know it might not bring any new clients. I don’t want to go fully into client-seeking mode. But I’m thinking of shifting a bit towards topics that help both the community and potential clients.

Full transcript

Read the full transcript

Janne Parri: Okay, Alessia, you recently released the BLOCKS framework for Webflow. How is BLOCKS different from all the other frameworks?

Alessia Sannazzaro: Million dollar question. Yes, released it a few weeks ago actually, quite recently, so we all know there is lots of different frameworks out there and they're all very good. Blocks or variations of BLOCKS has been in the work for ⁓ maybe three years, and I've been thinking about it and iterating on it, but always keeping it in house for our developers and our team to use. And I thought... Why not release it to everyone ⁓ and see if other people can also benefit from this framework. So how is it different? It's a component first framework. So it means it does have a class naming structure. It does have, you know, all of the best practices, a structure implemented on it. But the topic of BLOCKS is they are all components and it

Alessia Sannazzaro: Tries to use classes that the client or the developers have to enter to a minimum. So it's highly using component variants and variables and design tokens and all of that without, or at least minimum amount of class entering for either the client who's using it or the developers who are using it.

Janne Parri: Yeah, yeah, that is that is beautiful and ⁓ I like the ⁓ push towards component based building that is going on, but I gotta be honest. I'm a bit like struggling with making the change to a ⁓ Workflow where I build all those components as he said ⁓ like BLOCKS ⁓ it will definitely help with that. I'm but I'm wondering with your like actual builds how far do you get? Do you like do all the sections as a component or ⁓ will the project ⁓ still have some static sections and then there's obviously the open versus closed component discussion and all the things so in practice how far of the ideal

Janne Parri: Everything is components and editable through build mode. How close to that do you get?

Alessia Sannazzaro: It really depends on the project. At the moment, the sections that need to be unlinked are the ones that heavily use CMS or conditional visibility with components. Because currently, although this might change in the near future as Webflow introduces new features and improves everything about components. Those are the sections that are not using components necessarily. And that's where it then default to the classes that are used within the components themselves. The rest is pretty much all components. So BLOCKS as a framework uses open components first. So everything is based on ⁓ layout components and then element components inside of those layouts.

Alessia Sannazzaro: So yeah, open components more than closed. However, you can always wrap a section and create it as a closed component. So I find whether I use one or the other, it's not so much deciding which one, but it's a mix of the two. And the way that I personally choose which way to go, whether open or closed is highly client dependent. So if the client is more technical, maybe open components give them more flexibility and the ability to you know drag and drop all of the components inside of each other to create those layouts but if the client is less technical and maybe the design is simpler in itself then closed components might be a better solution for that specific design or that specific client.

Alessia Sannazzaro: However, you didn't have to pick one or the other because oftentimes even the closed components are created from open components inside of them. So it's a mix of the two. Hopefully, Webflow will release fixes to those limitations with CMS and conditional visibility very soon so that everything can be componentized from there.

Janne Parri: Yeah, yeah. Back in the day before like, even component properties. Well, we had, of course, the Client-First framework and the idea was for the client to be able to edit the site. But yeah, there's definitely a learning curve and Client-First hasn't gotten a proper like update for it for a while. But now with the components, it feels like we're like getting close to that point when we can like, in a way build a website builder within Webflow, would you agree?

Alessia Sannazzaro: Yes, definitely. Mean, Client-First was one of the first frameworks out there for Webflow or that were released to the wider community, I think. So before mass, before Lumos and before like all the others that came about. So they definitely kind of not pioneering because class frameworks have existed in the web for decades, but definitely within a Webflow of having this... Conception of, you know, creating classes for the client instead of just for the developers. And that's very powerful, especially because Webflow, you know, their whole tagline is to make website build easier and so that the client can update their website and make changes and, you know, iterate quickly. So it goes hand in hand with Webflow messaging itself.

Alessia Sannazzaro: But I mean, I don't know about you, but I don't know any clients who sat down and start learning class naming. I don't know if that ever happened. Even if the classes are super intuitive and the naming is super intuitive, unless you have that wider knowledge of, how HTML is structured, I find it very hard for clients to just jump in and be like, yeah, these are all the classes I need to use and I memorize them all and I can't just write them. I don't think that,

Alessia Sannazzaro: I don't know if you have a different opinion on that.

Janne Parri: I'm with you. Have one or two clients that are brave enough to edit with the design mode with the with the classes, but they usually just create new classes on the fly and do not like follow the framework that the site is built on. So yeah, that is not ideal

Alessia Sannazzaro: And then you have to...

Janne Parri: For the clients.

Alessia Sannazzaro: And then most likely you have to go in and tidy it up and rewrite the classes or reuse the classes that were there in the first place. But now with component variants, it's a drop down. So I find that a lot. Simpler for clients but also ⁓ safer ⁓ because they can't really break anything. They are just picking between variation of that component that ⁓ you set up. That's I think where BLOCKS comes in. It's that shift between instead for the user having to enter classes, the user now picks between ⁓ X amount of variation of that component.

Alessia Sannazzaro: Still a learning curve of which components go inside of each other or which ones are nested but I find that a lot easier to teach versus you have to memorize all these classes.

Janne Parri: Here and I checked the BLOCKS clonable ⁓ you like named the slots quite wisely in the name there is add sections here or add elements here and so on so that makes it way easier but that kind of brings us back to the open versus closed like components and there's a like balance on how much component properties you add to those components because if there is a lot, the list of all the properties simply will be so long and it gets complicated to edit the

Janne Parri: Components.

Alessia Sannazzaro: Definitely, I think this might be a personal preference because you people like it different ways but I definitely prefer the nested component way so the open components just because you don't have that long list of property on the right hand side and you know if you click on a button you literally have the button text and the button link and then a few advanced features So it's very easy to identify what to change and what that change relates to versus a closed component you might have I don't know 20 props in there and then you have to scroll

Alessia Sannazzaro: Down to find which one and yes you can group them in the folders but I wish Webflow collapsed them all so you just have the list of groups and then you can expand the one that you want but at the moment they are all expanded so even if you group them, you still have this wall of props, which can also be quite daunting. And then finding which one is button one and which one is button two and how they all link. I mean, that is in itself a learning curve as well.

Janne Parri: Totally. But I believe that Corey Moen has said the same thing about the groups of properties and he wishes that there would be some sort of automatic closing and he's inside Webflow. So hopefully he pushes this matter along. But yeah, we are, yeah, fingers crossed,

Alessia Sannazzaro: Fingers crossed.

Janne Parri: But we are getting like to the nitty-gritty of components and stuff, we have to do a little introductions. So my name is Janne Parri. I'm your host today and also a general Webflow dude all the way from Finland. And my guest today is Alessia Sannazzaro, co-founder and managing director of code and Wonder. So Alessia, you and your agency are based in London, but... I'm sure that Webflow folks around the world recognize you because you have been nominated for multiple Webflow awards through the years and you have spoken in plenty of Webflow meetups and even Webflow Conf at some point. But code & Wonder ⁓ wasn't always a Webflow agency and you might not even call it that today. But I'm curious like how

Janne Parri: Big thing Webflow is for code & Wonder right now and has it changed through the years.

Alessia Sannazzaro: Yes, it did change. So we've been running, I mean, coming up to 10 years this year, big milestone for us. But we started using Webflow in 2020. It was actually sort of thanks to the pandemic that we started using Webflow. So previous to that, were using WordPress, so custom builds, none of that. Elementor or any of those. Was all custom themes for our clients and we always had full stack developers. So building apps and web apps in React, Node.js and all of that development.

Alessia Sannazzaro: World out there. And thirdly, we always did design as well. So were always a design and development agency, helping clients to grow with their website or small web apps or, you know, anything that they might need on the digital front. And then the pandemic hit. So all of our projects got paused and you know, no one knew what was happening. So clients are wary and wanted to pause everything. And that gave us a lot of time to play around with new tools. And me, myself, my background, I'm originally, I studied product design, so physical products. And then throughout the years I went into freelancing, I went into agencies and

Alessia Sannazzaro: I fell in love with the world of startups and creating and so that shift brought me where we are today in terms of designing and developing and creating digital products. But not being a developer myself, I always felt limited in what I could create. And I always called upon my friends, my partner, my co-founder to help me out to create whatever I wanted to create. And I could always get so far, but not the full way. So I taught myself HTML and CSS, but I always struggled with JavaScript. You know, like without JavaScript, you can only get so

Alessia Sannazzaro: Far. And my partner actually during the pandemic said, why don't you try this Webflow thing? So I tried it, fell in love. And then I was like, my God, I can finally create end to end websites, you know, just by entering the HTML and CSS. And it all clicked for me because I had that previous knowledge. I know some people find it quite daunting at first because I find Webflow to be more a developer first naming convention and structure so you still have you know all your HTML

Alessia Sannazzaro: On left and your CSS on the right and the CSS properties actually match what they are in CSS. So there is a learning curve, but because I had that knowledge previously, it just clicked. And that's when we then introduced it as a offering from code and Wonder. So were kind of a little bit of WordPress, a little bit of Webflow and design and full stack. And then we saw this complete shift.

Alessia Sannazzaro: And we no longer do WordPress and we only do Webflow in that category. So it has been a massive shift and Webflow has introduced more possibilities and better ways of working with clients.

Janne Parri: I believe that nowadays you do also like framer builds, am I right?

Alessia Sannazzaro: Yes, we did a few. We still offer Framer. It depends by the client. So a lot of clients that come to us, most of them already made a decision of which platform they want to go with. I'd say still 80 % of the work that we do is Webflow. And majority of the clients ask for it. The Framer builds, I find them... Still very good platform, but more tailored for designers. So if a client comes to us and they have a big design team, then Framer might be a good platform for them because it makes more sense for designers coming from something like Figma. Framer is more similar to that versus having to learn HTML structure and other things. So in that case, or

Alessia Sannazzaro: Probably that's the only case that we would recommend Framer to them. The majority of the time because of now all the functionality that Webflow has, it's our main recommendation these days.

Janne Parri: Yeah, ⁓ yeah. Same here basically for me too. Have played around with Framer, but I'm still in love with Webflow and will be for probably quite some time, ⁓ which actually brings us to the future of Webflow. You mentioned that with BLOCKS, you are kind of like waiting for some updates. ⁓ to the features. So what are concrete things that you are waiting for and what are the bigger things that your crystal ball says that Webflow Future will entail?

Alessia Sannazzaro: I mean, the smaller ones that I'm waiting for that hopefully will come soon is around the limitations that components have currently. So conditional visibility, not having to unlink the component to add the conditional visibility when you're working with CMS items. I mean, that is the biggest one so far, but also... Know, logic of when to show a variation of a component versus another. Maybe you can pick, you know, if I'm using this variation on the parent, then use this other variation on the child component and things like that. That components within each other can also talk to each other in a way. So those are the more like immediate hopes for new features from Webflow. And then

Alessia Sannazzaro: I mean, I wish I had a crystal ball where I could see the future. I don't think anyone has. But we already saw the shift from Webflow being purely a website development tool to the Webflow experience. So, you know, introducing analytics and optimize and more tools for marketeers. So it's becoming this whole web. Experience versus just a tool to build websites. So I'm pretty sure that will continue to grow.

Alessia Sannazzaro: And bringing closer together designers and developers and marketing and content teams all working in one. We already saw this ⁓ with one of our clients. So we introduce BLOCKS and the whole framework to them and we rebuild some of the sections of their site. And then they brought all of that knowledge in-house and trained their designers on the framework. Now the last call I had with them they are also training their salespeople and their content and marketing and everyone to use the website as a tool so now the website is no longer a window shop of you know, maybe a Visitor who checks who wants to work with us and wants to check out our site and what we're about They'll go on there, but like no decisions will be made purely on the website

Alessia Sannazzaro: That I feel like there's a massive shift to that. And now the website is becoming not only ⁓ the window shop where people look at what you're offering from an external point of view, but it becomes a tool that empowers the whole team from, you know, brand visuals and brand awareness all the way to the final sale. And yeah, it becomes a huge machine that the company can use in every section or in every like team offer with different tools, different pages, different landing pages, campaigns. It literally will cover everything. And I mean, if I did have a crystal ball, that would be my assumption for the, well, at least the near future of.

Alessia Sannazzaro: You know, how companies will use Webflow and but in a larger view, like how companies will use their digital presence as well.

Janne Parri: Yeah, yeah, that's a fascinating example. And the first thing that comes to mind is that the site has to have a very good foundation so that everyone can be trained to use that. And I'm wondering like, what are the salespeople doing on the side? Are they building up landing pages and all sorts of things?

Alessia Sannazzaro: I mean, the examples that I've seen is mainly landing pages. So if they want to maybe on a call bring a specific concept. As a visual aid to their sales calls or, you know, after the call, they might say, we're going to send you a few documents or a few articles that you might want to see that all links to the website instead of, you know, sending PDF pitch decks or something

Alessia Sannazzaro: Which is more static that then needs to get updated. And then if you have a big organization with different sales team, you have to then train all of them or make sure that all of them have the correct version that they're sending to clients. So having it digitally, it means that it's always up to date. You don't have to check that all of the resources or like static PDFs are up to date. You just have the one source of truth, which is what our clients have mentioned so far.

Janne Parri: Yeah, that's a cool use case. I wonder, have you like tried those shared libraries? Because I have been meaning to try them out, but I haven't had a that big of a project where that would be useful. But have you?

Alessia Sannazzaro: I have on occasions, so I have with one client, which works really well because it's the exact scenario why shared libraries have been set up with Webflow. What I found a misconception is when you say shared libraries, the first thing I thought when they first came out was, my God, finally I can share a framework or a cloneable or something with everyone. And then whenever I update something, know, everyone in the community gets the

Alessia Sannazzaro: Update as well. That is not the case, right? Because shared libraries are only within workspaces. So you cannot share a library with other workspaces, even if you're in those workspaces, right? And I think the case scenario that Webflow made when they created the feature is you have a client with a specific brand and this client has multiple websites and you want to use components or like that branding on all these multiple websites and that's where it works really well and that's where we previously implemented it. So we might have a

Alessia Sannazzaro: Project with all of these components and then actual websites that pull from that library of components. So that if you introduce the new call to action section or a new element to be used, all of the sites that are pulling from that library have access to that component. And that works really well, but it... That's the only scenario where it works well, in my opinion. If you want to share things with the wider community, don't go there, basically.

Janne Parri: Yeah, yeah. I thought that would probably be the case, but I wonder this is like my personal issue or problem. Sometimes I want to like copy components from let's say, Lumos or mast, because they have like readymade components for specific things. But I want to use them on totally different projects. Would I be able to copy the components that way with all the properties? Because if I copy them just by copy paste all the links will be like gone and I will have to do all the linking again.

Alessia Sannazzaro: So currently there's no way of doing that. Currently if you can copy and paste a component, but when you paste it unlinks the component. So you lose all of the properties and then you have to recreate all of those properties. And across workspaces, that's the only way that is possible currently. But again, crystal ball, I hope that in the future they'll improve that so that, you you could have a cloneable or a resource out there with a specific component and everyone can just copy and paste and it actually copies and pastes the whole component

Alessia Sannazzaro: With all the properties and all the linking and not just the divs that create the component and then you have to relink it all over again.

Janne Parri: Yeah, yeah, I'm just wondering is that a very niche thing to wish or are everybody facing the same problem? I'm not sure.

Alessia Sannazzaro: I don't think it's necessarily niche. Think it's skewed towards developers versus clients, maybe. Although if, I mean, the best thing would be to create a marketplace of components, you know, where,

Janne Parri: The air.

Alessia Sannazzaro: Clients and developers alike could go on the marketplace and you might have some paid components, some free components, depending on the complexity of them. And then you can. Basically pick and choose the components that you want, copy and paste them over and yeah, that I find that would be great. And then, ⁓ you know, you could even put full on frameworks like BLOCKS or masts up there and people can copy those components over without having to have a complete cloneable. Cause a lot of the time I find, you know, when you're starting a project from scratch is great that you can clone the boilerplate and then you have the foundation all there and then you can remove or add components as

Alessia Sannazzaro: Need them. But sometimes you already have a site and you just want to add that one component or like a handful of components so the cloneable no longer works because you cannot transfer components from one to the other.

Janne Parri: Exactly. Yeah, you mentioned the web experience thing that was released or published probably two years ago in a flow conf, but I feel that there is also the other trend or push towards like more developer features like a Webflow cloud. Code components and the good old DevLink is in that mix too. How do you feel about those features and Webflow going towards the developers now?

Alessia Sannazzaro: Quite excited and I didn't necessarily see it separate from the experience. Just see it from like two different sides, kind of hugging the whole experience because on one side, ⁓ you know, all the analytics and personalization is more on the marketing side. But at the same time, ⁓ Webflow has always been slightly limited by being more of a marketing site tool. And now ⁓ because of Webflow cloud and code components, can add more. You can expand on those features and create apps or additional functionality to the site above and beyond the normal, just like pages or landing pages. ⁓ So it's creating, it's expanding the whole experience that you can have within Webflow. ⁓ on the web.

Alessia Sannazzaro: So I find that, yes, it is. Very tailored to developers. I might like code and wonder we have used it on a series of sites and it worked really, really well. But that is a task for my co-founder who's a full stack developer. And, you know, he looks at a Webflow cloud and it automatically clicks for him and it's like, oh yeah, it's easy. You just do this and that. And for me, it's a little bit beyond my knowledge of developing. But that, ⁓ I see that as a great opportunity to expand all of the capabilities that Webflow has. And therefore also the overall experience ⁓ and capabilities that you can have on Webflow.

Janne Parri: Yeah, yeah, I kind of have the same feeling that I'm excited about those, but I'm not a full blown developer. So I'm not sure what to make of those and what to do with those. And in my mind, it's a bit of a mess that there is Webflow cloud, the code components, the app gen, like the AI thing going on. And somehow, they kind of are the same, but not the same. And yeah, it's a bit complicated. But do you have a better sense of how all of those like come together or don't?

Alessia Sannazzaro: I mean, I agree in the terms that right now they're all a bit individual and segregated and even code components. And this is again, something that Webflow will likely improve and change in the near future. But even code components, so a developer creates a code component, I can use that component within the designer. But then if... I would want to change the actual code or improve or add props or anything like that. I can't actually see the code, the raw code within the designer. So I have to go back to the developer and estimate changes and update it. So there is that slight limitation and slight like segmentation between what can be done.

Alessia Sannazzaro: But I'm sure that all of that will be ironed out in, you know, this year or the next or the next few months, whenever. But they, yeah, they're continuously working on co-components and new features. So I have high hopes for them.

Janne Parri: And do I remember correctly that you mentioned in some video or post that at code & Wonder you might be cooking up some like community targeted code components maybe can you tell anything about those

Alessia Sannazzaro: Yes, it's still in to-do stage, but we... So ⁓ the whole idea is, you know, the first step was to release BLOCKS and that will be continuously be improved as ⁓ we use it for more websites and see what else is missing in terms of elements and components that we can add. Then alongside that, we're developing more of a JavaScript library with basically superpowers for BLOCKS that you can add simple attributes to expand the capability. And then there will

Alessia Sannazzaro: Be a third branch which is code components. Any like for example you want to add like WebGL to an image to create some special effect those sort of components which have all that code backing them we would like to release them to the community. But again like you said it's quite hard to share components at the moment. So it's a mixture between how do we find the right way to share those code components with a community? And it might be quite technical at first in terms of, you know, sharing a GitHub repo, and then you have to kind of copy and paste the code over and create your code component. But we're kind of waiting for an easier way to share those. So it's all still in, yeah, planning phase of what.

Alessia Sannazzaro: Those might be and how to share them. But I think that the sharing is probably the biggest hurdle at the moment.

Janne Parri: Yeah, just to hone in, what could be one example of ⁓ a superpower that one could expect for BLOCKS?

Alessia Sannazzaro: So we're adding more functionality in terms of modals and embedding. One thing that always annoyed me in a way is, you know, if you upload an SVG as an image, cannot, you cannot tap into... The path of the SVG so you can't control the color of the stroke and fill. So one small superpower would be to turn any SVG images into SVG embeds so that you can control those colors. So it's kind of like all of these like small, big improvements that you can

Alessia Sannazzaro: Add to it.

Janne Parri: Totally that would be cool. And still I want to ask about like BLOCKS. ⁓ Now it's version 1.0.1 I believe. So what are you planning to add to that like what are on the top of your to do list in that sense.

Alessia Sannazzaro: So top of the to-do list is updating, sorry if this is like boring technical stuff, like updating the attributes.

Janne Parri: No, I'm getting excited.

Alessia Sannazzaro: It's like updating attributes to really fit with the new JavaScript library that we're building so that it's even easier to add the two. So we all know. The Finsweet JavaScript library, edge of Finsweet attributes. But one, I find one hurdle of that. Mean, Finsweet is brilliant and I've used their tools so many times, ⁓ but there is quite a few attributes to add and you're not too sure where to add these. So having simpler attributes names already built into your components and then you just need to add the value in there to make it all work. So that's one way that we're working in ⁓ combining BLOCKS with.

Alessia Sannazzaro: Our own. It's going to be BLX, the JavaScript library that we're adding in there. So that's kind of my top of the list. And then adding more interactive components. So modals, better accordions, sliders, all of those that, I mean, they have been done, but not in like fully integrated into BLOCKS, yeah.

Janne Parri: Yeah, yeah, but that is also one like thing to balance like how much stuff do you add to the boilerplate? What is what is enough and what is too much because you don't want to end up like deleting most of the stuff you want to just have the right amount

Alessia Sannazzaro: I mean, my the best way, in my opinion, would be to have a very simple boilerplate and then that marketplace of components that you can add in. But it all relies on new features from Webflow. So we'll see what happens.

Janne Parri: Still fingers crossed ⁓ something ⁓

Alessia Sannazzaro: Fingers crossed. Yes.

Janne Parri: But actually it is good to get these ideas because ⁓ last Webflow Conf I felt that okay, we got a lot of the things that were like hoping for like the CMS stuff and well, the AI thing was to be expected that wasn't the community favorite maybe but still at the start of this year, was thinking that what would be like the next things that we could expect from Webflow. But it's good to come up with new things to wish, obviously. Yeah.

Alessia Sannazzaro: Yes. I mean, I, on one side, feel bad for the workflow team where we always ask for new things and then they deliver some of them and we're sort of never happy. We're like, yeah, these are great, but what about the rest of the list that we want? But yeah, they're great and always working towards that wish list.

Janne Parri: Yeah, it's a tough bar, but they are like, well, big company and doing great things. So great things are expected of them. So it's a kind of a,

Alessia Sannazzaro: Yes, very true.

Janne Parri: It's a kind of a way to say that you are already great and we want more greatness out of out of you. Was something that slipped my mind. All the AI advancements and a O thing, Webflow has done a few like webinars or posts about that. And that is an interesting development. As an agency owner, do you, do you feel that clients and people are like, asking about more

Janne Parri: AEO, so answer engine optimization ⁓ stuff? ⁓ or do people still ask for the regular SEO stuff?

Alessia Sannazzaro: They're starting to, but most of... Our clients, it's more us pushing them and ⁓ educating them on the new features. So I find a lot of them, they're still very SEO based and they're just starting to be like, what's this AEO should we do something about it? And if we do something about it, what does that mean and what is it? So it's ⁓ part of our job as well to educate them and kind of show them, you're like, ⁓ now there's all these new features that Webflow introduced.

Alessia Sannazzaro: You know, the LLMs.txt file and all of these which can be and should be introduced in your site. And then we work together to ⁓ create those documents to upload and optimize the site for ⁓ AEO as well. So in my experience at the moment is just the start with our clients. Obviously they're all... Heard the word, they all know that it exists. ⁓ But I feel like there's still an education process of what does that mean to be ⁓ AEO optimized? How is that different from SEO? And, you know, what are the steps that needs changing or doing ⁓ for their site? So I feel like we're at the very beginning. There are some clients that

Alessia Sannazzaro: Especially in the proposal stage. So before they pick Webflow as a provider, that they ask us, like, but what are the AI features that Webflow has that we can leverage? Whether in the end they use those AI feature or if it's just something that, you know, their superior has asked and they have to take a checkbox that. You know, the tool has AI features, I don't know. But we, yeah, we had a few of those as well.

Janne Parri: Yeah, I have had some clients asking what about the AI thing. And that another similar thing is like the Figma to Webflow plugin. People get excited about that, but it might not be like the thing that they are wishing it to be.

Alessia Sannazzaro: No.

Janne Parri: But back to the SEO, AEO, obviously like good SEO is somewhat good for AEO, but I believe they're might be some differences, for example, like content writing in a way of questions and answers and all the summaries and such. But I'm with you, it's like early days. But in a way, every time it's early days, people are hunting for the first mover advantage. So we live in quite interesting times.

Alessia Sannazzaro: Yeah, it's a

Janne Parri: In this sense to you.

Alessia Sannazzaro: Good position to be in, to be that early so that the clients kind of need you to educate them or need like for you to help them. So I find, yeah, it's an exciting time.

Janne Parri: Yeah, yeah. What about like content creation? Do you do that for clients or where do you like draw the line on what do you do? What kind of services you do and what do you don't?

Alessia Sannazzaro: Content creation is a tricky one, I find, because it really depends by the industry. There are some industries that we would be happy to help with... You know, writing the actual copy on the site, but there are certain industry, whether it's healthcare or law that say that's the line of like, absolutely not because we're not trained lawyers, we're not trained, healthcare providers. And therefore I would never write content myself or the team unless we find a specialist. So we often work with, freelancers, maybe the client itself.

Alessia Sannazzaro: Works with trusted freelancers that they have and therefore we bring them into the team for the project for that specific one just because you need to have very niche and specific knowledge in order to write for those industries.

Janne Parri: Yeah, Talking about like freelancers, how do you find and maybe vet or test freelancers? Do you have a process for that?

Alessia Sannazzaro: So how we find freelancers is mainly from the community. I either follow them on LinkedIn or Twitter, X, nowadays. And I see their work, I see what they're sharing. Most of the time they're highly skilled in, you know, component first. ⁓ Builds as well. ⁓ So you're sharing their opinion ⁓ and then inevitably we get into a discussion of like how they structure things and how I structure things with BLOCKS and we get all nerdy and start discussing and that's ⁓ how basically I get to know the network and the freelancers around me and how I then probably will pick them of like who to work with ⁓ and yeah

Alessia Sannazzaro: And if it clicks, it just clicks and we work well together. But in terms of if I were to bring someone in that I don't necessarily know from the network or know from. Recommendations or other friends. Then we have several tests. So it would be like a Webflow test specifically if we're looking for a Webflow developer with a few small tasks tailored to the project that we need help with. If it's more on the developer side, then it would also have maybe a...

Alessia Sannazzaro: More of a JavaScript heavy or full on stack development task. We always try to keep our task quite small because we don't want to take too much time out of the developer's time. And if we need something bigger, then it would be like a paid small job for to test how we work together and how they work in general.

Janne Parri: Yeah, yeah, and all the things that you outsource usually like more technical or Webflow or ⁓ development related or do you end up like outsourcing parts of design maybe to copy was mentioned before

Alessia Sannazzaro: Yeah, copy is definitely outsourced. I'd say majority of it is still kept in our team. Design is something that we sometimes outsource or yeah, often outsource because of different styles of designs. Find that it's quite hard to find a designer who can do all kinds of styles very well. And majority of them have their own style that they bring on. So it depends what the project is. If the brand is quite edgy and editorial, then I have a list of designers that are my go-to for all of those types of designs. If it's more maybe corporate,

Alessia Sannazzaro: Or component-based, then I have another list of designers that I would go to. So it really depends on the type of work, and then we can have those either in-house or outsourced depending on what the design is.

Janne Parri: Yeah, yeah, that's interesting. I have to ask about the workflow, especially on the design side. You probably do some sort of discovery, but what kind of tools do you have? Do you do something differently from the usual way of doing things?

Alessia Sannazzaro: I think it's necessarily different because we still go through the discovery session where we ask basically as many questions as possible not even necessarily design related but it's everything from how the business operates what their operations are what are their business goals and literally everything about the industry and where they position themselves to have a wider view of everything. And then we go into what they actually need. So it's like, okay, now that we have the bigger picture and the bigger view of where you stand within your industry.

Alessia Sannazzaro: What are the next goals and how we can help them. So it's very goal driven and output for our clients. And the rest is kind of more standard of, you know, we do wireframes where needed. And then once we have that content sort of in place and agreed with the client, we go onto the design. So depending whether the client has brand guidelines beforehand or not, we focus like on some branding first, or if they already have the brand guidelines, we'll take that and develop the designs. And then once those are agreed and they're happy with, we'll go into development. So it's still quite phased. But yeah, I don't know if that's

Alessia Sannazzaro: Much different from other companies. Yeah.

Janne Parri: No, that sounds familiar. I was thinking that maybe there is no usual way of working. But about the discovery phase, is that like a separate thing that you do first and then maybe follow along with the design and development or is it like the whole package deal contracted or like with the quote and contract beforehand or do you like separate that because I have heard that some people do the discovery separately and then think of what they are about to do and I'm thinking like trying that model so how is it for you

Alessia Sannazzaro: Usually it's part of the contract, so it's part of the wider scope of work and we have milestones. So we have payment terms at each milestone. After the discovery session, after the designs and then at development as well. The one time that we would have the discovery session completely separate, it would be for more product. Based scope of work where we need to really understand the technology used and the implementation and how everything is going to work which is then used for the estimation. So without for projects that without knowing exactly how it's all going to work and what tools we need to use and so forth in order to then estimate the actual project

Alessia Sannazzaro: That's where we would separate the two. So we would do like a smaller discovery session where we spend time kind of investigating and researching how the product will actually work. To then have the proposal and then they can decide whether to go ahead or not. But at least the outcome of that discovery is a fully scoped user stories and you know, fully scoped product. But for general marketing sites, it's usually all in one.

Janne Parri: Yeah, yeah, that's ⁓ usually quite clear need. And with the products, with the apps, ⁓ there are like more variables. So you might end up in a totally different place and scope with those projects. Yeah. ⁓ Actually, one very detailed question ⁓ I wanted to ask you, ask you about was the Webflow. Partner program ⁓ and ⁓ all the tiers like now there are like premium partners. I believe that code and wonder is one of them and there's obviously the normal partners and then there's enterprise partners and was it like last year that ⁓ they made the switch? So ⁓ How do you find that? Do you think that's a good update

Janne Parri: Have you found like more people coming to you because you are a premium partner?

Alessia Sannazzaro: So the update itself, they kind of shifted to points, a point system, right? So they already had the premium partners and the enterprise partners before. But now they shifted so that it's all point basis. So you have to bring in business for, ⁓ to Webflow in order to gain those points, which, ⁓ I mean, it's a clever move from their side, maybe slightly frustrating from an agency or freelancer side. Cause it's all based on new, clients that you bring in. So one, yeah, one issue that.

Alessia Sannazzaro: We had is we have a lot of long-term clients. So we have worked with some of our clients for three, four years, ⁓ and we kept those clients on Webflow and we made sure that their ⁓ site was updated with the newest features and ⁓ they took full advantage of what Webflow was offering. But those ⁓ are not included in the points. Because it's all about the new clients that you bring in and the new contracts. So one aspect that I don't agree as much with the point system is that you can be a very good salesperson ⁓ and ⁓ introduce lots of clients to Webflow, deliver something that doesn't quite work. The client stays for a year and then moves out and says like, had a bad experience with Webflow. I'm going to move to a different platform. Those people still get the most of points and they will be rewarded the most versus someone who does

Alessia Sannazzaro: A really good implementation job. Client is super happy, stays with Webflow for five, six years. They're not rewarded as much as the first one. So that's the only point where I find the point system kind of misses the mark. But it is, if Webflow's aim is to make sure that the most amount of people move to Webflow, no matter what the experience, then... That works, I guess.

Janne Parri: Yeah, yeah. I'm on the same boat. It kind of pushes people to more like volume rather than quality. Let's say if you are a freelancer and you do 10 or 12 proper sites per year, that probably will not get you to the premium level. Although your builds might be totally awesome. So that's one thing.

Alessia Sannazzaro: The good thing that they introduced is you also get points for community and sharing your knowledge with the community. So that's a way that you can... Kind of get more points in that aspect. If you have, you know, really good builds, but a lower volume, you can go into maybe content creation or sharing more or getting involved in live streams and basically bring the Webflow brand out there more and that you get rewarded that way as well. But yeah, you basically become a salesperson for Webflow as well.

Janne Parri: Yeah, yeah, but if you like the tool and you hang around on the live streams, in any case, that is a good thing to do. But I'm wondering, are the points like same for agencies? Is it easier to get the premium status with more people?

Alessia Sannazzaro: Yeah, the profile is it would be the same for an agency or a freelancer. And I believe the points are the same as well. So a freelancer has to bring in the same amount of projects as an agency, which you're right. It's a, can be a bigger struggle because a freelancer is usually on by itself. And it doesn't have the manpower that an agency will have.

Janne Parri: Yeah, yeah. Interesting. But as you said,

Alessia Sannazzaro: Maybe that's something that they need to change as well in the future. It's a different point system for agency and freelancer, who knows.

Janne Parri: Would be cool but they might want to keep it simple it's already like big complicated like people might not understand what's the difference between enterprise and premium partner or a premium enterprise partner and yeah that's the thing

Alessia Sannazzaro: And the second part of your question was, if we got more clients because we're a premium partner. And I don't think so to be honest. So we do. Get a lot of inquiries because we're listed as Webflow experts. So being on that list can help. I mean, it goes up and down. So there are certain months that we will get lots of inquiries and certain months that we don't get any. So I think it depends on the placement where you're at on that list. And I think it's sometimes somewhat random off like.

Alessia Sannazzaro: On which page if you're on the last page of the list or not. So that definitely helps the premium tag just like having premium on your profile. I'm not too sure how much that skews clients perception of you. Yeah, I'm not too sure to be honest.

Janne Parri: Yeah, that's kind of the same conversation as like with the batch or completely without it like the normal partner batch. It probably helps, but it's hard to like quantify how much. And I for one, I have had like couple inquiries from the partner program, but I believe I have had like zero actual projects coming from there. I'm glad that I'm a part of that, yeah, it might have been awesome when the partner program started, but nowadays it's kind of nice to have. And

Janne Parri: I have seen the same thing that it fluctuates where you are on the directory page. And I believe there's some sort of activity metric that if you are active and available, you get pushed like higher or something like that, would you agree?

Alessia Sannazzaro: Probably. Yeah. But I also remember the first, ⁓ the initial days of the partner program. Cause, ⁓ when was it maybe like five years ago or so, it was closed. So only I think it was like four agencies were listed as partner programs and then they opened it up and were the first batch that applied to be a partner,

Janne Parri: Beautiful.

Alessia Sannazzaro: When they first opened. ⁓ we would get. Literally so many leads from there just because they weren't that many people or agencies listed and it was quite like a niche group and it was also quite high quality leads so with a good budget and good intent and really well matched and then after that we, it just went down. I think we didn't get any leads for maybe a year or two when they really opened it up to every, well to everyone who applied. And now we're seeing a little increase again. So I don't know, maybe they changed something within the algorithm of how they match people, but yeah, maybe the activity is the one. I'll keep an eye on that one.

Janne Parri: Yeah, yeah, and I have to be honest, I haven't like, really checked out how is the client side. If you wanna like do a inquiry, a general inquiry for the partners, will it like push it to everybody or do you have, you probably have some sort of like filters that maybe I want a partner from this region and they should be a premium partner at least or something like that. But yeah, I do not

Janne Parri: Have a clue how that works.

Alessia Sannazzaro: Yes, there is a filtering so you can filter by location, by language spoken, by what your specialty is, whether it's animations or CMS or migrations. There's like a series of check. Box that you the client can tick and depending on what they put on there it filters the list but then I think it's still a manual process of they have to click on your profile and then click the contact button

Alessia Sannazzaro: So that's still how it works I believe.

Janne Parri: Yeah, yeah, probably. Okay, there's at least one topic with all the all the end of the episode stuff we have to do. And that is about like mentoring and mentorships. I know that you have been like a judge and a mentor in all sorts of like startup programs. So how did you get to those programs? And what have you done? Done with those and are you still like an active member at those?

Alessia Sannazzaro: Yes, it feels like that was my previous life in a way. A little bit of background before code and Wonder, I used to work in a digital agency as a project manager. And before that I started, I co-founded a product. So it was a music discovery app before Spotify weekly for to help you discover new artists, new music. And that's where I discovered the startup world and what that means. And I went through various accelerators and incubators. My background is not in business. So I had zero idea of how to structure.

Alessia Sannazzaro: Anything within like the business world. And that really helped me to give a foundation of, you know, what's a cashflow, what it's, what's selling and how to validate an idea and how to grow a business and all of those topics. And I did quite a few of those incubators. And that's how I got involved with more of the startup mentoring. So a lot of, well, three universities. Regularly ask me if I'm available to do these like sessions. They do, they organize a hackathon for their students to come up with new ideas and kind of validate an idea within, I think it was like 48 hours or something like that. And then brings in judges and mentors to help them along the way. So I did that a few times and I found it quite fun because I love brainstorming and coming up with ideas and creating.

Alessia Sannazzaro: That's a great way of interacting with that world of idea generation and what if kind of scenarios without I guess the way of actually having to making it happen. I'm just there for the fun and mentoring them and guide them along the way which I really enjoy. So I believe I might have one coming up this year as well of helping one of the universities kind of facilitate these hackathons and be there as a guide and mentor for the students. So I'm still a bit involved, but not as much as I was previously. And now, I mean,

Alessia Sannazzaro: You mentioned what's top of my list. Mean, another thing which is top of my list is start creating more videos, educational videos again. I did that. When was that? A year and a half ago. And I thought it like, it gave me a huge boost and I thought it was going really well. But then, you know, life and work comes into play and I didn't have time anymore. So

Janne Parri: Yeah, I know.

Alessia Sannazzaro: I was actually looking at my YouTube channel the other day because it feels like yesterday I did the last video and it was actually a year ago that I posted. So that's on my list of start creating more educational video and content. And I know that's not really mentorship, but in a way it falls into that educational sphere that I would like to get into again.

Janne Parri: Yeah, it helps a lot of people ⁓ and are you like planning to do more like Webflow related videos or are you like branching ⁓ maybe to business things or what are your plans?

Alessia Sannazzaro: It will still be very much Webflow related. But I want to try also a slightly different angle. So instead of having very niche technical, like how-to videos, or this is how I structured my X, having it more for the client side as well. So educating them on how to structure builds or what does AO mean or, you know, all of these topics, which are still educational, but slightly with more client focus, but they can also be very much beneficial to, you know, everyone in the Webflow community. So I'm planning a bit of a mix of both and see how it goes.

Janne Parri: Yeah, yeah, that is actually a challenge of mine. And I believe for quite a few others, like when you start making content about the stuff, you know, you usually end up making them for people like you, not necessarily for your clients. And, you get a reaction and positive feedback from those, but you at the same time know this might not bring me any new clients. And that might be just fine if you like pivot to serve your audience, but you kind of to be aware of that situation. So yeah, that's an interesting thing that I believe quite a few people pump into when they are making content.

Alessia Sannazzaro: It's a lot easier to create for yourself. Yeah. And I guess it depends why you're creating. Right. Cause if you're, yeah, yeah. If it's purely to reach new clients, then teaching, I don't know how to set up a marquee that it might not be the best video to create. But at the same time is also what make like. What brings fun and enjoyment to your creation and day to day. So if you're purely doing it for fun and engage with the community in itself, that's the bit I want to keep.

Janne Parri: Yeah. Yeah. I totally get it. And I'm on the same boat that I still want to be an active member. I do not want to go full into the client seeking mode, but I'm like thinking that maybe I should switch a bit towards topics that help both like the community and the potential clients. Yeah. Okay. We have one final section for this episode, but before we go there, Alicia, if people want to follow you, contact you, where should they go?

Alessia Sannazzaro: So LinkedIn and Twitter, or X, I'm still not used to calling them. So it's been years. That's probably where I live most days. Otherwise, you know, if you want to contact code & Wonder as an agency, you can go on our site and get in touch from there. There's our email, hello at codeandwander.com or reach out through any forms that we have on the site.

Janne Parri: Yeah, beautiful. Okay. The last section. This is for the true fans, true listeners. We are in the deep end. And what follows is a funny little thing where I tell you a Finnish saying, I translate it to English word to word, and your job is to guess or maybe even know what it means. So it can be a metaphor or idiom or saying. Is that yeah.

Alessia Sannazzaro: Let's try it.

Janne Parri: So you're saying firstly in Finnish is vetää herne nenään, and in English it is to draw a pea into one's nose like to draw or to pull I'm not sure which is the like better phrase

Alessia Sannazzaro: So is it...

Janne Parri: So what could it mean?

Alessia Sannazzaro: Is it too... Make it happen. I

Janne Parri: Not close, not even close.

Alessia Sannazzaro: Thought maybe isn't there a similar saying from like pulling it out of your sleeve or something to just like

Janne Parri: Yeah, that could be. There's a logic, but that's not the right logic. I'll give you another chance. What could it mean if I pull a P into my nose or draw a P into my nose?

Alessia Sannazzaro: You put, as in you put it in or you put it out? You put it in.

Janne Parri: Put it in. Like, draw it up.

Alessia Sannazzaro: You put it in your nose. I'm blanking, I don't know, you stop breathing?

Janne Parri: In a way, that is closer. I'll end your agony. It simply means that the person, for example, if it's me who draws the P, the person gets offended. So they get irritated or offended. So I believe, have you ever had like a pea in your nose when you're like, let's say you eat and then you cough or something and it goes to your nose backwards from your mouth and that is quite an irritating feeling so I believe it refers to that.

Alessia Sannazzaro: I believe I don't eat as many peas as...

Janne Parri: Good for you, good for you. Like, yeah, that is just a funny little Finnish segment I have to do at the end of end of every episode. But Alicia, this has been a blast. Thanks. Thanks so much for your time. And for all the watchers listeners, we will see you in the next one. Bye.

Alessia Sannazzaro: Thank you so much. Bye bye.

About Webflow and Friends

A podcast about building websites with Webflow and the tools around it. Janne Parri talks with designers, developers and marketers about how they design, build and run sites for fast-moving teams.

Hosted by Janne Parri. Janne designs and builds design-led websites and design systems for fast-moving marketing teams, in Webflow or Astro, and is a Webflow Certified Partner.