All posts tagged ‘Web Apps’

File Under: HTML5, Mobile, Web Standards

W3C Offers a Guide to Building Mobile Web Apps

If you’ve been wanting to start development on a web-based mobile app, but don’t know where to begin, the W3C has you covered. The web’s governing body has released a set of guidelines and best practices for developing mobile web applications.

If you’ve already been keeping up with the latest in mobile web technologies, the guidelines probably won’t have too much new information for you. But if you haven’t already explored the rapidly growing mobile web apps scene, the W3C’s guide makes a good starting place.

The guide covers everything from the (hopefully) obvious, like minimizing the number of cookies, compressing your files and using CSS sprites, to less-well-known tips like using Fragment IDs or caching resources by fingerprinting resource references.

One thing to keep in mind is that this overview is intended for web apps, not just websites. If you just want to develop a mobile-optimized version of your website, check out our earlier post on the best practices for mobile websites.

If you’re building something much more complex and application-like, the W3C’s guidelines make a great starting point to get up to speed.

See Also:

File Under: Browsers, Web Apps

Mozilla Shows Off Plans for an Open Web App Store

Mozilla LabsMozilla has released more details about its soon-to-arrive Open Web Applications platform.

There are two key components: a directory where users can browse available web apps, and a new dashboard that will be baked into the browser interface, where users can install and manage their favorite apps.

The company published some technical documentation for developers so they can get to work retrofitting their apps with the code necessary to make them work with the new dashboard.

We first heard mumblings from Mozilla about this “Open app store” for the web back in May, only one day after Google announced its own app store for its Chrome browser and web-based Chrome OS. Google’s store is expected to make its full debut soon. The apps in Google’s store will be optimized for Chrome and may not work in other browsers, but Mozilla’s approach will list apps that work on “any modern browser with support for basic HTML technologies” — including mobile browsers. Mozilla says it will let each browser vendor dictate how it presents the app dashboards and management features.

So, app stores for web apps?

It doesn’t make much sense when coupled with what we’ve seen of “traditional” app stores — the ones popular in the mobile world, like those for Apple, Android and BlackBerry devices. But unlike those app stores, which actually involve downloading a package and installing it for offline use, a web app store is simply a directory of apps that are hosted on web servers.

In Mozilla’s model, users browse the app listings, where everything is categorized and rated. Developers can also host their own apps. Users click “install” on the ones they want, and those apps are added to a dashboard inside their browser.

It’s been mocked up for Firefox, and it looks something like this:

In the dashboard, you can manage how apps access your personal information, or uninstall them. Users don’t have to use the dashboard. They also have the option of saving a link on their desktop or mobile home screen for a single-click launch.

Continue Reading “Mozilla Shows Off Plans for an Open Web App Store” »

File Under: Browsers, Web Apps

Chrome Web Store Is Now Open for Developers

Google has launched a developer’s preview of its Chrome Web Store — the company’s directory where users can browse and install Chrome extensions, web apps and downloadable apps that run in the browser.

There are no listings available yet in Thursday’s preview, but you can start creating apps and uploading them to the store so they’ll be available as soon as it opens later this year. All the tools you’ll need to publish apps are available there, as well as instructions on how to use the Licensing API so you can charge for your apps if you wish.

Interestingly, Google is recommending developers pursue a freemium model for paid apps. “A freshly installed app should always provide something useful or interesting, even if the user hasn’t paid yet,” the documentation says. “If the first page the user sees is useless — nothing but a payment wall, for example — the user is likely to uninstall your app, and you might get some scathing reviews.”

According to a report on TechCrunch, Google will take a five percent cut of sales revenue.

What’s up with installable web apps, you ask? Don’t web apps get served to a client from a web server? Well, yes, there’s that kind, and then there’s the kind you download and install. Google describes an installable web app as “a normal website with a bit of extra metadata.” The app is packaged, then downloaded and installed by the user, where it runs in the browser (online or off) and can access local storage.

Here’s a video that covers the details of Thursday’s developer preview:

See Also:

File Under: HTML5, Mobile, Web Apps

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:

File Under: HTML5, Web Apps

DeviantArt’s Muro Drawing App Is Pure HTML5 Awesomeness

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,’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: