Using ‘Mad Libs’ to Make Web Forms More Fun

Author: admin  //  Category: Uncategorized

In an ideal world, the web would have a built-in identity solutions — websites would automatically know who you are when you arrive. In the real world, however, almost every website has its own sign up and authentication process, endless forms enticing you to enter your name, your e-mail, pick a password… yawn, what now?

It’s repetitive, boring and makes many of your users click away in disgust. But what if you turned the sign up form into a narrative, something a bit like a Mad Lib?

That’s exactly what web developer Jeremy Keith has done for his podcasting site, Huffduffer. Instead of a list of blank boxes, Huffduffer’s sign up form looks like this:

All the usual behaviors of a web form are still there. You can tab between fields, your password is still masked and errors are highlighted if there are any. The difference is the in the presentation. It doesn’t look like some kind of online test.

In short, Huffduffer’s sign up for is refreshing, but does it work? Well, Luke Wroblewski, Chief Design Architect at Yahoo and author of a book on creating usable web forms, had the same question and, with some help from the team at Vast.com, ran some tests.

The designers at Vast redesigned their response forms along the lines of Huffduffer’s form and found that, as Wroblewski reports, “Mad Libs style forms increased conversion across the board by 25-40 percent.”

The forms are live on both Vast and the Kelley Blue Book website if you’d like to experience them yourself. Wroblewski has a few minor caveats about the increased number of users — be sure to check out his post for the complete details — but at least in some cases it would seem that a narrative flow trumps the boring old form.

See Also:


View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese

Win A Free Ticket to Google IO 2010

Author: admin  //  Category: Uncategorized

Google’s premiere developer event is coming up in just a couple of months, and we’ve got two passes to give away.

Google I/O takes place on May 19 and 20 at Moscone Center in San Francisco. It’s the company’s largest developer event, with hundreds of sessions and demos of all the latest Google tech. Plus, there are the big keynotes like the launch of Wave, the first major public demo of Android and the HTML5 coming-out party where everyone in the room got a free Android phone.

If you live in or near San Francisco, or if you have the means to get here, you can win one of the two passes we’re giving away. Each one is worth $500! Here’s the deal:

  • Submit a link to something cool you’ve built using HTML5 — a web app, a canvas demo, an audio or video demo, a mobile app that uses geolocation. It has to be your own work, and it has to be somewhere on the public web.
  • Or, submit a link to a Google Chrome extension you’ve built. Tell us what it does and why it’s awesome.
  • Or, tell us how you would explain what a “web app” is to your grandmother. Let’s assume your grandmother is a nontechnical web user — you can’t use the word “application” or any acronyms, just plain English. (Yes, your submission has to be in English).

To participate, leave a comment on this post, send a tweet to @webmonkey, or send an e-mail to webmonkey@wired.com. Whatever you do, make sure your contact information is easily accessible. A valid e-mail address or URL is a must if you want to collect your prize.

Keep in mind, Google I/O is in San Francisco, and we’re only giving away a ticket to get you in — we’re not paying for flights or hotels, though we will pass along some free Webmonkey swag at the conference. And, OK, we’ll buy you a taco if you ask nice. Also, your ticket is nontransferable.

We’ll pick two winners in a few days, so enter early and don’t miss out.


View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese

Opera Updates 10.5 Beta for Windows, Adds Mac Support

Author: admin  //  Category: Uncategorized

Opera software has released the second beta for the company’s upcoming Opera 10.5 for Windows and the first beta for Mac users.

Mac users can grab the latest beta from the Opera website, the Windows beta 2 release remains, for now, an FTP download.

While the Opera web browser may not have the largest market share, it is the source off many browser innovations. Tabbed browsing got its start in Opera, and the browser was one of the first to broadly support emerging standards like HTML5 and CSS 3.

We took a detailed look at Opera 10.5 when the first beta was released for Windows and found that, aside from some interface design changes, the big news in this release is speed. This is largely due to the inclusion in this release of Opera’s new Carakan JavaScript engine, which boosts the browser’s performance on webapps considerably. Opera 10.5 is noticeably faster than its predecessors and even beat Firefox 3.6 and Google Chrome in our informal testing.

The second beta release is primarily a slew of bug fixes and doesn’t offer much in the way of new features. Still, if you’ve been enjoying the first beta, this release should make the experience a little more stable. And now Mac users can get into the party as well, though 10.5 beta 2 is unfortunately only available for Windows users. Mac users are only caught up as far as Opera 10.5 beta 1.

Also worth mentioning is that native HTML5 video is working in both Windows and Mac version of Opera 10.5 beta. Opera joins Firefox as the second browser to go with the Ogg Theora codec for native web video.

See Also:


View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese

Gmail Features Graduate From Labs to Big Leagues

