Webmonkey » iPad

Mozilla ‘Junior’ Brings Firefox to Your iPad

Scott Gilbertson — Mon, 18 Jun 2012 15:43:00 +0000

Coming soon: Firefox for the iPad. Photo: Ariel Zambelich/Wired

Mozilla wants to bring Firefox to the iPad. The company is showing off a prototype iPad browser dubbed “Junior.”

Firefox for the iPad won’t be the first alternative browser for Apple’s iOS — iCab Mobile, Dolphin, Mercury, Opera Mini, and several others are already available — but it might be the first with a name most iPad users will recognize. (Google is also reportedly working to bring a version of its Chrome browser to iOS.)

Judging by what you can see in the video below, the name might be the only thing Firefox fans will recognize in Junior.

Due to Apple’s iOS restrictions, Firefox for the iPad would use the same WebKit rendering engine found in Safari for the iPad. As with the rest of the alternative web browsers available for the iPad, Firefox for the iPad’s distinction will lie solely in its user interface and features.

Alex Limi, Mozilla’s User Experience Lead for Firefox, says in the video that the motivation behind Junior wasn’t just to get Firefox on the iPad, but to “reinvent the browser for a new form factor.” “We wanted to make something entirely new,” says Limi, who goes on to add that while Safari for the iPad is “the best browsing experience on a tablet,” it’s still “a pretty miserable experience.”

Mozilla believes it can do better.

Mozilla’s idea of an “entirely new” browser thus far consists mainly of a full screen browsing experience that dispenses with any browser chrome and tabs (something the first version of Safari for the iPad also lacked). Instead you’ll find two buttons toward the bottom of the screen, at roughly thumb height when holding the iPad in portrait mode.

The left-hand button is the back button. The right side harbors a plus button, which brings up a page switching and speed dial interface that’s reminiscent of Opera’s expanded tab view — thumbnails of the actual page rather than just labeled tabs. Both buttons are also hiding some extra features that are revealed only when you press and hold them. Hold down and you’ll reveal features like reload and forward on the left side and some sharing buttons on the right.

Perhaps the best idea Limi mentions in the Junior demo is the ability to create separate user accounts. A simple swipe to the left of the main navigation page will bring up a user login menu. If you share your iPad with other family members you already know that maintaining separate Facebook, Google and other logins is a pain in Safari for the iPad. Junior’s proposed accounts interface would eliminate that headache.

Junior is still very clearly a prototype and many of its user interface ideas are still up in the air. In other words, don’t look for Junior to actually ship any time soon. Junior is also forcing Mozilla to come up with a new building and testing process — the company can’t release test builds via Apple’s App Store as it can on other platforms. According to the video the company is still developing the best way to build and test prototypes. We’ll be sure to let you know when there’s something available publicly.

The iPad 3 and the Future of the Web

Scott Gilbertson — Tue, 06 Mar 2012 22:10:26 +0000

Apple is expected to announce the third version of the iPad tomorrow. It’s easy to mock the excess enthusiasm the tech community has for new Apple gadgets — Wow! Look, it’s a new computer!

At the same time it’s just as easy to see why that enthusiasm exists — Apple can be counted on to push the boundaries of how we use computers and how we use the web.

As developers, pushing the boundaries makes for exciting times. Difficult times too. Times that challenge our current models of what the web is and what the web might become.

Apple has already pushed the web in several new directions by popularizing touch-based devices and in the process redefining our behaviors, habits and expectations.

Taking away the mouse forced developers to rethink many things we previously took for granted — of course I can use a drop down menu that activates when a mouse rolls over it, how could that possibly not work? Well, now you know. That was only one small change and suddenly web developers had to pivot, best practices had to change.

What will all the new changes coming this year mean for the web? No one knows yet, but the web today is feeling less like a thing that lives in your browser and more like something that exists in the space between things. The web of tomorrow will be less visible and more powerful — the thing that pulls everything together and makes it work even when the web isn’t something you access directly on every device.

A while back Brad Frost told developers to “get your content ready to go anywhere because it’s going to go everywhere.” This has been happening for a while now with RSS and APIs that push and pull content to places often far removed from the “webpage” where it was originally published. Expect this to continue and to become even more common as we navigate between different devices, platforms and technologies. Android apps can’t run on iOS. Windows Metro won’t integrate with a Spark tablet. Something has to link the device silos together.

The web has already become a way to link information across otherwise disconnected apps. Take Marco Arment’s Instapaper, for example. Instapaper saves webpages for offline reading and syncs them between iOS devices and Kindles. Is Instapaper a web app? Is it an iOS app? Is it a Kindle service? It’s all of these things.

Even when platform-native apps are the access point, the web remains the key element in the equation. This will likely be the future of the web — less visible, less obvious, less about the browser, but essential for connecting everything together.

