Saturday Night App: NewsFlow

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?

  • Marcus Christopher McFann

    Get support for website icons for the first pane, a visual indicator for feeds with new content, and maybe another for content that is read versus unread. Something else would be a resorting of the feeds based on the ones with the most unread, or maybe the most recent feed updates, so those are always at the top, which would be good for people like me that follow hundreds of feeds.

    You could also have a grouping option. I’d like to be able to create feed groups, like Hardware news, OS news, General mobile news, Developer news, Social feeds, etc. to make them more navigable.

    Your news app is the best I’ve seen so far, and I look forward to seeing it published.

  • http://everwas.com iankennedy

    I just discovered your site the other day and have been enjoying TwimGo alpha – looking good!

    One wishlist feature I’d like to see is a newsreader that was tied to my browser history and automatically mark read items I had already seen via some other route (mostly twitter these days).

    Many people are using Google Reader to scan their feeds so a quick and easy import of your OPML from Google Reader and simple Share & Save to Instapaper would be nice too.

    Keep up the good work!

  • Anon

    Dude can you please put this in the extras-devel repo so I can download and install it on my N900!

    Looks very very cool!

  • http://twitter.com/sagi1870 Roosevelt Davis

    This is extremely nice and hope they put this either in the Ovi Store or in the Repositories.

  • http://www.playbasket.it

    thanks for this interesting article. enjoyed