Static vs. dynamic websites explained for absolute beginners

Some of you may have heard me mention “static” sites before. For others of you, the term may be completely new.

Either way, I’ll do my best to provide the most accurate-yet-non-technical answer to this question ever: what the hell is a “static website”?

How do websites even work?

Let’s consider for a second how websites are delivered to our browsers.

What you see when you head to my website (you’re on it right now, stupid!) is a combination of HTML, CSS, and Javascript.

• HTML is the actual content of the website.

• CSS is the styling of the website—colours, margins, fonts, and so forth.

• Javascript enables more complex features, like the functionality of my mobile menu button, and the subtle page transitions as you move from one page on my website to another.

You also see some other assets like image files and font files.

All of these components are considered static content. You see, they’re literally just normal files that your browser temporarily downloads to your computer in order to display my website.

Are you still with me? Hopefully I haven’t lost you already.

In a sense, every website that you see in your browser, is static.

But despite this, a considerable share of all websites online are actually so-called “dynamic” websites. So what could this possibly mean?! Well, if you can try to contain your excitement for just a moment, I’ll tell you.

Some websites dynamically generate the static content that you end up seeing in your browser by asking a database on a server for information. So every time you visit a dynamic website, it needs to “build” the static files before your browser can download them.

When you visit a static website, on the other hand, you can skip that step entirely. The website has already been built, and your browser can immediately start downloading all the content!

What is any of it good for?

So we now know that the Internet consists of both static and dynamic websites. That sort of begs the question: why are there two different kinds of website?

That’s a great question, reader! Goodness, are you smart. I’m proud of you.

Now granted, I was barely alive when most of this stuff happened, but I will try my best to give you an answer anyway:

As far as I understand, back in the day, when the Internet was still in its infancy, there were only static websites.

If you wanted to create a new page, you had to go into your little website directory on your server, create a new HTML file, name it, and then hard-code the content for it.

But that gets really exhausting and repetitive after a while! It’s like reinventing the wheel every time you get in your car.

So eventually—around the turn of the century—dynamic websites became a thing. They made some cool new things possible:

If you had a blog, you didn’t have to hard-code a new HTML file every time you wanted to publish a new article. Also, you could enable visitor-generated comments.

If you had a business, you could start selling products through e-commerce.

Forums and membership sites became a possibility.

Basically, thanks to dynamic website technology, the Internet became truly interactive! So cool.

Dynamic gets BTFO’d

But history didn’t end in the year of 2000. (Cry about it, Francis!)

The problem with dynamic sites is that they depend on databases to generate content. This makes them slower, more expensive to build and maintain, and more unreliable. It kind of sucks.

Luckily around 2010, these new things called “static site generators” started to emerge.

Basically, they work like this:

You have template files. You have content files. The “generator” is like an engine that takes your content, combines them with your template files, and outputs a static website.

That means you don’t have to manually create any of the static files that get delivered to your users! You get the convenience of a dynamic site with the performance and reliability of a static site. So genius.

With the dawn of static site generators, new solutions to handle content management, blogging, user comments, e-commerce, and even more complex functionality started popping up. Actually, the “ecosystem” around static site generators is still rapidly growing, and new cool things are happening all the time.

So that’s where we’re at today. Static sites are modern, and dynamic sites are legacy.

Static site vs. static-site generator

If you’ve read the previous two sections of this article, you already know that there’s a difference between the two—basically, static-site generators are modern technologies that spit out static websites.

But when it comes to how the terms are actually used, the lines are getting blurred.

Older developers, who were developing things back in the 1990s and early 2000s, seem to largely understand “static sites” to refer to the type of static site that was around back then, and “static-site generator” to refer to the new technology.

Younger developers (and those who are young at heart) generally blur the lines more, and a lot of the time use “static site” as a shorthand for “static site generated by a static-site generator”. That’s how I use the term, anyway. Sorry if that confuses you.

The advantages of static sites

