Build prettier, faster, better websites with Notion

Build prettier, faster, better websites with Notion

Notion is the new Wix, and why building gorgeous websites there got popular fast

Hello there! Welcome to Digital Opsessions issue #0002 sent to 1603 humans.

Shared: Nov 10, 2020

Isn't Notion a management tool?

Yes — most people and companies use Notion for information organization and storage in the project or knowledge management contexts. It's exceptional at the latter and 80% there on the former. However, I'm not most people.

That's why after trying Webflow for the 10th time and for the love-of-it not able to figure out why the container for my dang H1 above the fold wouldn't overflow on mobile, I gave up.

Well... I allowed myself to give up because I was rather intrigued by the notion of building a website in Notion (pun very intended). This was March 2020 and at that point, I tried out using Notion for a public event page. It worked fantastically: creating the event was far more pleasant than using Eventbrite and 5x faster than in Splash That. The "sign up" button pointed to a Google Form (yuck I know) which stored responses in Sheets, so the page was fully functional.

The first version of optemization.com

So I built the first optemization.com landing page on Notion. It took me about two hours — the same time I spent figuring out one Webflow issue. The writing, editing, and content arrangement experiences in Notion are just so good that I couldn't not do it.

I believe, humblebrag btw, that it was the first landing page released out in the wild. I hacked the "custom domain" piece and barebones analytics with Rebrandly. I think it looked pretty good but it was loading slow and you could see "notion.so" pop up here and there.

The latest version of optemization.com

Here's a video reviewing how our website built on Notion works. There's a few advanced bells and whistles like global blocks but beyond that, it's pretty straightforward. I also mention the other tools hosting, analytics, and form tools that power the site.

Things have changed

They have indeed because projects like Super and Fruition launched to let people customize domains, stylingm and even scripts on Notion pages. Not everyone uses those services but nevertheless the Big Bang of stunning Notion websites has occurred. I've personally bookmarked 53 that I really liked but here are the top three spectacular ones:

Careers page

Landing Page

Product Page

But why? (Insert Ryan Reynolds GIF)

This is most relevant to folks who are not proficient in web design and use off-the-shelf website builders like Squarespace, Wix, Weebly (old game), and Carrd, Landen, Dorik, Unicorn Factory (new game).

However, I believe that any developer/engineer can benefit from saving time with a tool like Zapier even though they are perfectly capable of automating something with code. It's just faster. In the same vein, a designer could benefit from using Notion to prototype something functional quicker than in InVision.

At surface level, these seem like technical/design debt that will need to be resolved later. Wanting to migrate from Notion, I felt the same way but I'm sticking to my guns, here's why.

1) Knowledge base connectivity

There is a direct connection between the Optemization knowledge base (projects, clients) and the Optemization website. In our line of work (agency), it's critical to keep our website up to date with the latest info, so a Notion hosted site solves for the following workflows:

  1. When I close a new client, the "Clients" page gets automatically updated
  2. When I start a new project, the "Project" page gets automatically updated
  3. When I write a new blog post, I move it to the "Writing" section in one click.

None of those require any re-formatting or editing. They just show up on my website, automagically.

A completely different but relevant example is Francis Pedraza's personal Notion website. Francis is the CEO of venture-backed Invisible Technologies and extraordinary reader.

The site elegantly captures everything in his "digital brain" where he captures everything from the books he reads to the blogs he writes. With Notion authoring is sharing and that's a very important part that saves hundreds of hours in a project like this.

2) Outsourced design

In theory, nobody wants to "outsource design." We all want to feel ownership over our creations. The feeling of having poured hours of work into building something is good for the ego.

In practice, however, most people just don't care. About websites that is. Most websites exist to communicate certain info and incentivize visitors to take action. They are not meant to be art masterpieces with mind-bending transitions and effects.

And yes, in business especially, potential users don't care about how cool your website is. Your job is to design for conversion, not aesthetics. There is certainly a relationship between the two but my point here is that with Notion, you have the opportunity to outsource your design to this beautiful product.

A Notion site takes care of the layout basics but at the same time gives you plenty of flexibility with content arrangement and colors. It saves you a lot of time on the back-n-forth of design. With that in mind, you can customize fonts, colors with Super and Fruition. You can even go bananas with custom CSS but that kinda defeats the reasoning here.

3) Cheap Cost

If you use the Notion freemium and Fruition, you can end up paying only for the domain. That's it. If you're on a budget that's really good.

Our favorite use cases

There are a few galleries out there. We've curated our own here: https://optemization.com/notion-websites

These are our subjective favorites categorized by:

  • Personal / Portfolio: 17
  • Wiki / Docs / Support: 8
  • Product Page: 7
  • Company Website: 6
  • Job Board / Careers: 6
  • Blog: 4
  • Freelancer / Services: 3
  • Community / Activism: 2
image

Limitations

Being the simpleton no-coder that I am, I don't really understand the limitations but here's my new teammate Valentine:

It's not feasible to make complex web-apps with lots of interactivity — even though a lot can be done with some Javascript you can add via Super, it will get to hard to maintain at some point and is just not worth it. Notion websites lack a lot features web developers love in their frameworks — you can't attach another CMS, tinker with routing or manage complex data flow in your state Even though, theoretically, you can extend Notion websites with 3rd party packages by adding them via a content delivery network, it's not convenient and again hard to maintain in the long-run. To summarize, you shouldn't make complex, interactive web applications with Notion — at least not right now. If you're a web developer, it's best to wait for the official API — then you'd be able to plug Notion data into any framework you choose and work your web-magic.

How does one build a Notion website?

That's where our sweet sweet content comes in. This issue is already pretty long and dense, so I'm not going to rehash things but there are two ways to learn from us.

1) Blog: Ultimate Guide to Notion Landing Pages by Valentine

A step-by-step guide on building landing pages in Notion and publishing them with Super or Fruition. In the guide, we explain how to set goals, choose content, add styling, configure analytics, assess performance, and accessibility. There are two cherries on top (wow, I know): a CTA pop-up script and 10 ready-made components that you can use to get your Notion landing page out in no time.

2) Event: How to Build a Website on Notion

This stuff is really visual, so we thought it'd be super fun to host an event where we conceptualize, design and ship a Notion website together live! Sign up below

image

Lastly

Just wanna say THANK YOU to everyone who opened, read, clicked around, perhaps forwarded the last issue about the free Decision Journal template in Notion.

  • Subscriber count increased by 255 folks
  • The template was downloaded 270 times
  • I received $44 in donations
  • We got 20 YouTube subscribers

Muchas gracias friends. Now, onwards!

AboutWritingClientsWorkInquire