Archive for February, 2010

File Under: Browsers, Visual Design
Feb
23
2010

Vote for Your Favorite Firefox ‘Home Tab’ Design

By

Mozilla’s Spring Design Challenge, which encourages designers to rethink the Firefox homepage, has entered its final phase. The top ten “people’s choice” designs are now up for a second round of voting.

To vote for your favorites, head over to the People’s Choice voting page (note that you’ll need a Mozilla Labs account to vote). The top ten designs, along with links to the video demos explaining them, can be found on the Mozilla Labs design challenge site.

While there’s no guarantee that any of the people’s choice concepts will actually make it into Firefox, there are several compelling designs and a wide range of ideas on display — everything from the very simple to complex social aggregation tools.

The goal of this challenge was to imagine a new home page tab for Firefox. Eventually, Mozilla plans to actually move the home page concept out of the menu bar and into its own semi-permanent tab. If that’s not to your liking, you’ll still be able to disable the home tab, or simply set it to a web page as you might be doing now. But Mozilla hopes to make the home tab a bit more powerful.

Such a page could, for example, filter through your history, add-ons, bookmarks — or pretty much anything stored in Firefox — and present that data in novel ways. It could, as Daniel Goodwin’s entry proposes, turn into a social networking hub, or it could remain something much simpler as Alberto Moreno’s design outlines.

For a complete list of all the entries in this year’s challenge, head to the main design challenge page. Winners, both “people’s choice” and those picked by Mozilla, will be announced in March.

See Also:

Tags:
File Under: Browsers, HTML5, Multimedia
Feb
22
2010

Developer Gives Internet Explorer the Gift of HTML5 Video

By

Internet Explorer lags well behind its rivals when it comes to supporting the latest emerging web standards.

Not only is that bad for IE’s users, but Microsoft, once an innovator (one of the single most useful standards for today’s web, XMLHttpRequest, began life at Microsoft), isn’t even part of the discussion any more.

We’re hoping to see Microsoft become relevant again when details about IE 9 arrive later this year, but in the mean time it seems the web is doing its best to pick up Microsoft’s slack.

Take, for example, HTML5 video, which has been making waves lately with YouTube, Vimeo and other jumping on the native video bandwagon (although neither site supports open video codecs). Unfortunately, Internet Explorer users can’t enjoy native video since even the latest version of IE doesn’t know what to do with the HTML5 <video> tag.

Luckily for those that would like to stick with IE and enjoy native web video, Cristian Adam is working on a plugin for Internet Explorer that implements the HTML 5 video element. Adam’s work draws on Vladimir Vukicevic’s attempt to support the HTML5 canvas tag in IE8. Taken together, IE8 users can get at least some benefits of HTML5.

Adam’s HTML5 video support works with the free, open Ogg Theora video codec and the latest version features better Windows 7 support. Don’t hold your breath for an H.264 version of the add-on, since that would require Adams to pay licensing fees (one of the many, many reasons H.264 is bad for the web).

So far, Adam calls HTML5 video in IE a “Technical Preview,” and things are indeed very basic — there’s no seeking, no video controls and no HTML5 interface. If web-based HTML5 video controls like SublimeVideo catch on then lack of embedded UI controls won’t matter since site developers can easily add their own.

Web developers who would like to support Adam’s hack will need to add the xmlns="http://www.w3.org/1999/xhtml/video" attribute to turn on the <video> tag for Internet Explorer.

For more details and to download the installer, head over to Adam’s website. To see a demo of HTML5 video working in IE8, check out the video below (it’s an open video demo, so it requires Firefox 3.6).

See Also:

Tags: , , ,
File Under: Browsers, Software
Feb
19
2010

Microsoft Debuts ‘Browser Choice Screen’ for Europe

By

Microsoft’s Dave Heiner posted the above image on his official blog at Microsoft Friday. It’s the first test of the system that will let users decide which browser they’d like to use, as per the European Union’s mandate on Microsoft. Users in Europe — and only in Europe — running Windows XP, Vista and Windows 7 will begin seeing a screen like this one in just a few weeks.

From Heiner’s post:

In December, the European Commission and Microsoft arrived at a resolution of a number of long-standing competition law issues. Microsoft made a legally binding commitment that PC manufacturers and users will continue to be able to install any browser on Windows, to make any browser the default browser, and to turn access to Internet Explorer on or off. In addition, Microsoft agreed to use Windows Update to provide a browser choice screen to Windows users in Europe who are running Internet Explorer as their default browser. This browser choice screen will present a list of browsers, with links to learn more about them and install them. The design and operation of this choice screen was worked out in the course of extensive discussions with the Commission and is reflected in the commitment that Microsoft made. Users who get the choice screen will be free to choose any browser or stick with the browser they have, as they prefer.