Author: admin  //  Category: Uncategorized

Google has pushed six of its Gmail experiments out of Labs and into Gmail proper. Handy tools like the forgotten attachment detector, search auto-complete, vacation dates, custom label colors and in-mail previews of YouTube videos are all now standard Gmail features.

The features Google moved from Labs to Gmail feel a bit arbitrary — for example, why make YouTube previews standard, but ignore the Picasa, Flickr and Google Docs preview tools? But the Gmail blog says that the decisions were based “mainly on usage,” so presumably these are the six most popular features in Gmail Labs.

The good news is that the two search tools, search auto-complete and Go To Label make for a much-improved Gmail searching experience, particularly for those with a lot of labels to filter through. Go To Label adds a keyboard shortcut that lets you quickly jump to a label, just type “g l” (if you use Gmail’s keyboard shortcuts) and then type the first letters of the label you want to find. Search auto-complete will kick in and let you quickly jump to the label you’re after.

Sadly, some of Gmail Labs’ less popular — but still no doubt useful to some — features have been given the boot as part of this “upgrade.”

Among the features removed from Gmail Labs are the fixed-width font option, and Muzzle, a very useful add-on that hid your contacts’ chat status messages for a cleaner-looking sidebar. Also no longer available are e-mail addict, a time-limiting script that encouraged you to take a break from e-mail, as well as both random signature and location in signature, two features for automating your e-mail signatures.

If you happen to miss any of these tools, there’s a pretty good chance something similar exists for Greasemonkey. For example, if, like us, you happened to enjoy the Muzzle feature, there are some Greasemonkey scripts that bring Muzzle back to life (and one that hides Gmail Chat altogether).

With five projects booted out of Gmail Labs and six more moving on to be real Gmail features, it seems reasonable to think perhaps some new e-mail experiments might be arriving soon. So far, the Gmail teams hasn’t announced anything, but we’ll be sure to keep you posted.

See Also:


View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese

Can Google Save Free, Open Web Video With VP8?

Author: admin  //  Category: Uncategorized

Google will soon control the patents around the VP8 video codec, one possible alternative to H.264 for web video. And the leaders of the free software movement are banging their drum, urging the company to ditch those patents and offer the new video technology for free.

Shareholders of the video company On2 have approved an acquisition offer made by Google, which was initiated last year. On2 has developed the VP8 video codec, and currently holds the patents on it.

If Google were to release the newly-acquired VP8 as a free, open source video codec, it could significantly alter the web’s HTML5 video landscape. After all, Google owns YouTube and puts out the Chrome browser, so adoption would get a huge kick-start.

Free software advocates unhappy with the license-heavy and patent-encumbered video codecs like H.264 and the video quality and performance of free alternatives like Theora have long been hoping that Google would take the VP8 codec and release it as a free, open source savior for web video.

In fact, the Free Software Foundation (FSF) has published an open letter encouraging Google to do just that. However, even if Google does release VP8 for any and all to use, that’s no guarantee that the web’s open video problems will be solved.

Even with Google at its back, VP8 would face an uphill battle against H.264.

While the picture quality and compression of VP8 is generally believed to be superior to Ogg Theora, which is based on On2’s VP3, much of H.264’s appeal lies in hardware optimizations. For example, part of the reason H.264 works so well on your iPhone — offering smooth playback and little drain on the battery — is because the hardware is optimized for H.264.

So, even if Google does release VP8 into the wild, it would still be some time before it could possibly catch up with H.264 on the hardware level. A similar lack of widespread hardware optimization also plagues the Dirac codec, another potential alterative to H.264.

There are also some unanswered questions around the patent status of VP8. Since VP8 is currently closed source and proprietary code, it’s hard to say what patent claims it might be vulnerable to. The MPEG LA consortium (which oversees H.264) governs almost 2000 video encoding patents. The odds of anyone creating an entirely new way of encoding video that doesn’t somehow infringe on at least one of those patents is pretty slim.

In short, while we’d like to see Google do exactly what the FSF is suggesting, that doesn’t mean that such a move would magically solve the web’s open video conundrum.

See Also:


View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese

Vote for Your Favorite Firefox ‘Home Tab’ Design

Author: admin  //  Category: Uncategorized

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:


View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese

Developer Gives Internet Explorer the Gift of HTML5 Video

Author: admin  //  Category: Uncategorized

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).

Your browser does not support <video> tag

See Also:


View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese

Microsoft Debuts ‘Browser Choice Screen’ for Europe

Author: admin  //  Category: Uncategorized

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.


View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese

A Universal Solution for Rounded Corners in Your Designs

Author: admin  //  Category: Uncategorized

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:


View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese

Latest Update Makes JetPack Add-ons More Powerful

Author: admin  //  Category: Uncategorized

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:


View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese