Why we build responsive, progressively-enhanced websites

The internet doesn’t just exist in Indiana, the United States or North America. It’s used by people all over the world and it turns out they use it very differently from the way we do.

I think this article from quartz sums up that difference nicely:

Africa and Asia, the two fastest growing mobile markets, aren’t very big on apps.

The overwhelming majority of mobile internet activity in the regions is spent on web pages, according to a report released yesterday (July 28) by Opera Mediaworks. In Asia and Africa, websites made up 90% and 96% of mobile impressions, respectively, in the second quarter.

Their habits are a sharp contrast to the US, where apps accounted for 91% of impressions.

Mobile First

Whenever we start a new website, we start by designing that website with a simple, mobile version as the default view. A very large percentage of people around the world are still using low-end feature phones – not iOS (iPhone/iPad) or Android – and/or access the web from a slow network connection (less than 400Kb/s). They simply can’t get to a lot of the websites out there.

Here’s an example: It took me about 1.2 seconds to load the New York Times home page this morning. If I was on a phone with an EDGE connection, that would have taken more than three minutes before I could start reading anything.

If you’ve ever driven away from a city and into the heartland, you’ll very quickly understand this pain.

Enter Progressive Enhancement

We can always detect iOS, Android and more advanced devices, then enable more advanced features for those users. We can also control how we load the web page:

  • Control the loading of images (Picturefill)
  • Delay loading fonts
  • Minimize the use of JavaScript and delay loading it
  • Prevent the browser from re-drawing (rendering) the screen

By controlling how content is loaded, we can get the user reading the web page much, much faster. Imagine this:

How much does your experience change if you could start reading the New York Times home page in 15 seconds instead of three minutes?

How fast your website performs is just as important as how it looks and how it works. Let’s not forget that.

Photo copyright Dragan – CC BY 2.0.