Archive for the ‘Mobile’ Category

File Under: Mobile, Web Basics
Oct
25
2012

Bandwidth and the Mobile Web Browser

By

Your website’s view of the tubes. Photo: Stig Nygaard /Flickr

High-resolution screens on mobile devices present web developers with an interesting conundrum — the screens are capable of displaying very high-res images, but on a mobile device bandwidth may be limited. What’s a web developer to do?

The answer, for now, is that there is no good answer; be it bandwidth or image quality you’re going to have to compromise somewhere.

That’s why mobile expert Peter-Paul Koch thinks browsers need to start broadcasting the connection speed of the device. “Browsers, especially mobile ones, should give information about the speed of the connection they’re on,” writes Koch in a recent blog post exploring just what that might look like and how web developers might use that information.

Here’s what Koch thinks developers need:

  1. We need an HTTP header, so that a server-side script can use the information to decide whether to send the lowsource or high-res images. Let’s call it X-Connection-Speed for now.
  2. A JavaScript property, say navigator.connectionSpeed, also makes sense.
  3. Chris Coyier proposed a bandwidth media query with matching min-bandwidth and max-bandwidth. Sure, why not?

Check out Koch’s post for full details on other aspects like units, how connections speed might be calculated and what to do with edge cases — like when the connection speed changes between read and page load (Koch’s scenario imagines a user on a phone in a train with a good connection that deteriorates when the train enters a tunnel).

Koch’s post isn’t a proposal; rather its an exploration of the idea and he’s looking for feedback. There are already some great comments from other developers, including several that question whether web developers should be allowed to decide how much bandwidth a site uses.

While developers might like to be able to control bandwidth and deliver the images they’d like to be seen, that just might be a decision best left to users. For example, I may have a great 4G connection, but my data plan might be a mere gigabyte a month and I may not want to waste it on your high-res images. As David Ellenwood points out in the comments, a YouTube-style approach, choosing a sensible default and then offering up links to higher-res content (e.g., the 480, 720, 1080 options on most YouTube videos) might be the more user-friendly approach.

For now not only do browsers not broadcast connection speed, most don’t even have access to that information at the device level. But there are already proposals to add some sort of bandwidth info to HTTP (like the HTTP Client Hints proposal from Google’s Ilya Grigorik or Mozilla’s proposed Network Information API) and it seems likely that something along these lines will be added before too long. Be sure to read through Koch’s post for some more background and details. If you’ve got ideas, leave a comment on his site.

Tags:
File Under: Browsers, Mobile
Oct
19
2012

Firefox Aurora Brings Mozilla’s Web-App Marketplace to Android

By

The Firefox Marketplace in Android. Image: Screenshot/Webmonkey.

Mozilla is taking the wraps off the Firefox Marketplace, the company’s new web-app store for Firefox on Android.

Marketplace apps are only available in the newly-updated Firefox for Android 18, which is currently in the Aurora channel. To get Aurora installed on your Android phone you’ll need to be using Android 2.2 or better and make sure that the setting to allow apps from “Unknown sources” is checked. Once that’s done, head to the Aurora mobile download page and grab the latest release.

Once Aurora is installed the new Firefox Marketplace is available under the Options Menu. Choose the “Tools” item and select “Apps”. From there you’ll see a link to the Marketplace.

Given the convoluted installation and pre-beta status of Firefox 18, this release is obviously not meant for everyone. It does, however, offer developers a look at what Mozilla has been creating.

Right now the Firefox Marketplace is still rough around the edges. So far there isn’t even a way to accept payments, one of the much-touted aspects of the Marketplace. Mozilla says that payments and other common app store features like ratings and reviews are coming soon. There are plenty of free apps available already though, including Twitter, Lanyard, Todoist and quite a few games.

Installing an app from the Firefox Marketplace is as simple as clicking a button, which installs the app and adds a shortcut to the Android applications list. Mozilla has done a great job of making web-app installation indistinguishable from native apps on Android.

Firefox apps in the Android app switcher. Image: Screenshot/Webmonkey

The difference between native and web apps becomes more obvious when you start comparing speed side by side. For example Twitter from the Mozilla Marketplace is noticeably jerkier when scrolling compared to the native Twitter Android client.

It’s worth asking though, even if Firefox Marketplace apps matched native apps in performance, does you need web apps on Android?

The answer for most people is probably going to be no. However, building out the Firefox Marketplace on Android now ensures that the bugs are worked out and that there’s a smoothly functioning app store ready to go when Firefox OS officially launches.

And there are definitely some bugs and quirks in this early release, like the fact that in Android’s app switcher all Firefox Marketplace apps are labeled simply “App” rather than the name of the application, which can make finding what you’re after tricky when you have a lot of apps open at once.

The main purpose of this release is to work out exactly these types of kinks. As Mozilla Labs Engineering Manager Bill Walker writes on the Labs blog, “our goal is to collect as much real-life feedback as possible about the Marketplace’s design, usability, performance, reliability, and content.”

