Archive for October, 2010

File Under: Browsers

Firefox 4 Pushed Back to Early 2011

Mozilla’s next big browser update is running a bit behind schedule.

Firefox 4′s estimated release date has officially been pushed back to early 2011. The browser’s release schedule, which is posted on a public wiki, has been updated to show some new dates: beta 7 in early November, then three more betas before the end of the year, with the release candidate due early next year.

We were originally expecting Firefox 4 to be finalized by now, in late October, when the schedule was first laid out several months ago. But Mozilla’s release dates are always moving targets, so we were expecting things to change. But not this much. Now, the wait for Firefox 4 looks like it could stretch out to three more months, which is sure to upset those eagerly awaiting an update.

The good news is that the current beta is very stable (at least in our testing) and has enough polish to make it safe for day-to-day use. If you’re feeling a little bit rock and roll, we’d recommend downloading the latest Firefox 4 beta. The new features like the updated user interface, expanded support for new standards like HTML5 and CSS 3, plus a much-improved JavaScript execution engine make it worth the very small risk of a crash.

See also:

File Under: UI/UX

Design for Serendipity (And Drinking Monkeys)

Part of the beauty of the internet and HTML is its inherent serendipity — links lead you somewhere, and other links lead you somewhere else, beyond, anywhere. Yet, serendipitous as the web may be, few sites encourage this sort of haphazard exploration.

As developer Derek Powazek writes, “Serendipity powers the social web. It’s why every website has a “share this” link. Serendipity is at the core of why Twitter is fun, YouTube is valuable, and everyone you know has a Facebook account.”

In fact, argues Powazek, “we should be designing for serendipity.”

Unfortunately, things like the bottom line, advertising dollars and other external forces mean web designers are tasked with keeping you on a page, not sending you off to discover something else. Even Powazek’s examples, like YouTube’s “related videos” section is inherently designed to keep you on YouTube’s page. But the way it keeps you on YouTube is by creating a potentially serendipitous experience.

Nothing is going to change the need or desire to keep visitors on your page, particularly if eyeballs on those pages are your source of income, but adding the element of the accidental discovery to your site can make it even more valuable for your visitors.

Here’s more advice from Powazak (who is a former Webmonkey, by the way):

If you make a website, take a look at it and ask yourself, “when someone comes here looking for one thing, where do I have the opportunity to tell them about something else?” It could be in a footer, for example. This can be tricky, because you don’t want to interrupt a self-directed experience. Just look for the cracks where you can leave hints about what else is available. Hint: Newspapers have been designed this way for years. Crib, crib heartily.

There are many serendipitous routes that lead people to your stuff. Understand what they are and nurture them. But don’t become over-reliant on them. Design your stuff to create serendipitous connections between things. Look for every opportunity to hint that there’s much more to be discovered. Take the time to design the serendipity in to the experience.

Or, you could watch this video about drinking monkeys and see where that leads you:

Bookshelf photo by Juhan Sonin/Flickr/CC

See Also:

File Under: CSS

Target the Future With CSS 3′s :target Rule

Opera’s Dev Center has plunged head first into the complexities of the CSS3 :target selector with a tutorial that shows an example of how :target can be used to trigger animations and fades.

The result is a series of sliding, animated transitions that move and fade in and out as your click the menu links — all done with pure CSS, not a line of JavaScript necessary.

Of course there is a catch — the example only works in Opera.

The main problem with the :target selector is that a bug in WebKit prevents it from working in Safari and Chrome. The Opera tutorial code solves this with a media query which unfortunately also applies to Gecko, so the demo really only functions properly in Opera.

While that’s probably more than enough to stop most developers from using :target, the tutorial is nevertheless a nice glimpse of what will work in the near future. Perhaps the best thing about :target is that it really forces you to pay attention to the hierarchy of your HTML. And for that alone, Opera’s tutorial is well worth a read.

Photo: Mixy Lorenzo/Flickr/CC

See Also:

File Under: Browsers

The Battle for Choice on the Web Isn’t Over

A thoughtful essay by Stuart Turton at PC Pro argues that Mozilla, having already completed the shake-up in the browser world it set out to achieve, needs a new direction:

Like the catalyst in a science experiment, I’m beginning to wonder if Firefox’s greatest contribution to browsers is not its continued existence, but that it existed at all. Put another way: Mozilla has won all its battles, is it time the company picked a new war?

Turton goes on the suggest that Mozilla apply the Firefox model to develop a desktop office suite to rival MS Office, but I’m not convinced that’s a good idea. How many of you use Thunderbird instead of Gmail or Yahoo Mail?

Since we’re playing armchair quarterback here, I’d argue that Mozilla hasn’t come close to winning all its battles. There’s still a great deal of work to be done in the “choice” department on the web: the choice of open web technologies or proprietary technologies for video, audio and games; the choice of where to store your personal data on the web (and how the browser handles that decision); the choice of whether you get your apps from a store run by a corporation, or through an open, cross-browser platform with no Central Scrutinizer.

In other words, the “choice is good” fight isn’t over, it’s just about different stuff now. If Mozilla is going to change direction about how it promotes its philosophy, these are the places to concentrate. And it seems to me like the company is already doing so.

Of course, these issues are of little importance to the general public, many of whom are mostly concerned that pages load quickly, and that YouTube, Facebook and Gmail deliver the goods day in and day out. For all the browser vendors, that’s an ongoing competition with no finish line.

See also:

File Under: HTML5, Multimedia

Adobe Releases Its Own HTML5 Video Player

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: