home •••&••• menu

The Future of Mobile Web

Before the iPhone, the mobile web did kind of exist. It wasn’t anything like what it is now, though. Some websites would detect that you were using a mobile browser on something like a BlackBerry or Windows Mobile Phone and they would unceremoniously force you to their poorly designed mobile homepage, usually disregarding entirely whatever page it was you wanted to visit in the first place. Other websites would ignore that you were using a mobile device and remain frustratingly hard to navigate with your stylus.

This was because the vast majority of mobile web browsers were nothing like their big brothers on desktop platforms. They didn’t render things consistently and they made it very difficult to navigate full webpages. Some developers painstakingly crafted mobile sites that respected the funny way that pages were shown on earlier smartphones, but these were few and far between. The iPhone changed all of that and did so—in part by cheating.

The iPhone introduced pinch-to-zoom on webpages, turning the page into a giant picture that you could manipulate just like you would a photo in the Photos app. And that’s essentially because it was a photo. As soon as you started scrolling or zooming, the iPhone took what amounts to a screenshot of the webpage. Then it let you zoom in on that ‘image.’ Once you stopped zooming or scrolling, it would turn the image into a real webpage and render the content at the proper size. This was brilliant and resulted in web browsing speeds no one could have imagined before (except, perhaps Opera Mini users). It was, however cheating—you don’t really scroll or zoom the webpage. You’re just manipulating a picture.

You see, what this meant was that as soon as the user starts scrolling, everything on the page had to stop. Animations, javascripts, GIF’s of kittens—all of it had to stop. Then once you were done scrolling, it would start up again. So while you pinch and zoom to get that animated kitten GIF centered on your iPhone just right (because he’s just so cute), he would stop playing with the cardboard box until you were done framing the shot.

No big deal, right? I mean, it was 2007 and people were just excited to have the kitten playing on their phone to begin with. Never mind the fact that Apple cheated, they were still the best game in town. The original iPhone’s CPU is hilariously slow compared to today’s iPhone 5S. Cheating was the only way.

Things have remained this way for quite some time. Most people, including designers were initially thrilled: finally a mobile web browser that displays pages just like a desktop! Web app developers, though, have always found the cheat to be a bit limiting. Web apps are often using AJAX to pull content from the server, but if the user scrolled, all that froze until he was done.

The iPad was launched in 2010 and it still had the same weakness. This made the problem more noticeable, since many users were hoping to use their favorite desktop web-apps on their iPad. Things worked great unless you tried to scroll or zoom.

Over the last two years, user experience design as leaned more and more toward using animation as a means of communicating affordances, teaching the user how the software works, and informing the user of progress. Through CSS3 animations and Javascript, designers and developers have found ways to bring these concepts to the web. This trend, though, hasn’t been able take hold on mobile web pages and apps because the user could scroll at any point and freeze an animation dead in its tracks.

After Darkness, Light

But times have changed. The iPhone 5S is actually about as fast as most desktop-class CPU’s were in 2007 when the iPhone was first launched—heck, it’s 64 bit. This has left designers like me wondering why Apple hasn’t removed this barrier. Can’t these newer, faster devices handle scrolling and zooming on a live webpage yet?

The answer from iOS 8 is that they can. The new OS from Apple will be introducing this to supported devices this fall. That means that designers will be able to manipulate content on the screen of a webpage at any time, even while the user is scrolling or zooming. The most practical application of this will probably be truly infinite scroll on websites like Twitter. Right now, Twitter doesn’t load more posts until you hit the bottom of it. But with the browser not freezing things while you scroll, that could change and allow you to scroll seamlessly on faster connections.

This will also allow for things like parallax scrolling, automatic scrolling, consistently animated menus, and much more. With this change, I think it’s safe to say that the mobile web can finally do everything that a desktop browser can do. As someone who has tried to create animations for the mobile web, I’m very excited. Things will be a lot easier with iOS 8 and I’m excited to see what people make over the next few years.

Leave a Reply

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

Read More

This article was posted on 07/15/2014 . It relates to these topics:
,

&

Do Something