Mozilla

Gaia, Mozilla's user interface for Boot to Gecko – all web technologies

On Monday we wrote about Boot to Gecko and its announcements and discussing how the Web is the Platform. Today we’ll look at Gaia, Mozilla’s user interface for Boot to Gecko, which is an extension of that.

Boot to Gecko is the core

First, let’s start by clarifying that Boot to Gecko is the low-level workings of the phone, exposing a number of APIs. On top of that you will be able to have any interface layer you want, and already Telefonica have developed one and Mozilla has Gaia. This makes it a very powerful and versatile solution, and we look forward to a lot of innovative ideas!

A look at Gaia

Yesterday, Josh Carpenter, who is the Lead Designer for Boot to Gecko, posted a number of screenshots for how the Gaia interface looks like. All the screenshots are of Gaia actually in action, implemented today! Here are a few examples:

In the words of Josh:

Performance and responsiveness are crucial to quality mobile user experience. The immediacy of touch input demands equal immediacy in device response. We’re just not as patient as we used to be. In response (and full agreement), the Boot to Gecko project has made performance a fundamental project priority, and our engineers have already achieved impressive results. On even modest hardware we’re seeing competitive boot times, hardware accelerated CSS animation, smooth video playback with transparent overlays, prioritized responsiveness, and more. We are fully committed to empowering an explosion of Web-based UX creativity.

It’s all HTML5, CSS and JavaScript!

What makes Gaia extra interesting is that it is all developed in HTML5, CSS and JavaScript, and you can debug and view the code directly on the device or in a web browser!

This means that the possibilities of tweaking the user experience, in any implementation, but also just for yourself, is a viable option. It’s your device, and you deserve the experience you want!

Gaia is all open!

The wonderful thing about Gaia is that it is developed completely in the open! All the Gaia code is available on GitHub and you can check it out and test or contribute right now! Because, remember? It’s all HTML5, CSS and JavaScript, and you can reuse your existing skills in a new exciting environment!

44 comments

