Mozilla Projects Featured in Facebook's HTML5 Showcase

Facebook launched an HTML5 Showcase for developers today and I was excited to see that two projects that Mozilla has worked on in the past 9 months were featured: Mozilla's Mark Up (see my previous post) and Mozilla's Web O Wonder.
 

Although both of these projects have now run their course, its still really cool to see that them mentioned by outside initiatives, especially Facebook. 

For those of you interested in HTML5 demos, be sure to check out MDN's Demo Studio for our community built demos. For those of you interested in HTML5 Resources, MDN is definitely a great place to check out helpful documentation.
 

Mark Up : Beautiful Collaboration for the Open Web

I’m happy to announce the launch of Mozilla’s Mark Up, a 3D collaborative art project for the open Web. Get involved and make your “mark” for the world’s largest resource.

We Believe
Mark Up is a site created for you to make a “mark” and stand in support of these values for the open Web.

The Web belongs to us all. We all contribute to it every day, from maintaining our personal blogs to sending emails and watching videos, everything we do online contributes to the Web’s ecosystem. No one organization or company should control the choices you make, the content you create or the technology you build. These strong beliefs, along with the original Mozilla Manifesto, helped us to write the following “We Believe” statement and the core of the Mark Up site.

 













Make your “Mark”
You can use your mouse or track-pad to input your “mark” for the Web. What that “mark” is, however, is completely up to you. For example, you may decide to submit a doodle. Others may write a sentence of support. Others may sign their name, and others still may try and create something intricate. At the end of the day, it doesn’t matter what kind of mark is made—what matters is that you actively choose to make one. Watch the following screencast to learn more.  




Once you’ve submitted your mark, you’ll see it replay, along with a randomly generated unique URL. You can then use that URL to share it with your friends, giving them a direct link to your mark.  You are also able to browse everyone else’s marks with your mouse or arrow keys, browsing an ever-extending 3D line of solidarity.


Project Background
The original idea came from Evan Roth, co-founder of the Graffiti Research Lab, co- creator of Graffiti Markup Language, open source advocate and popular graffiti artist.  Evan worked closely with Mozilla and The Barbarian Group to conceptualize and finesse the idea through several rounds of creative and development.  



Technology
Mark Up uses open-source technology like Graffiti Markup Language (GML), Canvas and JavaScript, and is accessible with Chrome, IE9 and Firefox 4.  The use of GML was particularly key in the project because GML stores movement information on the X, Y and Z axes, recording details about individual strokes, varying pressure and speed.  This allows for rich expressions that can be replayed in the exact time it took to make the mark. Most importantly, all the code and GML data used on the site is available for everyone to access and improve on Github.
We’re excited to see what kinds of projects Mark Up inspires you to create!

Thanks
I want to thank the countless people who will contribute something to our collaborative art project for the open Web, and for all those who helped make this site and project a reality.  Make your mark, take a stand, and help spread the message about the importance of the open Web.

Firefox 4 - What is browser speed?

As a Firefox user, you may have seen this graph on the Mozilla website or on blogs:

But what do these graphs really mean?  How does "620 ms on Sunspider" effect me?   Like most users, I care more about how quickly I can load my email, play my favorite game and watch a video smoothly without interruption than what a benchmark tells me I should expect.   I care about my overall experience.

And so, when it comes to the concept of browser "Speed" it's only really fair to judge the browser on the entire experience--from how quickly it starts up, to page load speed, to how well online games and videos are rendered and played.  In Firefox 4, we've made improvements in all of these areas. 

Start-Up time - Performance from the moment you click on the Firefox icon on your desktop

