Thoughts on page builders
This is all based on assumptions.
I’ve worked at Wix.com. I’ve made my own custom page builder. I’ve spoken to people at Zyro. The area seems stacked full of passionate people. And still, I think there is space to improve.
Most of the builders today allow you to build “custom” components using drag and drop.
But does the average user really need it?
There are premade templates, but those just feel like a cookie-cutter solution. Which removes feelings of attachment and achievement for the average client.
On the other hand, the drag and drop editors will never be as expressive as simple HTML and CSS.
Hence you get this situation:
- The average client doesn’t feel attached to the end product, as he most likely just used the cookie-cutter templates and modified the text. So he’s not invested. And while he could use the drag n drop to customize, he doesn’t feel like he can do anything great.
- The advanced client doesn’t have the tools needed to create a truly custom look and feel, without really investing in the platform. Which makes those skills non-transferrable.
I love a story from the study where women back in the 80s didn’t want to buy premade pancake dough, because they didn’t have the feeling that they made it by themselves. Do you know what solved it? Simple they removed the eggs and water from the mix and wrote on the box “All you need is to add eggs and water”, this made them feel like they actually made the whole thing themselves. (If anyone knows the link to this study, please let me know).
What I want from a page builder:
- Choose a theme
- Choose a colour palette/fonts
- Components with great copy
- A guide to flesh out the site
- Allow truly custom components
1. Choose a theme
Most page builders provide you with templates. I always find it very restricting, and hard to make them reflect my own brand/style. I think the better option would be to choose a theme. Elegant/Sports/Fun/Extreme.
This way I feel like I’m making a choice. It’s like choosing the eggs for that dough.
A theme being the components + a tailwind.css config.
2. Choose a colour palette/fonts
Just like choosing a theme is the “eggs” part of the full dough, choosing a colour palette and fonts is the “add water” part of this journey. The more advanced clients should be able to choose the colours themselves. Which would be easy as that’s just changing the colours in the tailwind config.
3. Components with great copy
The above is a nice looking component with simple text. All a client needs to do is to change a few words and have a superb component for their site. And https://devdojo.com/tails really shines at this!
Here it would be awesome to have AI tools based on your business type + theme you’re going for. Which could prefill the components with great copy.
4. A guide to flesh out the site
This can be done in a few ways. The most no intrusive is something like this:
- Layout the sidebar sections in the order you think the client should add them to the page.
- Have subtle hints with explanations.
- Super cool, you could with AI tools most likely show the tips based on conversion data, collected from other sites?
This is where we could build AI tools to help with this process based on the type of site our customer has, the theme he chose, the metrics he wants to improve, the possibilities are endless.
5. Allow truly custom components
Now, this is the hard part. But the most rewarding one.
What do I mean by this?
Well, you have a theme, colours and fonts, a theme is a collection of components + a tailwind config file. Colours/Fonts just replace the values in the config file, or simply update the CSS variables that the config uses.
What if you could provide something like https://play.tailwindcss.com/ but for adding more component designs?
If you're familiar with Vue.js basically you allow them to write the template part of the component, all they need to know is the inputs this component gets.
They can then simply write the HTML with TailwindCss classes and interpolate the inputs.
So for example:
The component gets three inputs: { Text, Description, Image }
The designer/developer can make any type of template, here are some examples:
Text content with image: https://play.tailwindcss.com/OlTh49hMFJ
A person card https://play.tailwindcss.com/1meeto9Jgw
While these examples are simple, we could really expand this to do some crazy custom stuff.
This particular thing could open up a vast market for freelancers/Dev houses to use your page builder platform.
The main selling points for them is simple. They don’t need to reinvent these tools and instead just focus on the design/implementation side of things.
They don’t need to manage the whole DevOps/CDN/Security/Scale side of things.
If this is done right, you get a three-way win:
- User can always hire some people to do custom things for them.
- Freelancers/Dev houses get a platform to find work. As well as gaining passive income by bringing customers to your platform.
- You win in all cases, the more clients you have the more you can attract external developers. The more external developers you have the more clients you can attract.
Combine your platform with a hosting/domain/email provider and you even get a higher benefit.
The most difficult part would be to handle truly custom things. But with today's solutions of serverless functions, I’m sure some smarter people when I could come up with a unified solution to do this.
Something like this COMPONENT implements that CONTRACT.
Where CONTRACTS could also be provided by the platform or custom-built by freelances/dev houses.
To Finish up
Thank you for spending your time with me today! If you have any questions/suggestions please let me know.
You can always find me on Twitter @mmmykolas
or at https://themykolas.com/