That doesn’t mean that the browser will go away. The browser will likely continue to exist for some time as a fallback. We will still need a device and platform agnostic way to access the web as long as devices remain silos. If iOS went away and Amazon stopped making Kindles, you could still read your Instapaper articles on any device with a browser. The opposite isn’t true — take away the web and the Instapaper apps would be isolated, with no way to connect them.

The web is bigger than the browser already and it will continue to expand into new areas. What’s going to happen when the web is on your television? How will the web need to change when the screen is much larger and further away? How will the web need to change if we want to interact with it by voice commands? Very soon Android devices are going to be in your car dashboard. Eventually your car itself will have an API. Your car could talk to, for example, your car dealer, logging in, making an appointment for a repair it’s just become aware of. It might then use another API to push the appointment on to your calendar app, which then might use the Siri voice API to ask what time works best for you, scanning your other appointments and offering suggestions.

Where in that scenario is the web as we think of it today? It’s just a series of APIs talking to each other. There is no web as we know it. And yet the web is still there, invisibly making it all possible. There’s a reason, after all, that we call it a web — it’s what binds everything else together. It no longer matters if what you’re after ends up displayed on a feature phone via Opera Mobile or inside the Instapaper app running on the latest and greatest iPad. The web is already everywhere.

Photo: Benoit/Flickr

Adobe Releases Its Own HTML5 Video Player

Michael Calore — Fri, 22 Oct 2010 17:02:06 +0000

Adobe has released an embeddable video player that plays HTML5 native video in browsers that support it, and falls back to Flash in browsers that don’t.

It’s cross-browser and cross-platform, so it works on iPhones, iPads and other devices that don’t support Flash. Using Adobe’s new player, these devices can show videos in web pages without the Flash plug-in.

There are already several players out there that use the HTML5-with-Flash-fallback method, such as Vimeo’s new player and the slick one from Brightcove that can handle video ads. All of these players, like Adobe’s, are based on open web technologies and can be customized with CSS and JavaScript. But this newest one, being from Adobe, is sure to be a bigger deal.

The company has come under fire in the past year over concerns about the stability and performance issues related to its Flash Player browser plug-in, and Flash technology itself. Apple’s iPad ships without support for Flash, and Apple initially disallowed apps created in Flash from being sold in its app store. Apple rescinded after a few months, but the damage was already done — Google began pushing HTML5 video over Flash by releasing WebM, a new open video format, and developers got busy looking at HTML5 as a replacement for Flash, at least when it came to embedding videos.

With its new player, Adobe is responding to their developers’ wishes for solutions that play well on the open web. It comes on the heels of last week’s release from Adobe, which lets artists using Illustrator export their drawings as HTML5 Canvas, and its earlier pack of HTML5 tools for Dreamweaver.

HTML5 video adoption among browsers has gone tremendously so far — Chrome, Firefox, Safari and Opera all support native video, and baked-in support is coming to Internet Explorer 9 next year. But it’s still a bit of a mess, with different browsers supporting different formats. So developers posting HTML5 video still need to encode their files in at least two of the three major formats — the widely-used H.264, the newer WebM, or the older Ogg Theora — to guarantee all HTML5 capable browsers will be able to see their videos.

With the proper file formats in place, Adobe’s new player will play native web video in all the newest browsers, and will switch to Flash playback mode for all your poor visitors stuck with IE6 or something equally stone-aged.

The new HTML5 video player is incorporated into the workflow of Dreamweaver Creative Suite 5, so if you’re already using Adobe’s tools to build your site, you can drop in a player using Dreamweaver’s “Customize Widget” function.

If you’re not a Dreamweaver person, you can still generate all the code you need using Adobe’s free Widget Browser app. One caveat — the Widget Browser is an AIR app, so you’ll need to have Adobe’s Flash-based runtime to use it, though AIR apps will install AIR for you if you’re lacking.

To develop its video player widget, Adobe used open source code from Kaltura, repurposing a popular library that’s found at the heart of several HTML5 video players.

See also:

Is the iPad Sending Design Back to the Dark Ages?

Michael Calore — Mon, 18 Oct 2010 18:29:00 +0000

Jeffrey Zeldman thinks so. In his essay, “iPad As the New Flash,” the author and standards guru argues that designers are now coding up device-centric user experiences at the expense of web standards, accessibility and the advancement of open web technologies.

Everything we’ve learned in the past decade about preferring open standards to proprietary platforms and user-focused interfaces to masturbatory ones is forgotten as designers and publishers once again scramble to create novelty interfaces no one but them cares about.

While some of this will lead to useful innovation, particularly in the area of gestural interfaces, that same innovation can just as readily be accomplished on websites built with HTML, CSS, and JavaScript—and the advantage of creating websites instead of iPad apps is that websites work for everyone, on browsers and devices at all price points. That, after all, is the point of the web. It’s the point of web standards and progressive enhancement.