When you want to get online, you want to get online.  Firefox 4 now starts pretty instantaneously for me --but as they say, your mileage may vary, depending on your system, and especially what add-ons you have installed  (and if you don't find Firefox 4 starts fast for you, you should head over to http://support.mozilla.com/ the Mozilla support community - it may be something on your computer).

Watch this video to see how Firefox 4 and 3.6 compare.

Page Load Speed - Getting where you need to go... fast

Firefox has made some changes to its JavaScript engine so that pages load faster--from Facebook, to recipes, to webmail. The details of this improvement gets a little too in the weeds, but you can think of JägerMonkey as the JS engine that specializes in short-cuts. So, take the analogy of a pastry chef: Firefox 3.6 has a novice pastry chef, who works very deliberately: he looks up each term ("whisk"), searches drawers for needed pots and pans, does the step, then puts everything away. Firefox 4 has JägerMonkey, an expert pastry chef who takes advantage of lots of time-saving shortcuts. She knows what all the terms mean and where the tools are, and keeps them out to be used again until she is done with that tool. The baking steps are the same, but prep and takedown are way faster.  There are obvious positives and negatives to each type of pastry chef--but what really matters here is that having this new JS engine means that Firefox 4 is more than 6 times faster than Firefox 3.6.

Responsiveness - More stability with less restarts

People sometimes don't realize that a lot of their favorite websites that showcase videos, chat, games and streaming music need up-to-date third party plugins in order for them to experience the content properly.  Users would see symptoms of this issue in older version of 3.6 with the browser freezing up or hanging, usually forcing the user to have to restart the browser. Now with Firefox 4, if one of these commonly-used pieces of technology crashes or freezes, it won't affect  the rest of Firefox. Instead, you can simply reload the page which will restart the plugin. This means that your day-to-day browsing is a ton more stable.  And if for some reason you aren't seeing videos or other media performing the way you would expect (black boxes on videos, instant chat feeling laggy) go to our Plugin Check page to make sure you're using the latest and greatest versions of the most popular plugins.  

Graphics Performance - Watch the videos and games you love at the speed you expect

Most computers have graphics cards that help you experience graphics heavy content like games and streaming video. With hardware acceleration, Firefox can use the built-in graphics card of the latest machines to render the games you play and videos you watch even faster. Click here to learn more about how to update your graphics drivers to make sure you're getting the most out of your hardware. 

Efficiency - Smarter, faster design

There are a few repetitive tasks that can make Firefox seem slower than it is.  In Firefox 4, some of these task have been streamlined to avoid unnecessary work.  For example, Mozilla used to host a home page for many users - now, that's actually hosted in the browser, so it doesn't need to be loaded over the Internet.  Also, when Firefox restores several tabs, it loads the one you're looking at first (because that is presumably the one you want!).  Firefox 4 also features App tabs, another interface feature that allows you to keep sites you check throughout the day--like your webmail or your social networking apps-- and give them an accessible, and permanent home in your browser. And with a feature like Switch-to-Tab, you can easily avoid opening the same page twice.

HTML5 - Pushing the boundaries of what's possible on the Web

If you'd use a browser from 10 years ago (and in fact, some people still do), you'd quickly notice that it isn't suited for the rich and complicated Web pages you see regularly today.  Firefox 4 offers support for more and more modern web technologies, allowing developers to create better and more exciting websites and content: increased performance doesn't just mean speed and stability, but also capability.  You can check out the amazing things Firefox 4 can do because of theseopen technologies in Mozilla's demo showcase.

So what does it all mean?  It means Firefox 4 is pretty damn impressive. Go here to download Firefox 4 now!

Special thanks to Patrick Finch and Dave Mandelin for all of their help!

Mozilla Presents: The Web O' Wonder

I’m excited to announce that we are launching the first phase of the Web O’ Wonder project today!



This is the first time, outside of the demos featured on Hacks, that Mozilla has created a site dedicated to showing off the latest in Web technologies. We will be releasing a few demos each week for the next several weeks, so be on the look out for new demos!  

Before you go in to explore (which I strongly encourage you do) you should know that Web O’ Wonder isn’t your typical demos site.

The demos are meant to push the boundaries of the Web you think you know.  The demos demonstrate technologies that most people have never seen before--but more importantly, you will see the browser do these amazing things without plugins!

Another important difference with this site is that Web O’Wonder is ‘demoing’ the Web, not just a specific browser. From the beginning, we wanted to make sure that all modern browsers would be able to view the demos as they were meant to be seen. For now, that means that Firefox 4 Beta+ and Chrome 9+ can see all the demos fully. Other browsers will be able to see the demos as their capabilities catch up.

I also want to call out that our WebGL demos (technology used to render 3D graphics) will only work on the most modern of hardware. If you run into difficulties, I recommend updating your graphics drivers. If that doesn’t help, we have created “screen-casts” of each demo. Click on “Watch the Video” to see the screen-cast.  


Some demos even include a “behind the scenes” with the creators of specific demos. For phase 1, we have profiled the “Remixing Reality” demo, so make sure to check it out!

You may also notice that the source-code for all the demos is hosted on GitHub when browsing the back of each demo card. We encourage the adventurous to go take a look, fork the code, and improve it. You can also submit your own demos through our “Submit a Demo” link.

To read a little bit more about this project, make sure to check out Paul Rouget’s blog post or the Mozilla blog.

Lastly, Web O’Wonder has been a labor of love for a lot of people for over several months. I want to thank the Mozilla community (you know who you are) for all the long hours and dedication and for all your help making this project a reality.

Plugins Check: Taking it to the next level

The Plugins Check started out back in October of last year as a way for us to help our fellow Firefox users protect themselves from vulnerable plugins (you can read more background here, here and here).

We started with 40K page views a day--we now regularly have more than 140K page views a day, making the Plugin Check page one of the most viewed Mozilla.com properties.

Since then, the Plugins Posse, (as we like to call ourselves) has been working hard to make this technology more accessible to other browser users.  We believe that anyone, regardless of what browser they're using, should be able to check and make sure that they're using the latest and safest versions of their plugins.

Thanks to the dedication and hard work of Austin King, Les Orchard, Stephen Donner, Dan Veditz,  and Michael Coates, I'm happy to announce that the Plugin Check is now compatible with the most recent version of "modern browsers".  In other, more understandable words, the Plugin Check will now check your installed plugins, regardless of whether you use the latest versions of IE8+, Chrome 4+, Safari 4+ or Opera 10.5+ to browse the Web.

Cool, huh? 

One caveat is that the page does not check each and every last plugin. We built the Plugin Check to scan and recognize the most popular plugins. For example: Flash, Silverlight, Java and Quicktime, to name a few. (Read more about what browsers and plugins we support here.)

Share this link with your friends, family, (even your non-Firefox using friends--we won't tell ;) and you can help make the Web a safer, better experience for everyone!

Taking the Getting Started page in a new direction

The "Getting Started" page on Mozilla.com is one of our most viewed Web pages, with an average of 525K page views per day (following the download.html page and what's new page).




According to Ken Kovash's Blog of Metrics post from February of last year, more than 90% of traffic to this page comes from the embedded link in the bookmark toolbar that we've pre-loaded onto every version of Firefox.




The remaining 10% of visitors seem to come from a link on the First Run Page.

From Ken's post, we know that a lot of the people that hit this page come to it by accidentally hitting the link on the toolbar. We also know that even if they are coming to the page on purpose, they aren't finding what they were looking for, with 95% of traffic bouncing right off the page. From this information, I can basically make a few conclusions:

1) The Getting Started Page is one of the biggest touch points we have, inside or outside of Mozilla.com.
2) A lot of our users are looking for specific content on the Getting Started page.
3) Most of those users aren't finding whatever they are looking for.

