HTML iOS Notifications - UX Lab 007
I thought I’d build a facsimile iOS notification plugin for shits and giggles. It’s pretty much the exact opposite of a good UX, but it’s more of a proof of concept than anything else.
- It’s 100% wide on standard and retina iPhones and 60% on desktop and iPad resolutions.
- It has built in retina icon handling.
- Doesn’t break middle mouse clicks when using a URL.
- Passes JSHint.
- It works with Chrome, Safari, Firefox and I believe Opera, but I haven’t tested.
Documentation and options are available on the demo page.
It also has its own GitHub repository.
Chosen - a javascript select thingy
I’ve been using the Select Menu plugin by Filament Group, but this looks like it’s possibly better. The reason I like the Filament Group one so much is it’s adherence to jQuery UI practices in classing etc and it’s full ARIA compliance.
Chosen is a javsacript plug-in makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.
Project page on GitHub
Aristo 1.2 Released
The latest release of Aristo closes some long term issues, as well as those introduced in my last commit. User comments expressed a need for styled inputs and text areas. My last commit included my implementation of these, but the selectors were too generic and were not sandboxed to any particular class. This has been recitified, and you will now need to place the “ui-form” class on a root element to inherit the styles.
- Closed duplicate bugs for submit button styling. This was a major pain and I’ve had to use browser specific fixes. Submit buttons should now look the same as other buttons in IE8, IE9, Webkit, Firefox and Opera.
- Some CSS3 snippets only had vendor prefixes (-moz and -webkit), and were not displayed in Opera. This led to some pretty inconsistent visual effects.
- Sandboxed the form element styles. If you would like to use the default form styles with subtle box shadows etc, you now have to place the “ui-form” class on a parent element.
Introducing “Aristo”, A jQuery UI Theme
For those that arn’t familiar with jQuery UI, it’s essentially a collection of jQuery plugins that try to do for user interaction what jQuery did for JavaScript. Like it’s parent library, jQuery UI does its very best to remain cross browser compliant. It is easy to implement. It is very easy to theme. Unfortunately it hasn’t seen quite the same uptake as jQuery, and I set out on this task to improve the biggest hurdle I experienced: its design.
Frankly, jQuery UI themes are goofy. The rounded corners are goofy. The colour schemes are goofy. At this point you probably think I’m being a bit unreasonable, but compare jQuery UI to what the competition is up to:
Ace and Aristo are the respective open source themes of SproutCore and Cappuccino, applied to their parent JavaScript libraries. You can see a great comparison of the two in this article by Allen Pike. Both UI libraries duplicate the functionality of jQuery UI slightly, but look simply amazing doing so. I had already started mocking and building my own jQuery UI theme when I re-discovered the Aristo PSD. I decided to abandon my work and port the “Aristo” theme for Cappuccino over to jQuery UI.
So here we have Aristo for jQuery UI. A proof-of-concept to illustrate how jQuery UI could progress if they get sacrifice some of their direction and get some nifty designers on board. Imagine the possibilities if jQuery UI got Cocoia or Sofa on board!
Licensed under Creative Commons Attribution-Share Alike 3.0 with permission from 280 North and Pinvoke.
