Introduction

This is the second in a two-part series exploring the use of Notion as a platform for building websites. In this part, we’ll focus on the constraints of Notion Sites, workarounds to overcome them, and a shopping list of improvements we’d love Notion to implement.

I’m a big fan of Notion Sites (the name for Notion’s website feature), so don’t take this as a negative review. In Part 1, I covered the many positives of using Notion for websites

I made a deliberate choice to use Notion to design and build my website, www.breakingrocks.net. Yes, it’s a new feature, and yes, there are limitations, but I felt it was important to do so. My content and productivity methods all centre around Notion, and building my site within it allowed me to learn more by doing.

This article covers what I’ve learnt building this site and how to get around them. This is not a “how-to” guide - though if you’d find that useful, let me know.

It’s also worth saying that Notion Sites is still in its early days, and I expect a lot of new features to be added soon. I’ll update this article as those changes come in.

Lessons Learnt

Hide your databases and pages

Quick Links:

<aside> <img src="/icons/book_orange.svg" alt="/icons/book_orange.svg" width="40px" />

Want to learn how to use Notion or to do more with it then please check out my book.

For beginners to intermediate, with lots of practical, step-by-step examples that you can straight away.

Available globally, also available on Kindle and Kindle Unlimited.

</aside>

Constraint:

Notion Sites is that it needs your pages and databases to be embedded within its shared pages, meaning they must be publicly accessible and in a way viewable.

Workaround:

• Create a toggle block with grey text (I call mine “Site Navigation”) at the bottom of a page.
• Nest your databases and hidden pages inside this toggle.

Personally, I also put this message into the box. “Have you found a secret bit of this website… afraid not, this is how Notion websites work.” Example below.

Images

Three categories to consider: Cover Images, Icons, and General Images.

Cover Images

Constraint: As I discussed in Part 1, a big benefit of Notion Sites, is the fact that it works with little work on all devices, i.e. desktop browser, mobiles and tablets. However, this also causes a constraint as Notion dynamically adjusts cover images across different devices (desktop, mobile, tablet), making it tricky to control how they appear.

What can be seen within what device is an article in itself, but essentially only the middle portion is guaranteed to be seen, even with repositioning the cover image.

Workaround:

• The ideal image size, for all devices for a cover image is 1500 pixels (px) x 600 pixels(px), as this is the size for desktop screens. You can use:
  • Mobile - 1170px by 445px,
  • Tablet - 1170px by 290px.
• If an image is too large, Notion will crop it. If it’s too small, it will stretch. I plan for the former.
• Be mindful of elements near the bottom of the cover image, as they might get cut off.
• Careful with the bottom of the cover image, as they may get cut off, particularly bad if you are using it as a framing line.

Icons

Constraint: If you use a logo in your page then this has to go in a fixed place on the page and will be partially above your cover image. Note, if you use a logo it will be the page icon in your browser. You can use settings to set this without using an icon.