A word on Widget style...

By Helmers. Tuesday, 9. May 2006, 09:07:38

Opera Widgets are small chromeless applications. Styling your widgets are very much up to you, the Web Developer. Still, there are a few basic rules that apply.

Widgets should be made with semantic markup

In short, that means a button should be a button in your HTML code, not a block element with javascript attatched. It just makes more sense this way. It also means your Widgets will be more portable, easier to maintain and have better accesibility.

Keep it simple!

Your widget should ideally do one thing, and do it well. Overloading your widgets with functionality makes them harder to use. Instead, split them up where you can! This will give you more and hopefully happier users.

Keep it on the back

If your Widget needs configuration, create a Configuration View, and place it there. Unskinned form controls do not belong on the Front View of Widgets, so avoid it wherever possible you can.

Light comes from above

All light on your widgets should come from above, in a 90° angle; and shine down on your widgets. This also applies to shadows, which should be below your widgets, not on the sides.

These are just some general guidelines, check out the Widget Documentation for more information.

Optimizing PNG Graphics for Device3D Canvas

Comments

Good post and much needed! Even if I already take into consideration the first two points explained.

The "light comes from above" thing is the important one IMHO

. That's because all designers can make very different interfaces.

Therefore, I'd say: post some more guidelines/suggestions and ideas in regards to the interface of a widget. Which colours shall we avoid/use? Font sizes? Font names/families? And a lot more.

By robodesign, # 9. May 2006, 11:50:45

Glad you found it useful, robo. I will try to answer your questions, firs the easy one.

[Q] Which fonts should I choose?
[A] Since we are limited to what allready is installed on a users computer, the Microsoft web fonts are common, with a fallback to a generic style. I typically use "font-family: arial,sans-serif".

[Q] What colors should I use?
[A] All of them! Seriously, Widgets are meant to be eye-catchy and fun. If you are using content from a site, or linking to it; use the colors from that site.

[Q] More guidelines please!
[A] We will see what we can do, for now ask your questions at the Opera Widgets forum.

By Helmers, # 9. May 2006, 12:04:30

sholdn't be added a link to this post on http://my.opera.com/community/dev/widgets/first/ "A note on widget style"?

BTW: great post, much needed

By Guille, # 11. May 2006, 21:55:27

What are the shadows parameters?, such as distance from the object, opacity level, color, blur size, etc.

By Guille, # 13. May 2006, 13:42:49

The general guideline is that light comes from above. The parameters we are using are: 66% opacity, black with a 10 px blur and 4px distance.

We will be back with more and better guidelines as we get closer to version 9 of Opera.

By Helmers, # 13. May 2006, 13:52:16

thanks a lot!, and just in time for the contest!

By Guille, # 13. May 2006, 23:50:47

nikii writes:

I ve tried but i'm having some problems with adding behavior to the flip button http://www.vacanzeallinclusive.it . I'll retry lets hope

By anonymous user, # 14. August 2006, 22:39:34

Hello

I would like to understand better widgets, could you suggest a guide in italian because my english is not perfect.

thank you

By rivierar, # 2. September 2006, 13:46:09

rivierar: Many of the widget tutorials at http://my.opera.com/community/dev/widgets/ are available in Italian.

By virtuelvis, # 2. October 2006, 16:00:08

Web Applications Blog