OSX-Ordered Buttons

If you've used both Windows and OSX, you've probably noticed that the standard button ordering is different.  For a simple confirm dialog, Windows typically renders the buttons centered at the bottom of the dialog, with the 'OK' button to the left of the 'Cancel' button.  On OSX, the buttons are rendered to the right at the bottom of the dialog, with the 'OK' button to the right of the 'Cancel' button.  This corresponds to the inversion of window minimize/maximize/close buttons as well (Windows to the top right and OSX to the top left).

If you're building a web app, you're necessarily trying to serve all your customers with a single interface, but you can still give them a familiar user experience with a minimum of fuss.  Not only can you, but you should.  The best part is that you can do much of it purely with CSS and JS, without having to touch your serverside at all.

Here's a jQuery snippet that deals with the button order problem:

jQuery(function() {
  var c = jQuery(".osx input[type=submit]").parent()
  c.css("text-align", "right")
    .children().each(function() {
      c.prepend(" ").prepend(jQuery(this).remove())
  })
})

As you can see I simply grab any element directly containing a submit button, invert the order of it's children, and right align them.  Note the ".osx" in there – that's really important.  Somewhere else (maybe JS, maybe serverside, whatever) the OS of the user will be checked and the "osx" class will be added to the HTML element if appropriate, allowing me to target only OSX visitors with custom stuff.  You could just as easily do it in the other direction (emit HTML w/ OSX ordering and flip it around to Windows ordering).

Here's some CSS to style buttons a little differently:

.osx input[type=submit] {
  border: 1px solid #2b269a;
  background-image: url(osx-button-bg.png);
  border-radius: 6px;
  font-family: Verdana;
}

These are trivial examples, but they illustrates just how simple it is to help make your users feel more at home.  Foisting an inconsistent user experience on your application's users does them a disservice.  People are unfortunately used to having to think extra hard when they cross over into a browser, but there's no reason to make them pay that price.