Website Design Trends 2017-2019: Minimalism & Full-Screen Headers

I still remember browsing the web around 2017 and noticing a peculiar trend in website design. It seemed like every new site I visited had the same distinctive set of features: a full-screen header image, a sans-serif font, and a relentless emphasis on minimalism. This design language, which I've come to think of as "flat minimalism," was everywhere - from tech startups to personal blogs. At first, I thought it was just a coincidence, but as the months went by, the trend only gained momentum.

What's interesting is that this trend didn't seem to be driven by any particular technological advancement or design philosophy. It was as if designers had collectively decided that this was the "right" way to build a website, and everyone else was just following along. I've seen this kind of design convergence happen before, but never to this extent. It's almost as if the web had become a vast, homogeneous landscape, with every site blending together into a sea of sameness.

As someone who's been writing about tech and design for years, I have to admit that I find this trend a bit unsettling. On the one hand, it's impressive to see how quickly designers can adopt and refine a new visual language. On the other hand, it's disappointing to see so much creativity and individuality stifled by the pressure to conform. I'm not sure what's driving this trend, or where it's ultimately headed, but I'm curious to explore it further. What's behind this peculiar trend, and what does it say about the state of web design today?

Introduction to the Trend

The "Every Fucking Website" trend is a phenomenon that emerged in the late 2010s, characterized by a distinctive set of design elements. It's marked by the presence of background videos, often playing in a loop, which can be quite resource-intensive - we're talking 20MB videos, at least. This trend also frequently features prominent displays of limited-time offers, such as 10% off with a unique coupon code. The copyright notices on these sites often date back to 2017-2019, and some even mention COVID-19, which gives you an idea of the time frame we're dealing with.

One of the defining features of these websites is their use of design elements that were popular during this era. They often have a very "2019" feel to them, with large hero sections, bold typography, and an emphasis on visuals over text. However, not everyone is a fan of this design trend. As one critic put it, "No endless scroll? What the hell am I supposed to do with my mouse wheel?? Useless!" On the other hand, some designers seem to be embracing this trend, with one enthusiast saying, "Damn, yeah this is exactly how I make my websites look."

From a technical standpoint, implementing a background video like the ones found on these websites is relatively straightforward. You can use HTML5 video elements, like this:

<video loop autoplay muted>
  <source src="background.mp4" type="video/mp4">
</video>

This code sets up a video that will loop continuously and play automatically when the page loads. The muted attribute is important, as it prevents the video from playing audio by default, which can be annoying for users.

It's worth noting that this trend is genuinely confusing, and it's hard to say what its lasting impact will be. Is it a genuine design movement, or just a flash in the pan? Only time will tell, but for now, it's certainly an interesting phenomenon to observe.

Technical Requirements

To achieve the desired design, there are some specific technical specs that need to be met. The most notable requirement is a 20MB video playing in the background of the hero section. This is a significant file size, and it's likely to have performance implications, especially on lower-end devices or slower internet connections. It's worth considering how this will impact the user experience, particularly if the video is not optimized for different screen sizes and devices.

In terms of other technical details, the design also requires a unique coupon code that offers 10% off, as well as a copyright notice that covers the years 2017-2019. Additionally, there's a mention of COVID-19, which may require some special handling or consideration. From a development perspective, these requirements can be implemented using a combination of HTML, CSS, and JavaScript. For example, the video can be added to the hero section using the <video> tag, and the coupon code can be generated and applied using JavaScript.

// Example of how to add a video to the hero section
const heroVideo = document.getElementById('hero-video');
heroVideo.src = 'path/to/video.mp4';
heroVideo.loop = true;
heroVideo.autoplay = true;

It's also worth noting that some users may have strong opinions about the design, particularly if it deviates from their expectations. For example, some users may be frustrated by the lack of an endless scroll feature, as evidenced by the quote "No endless scroll? What the hell am I supposed do I do with my mouse wheel?? Useless!" On the other hand, some users may appreciate the unique design, as seen in the quote "Damn, yeah this is exactly how I make my websites look." Ultimately, the key to success will be finding a balance between aesthetics and functionality, while also meeting the technical requirements and considering the user experience.

