SXSW 2013: Mobile-only, performance-focused web development for a future-friendly BBG

this-is-the-web-credit Brad Frost

Last week at SXSW Interactive, I was a mobile-aholic, focusing almost exclusively on sessions around mobile and responsive web design. One of the most influential sessions that still has my heart fluttering and brain racing was from by Brad Frost, entitled “Beyond Squishy: The Principles of Adaptive Design,” that reinforced a lot of what I’ve been preaching about our mobile strategy here.

Frost started off discussing the terminology of “responsive web design” and how it has become all-encompassing and almost generic, like “corn flakes” or “Kleenex,” to refer to a bunch of ideas — responsive design, adaptive design, progressive enhancement focused on multi-platform design and development so that the web works everywhere. He likened this ideology by citing Sir Tim Berners-Lee, the inventor of the Internet’s tweet during the opening of the 2012 Olympics, “This is for everyone.”

The bulk of his talk was about what technically is referred to as “adaptive,” which he outlined the core principles as:

  • Ubiquity – The Web is everywhere from phones to TVs to cars and beyond. We must embrace this.
  • Flexibility – Transform seamlessly between screen sizes, orientations and resolutions
  • Performance – Performance *is* design. Users expect content to be as fast, if not faster on mobile devices. You have less than 5 seconds of someone’s attention before they bounce. Some “responsive” approaches force users to download everything then modify it on the device, it needs to be the opposite way, which leads to the next principle…
  • Enhancement – Start with a mobile-first, low technology experience and add enhancements and features through server side detection as the device and context is capable (from data points such as hardware capabilities, software, bandwidth, etc.)
  • Future friendly – Build APIs and content that is fluid for future technological developments and experiments. “We don’t know what will be under Christmas trees in two years, but that’s what we need to design for today.”

While to outsiders (and even some insiders) we may look similar to CNN, AP or any of the other global media organizations, our audience is very different — we focus almost exclusively on conflict areas and audiences with restricted or low and unstable bandwidth — and need to keep that in perspective at all times.

We need to be mobile-first in our approaches, because in most of our countries they’re mobile-only. They don’t own cable Internet connections and desktop computers. They’re leapfrogging the digital divide and their first and only experiences with the Internet is on a mobile device.

Since they’re mobile-only in most of our countries, we need to also be a performance-first organization.

Speaking of performance, there’s an excellent piece on the PBS IdeaLab website from Phillip Smith comparing the web performance of major media sites. I’ve distributed a similar comparison internally, bench-marking our sites to other major international media as we begin this transition. We’re currently doing better than some, but as we continue move to the responsive approach we need to continue to make performance our first priority above all others. This might mean we can’t run the latest social media gizmo widget on our site, but it will mean for a better user experience for all our audiences on 2G connections.

Frost closed his presentation discussing how amazing it is to be in this technological space right now; he pointed to the exponential future potential of the Internet that is coming soon:

  • 2.4 billion people currently have access to the Internet.
  • 4.5 billion don’t.

Our audience is more the latter than the former. The Web *IS* for everybody. Let’s bring it to them.

1 Comment

  1. site says:

    Howdy! I’m at work browsing your blog from my new iphone 3gs!
    Just wanted to say I love reading through your blog and look forward to all your posts!
    Carry on the excellent work!

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *