A number of users have reported a conflict between the latest version of WebMynd (0.9.1) which was released on addons.mozilla.org on Tuesday and various toolbars. The main symptom is that custom buttons from other addons that are usually displayed in the urlbar disappear after install.

We’ve now fixed this problem and you can download a fixed version of  0.9.1.1 by clicking here.

Prior versions of WebMynd don’t have this issue. We will release WebMynd 0.9.2 with this fix included on addons.mozilla.org next week after our testing is complete. That release will also include great new sharing features and performance improvements as well as bug fixes.

For the technically minded, the problem was caused by including the jquery 1.3.2 library in our addon overlay xul file. For some reason this causes toolbar buttons to disappear. jquery 1.6.2 works fine and we found the fix to allow us to continue using jquery 1.3.2 here:

http://chrispederick.com/forums/viewtopic.php?id=2374

As the RedesignGoogle gallery has continued to grow, we’ve been working on ways to make our tools more flexible for designers and more compelling for users. So far, RedesignGoogle has only allowed designers to modify the style sheet of the Google results page, but we’re taking that a huge step further: designers can now embed JavaScript in the page, and the truly excellent jQuery library is included in the add-on. Rather than simply reskinning Google results, designers now have the power to remake every aspect of the user experience, and we’re excited about the possibilities this opens up.

Below are a couple of simple examples (and code snippets) of what Google redesigners can create with jQuery. But first, a quick note about the RedesignGoogle competition: over the last couple of months, we’ve been running a contest to find the best user-submitted design and award the designer a MacBook Air. To make sure entrants get to make the most of the new features, we’re extending the contest deadline to January 1, 2010, and we’ll announce the winner two weeks later. You can read the full rules here.

Infinite Scroll

It makes a lot of sense for Google to only load ten results at a time — the fewer results are loaded, the faster your search — but there’s not a whole lot of sense to the way they force you to click through results pages. More than anything, it’s a vestige of last-century web design that no one’s bothered to change. What if instead of needing to click “next” to go to a separate second page results, the second group of ten results simply loaded in place when you scrolled down to the bottom of the page?

First, you need some code to detect when the user has reached the bottom, as well as a div to load the new results into:

$(document).ready(function() {
  $(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
      loadMore();
    }
  });

  start = 0;

  $('<div id="tempresults" class="moreloaded"></div>').insertAfter("#res");
});

The code above calls the loadMore() function when the user scrolls to the bottom of the page. It also appends a new div to the results section, and initializes a global variable, “start”, which will come into play later on.

Here’s what loadMore() looks like:

function loadMore() {
  start += 10;
  var nextlink = $("#nav tr td:last a").attr('href');
  var currenturl = window.location;
  url = currenturl + '&start=' + start;
  $("#tempresults").load(url + ' #res');
  $("#tempresults").attr('id', 'oldtemp');
  $('<div id="tempresults" class="moreloaded"></div>').insertAfter(".moreloaded:last");
}

The function begins by incrementing the “start” variable by 10; the variable signifies how many results have been loaded already. The results are loaded into the tempresults div via an AJAX request, and a new tempresults div is created.

You can see infinite scroll in action by installing this design.

Find As You Type

We thought it would be cool if Google updated its results as you type, the same way that, say, iTunes does. This design will do exactly that. It works by binding two functions to the “focus” and “keypress” events on the search field:

$(".lst").bind("focus", function(e){
  var currentTime = new Date();
  thisKeystroke = currentTime.getTime();
});

$(".lst").bind("keypress", function(e){
  var currentTime = new Date();
  lastKeystroke = thisKeystroke;
  thisKeystroke = currentTime.getTime();
  timeSinceLast = thisKeystroke - lastKeystroke;
  if (timeSinceLast < 600 && searchEvent != null) {
    clearTimeout(searchEvent);
  }
  searchEvent = setTimeout("updateResults();", 600);
});