How do we fix this?

I think we have a few options:

- Kill the Getting Started page.
I just don't think this is a viable option. We have so few touch points with our current users as it is. Outside of Mozilla.com, we have access to the snippets on the Google Start page, the First Run page, the What's New page, the Getting Started page and our social media outlets (Twitter and Facebook). I agree that we can't leave the page the way it is, but getting rid of the page doesn't solve the problem. If anything, it makes the problem much worse by leaving us with one less channel to communicate.

-Re-brand the "Getting Started" page
We could definitely look into renaming this page and calling it something else...like maybe the "Firefox Connect" page. The only problem is that we still don't know what kind of content these 500K users are looking for. Obviously, the "Getting Started" title resounds with some of these users, or else, they wouldn't be clicking on it. My theory is that they hit the page expecting to find information about using Firefox features or setting up Firefox and stumble on a page in which we recommend certain websites or tools. Users must be looking for something to do with "Getting Started" and re-branding the page on a whim without knowing what people are looking for will lead us right back into the situation we're in now.

-Test the content on the Getting Started page
I think this is by far the best option. This entails creating new content for a variety of audiences, and testing them on a percentage of the population to see what content these users are looking for. The design that has the lowest bounce rate will give us insight into what kind of content these users are looking for.


Now for my idea....
One idea I have is testing the content found on the First Run page. As it is now, people get to the First Run page immediately after downloading Firefox for the first time.





