We have just updated our site!

We’ve been work­ing on this new ver­sion for about 9 months and now it’s here. The URL hasn’t changed, but the site has!

Let me show you what’s new…

Before/After

The site used to be designed for 800×600 screens, it is now for 1024×[anything], so the UI is wider and not as high as it used to be.

First thing you can notice: the blocks hold­ing the thumb­nails have been through a diet! Many UI ele­ments have been removed for cleaner and sim­pler nav­i­ga­tion. Here’s a quick comparison:

All of the but­tons have been removed but the func­tion­al­i­ties are still here, they’ve just moved to a more log­i­cal place. Also, the cross that indi­cated that you where not logged and had only par­tial access to the sim­u­la­tion is not here any­more. This lim­i­ta­tion is now shown with semi-transparency of the thumb­nail and its holder (not present in this screenshot).

The login form (at the top of every page) is now hid­den and acces­si­ble via a click on the “Log in” link. No extra click, though: your cur­sor will jump in the field automatically.

You now have a direct access to our tree at the bot­tom left of the home­page, faster! You can also search, with suggestions!

We worked on icons to illus­trate the header’s menu items.

On to the browse page!

Not much to say here, sim­pler, clearer, nicer. The RSS feed is clearly shown and you can sub­scribe to our newslet­ter, this is new!

We used to have a 3×3 grid of thumb­nails, we now have a 5×2 one. That’s less pages to browse in some cases!

The media page

It used to be a popup… Nasty. We all decided to avoid it and go for a reg­u­lar page.

The big new thing here are the price but­tons. We used to be quite shy about our com­mer­cial activ­ity. We now fully admit it, which is a good thing!

You can notice the “age bar”, allow­ing you to know who the sim­u­la­tion is intended for. Another new thing is the sug­gestor: sim­ply click on it and you’ll be sug­gested sim­i­lar simulations.

Again, icons. In the tool box:

Every other page has changed, but I’ll let you go and see that on your own! The biggest reworks have been the sub­scrip­tion or the “about us”, if you’re interested.

Our sim­u­la­tions

Not only did we change the UI of the site, we also redesigned our simulations!

Switch­ing from a dual color theme (blue for light sim­u­la­tions, orange for dark ones) to a sin­gle an more uni­ver­sal gray one. Every com­po­nent has been rethinked, here’s what what they look like:

A tech­ni­cal point of view

Of course to end up with this UI and func­tion­al­i­ties, you need some lines of code. Here’s what lies behind the site you see when browsing:

  • PHP5: my favorite back end lan­guage, in its last sta­ble version,
  • Post­greSQL: I’ve always pre­ferred it to its more famous friend MySQL,
  • CSS, lots of them. With Eric Meyer’s reset,
  • JavaScript, based on the nicest lib: MooTools (for Ajax and visual effects),
  • swfob­ject, to embed Flash files the right way,
  • TwinHelix’s PNG fix. Because we love 24 bits trans­parency but some browsers don’t.
  • A pimped out ver­sion of the PHP Lay­ers Menu Sys­tem, for the tree,
  • AMFPHP, for Flash remot­ing in PHP,
  • Action­Script 3 and Flash, to make things move!

And to write those lines of code, you’d bet­ter have good tools! Here’s what we used:

Of course we also used Illus­tra­tor and Pho­to­shop, for the graphics.

Clap, clap!

Heads up to the team, I think (and hope) we did a great job!

As always, if you’ve got feed­back please drop it there or on the site’s ded­i­cated page. We love feedback.