Developers interested in building apps for the Firefox Marketplace should head over to the Mozilla Developer Network and the Marketplace Developer Hub, which contain extensive documentation, FAQs and emulation tools for building Marketplace apps.

Tags: ,
File Under: Browsers, Mobile
Oct
9
2012

Opera Mobile for Android Gets ‘SPDY’

By

Opera Mobile 12.1. Image: Scott Gilbertson.

Opera Software has released a new version of Opera Mobile for Android phones. This update doesn’t offer many visible new features, but under the hood there are quite a few improvements that make Opera Mobile 12.1 well worth the upgrade.

You can grab the new Opera Mobile 12.1 for Android from the Google Play Store. Unlike some Android browsers, which only support the latest Android release, Opera Mobile has you covered all the way from Android 1.6 Donut to the latest and greatest, Android 4.1 Jelly Bean.

Like Opera 12.10 for the desktop the new Mobile 12.1 adds support for the SPDY protocol, WebSockets and a host of new HTML APIs. Opera Mobile’s support for the SPDY network standard, which promises to be even faster than the HTTP protocol, is especially welcome since it means speedier page loads on SPDY-enabled sites like Twitter and Gmail.

Opera Mobile 12.1 also introduces support for more “unprefixed” CSS rules, including transitions, transforms, gradients, animations and flexbox, all of which will now work without the -o- prefix. For now any code you have with an -o- prefix will still work as well, but make sure you’re including the unprefixed rule too since eventually Opera (and every other browser vendor) will drop support for the prefixed versions.

This is the first mobile release to introduce support for some -webkit- prefixes on poorly coded sites that don’t use unprefixed versions of stable CSS properties. Opera’s decision to support another browser’s CSS prefix has caused considerable outcry among web developers and members of the CSS Working Group, which created vendor prefixes. While the controversial -webkit- prefix support has been around in preview versions of both desktop and mobile builds, this the first official mobile release to support it.

For complete details on how Opera’s -webkit- prefix support works, as well as the details on everything that’s new in Opera Mobile 12.1 — like support for Drag and Drop, the Clipboard API and the Page Visibility API — be sure to read Opera’s blog post.

Tags: ,
File Under: Mobile
Oct
4
2012

Google Throws iOS a Bone With Street View for Mobile

By

The Wired Offices in Google Street View on iOS 6. Image: Screenshot/Webmonkey.

Disgruntled iPhone users pining for the good old days of Google Maps have one small thing to celebrate today — Google Street View is back.

No, Google hasn’t released a Google Maps app for iOS 6 users, but the company has added Street View for mobile browsers. Today’s update for Google’s web-based mobile maps includes a Flash-free version of Street View that works in mobile web browsers, including Mobile Safari, which gives iOS users an easy way to access Street View.

The performance of Street View in Mobile Safari is not quite up to par with the native Google Maps app that Apple sacked, but, provided you have a decent network connection (3G worked just find in our testing), it works well.

To use the new Street View, point your mobile browser to maps.google.com and search for a location. Then click the familiar “pegman” icon at the bottom right of the screen to bring up Street View.

It remains to be seen if this is just a nice new feature for the mobile version of Google Maps, or the first step in a long-term strategy for Google Maps on non-Android devices. Will Google build out its web-based offerings, which work in any browser, and skip the native app on platforms it doesn’t control?

Google Maps in mobile browsers still lacks voice over turn-by-turn directions, but the difference between web and native Google Maps apps is fast disappearing. Mobile bandwidth keeps increasing and mobile devices keep getting more powerful. Couple that with emerging HTML APIs like WebRTC, which gives browsers better access to your mobile device, and a platform-native Google Maps app feels less and less necessary.

Tags:
File Under: Mobile
Sep
28
2012

Create an ‘Open Device Lab’ With Help From LabUp

By

Planning to pay for all those devices? (testing responsive sites with Adobe Shadow). Photo: Adobe

One of the biggest roadblocks to building a website that works well on any device is that you need to test it on, well, every device. Collecting every new device that gains a foothold in the worldwide market is beyond the budget of most web developers, which means we use imperfect methods like emulators or test on a limited set of devices.

But there’s a better way — just head to your local Open Device Lab (ODL).

Open Device Labs are places anyone can come and test their websites on dozens of devices. The idea started in Europe, but there are now several Open Device Labs in the U.S. as well. You can check this list of Open Device Labs around the world to see if there’s anything nearby.

Nothing near you? That’s where the newly launched LabUp! wants to help. LabUp is helping to get even more ODLs up and running. The site aims to be a centralized place for listing open device labs and a resource for anyone looking to start up their own Open Device Lab.

Here’s how LabUp! describes itself:

LabUp! is here to help people around the world in establishing nonprofit Open Device Labs which helps others access a large number of mobile devices for testing, leading to an ultimate improvement of the mobile web and app experience both for developers and consumers.

For more info on how you can help, or how to set up your own local Open Device Lab, head on over to LabUp! and be sure to follow @LabUpOrg on Twitter.

Tags:
« OLDER POSTS