Basically, every time you enter or delete a character in the search field, the search function, updateResults(), will be told to execute in 600 milliseconds. If you press another key before the search executes, the search is canceled and a new search is scheduled. We need this to make sure we don’t send too many search requests — sending lots of requests per second will make Google think you’re an automated search robot, and it’ll temporarily shut off service.

updateResults() is pretty simple:

function updateResults() {
  var url = '/search?' + $('#tsf').serialize();
  $.get(
    url,
    {},
    function(data, textStatus) {
      $("#res").replaceWith($("#res", data));
    }
  );
}

This function uses jQuery’s built-in AJAX and form serialization tools to execute a search and insert the new results into the page.

Hopefully these examples demonstrate how easy it is to make major changes to Google’s search interaction with just a few lines of code. We’re really looking forward to seeing what the community can come up with. If you need help with the details, check out the jQuery docs. Happy coding!

One of the most common bits of feedback we’ve heard from our users is that the WebMynd add-on makes search results slower to load. Nothing is more important to search than speed,  and this has been a source of irritation for us too. So it was the first thing we set out to improve with the new version of the Firefox add-on.

We’ve totally revamped the search sidebar and moved the customizable search tools to a separate pane in your browser:

The sidebar pane automatically opens when you do a search, and hides itself when you navigate away from the search results page. Google will now be as lightning-quick as always, and your WebMynd tools will load noticeably faster as well.

Install WebMynd 0.9.1 to try out the new sidebar, and be sure to let us know what you think.

The rules for the RedesignGoogle competition are now up. You can read them here.

One of our key goals at WebMynd is to give you more control over your search experience. Our first steps toward that were to outfit our add-on with our own set of customizable search interfaces. Now we’re excited to announce our next step: RedesignGoogle.

RedesignGoogle lets you completely customize the look of Google Search by installing user-submitted designs from an online gallery. A stripped-down version of the WebMynd add-on applies your installed stylesheet whenever you’re on a Google search results page. (You can enable WebMynd’s other features if you like, but they’re turned off by default.) Currently, RedesignGoogle is available for Firefox, and we’ll be releasing versions of the add-on for other browsers soon.

If you’re a designer, this is your chance to revamp the most widely used service on the web. Anything that can be manipulating using CSS can be changed with RedesignGoogle; here are a couple of examples of what’s possible. We offer a web-based CSS editor for creating and previewing your designs, but you’re free to use your preferred tools — just paste your stylesheet into the editor when you’re ready to apply it to your own searches and publish it to the Gallery.

Most exciting of all: we’ll be holding a competition to find the best user-submitted designs. The winner will receive a new MacBook Air; runners-up will get something cool too. Designs will be judged by Paul Graham, the WebMynd team, and a few others TBA. Stay tuned for more details and official rules.

Available in the new 0.9 release of the WebMynd Firefox add-on are two new experimental search interfaces, Manhattan and Osaka:

These new interfaces were designed based on some of the feedback we received on our first experimental interface, Phoenix. In contrast to Phoenix, which minimizes visual clutter by only presenting the top three results from each of your selected sources on the main screen, Manhattan and Osaka display all your results within scrollable frames in a magazine-style layout. The idea is to let you browse the most possible information with the least possible interaction.

We’re just getting started with these features, and there’s a lot of work yet to be done. But we hope that by offering new kinds of search experiences we can help improve one of the most important (and often most frustrating) aspects of using the web.

Install WebMynd 0.9 to try our new interfaces on your own searches.

We’ve been working on some exciting new features over the last few weeks. One of them is Phoenix, an experimental new search interface that offers the functionality of Google and the WebMynd sidebar with a clean and engaging look and feel.

Phoenix is the first of several new interfaces we’re working on. Our hope is that each will offer a unique experience, so that you can choose the one that’s best suited to the way you search. We think Google’s interface has grown stale from a lack of innovation and there’s a wide range of design possibilities that have yet to be explored. Our lead designer, Imran Zaidi, has written an article outlining the thinking behind Phoenix and its underlying design framework.

Phoenix is included in the new 0.8.3 release of the WebMynd extension for Firefox.