Top Jamstack Websites – Web Dev Agency Built Examples

Jamstack is a modern approach to designing websites that allows for total creative freedom, which provides an incomparably better and more unique user experience than the traditional way.

No wonder that it is used by more and more companies – between 2020 to 2022 the number of mobile Jamstack websites has grown significantly, in the case of mobile sites more than twice – from 1.7% to 3.6%. And this approach has been around only since 2016.

In this article, our aim is to present you with a collection of outstanding Jamstack websites with mind-blowing features, which are the best proof that this approach gives great possibilities for designers. We will touch on the following issues:

• What are Jamstack websites and what’s new about them

• Examples of sites built on Jamstack, their features, and tech stack

• Facts and figures about the Jamstack approach

• The cost of creating a Jamstack site

Let’s dive into fine details!

The Definition of a Jamstack Site

The essence of what is Jamstack (a short for JavaScript, API, and markup) approach is decoupling the back end from the front end.

Let’s first take a closer look at the definition published on the official site of Jamstack as of November 2022.

It consists of three sentences. The first one of them draws attention to the creative freedom for designers, mentioned in the first sentence of this article, and lists the main benefits of the approach:

The second one encapsulates one of the main benefits of decoupling – that the structure of the back end doesn’t have to directly impact the front end:

Finally, we get to know WHY it works – and that’s because all the content is delivered to the front end via APIs:

Jamstack is related to another term – headless, which means that the front end (head) is decoupled from the back end. In the back end, Jamstack websites use so-called headless CMS to manage the content.

Jamstack Websites – What Is So Unique About Them?

The secret behind successful Jamstack projects is that it allows the creation of dynamically generated pre-rendered static sites (using so-called static site generators). What are these? These are pages that are in fact static – with all the perks of it, including simplicity, security, and SEO-friendliness – with full interactivity typical of dynamic sites, but without their sometimes-poor performance and security issues. The difference between static and dynamic websites is quite crucial here.

Jamstack sites can serve lots of content in a creative way, at the same time keeping great performance. So, you can have your cake and eat it, too.

The icing on the cake is the fact that Jamstack websites use a content delivery network (CDN) – it is a geographically dispersed network of servers, that delivers content from the one nearest to the end user. Thanks to that, the whole process is even faster.

How To Indentify The Website As Jamstack-Built One?

There is a relatively short definition of Jamstack, stating its most important features, but still it’s not a certain technology, but an approach that can be applied with many different tools. It means the borders separating Jamstack and non-Jamstack sites may be sometimes blurred.

For this article let’s assume that Jamstack websites are the opposite of traditional websites based on monolithic architecture – they utilize either API, or microservices, they take advantage of headless CMS, they don’t use server-side rendering (they are pre-rendered), and they are hosted using content delivery network.

Jamstack examples – websites worth checking out

Let’s take a look at some of the most interesting Jamstack websites, diving into details concerning their tech stack, design, UX, and other features.

We have tried to show you Jamstack examples from various fields – this way you will be able to check the versatility of this approach and find some inspiration for your own business. And remember – these are all in essence static sites!

Gastronomy: Butcher Box

• CMS: Contentful

• JS framework: Gatsby, Emotion, React.js

• CDN: Netlify

Butcher Box is a meat delivery subscription, and their website makes the mouths of meat lovers water.

It features depictions of delicious food and eating together, paired with handwritten fonts and basic colors (black, red, and white), which create a mental association with a small artisanal butchery with delicious products. Let’s look at those graphic solutions.

NGO: Re:wild

• CMS: Contentful

• Web framework: Next.js

• JS framework: React.js

• CDN: Amazon S3

Re:wild is an initiative aiming at restoring wildlife worldwide, founded by a group of conservation scientists together with Leonardo di Caprio. The central part of the homepage is an interactive map showing the places where help is being provided. An interesting element are also hand-drawn icons that make the whole site more approachable.

Re:wild deals with bold colorful backgrounds that make the message placed on them even more powerful, which is additionally highlighted with vivid pictures. Because of that kind of design, the whole website remains simple, but striking.

