Archive for the ‘Mobile’ Category

File Under: Browsers, Mobile
Jun
26
2012

Mozilla Delivers Faster Firefox for Android

By

Firefox for Android, burnin’ up the tubes. Image: Scott Gilbertson/Webmonkey

Mozilla has released a major upgrade to Firefox for Android, the company’s open source web browser for Android phones.

To test out the new Firefox for Android, just install it from the Google Play marketplace.

This release is not only significantly faster than previous versions, it features a ground-up redesign using Android’s native user interface widgets and controls.

The result is a web browser that’s a bit more Androidy and a bit less Firefoxy. But that’s just fine with us because the significant speed boost more than makes up for the fact that it looks a bit different than desktop Firefox.

In fact, not only was Firefox 14 faster than previous releases, it was faster than most of the rest of the browsers installed on our Galaxy Nexus running Android 4 Ice Cream Sandwich (though it’s worth noting that, unlike Chrome for Android, Firefox for Android will run on pre-ICS phones).

That might be somewhat surprising if you experimented with the first few releases of Firefox for Android, which were disappointingly slow. Those first few versions all used the standard XUL-based interface that powers Firefox on other platforms. But, while the XUL interface meant Firefox on Android looked like Firefox, it seriously lagged at basic tasks like scrolling, zooming and panning.

Toward the end of last year Mozilla decided to ditch the XUL-based interface and go native on Android. The company also stepped up its efforts to optimize performance (which has been a focus for some time in the desktop version of Firefox as well). The work has paid off in this release (and the recent betas), which starts up nearly instantly and remains snappy even with a number of tabs open. Particularly noticeable is the smooth scrolling when swiping down very long pages.

Speed isn’t the only appeal of course, much of what’s great about Firefox on the desktop is also present in the latest mobile version. In some cases there are minor differences, for example the Awesome Bar becomes the Awesome Screen on a phone, but functionality remains the same. As with previous releases, Firefox Sync will automatically bring all your browsing history, bookmarks, passwords and form data to your Android phone.

And yes, Firefox for Android supports Adobe’s Flash plugin.

One thing that’s quite a bit different in this release are the browser add-ons available for Firefox for Android. Ditching the XUL interface might have made Firefox faster, but it also means that any desktop add-ons that use XUL won’t work in the mobile version. At the moment that means there aren’t many add-ons for Mobile Firefox, but now that it’s out of beta we expect more developers will begin building for the platform.

The big question for most Webmonkey readers is whether or not Firefox trumps Google’s Chrome for Android. The answer is … it depends. Both are fast — pretty close to identical in my testing — and both have excellent support for the latest web standards. In the end sync becomes the killer feature. If you use Chrome on the desktop, stick with Chrome on Android. If you use Firefox on the desktop the good news is that Firefox for Android will no longer leave you wanting.

Firefox for Android isn’t sitting still, either. If you don’t mind living on the edge you can try the nightly builds, which are less stable, but will get planned features like the coming tablet UI, the new tabs pane, find in page, bookmarks/history import, reader mode and more before they arrive in the stable version.

Tags: , ,
File Under: Mobile, servers
Jun
13
2012

Simplify Your Website Testing With Xip.io

By

Adobe Shadow makes it easy to test your site on multiple devices at the same time. Photo: Adobe

Today’s web shows up on a tremendous variety of screens — desktops, televisions, tablets, phones and lately “phablets” (whatever those are). Testing your site on even a fraction of the devices available can seem like a full time job. Tools like Adobe Shadow simplify the process somewhat, refreshing your local site across devices with the click of a button. But Shadow has limitations, for instance, it only works with WebKit browsers.

If you’ve got a wide array of devices to test with you’ll probably want a local network solution — that is, serve your site over your local network and connect all your test devices to that virtual host domain.

Unfortunately setting up a local network and connecting to it can be a pain, which is where the curiously-named Xip.io comes in. Xip.io is a wildcard DNS service that makes it drop-dead simple to set up a network and connect any device to your local test site.

The service is really just a custom DNS server you can easily tap into. So, for example, if your LAN IP address is 10.0.0.1, using Xip.io, mysite.10.0.0.1.xip.io resolves to 10.0.0.1. With the DNS taken care of you can access virtualhosts on your local development server from any devices on your local network, zero configuration required.

Xip.io is a free service from 37signals, whose Sam Stephenson says, “we were tired of jumping through hoops to test our apps on other devices and decided to solve the problem once and for all.” Xip.io might not work for everyone, but if you’ve ever struggled and failed to set up and test sites on a local network, Xip.io might be able to help.

Tags: ,
File Under: Mobile, Web Standards
Jun
5
2012

Video: Mozilla Developer Shows Off the Power of WebAPI

By

It wasn’t too long ago that Mozilla launched its WebAPI project, a cross-platform, web-based API for accessing features on mobile devices. If WebAPI succeeds it could provide an open, web-based alternative to the proprietary app systems on today’s mobile devices.

The goal of the WebAPI effort is to help web apps access the same features that platform-specific mobile apps enjoy. That way web apps could better compete with platform-native applications. Mozilla’s various WebAPIs aim to make it easier to build web apps that access your phone’s camera, GPS info, network status and accelerometer.