Back in 2016, Netlify published a blog post by Aaron Autrand titled “9 Reasons Your Site Should be Static”. Aaron already covered everything I was going to bring up, so I’ll just simplify some of his points here (Aaron’s article gets more in-depth and more technical):

1. Much better security

Here’s the thing: every time you visit a dynamic website, it has to communicate with a database and build all of the files that your browser downloads to your computer on the fly. If hackers find a way to weasel themselves into your database, your website is screwed.

For this reason, dynamic websites are a fucking mess. There, I said it. You have to keep updating things all the time, and always be on the look-out for new security exploits. That’s why an estimated 70% of all WordPress websites are vulnerable to known security exploits.

Meanwhile, when you’ve got a static site, the files are only built once when you update something on your website—not every time someone visits it. Standard hacking attacks (like database exploits or scripting) simply don’t work.

2. Faster load speeds

Static sites are faster. Legacy dynamic sites have to interact with a database before creating all the files that your browser needs to download. Static sites skip that step entirely, which is why they are often 10 times faster than their dynamic counterparts.

3. More flexibility

The overwhelming majority of all dynamic websites are built on either WordPress or Drupal. That means you start out with a one-size-fits-all solution, which you then try to customize as best you can by adding different plugins.

These plugins inevitably make your website (either the part of it that users see, or the CMS part) slower. I’ve seen plenty of sites that take 10+ seconds simply to navigate to a new page in the admin panel. 💩👎

Static-site generators are way more flexible. First of all, each generator has its own “specialty”:

Jekyll is the king of them all, Middleman is perfect for advanced marketing websites, GitBook for documentation sites, and so on.

But beyond that, they are all lean and flexible enough that it’s pretty easy to customise them to whatever your specific needs happen to be. And even if you do end up using someone else’s plugin, it won’t affect the performance of your editing interface or of the actual website that your users see.

4. Smaller footprint

Dynamic websites are not only a mess; they are also messy. In order to run a WordPress website, you need:

• A web server running Nginx or Apache
• PHP (which you need to keep up-to-date to protect from security vulnerabilities)
• MySQL (you’ll need to keep this up-to-date as well)
• WordPress itself (oh, and you definitely want to keep this up-to-date)
• A gazillion plugins (make sure you install all new updates!)
• Your template code (yeah, you guessed it—this needs to be updated too)

Yuck.

Static websites, once they’re generated, can be hosted on any type of web server, as long as it is capable of returning HTML files. Tools like CloudCannon and Netlify will make your life a lot easier, but you don’t strictly need them—and in any case you never need to update anything just to keep your site secure.

5. Better reliability

Static sites come with two main reliability advantages compared to legacy dynamic sites:

First of all, no databases = no “Error establishing database connection” errors = more uptime. That’s the most obvious advantage.

But because your site is completely static, it means that you can host your files on a CDN. That stands for “Content Delivery Network”, which basically means that your files exist on a bunch of servers in different parts of the world. If one server goes offline, your files will be served up by a different one instead. There’s no downtime, which means your users are none the wiser.

6. Easier to develop

Static-site generators are a lot easier to work with and develop on in pretty much every single way. That means faster turnarounds, and lower development costs for you as a client (or employer!).

7. More scalable

What happens when your website goes viral? All of a sudden, thousands of people are trying to access your site at the same time.

Here’s what happens when you have a dynamic website: For each page request, complex server-side code is executed in order to dynamically generate the content that gets served to users. Popularity gets expensive, fast.

Here’s what happens when you have a static site: All of the content was generated the last time you updated something on your website. Everything is already ready to be served to users. Popularity is cheap.

8. Lower costs

All of this ultimately adds up to lower costs to build and maintain your website. Development is faster and leaner; you require less bandwidth to accommodate whatever amount of traffic you’re getting. And you’re not paying extra just to keep your website safe from security vulnerabilities.

The money you save, you are able to spend on more important things that advance your business goals.

Is it difficult to change the content on a static site?

No, not at all.

