---
title: "Headlines, now on S40"
description: "MY Headlines and SG Headlines went up for Series 40 today. Some notes on how the app has changed since 2010."
url: "https://rayson.me/writing/headlines-my-sg-uk/"
category: "Projects"
author: "Janarayson"
published: 2012-04-27
---

MY Headlines and SG Headlines went into the store for Series 40 today, the non-touch Nokias that so many people here still carry around. Headlines has been with us since 2010 ... it's probably the simplest thing we make, and we keep coming back to it every time Nokia gives us a new screen.

## Same app, three countries

The whole app is a list of newspapers. Tap one, you get today's headlines, tap a story and you can read a bit more, open it on the website or share it, and that's all it does.

We built it once for Malaysia and then did Singapore and the UK on the same code. Each country gets its own colour, a landmark on the splash screen and its own list of papers ... red with the Twin Towers for MY, orange with the Merlion for SG, blue with Tower Bridge for UK. Once the template was there, a new country was mostly a matter of hunting down the feeds.

<Screens
  screens={[
    { src: splashMy, alt: 'MY Headlines splash screen: the Petronas Twin Towers tinted red behind the words MY Headlines, bringing you daily news' },
    { src: splashSg, alt: 'SG Headlines splash screen: the Merlion and the Singapore skyline tinted orange behind the words SG Headlines' },
    { src: splashUk, alt: 'UK Headlines splash screen: Tower Bridge tinted blue behind the words UK Headlines' },
  ]}
  caption="MY, SG and UK Headlines splash screens, August 2011."
/>

## The feeds

Every paper in the app is an RSS feed. Most of them we point at directly, but four of the Malaysian ones go through Yahoo Pipes first, and the app reads the pipe instead of the paper's own feed. The Business Times one is a pipe wrapped around their own feed URL.

## 2010, then 2011

The first version went out in 2010 on Symbian and Android. Glossy icons, a home button and a power button along the bottom, very much how Nokia apps looked at the time.

Last August we redid it properly for the N9. Bigger, rounder paper logos with a one-liner under each name, the date and time sitting on the coloured bar so you know how fresh the headlines are, and a refresh button. We also put in an ad slot after every five stories, since it's a free app.

<BeforeAfter
  before={{ src: listMy2010, alt: 'MY Headlines in 2010: a list of Malaysian newspaper logos on dark grey, with glossy back, home, help and power buttons at the bottom' }}
  after={{ src: listMy2011, alt: 'MY Headlines in 2011: larger rounded newspaper logos with taglines, a red MY Headlines bar with the date and time, and back, refresh and help buttons' }}
  caption="MY Headlines in 2010 and August 2011."
/>

<Screens
  screens={[
    { src: storiesMy, alt: 'A story list from The Star in MY Headlines, with headlines, dates, a short summary and an advertising slot between stories' },
    { src: shareMy, alt: 'The options sheet over a story: view on website, share on Facebook, share on Twitter, share via email' },
  ]}
  caption="Story list and share options, August 2011."
/>

## Windows Phone

In December it went to Windows Phone. Same red, same papers, but the list turned into big square tiles of the paper logos under a "news" panorama heading, with the Twin Towers faint behind them.

<Figure
  src={wp7My}
  alt="MY Headlines on Windows Phone: the title MY Headlines, the panorama heading news, and large square tiles of newspaper logos over a dark red background"
  caption="MY Headlines on Windows Phone, December 2011."
/>

## Series 40

S40 phones are the cheap ones, small screen, no touch on most of them, but there are a lot of them out there. There are actually two S40 versions of Headlines, one in Java and one as a Series 40 web app. The web app one is HTML, CSS and jQuery packed into a widget file.

We wrapped Nokia's widget calls so that when they're not there, the app falls back to the browser's local storage, and added the old Firefox trick for loading feeds from another domain. So the same code runs in a desktop browser too, which is handy for testing.

<Screens
  screens={[
    { src: s40MyPapers, alt: 'MY Headlines on Series 40: a red MY Headlines bar with a refresh button over a grid of six newspaper logos' },
    { src: s40MyStory, alt: 'MY Headlines on Series 40: a story list from The Star with headlines, dates and the first lines of each summary' },
  ]}
  caption="MY Headlines on Series 40."
/>

The screen is tiny, so the design is cut right down to the coloured bar on top, a grid of paper logos, and the story with just the headline, the date and a few lines. There's no splash screen on this one.