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.
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.
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.
If you’ve never tried testing your site simultaneously on multiple devices, the fact that Shadow consist of four separate apps should give you some idea of how difficult it generally is. Thankfully, once you have all the pieces installed, Shadow makes the rest of the testing process as simple as hitting refresh. In fact, much of the time you don’t even need to do that — Shadow will automatically mirror whatever you’re doing on the desktop to the rest of your connected devices.
Though it’s still a beta release, Shadow may well be the most useful thing Adobe has ever built for web developers, particularly those that have embraced responsive design. It’s no secret that, while responsive design allows developers to easily target a wide range of screen sizes, it adds a considerable amount of work to the development process. But with Shadow mirroring your website across dozens of devices at the same time, testing becomes simple and easy. It’s a bit like synchronized swimming for web browsers. You can even debug and make changes directly in Chrome and then see the results on each device. To get an idea of how Shadow works, check out this overview video from Adobe:
There are two small problems with Shadow. The primary problem is that Shadow will only test your site in WebKit mobile browsers. We’d hate to see Shadow become yet another reason for developers to ignore non-WebKit browsers. So, while Shadow is great, it won’t give you the whole picture right now.
The good news is that Shadow is a beta release and a work in progress. I spoke with Bruce Bowman, Senior Product Manager of Shadow and, while he stopped short of committing to anything, Bowman made it clear that Adobe plans to keep expanding Shadow’s capabilities as the project progresses.
The other problem with Shadow isn’t actually a problem with Shadow directly, but its usefulness is nevertheless directly related to the number of iOS and Android devices you have on hand. Obviously those that will benefit most from Shadow are large web development shops with the budget to invest in dozens of mobile devices. Shadow is no less handy for individual developers with only one or two devices, though the results are of course limited.
Should Shadow prove popular, perhaps it will help spur the sort of device swap gatherings we’ve heard mobile expert Peter Paul Koch suggest — a group of web developers pool their resources, bring together a wide range of mobile devices and take turns testing websites. Shadow could make that process considerably easier and faster thanks to its live editing capabilities.
Mozilla announced today that it has partnered with mobile network operator Telefónica to deliver a complete mobile operating system built around standards-based web technologies. They plan to bring the platform to market later this year on a prototype device that they are developing in collaboration with Qualcomm.
The new operating system, which is called the Open Web Devices (OWD) platform, is based on Mozilla’s Boot2Gecko project. Mozilla launched B2G last year with the aim of building a Linux-based mobile computing environment with an application stack that runs entirely in Gecko, the HTML rendering engine that is used in the Firefox web browser.
According to a statement from Mozilla, Telefónica was already evaluating the feasibility of creating its own web-centric mobile platform when the B2G project was first announced. Telefónica subsequently decided to bring its ideas to B2G and join Mozilla in a cooperative development effort.
Their initial target is to produce devices with smartphone-like capabilities that can be built inexpensively and sold at the price of a common feature phone. Telefónica believes that the unique advantages of a platform built around web technologies will potentially reduce development and production costs, enabling the company to make devices that are a good fit for regions where smartphones have historically been too expensive for widespread adoption.
“From our experience in Latin America we know that a huge part of the market is not being catered for by current smartphones,” said Telefónica Digital product development director Carlos Domingo in a statement. “With new open web devices we will be able to offer a smartphone experience at the right price point for these customers.”
Mozilla has been working with the W3C to turn its new APIs into open standards with the hope that the technology will be embraced by other browser vendors. In today’s announcement, Mozilla revealed that it plans to take this effort one step further by turning the whole OWD platform into an open standard.
“Because of this initiative’s commitment to openness, this reference implementation will be submitted for standardization to W3C,” Mozilla told us in an e-mail. “The objective is that there are no proprietary APIs within the device architecture, making phones developed using it the only truly open devices on the market.”
The initial OWD prototype device will be built around a Qualcomm chipset, but the exact specifications have not yet been disclosed. In light of the focus on low cost, it’s likely that the specs will be modest. Mozilla contends that OWD is lighter than some other mobile platforms because its simple HTML-on-Linux architecture eliminates the need for a lot of the intermediate layers that would otherwise be necessary.
It does seems clear, however, that the extensive use of HTML will help accelerate OWD development and vastly simplify the sort of customizations that mobile network operators typically make. Mozilla was able to get its B2G home screen interface up and running very quickly due to the strengths of HTML as an environment for creating interactive user experiences.
Another question that is left unanswered is which handset manufacturer will actually build the launch device for Telefónica. A number of rumors that have circulated over the past few days suggest that LG will be involved in building the first handset based on the B2G project. It’s possible that LG is involved, but that hasn’t been confirmed yet.
This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.
As Frost points out the mobile world is more than just the WebKit-based iOS and Android browsers that often grab all the headlines. In fact the most widely used mobile browser is not even a WebKit browser (it’s Opera) and there are dozens of other mobile browsers out there as well. And, as the tablet market begins to expand beyond the iPad, there will likely be dozens more coming in the near future.
Faced with the diversity of the mobile browser market developers can either stick their heads in the sand and develop exclusively for WebKit browsers, or, as Frost suggests, we can be more considerate to other browsers. It can seem daunting to support dozens of mobile browsers, but if you aren’t up to the challenge of a few mobile browsers now what are you going to do when you need to support car dashboards, refrigerators, televisions and toasters, all with dozens of varying browsers? (For a more far-future look, check out Scott Jenson’s The Coming Zombie Apocalypse).
The solution, according to Frost, is to recognize the difference between supporting a browser and optimizing specifically for it.
The typical argument against supporting older BlackBerry browsers or Nokia’s WebKit fork, for example, is that these browsers don’t support nearly the number of features that iOS and Android browser’s offer. While that’s true, as with most things on the web, it doesn’t have to be an either/or choice. It can actually be both. That’s what Frost means be the difference between support and optimization:
You don’t have to treat these browsers as equals to iOS and Android and no one is recommending that we have to serve up a crappy WAP site to the best smartphones on the market. It’s just about being more considerate and giving these people who want to interact with your site a functional experience. That requires removing comfortable assumptions about support and accounting for different use cases. There are ways to support lesser platforms while still optimizing for the best of the best.
For some practical advice on how you can take a more supportive approach to the wide range of mobile browsers on the market, head over to Frost’s site and read through the post. Be sure to check out the links to the various mobile emulators and brush up on the ideas behind progressive enhancement.
It’s a big web out there, with dozens of browsers and an ever-increasing number of devices connecting to it. If you want your site to be part of the future it’s going to have to work everywhere — perhaps not perfectly optimized, but at least working.