Going from my own experience, people are not very patient after downloading an application or program from the Internet. It's all about clicking through the introductory tabs and information and getting to the actual usage of the product. And once they realize they don't understand something or they get confused, then they look for more information. And this is where everything gets *interesting*. As things stand now, the First Run page is not a page that you can navigate to unless you know the exact url. We don't promote it anywhere. It's just the page that comes up right after download. So what happens if you're impatient and just want to start playing with the product after downloading? You lose the opportunity to explore the content on this page. And even if one of our users decide to explore some of the content on this page and say, decide to be a Facebook fan, they have no way to return back to the First Run page. Once you leave the page, that's it. Finito. Game over.

So what makes the most sense to me is to at least try putting this content on the Getting Started page. More than that, we also have to promote the page to all of our New Users and how to find the page. Doing so will give this page the best opportunity to offer all of our users a place to go to find out the basics about Firefox in a consumer friendly, visual way.

We definitely need to get the testing process started as soon as possible. Please feel free to let me know if you have other ideas for content testing.

So after reading all of that...

Here's the Summary:
1) The Getting Started page is very important. The fact that it's linked on the bookmarks bar is very important. It's our only "constant" touch point with our users
2) The GS page, as it stands, is not offering people the content they want.
3) Testing Content on this page is the best way to figure out what are 500K users a day are looking for,
4) The First Run page design, within the site, not in layout, is broken. As is the What's New page. Neither are easy to find/navigate to and although the information they offer is useful, we need to find a permanent place for people to find this information, preferably, within the product. People should be able to find this information whenever they want it, not just immediately after upgrading or downloading.
5) Maybe we can put the content of the First Run page on the Getting Started page? Maybe we can find other content that will please our users?

Feel free to contact me at lmesa@mozilla.com if you have any other ideas or suggestions.

What would you like to see on the Getting Started page?

A/B Testing: First Run Page

One of my new responsibilities as I work with John Slater and the Creative Marketing team on Mozilla.com is to test, improve and optimize our web pages. This joint project with Blake Cutler and the Metrics team is one of many in the A/B testing pipeline.

One of the first pages we're working on is the First Run page.



The First Run page is a huge page for us for two reasons:

1) It's our first impression.
The First Run page is the first page that loads immediately after Firefox is launched for the first time. Everyone who downloads Firefox sees this page, and it's our first opportunity to visually (and verbally) introduce ourselves to a new user.

2) It's one of our only touch points.
We have very few ways to get in touch with our users. The First Run page is the first time we can make contact with a Firefox user to share information, answer questions and differentiate ourselves from other browsers outside from the normal product interactions.

We are currently testing three different designs inspired by some of the most popular sites on the Web:

Design A:


This is the "Task" oriented design, with expandable tabs that open to show more content. This page was inspired by Southwest Airlines.


Design B:



This is the "Tab" oriented design, allowing users to click on tabs to see relevant information. This page was inspired by Mint.com.

Design C:



This is the "Process" oriented page, where users can go through steps to "get started". This page was inspired by the Skype and Digg sign-up processes.

These are just three of the different rough layout concepts that The Royal Order came up with during the brainstorm process to try and improve engagement*. It will take another month or so to finish the initial testing, but there will still be plenty to do! The winning design will need to jump through many more hoops as we test variations of the design to find the best or most "optimized" page before it will be implemented on Mozilla.com.

Big Thanks Blake Cutler and the Metrics team, Steven Garrity, Stephen Donner and the WebQA team, The Royal Order for all their help on this project.

Thoughts? What do you think should go on the First Run page?


[*Improved engagement for this particular page means more clicks on our CTAs (Personas and Add-ons), longer times spent on the page, and lower bounce rates. ]