Which tech to use for your website?

As a design studio, we primarily work on the design of software. But given the right type of project, we also work on our clients' websites. In this blog post, we discuss what kinds of website project fits with our skills, and discuss two tech options: Framer and Craft CMS.

The right projects for Obra: UI-heavy websites

A first example of a website project that fits our team skills is a website that sits between website and app — like our recent work for M HKA Ensembles, where we redesigned a custom Ruby on Rails app that shows off the museum's art collection digitally.

Sometimes I position ourselves as app designers, but It wouldn't be right to say that we only design apps.  There are plenty of website projects where the website itself comes with specific UI challenges. Where the website is close to an app in terms of interaction design work.

For example, the ticketing checkout below came with its specific interaction design challenges, especially for mobile.

Websites as part of a bigger software project

A second example that makes total sense for us is creating the marketing website for an app we designed. For Raidyn, we did just that.

When we design the app, we are already in a logical conversation with our clients about the brand behind the project — often improving the brand in the project itself. We already trained ourselves how to apply the brand to the interface.

Combine this with the fact that many of our team members have a long history in designing websites, alongside apps. This makes it logical to create the website as part of a bigger project. For Raidyn, we worked on the marketing website when there was a break in the main work of designing their app.

Not everything is a good fit

As a team, we don't just design any website. We're not trying to be picky, but we want to give potential clients the best solution to their questions. We sometimes decline projects when they don't fit what we're good at. For example, we would not work on a pure marketing website for a small, local business like a nail salon. We also avoid pure e-commerce projects; the nature of these projects requires specializations we don't have.

Primary tech options

At the beginning of a project, the question usually comes up what tech to use for a website. As a team, we want to give our clients control over their website, while also providing the right technical underpinnings that match the client's needs and budget.

The primary options we put forward are Framer and Craft CMS. As solutions go, they are pretty different, but we believe both have their use cases where they work really well.

Framer

We love Framer and have been tracking the evolution of this product over this year. We've built a few websites with Framer and have been very happy with the results.

The evolution of this app over the past year is incredible. Every few weeks the team announces new features.

Framer allows for highly visual, easy-to-edit websites. It contains an easy-to-use basic CMS and built-in analytics. I always tell clients — if you are good at PowerPoint, you can also edit a Framer-based website.

The WYSIWYG nature, when implemented right, skips traditional front-end development needed to get a change online.

The speed at which you can get things done in Framer is amazing. Make the change, just hit publish and it's live. 

Framer makes some types of tasks that would take a few hours of development work in a traditional CMS environment much lighter. 

It's great when you need to move fast and you are fine with using standard building blocks for certain parts of your website (e.g. contact forms, accordions, carousels).

Some types of tasks that are a pain to do manually are done for you by Framer in the background — such as image optimization.

We think Framer is great for a certain type of business — like a software startup or a service business with many landing pages and frequently changing content.

Framer websites are React-based, and you can go quite fancy in terms of visual effects. The software itself being a Figma-like visual editor just makes it so easy to do custom designs. However, editing non-CMS pages requires  you to be careful not to break the website, especially when it comes to responsive breakpoints. This fragility could be bothersome for some teams.

When editing CMS content, the stability of the look of the website is easier to maintain; but adding CMS collections comes at an extra cost.

A hidden cost that could bite you when it comes to Framer-based websites, are bandwidth costs. I haven't personally had issues but heard about Framer websites being forced into a more expensive plan when they got popular. A quick check on a client's website reveals only 5% bandwidth usage — so not a problem — but the stats on this very own website would make it sit at an uncomfortable 80% of the 10Gb limit in Framer's pro plan.

The edit-as-you-go nature of Framer does make it difficult to create websites that have hundreds of pages. Technically you could have hundreds of blogs or events in the CMS, but if you'd want to do something highly technical with that data (e.g. create a calendar) you'd likely be a bit stuck in a Framer context. Framer doesn't scale well to custom functionality or large websites. Framer will claim you can put in a React component and do anything you want, but in practice, that is just a stopgap, and an inflexible way to develop.

There are also some things to be wary about, like Framer's ever-changing pricing, and platform lock-in. Framer is great for a good-looking marketing website. But if your logic requires custom development, many subsites, many languages and editors, it's probably best to look elsewhere. Costs can easily soar to hundreds of euros in subscription costs per month.

At the beginning of setting up your website, you are saving development costs, and you can get online quickly. But when you have to scale things up, you should probably evaluate if Framer is the right choice. Given the lock-in — you cannot export a Framer website to working code you can later adapt — you might be looking at a complete re-build.

That being said, we still think all the mentioned disadvantages are minor issues, when you compare them to the advantages.

Craft CMS

We chose Craft CMS for our very own website. This is a SvelteKit website, using Craft CMS in a headless fashion.

After many years of Wordpress experience, we decided to make the switch to Craft for deep content websites that might need to become multilingual.

There are many reasons in the background to stray away from WordPress, which we'll keep out of the scope of this blog post. Let's just say the WordPress world is a bit in turmoil because of recent events.

We love the professionalism and stewardship that Pixel & Tonic, the company behind Craft CMS, puts forward. The recent news that Craft CMS 6 will be rewritten in Laravel, while remaining fully backwards-compatible, also validates our decision. This is a company that can make meaningful product evolutions, charges a fair price for it and will stay around.

When building a Craft CMS website, you're looking at an entirely different project than a Framer project.

There is an upfront development cost to creating an extensive website with a CMS. In our case, know that we will be running this website for many years, and we don't want to be locked into a monthly subscription.

Craft is a great solution for a content-heavy website with specific data structures. Think about a website that lists events, a website with specific photo galleries, or a newspaper-style website with many users. In the case of this very own website, the blog, design services and team members are examples of repeatable content structures.

You can customize the way your content is laid out and give editors a very clear experience. From the template side, you have full control over every aspect of the output. No cruft by default in Craft.

Craft CMS comes with a licensing fee of $279 for a Team license or $399 for a Pro License. This is a one-time fee that includes one year of updates, with $99 for updates after that.

Within the Pro plan you can have as many editors or languages as you like; there is no additional fee. The logic of having no additional user cost makes for a great solution if you have a lot of potential editors.

Craft CMS is not a software as a service. You'll have to provide your own hosting and database. Essentially, you're going to want to have a skilled web developer or web development team behind the curtains to set everything up correctly.

There is a cloud offering which can get quite pricey. We prefer self-hosting the websites on a custom VPS.

Summary

We talked about the two kinds of websites that are a logical fit for us: highly dynamic websites with app-like components; or marketing websites for the digital products we have designed.

After this, we discussed Framer and Craft CMS as two viable options for different kinds of websites.

Depending on your project, there are other options like a custom CMS or treating the website as an app build. For some use cases, a static site can be a great solution as well. What you need will really depend on your use case.