This website can boast great performance, with LCP (Largest Contentful Paint – time from the beginning of loading to rendering the biggest elements) at 725ms, and CLS (Cumulative Layout Shift) of 0.

Creative agency: Red Central

• JS framework: Gatsby

Red Central is a London-based creative agency. Its website just screams creativity.

The site has been designed with bold basic colors, such as red, white, and black. Clear backgrounds feature powerful typographic messages.

The agency’s team and portfolio are presented in the form of grids without any other interrupting elements.

Throughout the site, there are hand-drawn graphics that highlight the association with creative art.

One of the most interesting elements of the website is a video of a book with changing pages featuring various artistic drawings and images.

Audiobooks: Audible

• Web framework: Next.js

• CDN: Amazon Cloudfront

Audible creates and delivers audiobooks, and their website is very user-friendly. The graphic design on the homepage featuring lifestyle pictures and interactive graphical elements constitutes a very appealing experience.

It is also possible to listen to sample recordings just by clicking “play” which makes it a whole lot easier to get a grasp of the content.

Streaming platform: Hulu

• Web framework: Next.js

• JS framework: React.js, Emotion

• CDN: Akamai

A streaming platform Hulu offers lots of videos grouped into categories. It is the best proof that dynamically rendered static websites can not only present attractive graphic design, but also serve lots of rich content that can change very quickly.

Payment service: PayPal

• Web framework: Express

• JS framework: React.js, Emotion

• CDN: Azure CDN

One of the most popular payment solutions worldwide, PayPal, has also decided to build its website in the Jamstack approach. The offer is presented in a very creative way, and the whole site, though containing lots of content, is lightweight and easy to handle – it has great performance and structure, with LCP at 596 ms.

Company website: Bitcoin

• JS framework: React.js, Gatsby, Emotion

• CDN: Cloudflare

An interactive platform Bitcoin.com allows you to buy and sell crypto, and track the crypto market – all of this content is changing in real-time.

Governmental agency: Papergov

• JS framework: Gatsby, React.js

• CDN: Netlify

Finally, we have a government website – Papergov – created using Jamstack. At first sight it looks very minimalistic, which is so different from typical websites from this category. But you can easily navigate to the most important services provided. It contains lots of frequently updated content, but thanks to the technology it is very light – it has great performance with LCP at 289 ms, and the CLS is 0.

Some statistics on Jamstack sites and developers

Though relatively new (appeared back in 2016), the Jamstack architecture has already become quite popular and the numbers in this respect are rising. And it’s not only because those websites have great UX, but also because this approach is a very developer-friendly one.

When we compare 2020 and 2021, the percentage of Jamstack developers who have less than one year of experience more than tripled (4% vs 13%), which means new people are continuously entering this market.

The same trend concerned a little bit more seasoned Jamstack developers (1–2 years of experience) – from 13% in 2020 to 19% in 2021.

Jamstack websites have also gathered significant funding – this is the case of Netlify (202.1 million dollars over 7 rounds), Vercel (313 million dollars over 4 rounds), and headless commerce platforms Fabric (153.5 million dollars over 3 rounds) and CommerceTools (308.1 million dollars over 6 rounds).

Also, a well-known CRM platform Salesforce bought a headless Content Management System Mobify for 60 million dollars.

You feel it’s time to think about Jamstack in your business? Let’s see how to approach this challenge.

The wrap-up – Discovering The Popular Jamstack Site Examples And Its Influence

We have seen a collection of breathtaking Jamstack sites. Some of them present interactive visual solutions that catch the user’s eye, and some of them feature lots of content that is easy to handle and navigate.

It is no exaggeration that everything is possible with Jamstack development, and it can cater to the needs of any type of website – should it be an e-commerce store, a creative agency, a small business, or even a government entity. It's a modern web revolution.

Using Jamstack you can create lightweight and high-performing websites which are at the same time fully interactive and can easily process dynamic content, though in essence static.

Naturaily is a web development & eCommerce development company with over 10 years of experience in these areas. If you are interested in the possibilities the Jamstack approach offers, simply contact us – as an experienced Jamstack development company we will be pleased to help you with your project!