Friday, September 10, 2010

jQuery Theme Switcher Reset Plugin

User Experience!  That's what bring 'um back.  Remember the first time you saw AJAX in action?  Maybe it was via your GMail or Hotmail account.  Whatever it was, you kept coming back to it.  Why?  Because it was cool; maybe because it was something that you've never seen before; or, maybe it was your fascination with 'How'd they do that?'  Bottom Line: User Experience!

Okay, I'll admit it - I'm not a designer!  I try, and I typically come up with some good solutions; however, it takes quite awhile.  Looking back at all the time I've spent making the UI look pretty, I could have added all that 'cool' functionality that the client wanted.

Finding patterns that are tried and trued, well known, relatively easy to implement, predicable, and reusable is a developers dream.  Unlike software development, I don't believe (well, I don't know...) that there a set of pervasive UI design patterns that all designers could pull out of their toolbox and share with other designers.  I'll spare you the details, but when a developer chats with another developer common design patterns are used to communicate the intent, architecture, design, and implementation of a software component - Singleton, Repository, Decorator, etc...

So, where am I going with this...?  User Experience!

Back to the 'cool' factor of AJAX, what else might bring back a user?  What's that?  A nice decision?  Easy to use interface?  Maybe, a UI customization feature where the user can select the way the UI is styled?  That's where I'm going with this...

Windows has (as far back as Windows 95 - probably farther) a function for a user to select various themes and background to change their Windows experience.  iGoogle, Windows Live, and Yahoo all have theming support.  Visual Studio even has theme support.

jQuery UI ThemeRoller is nothing new.  ThemeRoller gives you the ability to create common component themes, download the themes, and easily integrate the themes with you application/Web site.  Again, this is nothing new.  There is also a pluging for Firefox.  A sister jQuery project is the Theme Switcher widget.  The ThemeSwitcher widget gives the developer the opportunity to integrate theme switching functionality into their Web site to enhance the Use Experience - there's that phrase again...  The Theme Switcher is not as well known as the ThemeRoller, but it's nothing new either.

What the Theme Switcher lacks is a way to integrated a custom theme that you designed and downloaded from the ThemeRoller tool.  I've created a simple jQuery Theme Switcher proxy plugin that will integrate the Theme Switcher and all the outstanding jQuery UI themes with your default theme.

Rather than bore you with the implementation details, you can view a demonstration here: Theme Switcher Reset Proxy  Here's a screenshot:

You can download the code via View Source.
Thanks for reading...

3 comments:

Jason Robertson said...

Where is View Source the page is so pretty I can't see the wood for the trees

Jason Robertson said...

Ok View Source via the browser I presume

tdryan said...

Sorry Jason. I just saw your comment. It appears that you already figured it out...