Framer, Jekyll & Flipsite

Building a website has never been easier, but at the same time the amount of tools available for getting the job done has never been more confusing.

In this article we explore two poles of what traditionally has been considered the spectrum website building, and end up with a result that combines both of these, even better than anything in between.

The case for website builders

The choice of tool has usually been a choice between User Experience (UX) and Developer Experience (DX). Framer is awesome for building visually pleasing and design wise awesome website designs. However, when deploying this it is generally considered a prototyping tool, where then an actual developer takes this design and turns it into actual HTML with e.g. Wordpress or directly in REACT or something in between.

Framer is not used for website development in the traditional sense. Instead, it helps designers and developers create interactive and visually appealing prototypes with animations and transitions. Therefore, runtime performance considerations are less relevant and even if you were to export the design to HTML, because the degrees of freedom in designing in Framer, your design will most likely not work on different form factors, or be optimized for speed on slow networks, accessible by screen readers etc.

Sadly however, most of the website builders used by people are neither optimized for this. Wordpress, built on open source and an old codebase relies heavily on plugins to fix underlying issues in the DOM structure. But nonetheless, we can conclude that Framer is awesome for designing prototypes, but not runtime websites.

The case for code and static compilers

The opposite side of the spectrum is taken by static compilers such as Jekyll. It doesnt have a design tool of any kind or even a WYSIWYG, such as Wordpress. Instead it realies heavily on content in Markdown and generates static HTML pages based on that content. he site is generated during development, and the resulting static files can be hosted on various platforms, thus not tying you into any specific vendor lock-in.

But the websites built Jekyll and the templates available are far from design wise optimal. The tooling might be friendly from a developer (DX) point of view, but the design from an and-user point of view is sub-optimal. Yes, the websites tend to be by far faster and more SEO and accessibility optimized than those of Framer, but they arent visually pleasing.

Which one should you choose? If the choice is only between the two of these, the answer is usually a combination of both. Design the sites in Framer but build them in Jekyll with multiple back and forth between your developer and designer. But what if youre alone? What if you want even better end-user experience and compliance with accessibility, technical SEO and speed than what Jekyll can provide?

This is what Flipsite was built for. We built the platform from the get-go to be a static site compiler like Jekyll, so you can export the HTML and run it anywhere. We built it from the get go so that it compiles sites that score 100/100 on Google Lighthouse tests – something nobody else achieves out of the box. And we built a WYSIWYG editor much like that of Framer.

So if youre looking for the best combination, we urge you to try out Flipsite. Its the way to building websites that look good, perform great and wont locked you in.