He takes issue not with apps in general, but with the design choices being made by popular magazines as they rush to embrace the new shiny. His ultimate conclusion: “Masturbatory novelty is not a business strategy.”

The comments are enlightening, too. A few make the point that web standards like JavaScript and CSS can now be used to develop experiences that can be delivered both natively and through a browser. Another suggests this is just the Old World struggling to understand a new platform.

See also:

Yahoo Mail Switches to HTML5 on the iPad

Michael Calore — Wed, 18 Aug 2010 00:22:27 +0000

Yahoo recently revamped its webmail site to deliver a richer, HTML5-powered experience to iPhone users, and now the company has done the same for iPad users.

Go to the Yahoo Mail website on your iPad and you’ll see the new, fully juiced-up HTML5 version instead of the older mobile version.

Yahoo mail the world’s largest webmail site — it has over 275 million users — but the site lags behind second-runner-up Gmail when it comes to innovation with HTML5 on the iPad and other touchy-swipey browsing devices.

Still, the new Yahoo Mail looks pretty slick. Scrollable photo previews now appear inside e-mail messages, and it supports offline local cache so you can keep working even when you’re out of range.

How Do Native Apps and Web Apps Compare?

Michael Calore — Tue, 17 Aug 2010 13:00:46 +0000

The Web is Dead. Long Live the Internet

The Web is Dead?! A Debate

How the Web Wins

How Do Native Apps and Web Apps Compare?

Two roads diverge on a tablet screen. One is the path to the native app, the other leads to the open web.

Luckily, you can take both. The latest mobile devices ship with a thoroughly modern browser capable of handling emerging web standards. Beneath that is a modern operating system with access to the magic inside the hardware: the camera, GPS, gyroscope and compass. But if you had to pick one — native app or web app — which would you choose? Your decision will make all the difference in how you approach your design, development and distribution.

The Issues	Native Apps	Web Apps
Internet access	Not required	Required, except for rare apps with offline capability
Installation/updates	Must be deployed or downloaded	Hit refresh
User interface	Native apps are responsive and functional	Browsers can be clunky, but new advancements in JavaScript like jQuery Mobile are catching up fast
Device compatibility	Platform-dependent, hardware-dependent	Platform-agnostic, content can be reformatted with CSS to suit any device
Animation/Graphics	Fast and responsive	Web apps are getting closer, but will probably always lag
Streaming media	Few problems with audio and video. Flash works, but only if the device supports it	Flash works where supported. Browser-based audio and video are getting there, but still beset by compatibility headaches. Give it a year or two
Fonts	Tight control over typefaces, layout	Almost on par, thanks to advancements in web standards. Give it six months
Is my content searchable?	Not on the web	By default
Sharable/Tweetable?	Only if you build it in	Web links are shared freely. Social APIs and widgets allow easy one-click posting
Discussion and collaboration	Only if you build it, and it’s more difficult if data is disparate	Discussion is easy, all data is stored on a server
Access to hardware sensors	Yes, all of them: camera, gyroscope, microphone, compass, accelerometer, GPS	Access through the browser is limited, though geolocation is common
Development	Specific tools required for some platforms (like Apple’s). You have to build a new app for each target platform	Write once, publish once, view it anywhere. Multiple tools and libraries to choose from
Can I sell it?	Charge whatever you want. Most app distributors take a slice, up to 30%	Advertising is tolerated, subscriptions and paywalls less so. No distribution costs beyond server fees
Distribution	Most app stores require approval. And you gotta wait	No such hassle
Outside access to your content	No, the reader must download your app	Yep, just click a link
Advertising	Control over design (though limited in iAds) and rate	More choices for design, plus access to web analytics. Rates vary widely

See Also:

Meet Treesaver, a New HTML Magazine App

Michael Calore — Wed, 11 Aug 2010 18:14:35 +0000

A startup called Treesaver has developed a slick presentation framework for digital magazines that runs in the browser. It has many of the features you’d expect from a clean, reader-friendly content wrapper (like Instapaper or Readability) but it couples that functionality with a way-cool user interface.

Pages can be navigated by swiping from side-to-side, and you get helpful ghost images on either side of the page you’re reading, which aid in signposting. Also, the pages within the web app dynamically resize for different screens — and it even resizes on the fly as you make the browser smaller and larger. It’s all HTML, JavaScript and CSS.

Here’s the demo video for Nomad Editions, the first of Treesaver’s launch partners using the company’s framework to make a public announcement (Treesaver is still pre-launch right now):

Nomad also got some love from The New York Times Wednesday.

With digital magazines all the rage, everyone’s racing to get their traditional paper-and-ink publications onto the iPad. There are two routes — the native app, which requires the use of Apple’s tools and adherence to its rules, or the web app, which lets you do just about whatever you want as long as it works in a browser.