Comments are now closed.

  1. Tomer Cohen wrote on February 29th, 2012 at 4:44 am:

    Since it’s whole HTML5-based, why not to put it online? I mean that we just need to store it on a browser-accessibly URL and not just version control repository, and than every modern web browser will be able to experience some of Gaia apps features. It is possible even to store it on github itself.

    1. Robert Nyman wrote on February 29th, 2012 at 4:51 am:

      There’s nothing that really prevents us from doing that. A factor, however, is that a number of the features in Gaia are accessing and using APIs that are only available on a mobile phone which wouldn’t work on regular computers.

      But for games and others apps, sure!

      It could be quite interesting in the longer term to offer Gaia for mobile web browsers to get that experience on any device!

      1. foo wrote on March 4th, 2012 at 4:43 am:

        It would be very cool to see a live demo in the browser! We would be able to open the url in our current smartphones and see how Gaia would look like.

    2. Ryan wrote on March 21st, 2012 at 3:44 pm:

      HTML5 is just a another way of marking up documents and interfaces. Just because it *can* and traditionally *has* been accessible via the web doesn’t mean that it makes any sense to do so with everything. People seem to have way to many preconceptions about the way things are supposed to be. Putting a phone interface on the web is just confusing and pointless and serves absolutely no sane purpose.

      1. Robert Nyman wrote on March 21st, 2012 at 6:28 pm:

        HTML5 has become a collection word for a number of HTML improvements and JavaScript APIs, and includes many things. When it comes to putting it on the web, I’m sure it could prove of some value to users (although, some phone-specific bits wouldn’t work).

  2. shirokoff wrote on February 29th, 2012 at 4:51 am:

    Hi. Is there any way you could build boot image for openmoko frerunner? I’m not really good with building such stuff, but I definitely want to play with the HTML part of the project?

    1. Robert Nyman wrote on February 29th, 2012 at 4:53 am:

      I hope boot images will be offered in the future, but currently we don’t have any of that available. When it comes to Gaia, though, you can get the code from GitHub and run it in any web browser (where naturally the phone parts won’t work)

  3. Andrei wrote on February 29th, 2012 at 6:15 am:

    Excellent job on B2G, where i can get that lovely image of the gecko embracing the world in high resolution?

    1. Robert Nyman wrote on February 29th, 2012 at 6:26 am:

      Thank you!
      All logos etc that we have are available in the brand tookit.

    2. Bradley wrote on July 4th, 2012 at 6:37 pm:

      It’s online: paulrouget.com/gaia

      1. Robert Nyman wrote on July 5th, 2012 at 12:21 am:

        Although that version doesn’t seem to be up to date.

  4. Matjaž Horvat wrote on February 29th, 2012 at 10:17 am:

    Tomer:
    http://paulrouget.com/gaia/

    Andrei:
    The name of the B2G will probably change. If this is the logo you’re talking about, I believe it’s unoficial:
    http://www.bangstyle.com/2012/02/mozilla-challenge-smartphone-developers/

    1. Robert Nyman wrote on March 1st, 2012 at 4:18 am:

      That link to Gaia is interesting to test. However, I hope we can have an officially hosted version in the future.

      And yes, that logo is not done by us, as far as I know.

  5. Patrick wrote on February 29th, 2012 at 12:57 pm:

    I am not sure about all the legal strings, there or not, but I am developing a HTML5 web product and thinking of using some of your code or most of it. What legal issues should I be concerned with or is it free to use? Do I need to contact and strike a deal with you in some way? Please help. Thank you.

    1. Robert Nyman wrote on March 1st, 2012 at 4:34 am:

      It’s a great question. I will look into it and hopefully have a good reply for you.

    2. Robert Nyman wrote on March 1st, 2012 at 5:05 am:

      The license for Gaia is BSD like. We will add a license soon to the repository as well.

      1. Patrick wrote on March 1st, 2012 at 5:26 am:

        Thanks a lot Robert for the great help. I am still deciding on what features to use and how they run and this obviously gives me an idea of what to expect. I will keep you updated on that in the future. Thanks again.

        1. Robert Nyman wrote on March 1st, 2012 at 5:35 am:

          Please do, and good luck!
          And if you come up with something great, feel free to feed it back into Gaia as well!

  6. Tiago wrote on February 29th, 2012 at 3:13 pm:

    I have a Samsung Wave 525, and I would rather use this over the default Bada 1.1, as long as there’s no forced integration/account madness.

    1. Robert Nyman wrote on March 1st, 2012 at 4:19 am:

      The idea is to have a completely open phone without that.

  7. thanyawzinmin wrote on February 29th, 2012 at 10:17 pm:

    That make me more interest on Cross-Mobile Interface developing :D.

    1. Robert Nyman wrote on March 1st, 2012 at 4:19 am:

      Good to hear! Exciting, right? :-)

  8. AndrewNoNumbers wrote on March 1st, 2012 at 4:29 pm:

    Like it! It’s not what I would picture with the name Gaia, but the UI is definitely nice.

    Much more complete than Android.
    Less gaudy than iOS.
    More traditional than WP7.

    1. Robert Nyman wrote on March 1st, 2012 at 4:35 pm:

      Glad to hear you like it!

  9. Eugene wrote on March 2nd, 2012 at 5:32 am:

    In my opinion the interface is popsy and boring. It’s like someone just wanted to make anything that could possibly work in several days (mimic the “features” others have with aestetically questionable “free CSS3-buttons”). It seems to lack underlying structure, grand idea, Vision. It’s secondary to iOs and WebOS, lacking the visual laconism and originality of the former and innovative design decisions (that seem obvious in retrospective) of the latter.
    I’m not a native English speaker so forgive me if my remark sounds offensive. But I really do beleive in Open technologies and Open Future for all of us. So I feel I just need to say that “…the Emperror hasn’t got anything on”. I am not a designer and cannot propose anything better, but I wouldn’t pay for what you are showing here.

    1. Robert Nyman wrote on March 2nd, 2012 at 5:42 am:

      When you announce something new, there is naturally a lot of different opinions, both good and bad. My advise is to test something in action before deciding if it’s good or bad.

      On the topic of open technologies: Boot to Gecko is the core, and you can adapt or build your own user interface on top of it, or customize everything – just because it’s all open and done in HTML5, CSS and JavaScript! My bet is that we will see a number of different user interfaces for Boot to Gecko, and you will be able to choose the one you like best.

    2. Patrick wrote on March 2nd, 2012 at 6:10 am:

      I’m not sure a lot of people will agree with you on that. I have personally asked about 40 people what they think about B2G and as well its UI and the response has been just positive. I don’t know if you have tried it first hand, I haven’t to be honest but I think Josh and his team did a great job here and I cant wait to use it.

      1. Robert Nyman wrote on March 2nd, 2012 at 6:13 am:

        I’ve heard mostly positive things as well, but naturally there will be different opinions. I think the UI is very good and I look forward to it evolving!

  10. Andre Alves Garzia wrote on March 2nd, 2012 at 6:31 pm:

    Gaia and Boot 2 Gecko are growing to be very interesting projects (this is an euphemism, I actually refresh the blog every couple hours waiting for more news…). This comment is not just about telling how great I think this is but I have an “enhancement proposal” that I think would help a lot of devs out there.

    Opera has an Opera Mobile emulator available. It is not a virtual machine emulator like webOS emulator, iOS Simulator or that Android CPU eater. It is basically their mobile browser with its mobile browser APIs running on the desktop. When it starts it asks what resolution and device you want to run and resizes to that. It is really usefull and helps us visualize and develop for the (future?) mobile web. It would be really great is Mozilla could ship something similar. A version of Firefox Mobile with webAPI routines that returned “test” results for the mobile apis such as power level checks and so on. It would launch with the correct dimensions for a phone of your choice based on templates. I think it can probably be achieved with XULRunner and some glue stuff in it. Heck, I would try to build this if I had some little more knowledge…

    Anyway, Thanks very much for the hard work!

    1. Robert Nyman wrote on March 5th, 2012 at 6:08 am:

      First, thank you for the kind words!

      For now, you can test Gaia in a web browser, and the general idea is that the rendering engine should be the same. But like you say, it would be good to test API and similar.

      We are discussing a number of things to do with it to make it easier and better for developers, and I hope we can offers something like that one day!

      1. Tomer Cohen wrote on March 6th, 2012 at 3:02 pm:

        I’d suggest tweaking the lock screen on Paul’s site to include some information instead of just an image. For example letting people know this is not a proof of concept but actually a working environment running in a limited functionality inside your browser.

        1. Robert Nyman wrote on March 7th, 2012 at 1:20 am:

          I’ll forward that to Paul. Generally, though, I believe he just wanted a copy of the current content in the Gaia repository, and in the future, it might be put together more as a working example.

          1. Tomer wrote on March 7th, 2012 at 1:30 am:

            I’d prefer to have it in the source report itself, I order to inform people that it doesn’t intended run well on desktops.

          2. Robert Nyman wrote on March 7th, 2012 at 1:38 am:

            At this time, though, it’s not even meant to work completely on desktops. It’s one of the user interfaces for Boot to Gecko, and only made available as-is for testing in desktop web browsers as well.

            If you believe this should be changed, please file an issue on Gaia.

  11. Greg Cutler wrote on March 8th, 2012 at 10:20 am:

    Robert,
    The second screen shot didn’t work for me. The test URL didn’t display correctly in Safari.

    From what I can tell at this point it looks beautiful. I would join your team of designers any day. Great job!

    1. Robert Nyman wrote on March 9th, 2012 at 1:30 am:

      Thanks!
      Seems like Josh updated with a new image. Fixed the link in the post so it works now!

      And thank you, glad you like it!

  12. Nikhil wrote on April 4th, 2012 at 4:10 am:

    I reckon it’d be awesome to link to a live build (http://paulrouget.com/gaia/) within the article and other prominent locations.
    People will easily understand what you are working towards if they see a current build ASAP.

    Currently building ‘Mozilla Blade’ as I like to call it, since it’s on the cutting edge ;)
    Really pumped for this to succeed!

    1. Robert Nyman wrote on April 4th, 2012 at 5:47 am:

      Paul didn’t have that version when I initially wrote the blog post. Also, I’d rather prefer that people check out the code and look at it, since I can’t guarantee that Paul will continue to have it there/keep it constantly updated.

      In the long run, though, I hope we will have a more official place where people can test it.

      And glad you are excited – so are we! :-)

  13. Moritz wrote on April 20th, 2012 at 6:22 am:

    Hi,

    ist there anywhere a ios image to run it in a virtual machine, either in VMWare or in VirtualBOx?

    And on what phones does it run? Also on very old phones?

    1. Robert Nyman wrote on April 21st, 2012 at 9:47 am:

      No virtual machines right now, but you can take a closer look at Hacking Gaia.

      Gaia is HTML5, CSS and JavaScript so it runs on every web browser. Boot to Gecko in itself currently runs on Samsung S2 and Nexus S.

  14. AMA Elecs Shop wrote on July 3rd, 2012 at 9:49 am:

    It would be very cool to see a live demo in the browser! We would be able to open the url in our current smartphones and see how Gaia would look like.

    1. Robert Nyman wrote on July 3rd, 2012 at 12:50 pm:

      Best option is to follow the instructions in Hacking Gaia. Then you can test and also alter things locally.

  15. Marko wrote on July 12th, 2012 at 7:50 pm:

    I tried out the emulator, It looks very promising. I’m meh about the UI but would gladly switch from the current walled garden OSes to this on principal alone. I was just wondering if onscreen buttons will make it to the UI for another option for device manufactures? I think it would be cheaper and easier for the manufactures if they didn’t have to making holes in the screens for hardware buttons or worry about capacitive buttons if they didn’t want to. That will probably help them increase their profit margins do to less cost of manufacturing. Also since most of the manufactures make android phones, and android phones are slowly starting to remove the buttons, they can use the economies and use the same screens (and flashing Firefox to future android phone would be easier :)).

    Also I saw a supposed prototype made by Qualcomm for Telefonica which had the standard 4 capacitive buttons like on android 2.3 phones and below. Are those button a requirement for Firefox OS? Those android buttons where the bane of my existence. The only button that I feel is necessary is the home button unless you want to replace the button with a swipe gesture which takes you home, however it wont be very intuitive to consumers.

    -The menu button sometimes did something, sometimes it didn’t and people would forget it exists.
    -The back key would exit the app even if you didn’t want it to.
    -The search key was unnecessary and very rarely used for the majority of users.

    These buttons should all be in the app your using if they are necessary.

    Sorry for the long comment, I just really want Firefox OS to take off! I’m just concerned over how service providers will bastardize it and make it less intuitive like Telefonica’s prototype hardware.

    1. Robert Nyman wrote on July 31st, 2012 at 8:36 am:

      With the UI, the idea and hope is that you will be able to customize it in any fashion, since it is HTML5, CSS and JavaScript controlling it.

      When it comes to buttons, I don’t believe that hardware buttons will specifically be necessary, but at this time and with the first models, they have chosen to go with this approach.

      I do hope it will be as open and easy as possible to tweak it into your liking!

Comments are closed for this article.