All postsKarol Koronowicz
Founder
8 min read
A product website is an essential element for any SaaS business. It serves as the cornerstone of a company’s online presence, acting as a platform to showcase their product offering and value proposition to potential customers.
Sadly in reality typical SaaS product website is used to load a lot of external script ahead with a chat widget which attack potential clients. There is less effort to build a good Customer Experience.
Before building our website, we recognized that the key factors for a successful website are content, design, and speed. Based on these factors, we established five rules to guide the creation of our website. In this article, I will share our experiences from building our product website.
5 rules for creating a great SaaS product website
- Super fast – no place for delays.
- All content in one place – no subdomain portals with help articles from other vendors, no WordPress blog with theme similar to website design.
- Conversion without being an aggressive salesman – believe in words, not pop-ups.
- Well-designed – it needs to stand out in the crowd.
- Good DX (Developer Experience) so working on a website will be a pleasure – no WordPress templating.
At this moment, we are happy with some of our goals. However, product website is an ongoing project, and we are not entirely satisfied with it yet.
1. Super fast: Build SaaS product website in Astro
Currently our website is based on Astro JS, a super cool project which main goal is to create super fast websites, but before switching to Astro we try some other solutions.
Due to our expectations, we could not use WordPress, we like writing in WordPress dashboard, but frontend experience is my kind of hell. Our first version was based on a static page generator called Gridsome. However, the project was not popular, and there were many issues with JS/HTML hydration. Despite this, we liked Gridsome because it was based on Vue.js, a technology we love and static generated websites are fast.
Then we switched to Nuxt3, but it was still in its early stages and we could not achieve the desired performance from it. Nevertheless, working with Nuxt3 is a great experience, and we plan to use it in our Responsly App.
Finally, we decided to switch to Astro. That allows us to use Vue.js components. It’s a win-win situation for us.
For Content Management we switched from WordPress to our own blogging platform called Kazper.
Only static generated website
Astro is a static website generator that produces HTML, CSS, and JS without any server-side computation. This simplifies website hosting, and you can even use AWS S3 with AWS Cloudfront to serve the entire website. Recently, we switched from Netlify to Cloudflare Pages. Performance on Cloudflare is better, it’s also offer more for free. Here is a good comparison by Bejamas.
Static generators require generating the entire website when adding a blog post, for example. However, this also optimizes all images, resulting in a great Lighthouse score!
Saas website with great Lighthouse score
Google Lighthouse is an open-source tool from Google that analyzes web pages and provides feedback on performance, accessibility, search engine optimization, and more. It generates a score for each of these categories, with a higher score indicating better performance in that area.
Before Astro we struggle a bit with Lighthouse score, after switching to Astro, we have been able to achieve a near-perfect score of 100 on almost every website page.
By achieving a great Lighthouse score, we are not only improving the performance of our website, but we are also ensuring that our website is accessible and user-friendly.
It’s important to note that testing your Lighthouse score in Google Chrome can be misleading. It’s better to use remote tests such as this one. Additionally, when your website contains multiple pages, testing just one page may not provide an accurate representation. In such cases, it’s recommended to use automation tools like Unlighthouse which can scan the entire website and present scores for all pages.
2. All content in one place: Fetch API data from all places
One of our main objective was to have all product website pages in the same place. Main website, help articles and blog, all of those should be in same domain and same layout.
We decided not to use external help articles portal. First of all I think it’s confusing for the user to jump from one layout to another. Second of all, help articles are also a part of SEO, so it’s good to have it as part of the product website. We fetch articles from HelpScout – our customer support software.
With blog we use WordPress as Headless CMS for creating blog posts, but we fetch data to website via API.
Other parts of website are also fetch from API’s. In total we fetch data from 7 endpoints and then generate static pages.
3. Good Conversion: Stop the Chat nonsense
With so many SaaS websites out there, it can be challenging to stand out and grab the attention of potential customers. As a result, many businesses give up and rely solely on chat. They display a popup, play a sound, and call it a day. While chat widgets can be useful for engaging with customers and answering questions, they can also be intrusive and annoying if not used correctly.
We don’t want to force anything on users. We know from our experience with online surveys that pushing something on users is never a long-lasting solution. That’s why the chat widget is there, waiting for the user to request it. This approach allows us to optimize website loading speed by deferring script load.
We want our website to effectively convey our message and provide a sneak peek of our software. Every page should include:
- A clear value proposition
- A clear call to action (CTA)
- A clean design
With that, we’re constantly improving our website.
4. Saas website design
Many people are saying that they miss old time of pixel perfect websites. Now every SaaS website looks the same. Big H1 in center or on the left, smaller paragraph, button and an image or video. It’s super boring, but it’s not about the layout and design, it’s about the product.
Our approach is simple: we start with a limited number of colors and elements, and gradually introduce new visual elements. While we could use Tailwind with a lot of components, this would make our website look like others. Instead, we must accept that typical SaaS websites just work. However, there are plenty of other website elements to showcase our design skills.
When I registered responsly.com domain, few years ago I did quick homepage design, I only have a photo of the design today.
After few years, homepage is still looking similar but there is more details, and this is our approach.
5. Good DX for product website
DX stands for Developer Experience. It refers to the overall experience that developers have when working with a particular technology or framework. A good DX means that developers can work efficiently, with clear and concise documentation, helpful error messages, and a well-organized codebase. This results in faster development times, fewer bugs, and a more enjoyable development experience overall.
One of the things that I dread the most is having to work on the frontend templating system of WordPress. It presents numerous challenges and requires a lot of patience and time in order to get everything just right. For instance, the structure of the templates can be quite confusing, and it can be difficult to keep track of all the different files that are involved. Additionally, making changes to the templates can be a rather tedious process, and it can often feel like there are countless lines of code that need to be sifted through in order to make even the smallest of adjustments. For many years I’m a fan of Vue.js and it’s ecosystem. Whole Responsly App is made in Vue. It’s fast, clean and easy to maintain. Using well known Vue + Astro is a great investment in experience of developing a great website. Everything is building fast and there is a small amount of weird errors.
Final thoughts
I hope this article has been helpful in your decision to build your SaaS website. Choosing the right stack can be difficult, but by learning from our mistakes, you can create a blazing-fast website. If you have any questions, please don’t hesitate to contact me.