It’s interesting that Chrome is listed first in the screenshot. Also, note that the Firefox logo actually stands out rather sharply at first glance.

The browser choice screen will be rolled out in the United Kingdom, Belgium and France starting the week of March 1, 2010. The picker will be automatically downloaded via Windows Update. There are more details on the Microsoft site.

Tags:
File Under: CSS, Visual Design
Feb
18
2010

A Universal Solution for Rounded Corners in Your Designs

By

Say what you will about the aesthetics of rounded corners in web design, the reality is you’re probably going to have to implement them some day.

It used to be that rounded corners required four separate images. Then came a clever trick that used just one circular image. But creating rounded corners was still a pain — the task topped our wishlist of CSS features back in 2008. Now, with the arrival of CSS 3, it’s getting much easier to create rounded corners without using any images at all. For people who are into rounded corners, it’s the greatest thing since tabbed browsing.

Of course there’s one big problem with CSS 3 — not every browser supports the whole spec. And some of them (cough, IE) don’t support any of CSS 3′s rules. So while it’s all well and good to create rounded corners with CSS 3′s border-radius, Internet Explorer and Opera won’t render it properly.

Thankfully, the next versions of both browsers, Opera 10.5 and IE 9 respectively, will support border-radius. But in the mean time (and to deal with legacy browsers visiting your site), web designer and blogger Jon Raasch has come up with a handy mix of solutions that creates rounded corners in every browser without resorting to images.

Raasch starts with the best case scenario — browsers that support CSS 3′s border-radius — and creates a pure CSS solution in the form of a class:



.rounded-corners {

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    -khtml-border-radius: 10px;

    border-radius: 10px;

}

For many that might be enough — Safari, Firefox and Chrome will all render rounded corners. Note the actual border-radius rule without the browser-specific prefix, which should cover any future case as well.

Given that rounded corners are generally not a make or break design element, you may be happy to let Opera and IE users see square corners on your pages. If, however, you don’t want any of your users to suffer the horror of angular corners, check out Raasch’s post to see how he solved the problem for Opera and IE.

Sliced bread photo: Emiline220/Flickr, CC

See Also:

Tags: , ,
File Under: Browsers, JavaScript
Feb
17
2010

Latest Update Makes JetPack Add-ons More Powerful

By

Mozilla Labs has announced the release of JetPack 0.8, an update to its new, lightweight extensions framework for Firefox. Jetpack lets people use common web tools like HTML, CSS and JavaScript to build Firefox add-ons.

The latest release of JetPack brings two new APIs in the fold; the Toolbar API, which lets JetPack developers place custom buttons and controls in the Firefox UI much like traditional add-ons can do, and a new Places API, which allows JetPack add-ons to interact with Firefox’s history and bookmarking tools.

Together with the existing APIs, JetPack is starting to look like a much more capable platform for add-ons developers. While JetPack will never be able to duplicate all the functionality of the existing Firefox add-ons system, Mozilla’s plan is migrate as many developers and add-ons as possible to JetPack without eliminating the existing platform.

JetPack offers several advantages over traditional add-ons, both for developers and users. Developers get to use common web building tools like HTML, CSS and JavaScript, whereas traditional Firefox add-ons generally require knowledge of XUL markup. Users can install JetPack add-ons without restarting their browser, and the lightweight add-ons usually have less of an impact on browser performance.

Eventually, Mozilla plans to incorporate JetPack into Firefox release, most likely Firefox 4.0, due at the end of next year, though there is some chance JetPack could be part of the planned upgrades between now and then. For now though, interested developers can grab the JetPack add-on that allows JetPack to work within current version of Firefox.

While JetPack was innovative when Mozilla first announced it, Google has since added an extension system to its Chrome browser that works on the same principles as JetPack — using web-based tools like HTML and CSS. It would be nice if Chrome extensions would work with JetPack and vice versa, but differences between the underlying browsers make such compatibility unlikely.

Jetpack is still an experimental Labs project and may have some bugs, but if you’d like to take some JetPacks for a spin, head over to the Labs website, install the add-on and then browse the available JetPack extensions.

See Also:

Tags: , , , ,
« OLDER POSTS