The Hurricane Web

As Hurricane Florence makes its way across the US southeast coast, many people are stuck in areas with severe flooding. These people rely on outside information, yet have limited bandwidth and power.

To help them, news platforms like CNN and NPR provide text-only versions of their sites:

That’s a great thing. Here’s how it looks:

Screenshot of the NPR text-only site

Less is More

Text-only sites like these are usually treated as a MVP of sorts. A slimmed-down version of the real site, specifically for emergencies.

I’d argue though that in some aspects, they are actually better than the original. Think about it- that simple NPR site gets a lot of points right:

  • It’s pure content, without any distractions
  • It’s almost completely fail-safe
  • It’s responsive by default and will work on any device
  • It’s accessible
  • It’s search engine friendly
  • It’s machine readable and translatable
  • It has close to perfect performance scores:
Google Lighthouse Report for text.npr.org
The site needs exactly one request (the HTML), weighs in under 5KB and loads in about one second on a low-bandwidth 2g connection.

Most importantly, it’s user friendly. People get what they came for (the news) and are able to accomplish their tasks.

The only thing missing here might be a few sensible lines of CSS to set better typography rules. Those could still be inlined in the head though, easily coming in under the 14KB limit for the first connection roundtrip.

This is the web as it was originally designed. Pure information, with zero overhead. Beautiful in a way.

The “full” NPR site in comparison takes ~114 requests and weighs close to 3MB on average. Time to first paint is around 20 seconds on slow connections. It includes ads, analytics, tracking scripts and social media widgets.

Meanwhile, the actual news content is roughly the same. The articles are identical - apart from some complementary images, they convey exactly the same information.

If the core user experience can be realized with so little, then what is all that other stuff or?

The Cost of Comfort

Of course the main NPR site offers a lot more than just news, it has all sorts of other features. It has live radio, podcasts, video and more. Articles are preloaded via AJAX. It’s a much richer experience - but all that comes at a price.

I recently read this great article by Alex Russel, in which he compares Javascript to CO2 - in the sense that too much of it can be harmful to the ecosystem.

Javascript enables us to do amazing things and it can really enhance the user experience, if done right. But it always has a cost. It’s the most expensive way to accomplish a task, and it’s also the most fragile. It’s easy to forget that fact when we develop things on a highspeed broadband connection, on our state-of-the-art devices.

That’s why websites built for a storm do not rely on Javascript. The benefit simply does not outweigh the cost. They rely on resilient HTML, because that’s all that is really necessary here.

That NPR site is a very useful thing that serves a purpose, and it does so in the simplest, most efficient way possible. Personally, I’d love to see more distilled experiences like this on the web.

… “Well, this might work for a news site - but not every usecase is that simple.”, I hear you say.

True. The web is a text-based medium, and it works best with that type of content. But the basic approach is still valid in any other scenario:

Figure out what the main thing is people want from your site and deliver it - using the simplest, least powerful technology available.
(W3C, “The Rule of Least Power”)

Make it withstand hurricanes.

👉 BTW: This post is not meant to criticize the main NPR website in any way, which is actually very well made. It’s more of a general thought on how we deliver and prioritize content on the web.

Webmentions

  1. I'll argue that the Dubai shopping complex I last wrote a website for would not be a site people would visit if they needed help. JS is costly. This only matters in some circumstances. There is no universal principle here.
  2. Bernd Haug
    Endorse.
  3. "This is the web as it was originally designed. Pure information, with zero overhead."
  4. nikc.org
    The Hurricane Web mxb.at/blog/hurricane…
  5. Timi Wahalahti
    The Hurricane Web mxb.at/blog/hurricane…
  6. David Bisset
    Great lesson to learn from here: news platforms like CNN and NPR providing text-only versions of their sites for those surviving #Florence. In some cases, less is more. Page load matters. mxb.at/blog/hurricane…
  7. Веб во время урагана: 1,2 КБ против 5 МБ. Макс Бок смотрит, какие выводы можно сделать из текстовых версий, которые запустили NPR и CNN, чтобы помочь пострадавшим от урагана на юго-восточном побережье США экономить заряд телефонов — mxb.at/blog/hurricane…
  8. For Web
    Задачи пользователей нужно решать максимально просто, и JavaScript для этого нужен не всегда, напоминает Макс Бок и приводит в пример максимально лёгкие версии CNN и NPR, сделанных специально для пострадавших от урагана Florence в США → mxb.at/blog/hurricane…
  9. phéna proxima
    Also via @starshaped. Preach the truth!!! mxb.at/blog/hurricane…
  10. Zana Fauzi ✊🏽
    Adapting the Web when a disaster happens - when users are limited in bandwidth & available energy, using examples of Web from news platforms @CNN and @NPR. mxb.at/blog/hurricane…
  11. Jeremy Schuurmans
    "This is the web as it was originally designed. Pure information, with zero overhead. Beautiful in a way." @mxbck mxb.at/blog/hurricane…
  12. Phil Lang
    The Hurricane Web mxb.at/blog/hurricane…
  13. Johan Bové 🐒
    The Hurricane Web | Max Böck - Frontend Web Developer - This is the web as it was originally designed. Pure information, with zero overhead. Beautiful in a way. mxb.at/blog/hurricane…
  14. Adactio Links
    The Hurricane Web | Max Böck - Frontend Web Developer mxb.at/blog/hurricane…
  15. Jon
    The Hurricane Web (via @Pocket) mxb.at/blog/hurricane…
  16. Marco Kühbauch
    People who are stuck in areas with severe flooding rely on outside information, yet have limited bandwidth and power. News platforms like CNN and NDR provide text-only versions of their sites to help them: mxb.at/blog/hurricane…
  17. The Hurricane Web | Max Böck - Frontend Web Developer mxb.at/blog/hurricane…
  18. Andy
    The Hurricane Web | Max Böck - Frontend Web Developer mxb.at/blog/hurricane…
  19. Back to the Basics...! The Hurricane Web mxb.at/blog/hurricane…
  20. Mario Sommer
    websites that literally survive hurricanes - a great example of relentlessly focus on your users' needs. mxb.at/blog/hurricane… by @mxbck ✌🏻

Other things I've written