Five years ago, building a mobile page basically meant designing for a single device: the iPhone. Now just the iPhone has three different resolutions. Then there’s the myriad of Android devices of varying sizes that have grabbed a significant share of the market.
Just last month Layer0 delivered experiences optimized for mobile to 60 million users. That’s about one third of mobile Americans. There’s a pretty good chance you’ve been on a site powered by Layer0 in the last month. You just didn’t know it. Layer0 delivers mobile experience to many of the largest names on the web, from Macy’s to Cox Communications.
That gives us the opportunity to get a pretty good look at the state of the mobile web - from what devices people are using to how they’re are interacting with page. And over the next few weeks we’ll be kicking off a new series of “State of the Mobile Web” blog posts to share our insights.
In our first post we’ve taken a look at the breakdown of screen resolutions we’re seeing by web traffic.
Even with variety of resolutions, there are is one thing that is clear: the mobile web is a 9:16 world. That means two things:
First, we are all using our browsers in portrait. Of the resolutions that registered above 1%, only one was landscape. Which makes sense, the only time I ever go to landscape on my phone is when I’m trying to make sense of some awful desktop experience.
And the second is a continuation of the ever-present “above the fold” debate. Some have posited that in today’s web, above the fold doesn’t exist anymore. And I understand where they’re coming from, and it’s certainly true that mobile is extremely scroll-friendly. But let’s not kid ourselves, the fold is alive and well. And with the slow dwindling number of 2:3 phones, where that fold falls on mobile is becoming more and more consistent.
One last caveat to these numbers is retina screens, which add a bit of nuance. Technically they have a much higher resolution. The iPhone 6 is 1334×750 and the 6 Plus is 1920×1080. However, these devices scale down the simulated resolution in the browser to create a higher DPI without physically smaller elements, leading to the super crisp look.
by Justin Megahan