3

So my goal is to theme / create a new skin for an already existing application.

Basically I wanna toss away the old design and come up with a bunch of new possible designs - is jQuery a good approach for easily designing and presenting a bunch of new designs? what alternatives are there?

Good:

  • The themeroller seems to be exactly what I was looking for, adding a nice layout to a page without having to spend huge amount of time on it.
  • basically you can just swap through a number of already pre-made skins without creating your own from scratch

However a some disadvantages seems to be

Bad

  • the flicker which occurs when the heavy layout gets applied to the page. However I might be overlooking something.
  • The whole css and js seems rather big
  • I wonder whether the amount of time required to make everything jQuery conform is worth it long term or whether there is an easier approach

Slightly related to adv. and disadv. jquery

We are using jQuery 1.8.3 on firefox 3.6.2

Edited: it seems there is no smart and trivial solution to the flicker of unstyled content - but you can probably live with it when limiting the javascript used on a page and starting with a good styled beginning. The themeroller has the advantage that once integrated, it is easy to apply different looks to the application

Community
  • 1
  • 1
Toskan
  • 13,911
  • 14
  • 95
  • 185

2 Answers2

2

To address the bad:

Flash of unstyled content has many solutions. Frankly, I don't know why people get into a tizzy about it; it's a browser-based application. We used to watch each image as it loaded in a website, and that never 'broke' our ability to use the web. But anyhow, the real point is that there are ways around it; just google for "fixing FOUC" or "solutions for FOUC" or similar. You'll find techniques.

The CSS and JS are rather big. But you can build a custom JS that will only bring in the controls and widgets that you need. There are other built-in optimizations, though, such as the sprite of images for widgets. That's convenient.

What would be required to make everything "jQuery conform"? I don't understand this point. Anything you have that uses JS with no library will still work. I don't see a real advantage to refactoring functions to use jQuery; jQuery is meant for convenience (especially for DOM manipulation), and if you have pre-existing functions already written there's no convenience to be gained by changing them. There's no "compliance" needed for jQuery; either you start using it or not!

However, I honestly have no real love for jQuery UI. I'm using it for one project and it's been pretty useful because that project already had jQuery UI support baked in. If I was writing from scratch, I might be tempted to go a different direction; either creating my own skinning method or using a different framework. At the end of the day, the biggest things you can expect from jQuery UI are:

  • widgets that you can and will use in your application. Just using jQuery UI for skinning is probably overkill.

  • the ability for users to use the Themeroller tool. This saves them from manually creating a skin for any custom skinning method you might come up with. Ask yourself if it's valuable for your USERS to be able to use Themeroller. Having Themeroller as a convenience just for yourself might not be enough motivation.

Greg Pettit
  • 10,749
  • 5
  • 53
  • 72
  • i'm trying to sell the new look to a customer - try to explain him why the old look didn't flicker :-D Yes it's an existing application with some widgets and some javascript - mainly prototype. My idea was to get some better feel into the application by using some good looking jQuery widgets, effects and themes. (and to avoid spending hours trying to figure out whether the grey text suits well to the black of the header) – Toskan Nov 07 '11 at 16:13
  • @Toskan but this is a Q and A site - not a cat walk ... asking 2 Million (probably sightly less than that :-p) people "How can i improve the theme of my website?" is not going work .... – Manse Nov 07 '11 at 16:17
  • I'm not a huge fan of most of the themes that are pre-made in Themeroller, incidentally. If you want to avoid design work I'm not sure about jQuery UI... I ended up rolling my own even as the 'base' skin. If you're not comfortable rolling your own (deciding if the gray is right to go with that black) then you're stuck with one of their premade (mediocre in my opinion) themes. – Greg Pettit Nov 07 '11 at 17:15
  • @ManseUK thanks for your kindness. I slightly adapted the question so it's clearer for you :-D – Toskan Nov 07 '11 at 17:28
1

I would suggest the answer here is just like the answer on the question you linked to - its all down to personal choice - I use the jQuery UI Themes as, for me, its the easiest and quickest way to get a consistant looking site. Thats because I am a web developer - not a graphic designer - if I had the skills then I would probably not use the Themes provided by jQuery UI.

If your using a lot of the UI widgets its a load easier to use the already matched themes.

As for the themeroller - for me I have never implemented it on a site - ie allowing users to change the theme of the site. I can see its useful on the jQuery UI site - to have a look how the dialog or autocomplete or any other widget looks in a specific theme. But to use it in a business web based application (most of my work has been business based web applications not always external facing either) - not for me

Manse
  • 37,765
  • 10
  • 83
  • 108
  • I didn't know you can actually inplace edit the theme and see it reflect on the website. Must be some kind of firewall problem of the company I'm working with I guess. This sounds great - build a mock, let them figure out which grey to use and I'll implement the chosen colors / icons / buttons the old fashioned way. – Toskan Nov 07 '11 at 17:46