A friend of mine recently made what turned out to be a more-than-expected controversial statement about mobile development: that native apps were superior to responsive web design.
I say more-than-expected when referring to the controversy because, honestly, neither of us expected the response gathered by this statement. We had assumed that it was a common sense idea and took it on faith that our colleagues agreed.
Alas, there was booing. There was hissing. There were heated follow-up arguments. The designers in the room were not happy with his statement.
Mobile Web
I’ve worked on a fair share of responsive websites, and I can tell you from first-hand experience making a consistent, smooth mobile experience while also serving desktop visitors is difficult.[ref]It’s not impossible, but once client change requests start coming through any efforts you’ve made at tight markup, super-optimized images, and streamlined downloads fly out the window.[/ref] Different views will sometimes require different sets of markup, so you either resort to clever lazy-loading techniques, or end up delivering more content than is necessary to display the page.
Once you’re delivering additional (unnecessary) markup, you’ve lost any advantage you once had over a native app.
Monetization also plays a factor. In a native app, you can have a paywall before the app is even accessed (or a subscription basis for ongoing content availability). Individual content loads can be hidden behind hard-coded interstitials (that fit the viewport) to grab CPM or click-based ad revenue.
On the mobile web, your ads will likely be served from the same (or similar) set as your desktop ads. They’ll be styled and sized inappropriately for mobile display and, more often than not, feature bandwidth-intensive assets over which you yield zero control. Mobile websites are rarely on par with native experience due to the slowness of these downloads, awkwardly sized pop-up (interstitial) ads that disregard the mobile medium, or merely a designer’s failure to recognize the goal of their visitors.
Case In Point
I’m not a huge basketball fan, but recently my home team was in the running for the NBA playoffs.[ref]The Blazers were knocked out of the running in game 5 … but they’ve still done a remarkable job this season and I look forward to next year![/ref] Google Now has done a great job of reminding me when my teams are playing – but unlike football, I don’t have an app on my phone to follow the games.
Instead, I turned to Google for a quick reference. The top two results were NBA.com and ESPN.com. I figured, since it was a basketball game after all that the NBA site would be best.
Keep in mind, the screenshot to the right was taken on my Droid DNA. It’s a much larger phone than an iPhone, but most of the data on this page is illegible even to visitors on a desktop computer.
Finding the current score was easy – finding any other information on this page was nearly impossible. I gave up after a few seconds and swiped back to the Google results page, clicking ESPN instead.
The Gamecast page is what I know and love from football season. Everything about the game I want to see; the site even shows simulated plays as each team takes a shot at the basket. Every piece of data is legible, and I can navigate through key information without needing to zoom.
The other market difference between these two screenshots is the way they position information. The NBA site has the massive navigation bar from the homepage, an unreadable score ticker for other games, two large advertisements, and (if the size of elements is any indication) gives a video archive preferential treatment over the game score.
The ESPN site has app-style navigation, focuses on the single game I care about, and doesn’t include any advertising.[ref]The shot visualization uses an interstitial ad, so monetization still plays a factor here.[/ref] It feels much more like an app than a responsive website – but that’s because it’s built like an app as well.[ref]The Gamecast app can be embedded in other pages or displayed as a pop-out elsewhere on the ESPN site. It’s not an app, but it’s not a “responsive website” either.[/ref]
When I’m on my phone, I care about sites loading quickly and prioritizing the information I need right now. Native apps do this far better than responsive websites – designers need to stop focusing on how to squish information from a desktop environment into a mobile phone and focus more on optimizing the experience for the device in question.