To configure the video player, you can use the following HTML code:

<video id="hero-video" width="100%" height="100%" loop autoplay>
  <source src="path/to/video.mp4" type="video/mp4">
</video>

This code sets up a basic video player that will loop and autoplay the video. You can then use JavaScript to customize the player further, such as adding event listeners or modifying the video source.

Practical Applications and Variations

That 20MB background video isn't just a nostalgic flourish—it's a deliberate design choice that forces the page to behave like a single, static asset rather than a dynamic document. The hero isn't just a container; it's a fixed viewport that refuses to adapt, making the rest of the page feel like an afterthought. The 2017-2019 copyright date isn't a typo; it's a timestamp for when this aesthetic peaked, right before the web collectively decided infinite scroll was the only humane way to browse. And the COVID-19 mention? That's not just a timestamp—it's a cultural anchor, tying the design to a moment when the internet was the only place people could safely waste time.

This approach isn’t subtle, but it works in specific contexts. Take e-commerce sites that use it for flash sales or limited-time promotions. The fixed hero with a looping video creates urgency—there’s no scrolling away from the sale announcement, no accidental click on a footer link that takes you to a different product. Instead, you’re trapped in the sales pitch until you either convert or close the tab. Unique coupon codes printed over the video loop (e.g., VIDEOBG2024 or BACKGROUND40) make the experience feel exclusive, like you’re getting a deal that’s hidden in plain sight.

Here’s how it might look in practice:

<div class="hero">
  <video autoplay muted loop playsinline>
    <source src="hero-loop.mp4" type="video/mp4">
  </video>
  <div class="overlay">
    <h1>Black Friday: 20% Off — Today Only</h1>
    <p>Use code <strong>VIDEOBG24</strong> at checkout</p>
    <button>Shop Now</button>
  </div>
</div>

The CSS keeps things locked down:

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

This isn’t for every site. It’s obnoxious on a content-heavy blog or a complex dashboard. But for landing pages where the goal is immediate conversion, it works because it eliminates friction—or at least, the illusion of friction. The user’s mouse wheel does nothing, which feels like a middle finger to usability norms, but that’s the point. The page isn’t meant to be explored; it’s meant to be endured until the user either takes the bait or gives up.

The real trick is making it feel intentional rather than lazy. A 20MB background video is a statement, not a mistake. It says, We don’t care if your connection chokes on this—we’re making a point. The copyright date does the same: This isn’t cutting-edge; it’s a deliberate throwback. And the coupon code? It’s the cherry on top of a deliberately aggressive UX.

This isn’t a trend that’s coming back. It’s one that never really left—it just got quieter, waiting for the next generation of designers to rediscover it while everyone else is busy optimizing for Lighthouse scores.

Conclusion

The trend of websites from 2017 to 2019 is still puzzling, with its affinity for auto-playing background videos and abundance of coupon codes. I'm not convinced that these features were ever truly beneficial, other than perhaps as a way to make a site feel more "interactive" or to create a sense of urgency around a sale. The fact that so many sites from this era included a 10% off coupon code, often with a "unique" code that was actually just a generic string of characters, feels like a shallow attempt to build trust with visitors.

Looking back, it's striking how many of these sites also featured a prominent chat window, often with a robotic avatar and a claim that you were about to "chat with a robot." This was usually just a euphemism for a basic FAQ or a glorified contact form, but it was presented as some kind of innovative feature. I'm still not sure what to make of this trend, or why so many websites felt the need to include these specific elements. Perhaps it was just a case of designers and developers following the crowd, without fully considering the user experience. Whatever the reason, it's interesting to look back on this era of web design and see how these trends have largely fallen out of favor.

One thing that does stick out is the sheer weight of these sites, with many of them requiring a whopping 20MB or more of data to load, thanks to those obligatory background videos. It's a wonder that anyone was able to access these sites on a mobile device, given the limited bandwidth and data caps of the time. As we move forward, it's worth remembering the mistakes of the past and striving to create websites that are more streamlined, more efficient, and more considerate of the people who use them.