There can’t be a better way of spending your Saturday night other then crafting and knitting new apps for your mobile devices. This Saturday I was missing a nice news reader for my Nokia N900. I tried to follow the Forum Nokia workflow: Design, Develop, Distribute. Here’s what happened:

Design

Palette for news reader app

The first thing that I had to do was to get my app a decent color palette so that app would feel nice and consistent through out the views. I tend to use colourlovers.com to either create or browse good palettes. This time I decided to use nice blueish palette, The First Raindrop.

Now it was time to do the actual fun part and design the overall view of the apps user interface. As I tend to use Qt Web Runtime for development it’s pretty easy to do the UI drafts with simple static HTML page. These drafts can easily be extended to be used in the final app.

I really wanted to have horizontal panels this time around. Maybe to provide a book-like user interaction where you go to the next page to the right and back to the left. The following image shows the mockup of the UI.

User interface mockup for news reader app

As the mobile device display is quite small I thought that I’d show only one panel on one screen. If this would be created for a tablet like device then it could be wise to show e.g. all three or two panels at once on a display. I’ll have to test that when I get the first MeeGo tablet in my hands :)

Develop

Now that I had a draft UI HTML I started knitting the functionality with JavaScript to my new app which I would call NewsFlow. I used jQuery library to do all the heavy lifting like loading and parsing the RSS feeds.

As a small detail I used CSS animation for the panel switching so when user e.g. selects a feed from a feed list then view is switched to feed items page. With jQuery the CSS animations can be easily created with the animate method:

...
$(left).css("left", "0");
$(left).css("position", "fixed");
$(left).animate(
    // What CSS value(s) to animate
    {left:"-" + width + "px"},
    // Animation time in milliseconds
    1000,
    // Function to call when animation is finished
    function() {
		$(window).scrollTop();
		$(left).css("position", "relative");
	});
...

Then was the time to do the normal widget packaging and upload the app to the device. Here is what it turned out to be:

I have to say that I like it a lot as a simple news reader. This was again a good reminder on how fast the Qt WRT is to develop with. Now I just hope that Ovi Store would also start supporting Qt WRT apps soon so that the Distribute part would be easier.

What features you’d like to have in your news reader app?