If you build a native app, you get some impressive performance with the swipey-swipey stuff, and you control both the ad revenue and your kerning pairs. But you’re also locked into a specific device’s platform, distribution is a pain, and you’re disconnected from the internet unless you bother to build it in.

The webby route has its own advantages, of course. Filipe Fortes, one of the founders of Treesaver, has posted an excellent list of all the ways the web wins — a wider audience, a wider range of compatible devices, easy access to social networking tools, real hyperlinks, search indexing, content embedding.

Treesaver will be entering beta testing in a few weeks, and the code will be released under an open-source license soon after that.

See Also:

DeviantArt’s Muro Drawing App Is Pure HTML5 Awesomeness

Michael Calore — Tue, 10 Aug 2010 23:35:24 +0000

The folks at DeviantArt, a website best known for hosting images of fairies and vampires created by gothy art students, have debuted a new browser-based drawing tool created entirely with web standards.

Muro works in all modern browsers, and you can dive in and start drawing on a blank canvas, all without Flash or any other plug-in. There are several brushes available to everyone, but to access the more advanced features, you’ll need to create a DeviantArt account and log in.

The image above was created by DeviantArt user loish using the new tool. It’s amazing to see what people are creating with it.

Muro is reminiscent of other browser-based drawing tools like Odosketch, which uses Flash, and Sketchpad, which, like Muro, uses only web standards. But Muro is cleaner and more of a joy to use than any other HTML5-based sketching app I’ve seen.

As browsers become more powerful and web technologies like HTML5, CSS and JavaScript become more advanced, we’re seeing more and more killer web apps emerge. But productivity apps, fancy fonts and media playback hacks aren’t just interesting tricks we can all marvel at, they are examples of how the web is quickly maturing into a true computing platform.

I found Muro to be more useful on an iPad — a fingertip is much more forgiving than a mouse or a trackball when you’re trying to draw something on a screen. Also, the default settings seem to be optimized for the iPad’s browser. In Chrome and Firefox, it took some fiddling to get the brushes to the point where they produced the desired results. But once you get the hang of it, it’s super easy and fun. You’ll waste a lot of time if you’re not careful.

I also asked Dennis Crothers, Wired.com’s head of user experience, to give it a test drive with his Wacom tablet. You need to be running Wacom’s tablet data plug-in (which you probably already have installed if you have the device) for it to work. He was impressed. He says Muro isn’t the best drawing tool out there — this is coming from a designer who spends the bulk of his days in Adobe Illustrator — but for an HTML5 web app, he says it’s an excellent piece of work. I agree.

Green-haired girl by loish. Crappy Veve by me.

See Also:

Lots of Hubbub About Flipboard

Michael Calore — Thu, 22 Jul 2010 00:07:42 +0000

It’s the iPad app everyone’s talking about. It’s free and available for download.

Flipboard is a social networking aggregator. While we’d argue that the flexibility of the open web experience is still more desirable than the closed-off app experience, Flipboard does a decent job of simplifying and “cleansing” the most important social web activities. You still get most of the functionality — tweeting, sharing, browsing — but without the clutter that web-based aggregators can’t seem to shake.

Give it a spin. And tell us: Where do you do your social networking? In the browser or on your touchy-shiny?

Nice bit of Aphex Twin on the video soundtrack, BTW.

Gmail Mobile Is Always on the Move

Michael Calore — Mon, 21 Jun 2010 17:54:11 +0000

Google has updated its mobile Gmail interface for iPad users. The company announced the update Monday on the official Google Mobile blog. To see the updated interface, just surf to Gmail using Safari on your iPad.

Gone is the split-screen interface for composing e-mails. Now, you get a tasteful, lightboxed modal overlay — fewer distractions, cleaner and more room for the text of your e-mail. A screenshot is above. The changes will only show up for iPad users, and the new site (for now) is only available to English-language users.

It’s not a major update, but it demonstrates a new way of developing the web app that allows Google to respond more quickly to user feedback. Google switched the product over to a more easily-iterative HTML5 codebase last year. The mobile Gmail site gets updated more frequently — usually just small stuff here and there — and is becoming faster and more usable all the time.

On my own iPhone, I switched from the native Apple mail app to Gmail’s mobile web interface long ago, and I’ve never gone back. I still use the native mail app to send e-mails when I have to (from Twitter or Instapaper, for instance) but for everything else, I use the Gmail web app in Safari. In the early days, it was fairly painful, but it’s gotten much faster and much more usable since Google switched to the current iterative approach. The floating control bar, the swipe-to-archive gesture, the menu navigation and the way threaded conversations expand and contract are elegant, innovative enhancements that all web app developers can learn from.

What do you use for mobile e-mail? Native or web app? Let us know and tell us why you chose that route in the comments.

See Also