It’s easy to have a good-looking widget
On this blog, we’ve been steadily giving you advices about content and code, two of the main aspects of what makes a good widget in our opinion: content, because a widget is nothing without it ; and code, because that’s what UWA gets its flexibility and portability from.
It was all content and code, until now: the design part of the widget is when that got little love around here until now, but truly deserve it. Once you have coded your widget and it’s full of content goodness, the best way to set it apart from other widget that display the same content, is to display it in a more attractive way.
There are many ways to design a better, and we’re going to explore some of them in this post.
Re-use your knowledge
Keep in mind that thanks to UWA being based on well-known web-standards, you can apply your CSS, table and/or font magic on your widget just as easily as you would. From this standpoint, widgets are just smaller websites: you can make use of your usual tricks of the trade, and even CSS hacks if needed, to achieve the look you need.
One thing to remember, though, is that even if your content is displayed in smaller setting that on a good ol’ website, you still don’t know the width of the container. Not only can the Netvibes user set his page to display widgets in a given number of columns (up to 4 currently), or even resize columns independently , but thanks to the portability of UWA, you widget can find itself displayed through a number of widget platforms, through the browser or on the desktop.
In short: cater for all possible width, and set up your content to display harmoniously from 320 pixels wide to 1280 or more. Use percentages wisely! If you are stuck with fixed width, at least try to keep it centered, so that it looks good even in one column.
From there on, you can apply to your widget all the good advices you might have received from classic web-design books, using the technique you feel more comfortable with: align your form elements and general content so as not to present a mess to your users, KISS (don’t overwhelm with content), balance graphics and white-space in a legible way, etc.
Use the available tools
Users have expectations when browsing online, which are set by mostly habits formed from reading other websites. Consequently, while going with a disruptive look might be tempting in order to get more attention than the other displayed widgets, the end-result will most probably be that your widget will feel out-of-place, or even ugly in comparison to other, better-fitting widgets. Sticking to the rules might therefore be a sound idea.
One set of rules that are easy to follow, is UWA’s templates and controls, a set of CSS conventions and JavaScript object built from the ground up to help your content integrate seamlessly with the Netvibes look-and-feel. More generally, they offer a quick way to get a particular design idea in place, with way less work than if you had to build it all by yourself.
It’s also important to know that using controls, such as the TabView one, doesn’t implies that you are stuck with having to deal with them at all times. Remember that the widget’s content can be entirely built and re-built on demand through JavaScript, and thus you can set up various sections or customize colors, using JavaScript and the DOM. Conditional statements such as if..else or switch..case where created for a reason.
See how the ever-admirable Rugby World Cup 2007 widget makes use of tabs only when needed: on loading, it checks wether the hidden “mode” preference is set to “details”, and displays the content accordingly.
if (widget.getValue('mode') == 'details') {
RWC.buildTabs();
} else {
RWC.buildPodium();
}This means basically that only the podium is displayed on first load (no tabs).
The user can then click a “switcher” link, built dynamically using JavaScript and DOM methods & events:
// Switcher
var toggle = widget.createElement('p');
var a = widget.createElement('a');
toggle.className = 'toggle calendar';
a.setText(toggleText);
a.href = '#';
a.onclick = function() { return false; }
var setDetailsMode = function(event) {
widget.setValue('mode', 'details');
RWC.buildTabs();
}
toggle.onclick = setDetailsMode.bindAsEventListener(this);
toggle.appendChild(a);The buildTabs() method then erases the whole podium, and puts the tabs (and inline pager) in place - along with a bottom switcher link, so that the user can go from one mode to the other.
From there, thanks to the flexibility of JavaScript, anything is possible…
A subtle image can do a big impression
Placing your content harmoniously, using the existing templates: it’s all fine and dandy, but while these are necessary, it doesn’t make your widget stand out in the crowd. What will make it stand out is graphic design: adding color and/or images. But as explained before, this should be done in light touches, so as not to disrupt the general flow of the page.
Again, the RWC widget is a good example of this, with a non-disturbing crop of grass at the bottom, which helps the widget to go from “plain” to “playful”.
Another such example is the recent Euro2008 widget, which also servers as a great example of some of the ways you can make use of tabs and paging in a widget.
The user-contributed TripTouch widget also features a light strip of image at the top and 4 photos at the bottom, fine details which help to personalize the widget, and consequently let the user identifying it quicker in his page.
There are many other examples of great-looking widgets in Ecosystem. We’ll make regular posts on widget design and inspiration, so that as to give you fresh ideas and make your widgets look always better.
netvibes