Now Mozilla’s Paul Rouget has put up a demo video of some of Mozilla’s WebAPIs in action. Rouget shows a number of demos, including what looks like it could be a very cool web-based camera app — a bit like Instagram, but available to anyone with a modern web browser.

If Mozilla’s WebAPI project sounds a bit familiar it may be that you’ve heard of the W3C’s Device APIs Working Group, which is attempting to define standards that cover much of the same device-to-web ground. In fact, some of Mozilla’s WebAPI project may eventually be rolled into the W3C’s efforts.

But, as Rouget mentions in the demo video, much of Mozilla’s effort is aimed at building the company’s Boot to Gecko mobile platform. The Boot to Gecko Project is Mozilla’s attempt to develop a mobile operating system that emphasizes standards-based web technologies. With that end goal in mind, Mozilla’s WebAPI may end up being somewhat different than what the W3C is trying to build.

For more details on Mozilla’s WebAPI efforts, check out the WebAPIs wiki which offers a complete list of the APIs and more details about Mozilla’s plans to standardize them.

Tags: , ,
File Under: Mobile, Visual Design, Web Basics
Apr
30
2012

Responsive Web Design: What Not to Do

By

Testing a responsive site across devices (using Adobe Shadow). Photo: Adobe.

We’ve covered quite a few ideas on how to build more responsive websites — that is, websites that use flexible layouts, media queries, image scaling and other tricks to make sure that the site looks great and works well on any screen.

Sometimes, though, it’s helpful to see what not to do. Responsive design guru Brad Frost recently outlined five common mistakes responsive developers make over at .Net magazine. Frost covers responsive sins like relying on specific screen sizes to trigger layout changes (it’s far better to create design breakpoints based on a site’s actual design than to just use the screen sizes du jour) and avoiding a one-size-fits all experience.

Of the latter Frost writes:

Mobile is much more than just various small screens…. We shouldn’t sell ourselves short by only creating responsive layouts. For example, we sometimes forget that mobile phones can get user location, initiate phone calls, and much more. Hopefully soon browsers on all these gadgets will have access to even more device APIs, further pushing the boundaries of what’s possible on the web.

We should do all we can to make the entire experience respond to what the device is capable of. Addressing constraints first gives us a solid foundation to stand on, then we can utilize progressive enhancement and feature detection to take the experience to the next level.

The entire post is well worth reading, but we’d like to add a sixth rule to the list: Don’t assume that what you did yesterday will be the best thing to do tomorrow.

That’s not to imply that what you do today won’t work tomorrow, just that chances are there will be an easier way to do it.

Responsive web design is a very new challenge and the best ways of meeting it are still being worked out. That can be a pain, but it also means that some very smart people are solving some very hard problems and you can benefit from their work provided you know about it.

We see new things popping up all the time, whether it’s a new way to handle responsive images or a browser update that adds widespread support for a new CSS feature. We encourage developers to spend some time reading up on the latest tips and tricks before each new project. New responsive tools are being developed and refined so rapidly that the hack you used on your last project might turn into a stable, well-maintained JavaScript library by the time you start building a new responsive site.

Tags:
File Under: Browsers, Mobile
Apr
30
2012

Opera: Over Half of Mobile Users Are Mobile-Only

By

Can you hear me now? Photo by Aramolara/Flickr.

Opera has released a new “state of the mobile web” report that shows 56 percent of Opera’s mobile users access the web only via their mobile device. Some 43 percent of non-Opera mobile users also call mobile their sole browser.

Opera’s numbers were gathered in conjunction with mobile research firm On Device Research and are pulled from some 34,000 users in 22 different countries across four continents over the course of one year (Nov. 2010 to Nov. 2011).

There are two lessons for web developers in this report. First, globally, mobile is not the future of the web — it’s the now of the web. And second, hiding content on the mobile version of a website means a significant number of users will never see that content at all since they only access sites via a mobile device. Consider your hidden-from-mobile content non-existent content.

Naturally every website’s audience and needs are different. If your site is U.S.-centric then Opera’s report may have very little bearing on your users, but for those who’d like to expand to, or are already serving a global market, clearly making sure your site works well on mobile devices is key.

Delving into the Opera-centric portion of data offers some insights for developers as well, namely that building WebKit-only sites is not a good idea.

It’s one thing to know that building sites that only support the -webkit browser prefix is bad form, it’s another thing to realize it may be costing you money.

Not only are Opera Mobile and Mini the most widely used mobile browsers worldwide — which means not supporting them excludes the majority of mobile users from your site — according to Opera’s white paper, 55 percent of Opera users make purchases on their mobile devices. Only 43 percent of people without Opera installed do the same. In other words, websites that don’t support Opera on mobile may well be losing money.

Unfortunately, Opera is going forward with its plan to support -webkit, so possibly WebKit-only websites may work in Opera Mobile at some point in the future. But if you want to support Opera (and other browsers) today be sure to use all the various browser prefixes when writing your CSS. You can even take advantage of automated prefixing solutions to do all the hard work for you.

For more info on Opera’s data be sure to check out the actual white paper (.pdf) which also provides some more country-by-country data for those interested in what mobile trends look like in specific parts of the world.

Tags: ,
« OLDER POSTS