Brad Frost

The Mobile Case for Progressive Enhancement

I recently read a fantastic reminder to progressivly enhancement for Javascript. Jack Bishop and I gave a presentation at BK.js a few weeks ago about progressive enhancement for the mobile web (thanks Marco Carag!) During the Q&A;, someone asked "With all this diversity and inconsistent/shaky support for this Javascript for mobile browsers, why don't we just rely more on HTML?" EXACTLY. Yet it was asked as a question. There's a mentality that in order to do create functional experiences in the browser, especially for mobile, you need to use some hardcore JS framework, rewrite the scrolling logic, add a bunch of interstitial animations, create overlays and add swipes. I have nothing against frameworks or these techniques, but for whatever reason people think they're a prerequisite for creating mobile web experiences. They're not. One of my favorite mobile sites is Target (great job Matt Menzer). The beauty of this experience isn't in the mind-blowing animations, it's about the clarity of the content, the speed in which the page loads and the accessibility of the experience. Contrast Target's mobile experience with Paper.li's mobile experience. In case you're not familiar with Paper.li it aggregates links from social sites and creates a digest. The focus should be on the content, but instead the focus rests on a very complex system of loaders, scrollers, fixed position elements and native-feeling UI elements. Note: it may not seem bad on a desktop or iPhone 4s, but try firing it up on an Android, Windows Phone, or Blackberry. Another note: this was made with Sencha Touch, which again I have nothing against (quite the opposite), I just feel it's better suited for hybrid apps that aren't deployed over the web. The difference between Target's and Paper.li's sites is that one is working with the constraints of the medium and using those constraints to it's advantage, while the other is introducing unnecessary dependencies on what's essentially a list of links and limiting the site's accessibility as a result. [caption id="attachment_2234" align="alignnone" width="650" caption="Target and Paper.li's mobile websites."]Target and Paper.li's mobile websites[/caption] Are there cases for creating experience that rely heavily on Javascript? You betcha. Here's a great one right here. The purpose of this project was to show off Window's Phone's attractive Metro UI in hopes to woo other smartphone owners over to Microsoft's side. Very clever concept indeed. Could such an immersive experience be progressively enhanced and achieve this level of fidelity? No. The reason this works so well is that the audience they were trying to reach with this experience are other smartphone owners (ones with notably better browsers than WP7 I might add). The fact is that as we head into this new era of diversity, all bets are off. We're going to have to create experiences for extraordinarily capable devices as well as low-powered, inexpensive, good-enough devices. Screw them you say? Take a look at how the Kindle Fire is selling. Look at the Nook Color. Look at what phones Metro PC and Cricket are pushing in full-swing this holiday season: [caption id="attachment_2236" align="alignnone" width="650" caption="Metro PC Touting Cheap Web-Enabled Smartphones"]Metro PC Cheap Web-Enabled Smartphones[/caption] These ads are all over the NYC subway system and as far as I've seen more prominent than ads touting high-end smartphones. These devices might be Androids and Blackberries, but they sure as hell aren't the Nexus S or iPhone 4s. The Zombie Apocalypse of low-powered, inexpensive, good-enough devices is here, my friends, and it's up to us to readjust our assumptions. (Note: this was originally posted on Google+, but in an effort to regain control over my content I'm trying to bring it all in house.)