If you’re used to something like WordPress or Squarespace, you’ll most likely find that the content management systems that integrate with static sites are actually easier to use.

There are lots of different content management systems for static sites, and many of them are extremely customizable, which means they can be tailored to the type of content that will live on your website. No superfluous parts to confuse you, and everything labelled in a no-nonsense manner.

Can I have an e-commerce store on a static site?

Yes, definitely.

There are loads of different e-commerce solutions that work with static sites.

If you just need something simple: You can do SendOwl, Gumroad, Selz, or any one of more than a dozen different alternatives.

If you need a proper e-commerce storefront, with shopping cart and all, there are a couple of solutions that come to mind: Moltin, and Snipcart.

I don’t have any experience working with Moltin, but it looks really great.

Snipcart is my go-to solution. It’s seriously powerful—easy to work with, comprehensive in terms of functionality, and capable of the sort of customization you normally only see in enterprise platforms that cost thousands of dollars per month and hundreds of thousands to build.

I recently worked on a large client project which included brand strategy, visual identity design, website design, and e-commerce development. We ended up building the website on Shopify.

Boy, was that an interesting experience. Compared to the static e-commerce sites I’ve built with Snipcart, Shopify suuuuuucks:

• Static site solutions are infinitely more flexible and customizable.
  
  You can have whatever custom product information that you want, and you have complete control over things like permalink structures. In order to add custom product information in Shopify, you need to install plugins (many of them cost $20+/month) and even then, it’s hard for non-technical users to add the information.

• Static site solutions have superior content management interfaces.
  
  Unless you’ve used it for a long time, Shopify is confusing as hell to navigate. I’ll say it again: You need to use third-party plugins in order to edit custom product fields!!! Static site solutions on the other hand offer way more user-friendly customer management interfaces, and those interfaces can be completely tailored to your needs.

Can I blog on a static site?

Yes! The blog post you’re reading right now was actually produced by a static-site generator. “But that’s small-time; I want a huge blog!” you might say. That’s a little hurtful, but fair.

Don’t worry though. No matter how much traffic, how long your blog posts, or how numerous your authors, all your blogging needs can be comfortably accommodated by a static site.

One of my clients, Ed Latimore, is a professional blogger who makes very good money from his writing. His website is a static one. And when we made the move from WordPress to static, we actually noticed a considerable uptick in organic search traffic. As it turns out, Google actually values page load speed and awards high-performing websites with better search rankings.

Not big enough for you? One of the largest web design blogs on the web—Smashing Magazine—recently made the switch from dynamic to static. They’ve got 2.5 million monthly visitors, tons of authors, reader comments, e-commerce, a membership section, and thousands upon thousands of pages. Seriously.

Is the design affected by having a static site?

No, not at all. It doesn’t matter if your site is dynamic or static—the design can still be the same.

By simplifying the development process, more time and money can be allocated to the actual design of the website. So if anything, it’s easier to make static sites look good. More bang for the buck.

What sort of websites are built on static-site technology?

More than I could possibly count!

The one you’re on right now, for starters. The majority of my client’s websites too.

Beyond that, some notable examples off the top of my head include: Mailchimp’s marketing website, Sequoia Capital, Vox Media, Healthcare.gov, Digital Ocean, Smashing Magazine, 1Password, and this chic Canadian e-commerce store.

And did I mention almost all of my client’s websites are static? I did? Oh.

You’re amazing! Who are you, anyway?

I know you’re dying to know this (it totally isn’t a question I invented to throw include a shameless plug in an article that’s bound to rank well on Google). 🙂

I run a one-man branding and design studio and work with clients from all over the world. I’m a brand strategist and designer first and foremost, but I’ve learned web development as a way to offer a higher-quality service to clients—a lot of designers only do the actual design part, and then leave the rest to some random developer.

I know that having multiple points of contact like that can be very frustrating as a client. When you work with me, you only have one point of contact, and I see the project through from start to finish. Submit your project!