the next big thoughts blog
February 16, 2009

Android: Spin the Bottle!

Install on G1: Install on phone via Android Market. Spin the Bottle is listed in the Entertainment section.

Install on SDK emulator: Download the apk package and install it to the emulator with a command: “adb install SpinBottle.apk”

Our Spin the Bottle iPhone concept webapp has now been ported to Android and is available in the Android Market for free as a native Android application. You can install it to your G1 via the Android Market. Go get it and have fun.

10000 downloads in 44 hours

To my amazement, this tiny and somewhat useless app got downloaded 10000 times in just under 2 days. I think the figure is promising considering there really aren’t Android phones much anywhere. The market slice of Android is close to nothing. Currently Android is only sold at US and UK and we don’t know the exact sales numbers of phones.

If download numbers are now in the tens of thousands when there is just a single Android phone available, what happens to the numbers when Android phones start entering the market in force? As a
developer it surely is exciting to see the download numbers go up.

Porting

Porting Spin the Bottle from iPhone to Android was a fun exercise. Porting didn’t took too much effort since I’ve been following Android development and know the Android framework well. I think the
framework has all the big construction blocks in place and is a very promising modern application platform. The framework has innovations to make developer’s life easier.

Actually, codewise, we are not talking about a port from iPhone to Android. Since the iPhone was a webapp coded with XHTML/CSS/Javascript and running inside a browser, there doesn’t exist a direct landing path to Android native framework with Java and a new UI API. So the code portion was rewritten.

Graphics-wise the app is a port. The same .PNG image files are deployed in both iPhone and Android versions. The overall look and feel is also similar.

And yes, I did try to run the iPhone webapp directly in the Android web browser. Unfortunately the Android browser doesn’t yet quite match the iPhone browser which has advanced CSS animations. But you can bet Android browser will improve. (Rumors say Chrome is on the way to Android.) CSS animations are also in a standardization track and will appear in all modern browsers soon.

Android Goodies

Here’s a couple of tech goodies about Android that are in use in Spin the Bottle.

Embedded browser. An embedded web browser is an essential component in today’s applications not just because most of the data exists on the web but also because web allows you to easily present local rich text and media with a little bit of XHTML and CSS. The about screen in Spin the Bottle displays an embedded webkit browser in use. Constructing the about screen is much easier in XHTML than with native widgets. When the close button of the page is pressed, the event is communicated back to the native application via Javascript-Java-bridge.

Activities. Android tries not to be a monolith platform but an ecosystem of applications where applications can work together by offering services to each other via activities. Think of activity as an entry point to an application, like an URL to a site. An application can mix and match services of other applications by calling their activities instead of implementing all the functionality by itself. Spin the Bottle calls system “email send” activity when the “Email a friend” button is pressed.

Resource handling. Resource handling in Android is quite robust. Resources are external files like images, XML or HTML that are processed and packaged inside the app for easy consumption by the
app. The PNG bottle image files with alpha masks can be loaded with a single line of code.

Animations. Android has a good 2D animation framework. You can conveniently declare animations in XML files and attach them to any view and widget in your screen. Currently there are 4 types of animation available: alpha, transition, rotation and scale. Spin the Bottle uses transition animation when it slides the about box up from the bottom of the screen.

Landscape. The Android framework knows the properties and the present status of the device and can offer this info directly to your app without extra code. For example, Spin the Bottle defines two fluid layouts in XML, one for portrait and one for landscape mode. When the orientation changes, I don’t need to do anything in code, the Android framework just picks up the right XML based on the new orientation. Nice.

PS. The current download number stands at around 19000, one week after the launch. Users have rated the app with 3.77 out of 5. Thanks.

Tomi

Once again it’s a start of a new year - a time of reflection on the past year, and of course a time to look forward to the year that just started. I hope that you’ll enjoy these insights and perhaps even have similar thoughts about last year. So let’s first travel back in time to 2008.

Web design trends and highlights from 2008

Personally, one trend, that I find really positive, rises above the others: Web 2.0 is finally fading away. The shiny buttons and reflections have been there a little too long. In return, we get some really nice stuff. I believe that user centric design was taken more seriously than ever before (this is something I have repeated for couple of years now). However, more and more people are designing for the subject and audience – if minimal is the thing, let it be minimalistic. On the other hand, it was a year for Flash. Rich Flash-based elements in web pages hit us big time – there was no escape. Another landmark was the use of really pretty tailored fonts and typography. They were used within all sorts of design elements now to create a range of effects. And I have to say that this is one of my personal favourites.

We’ll remember year 2008 as a time when grunge and hand-made elements were big things for developers and we all have witnessed the consequences. In the sense of layout and positioning, there is one element that comes to my mind: featured articles. The great content we witness in many blogs influence in design elements and this is probably the most important thing in 2008.

Mobile domain trends 2008

Well, do I have to say more than this: it has six letters in the title and it starts with an “i”. It was mid-2008 when they launched the 3G version and after that it has been a parade. The boost that Apple was able to create in mobile design was something extraordinary and unique. Everyone in the business started to have project bits to design something cool for the chosen one. And yes, people answered that call. We have seen some real cool stuff designed for iPhone (my personal favourite being BBC’s iPlayer). And once again, it wasn’t just the device. What they did was practically rescue the mobile web and create a whole ecosystem around the product: the App Store. It’s so pretty and what’s the best, it’s good business too.

There was another shining star last year as well. We got finally an Android phone out. The T-Mobile G1 got a contradictory reception. No, it wasn’t the iPhone, but it was a great start and the Android platform is something that you should take seriously. I’m sure that we will witness some really nice stuff in the near future. The two highlights mentioned here were not the only nice pieces of design; they changed the paradigm dramatically and we found some of our old friends digging themselves even deeper into their fox-holes.

So, what has changed for good? The focus in mobile design is shifting heavily from HW to SW design. This creates a totally new paradigm in terms of both design and business: the big handset manufacturers can not control the whole value chain any more. It’s only matter of time when the big consumer brands really start to create and roll out their own UIs for commodity touch devices.

What is coming in 2009?

Seeing the future is always the tricky part, even though I have some advantages compared to my friends around the web who contributed their own visions little earlier. Let’s start with the web:

Web Design Trends 2009

Will this be a corporate year? The economic downturn could slower this trend a little, but I still believe that we will see some very nice moves in the field. The massive CMS dinosaurs are in the end of their life cycles and my hunch is that these are replaced with lighter web applications like WordPress and Drupal.

The other phenomenon is the use of social media in the corporate domain. We will see a huge effort in the field and I believe that someone will lead by showing how the thing called social media is harnessed to make money but also to please end-users.

In UI design, the trend getting even “lighter” than before. We already witnessed a font parade last year but this year, I believe, will emphasize this trend even more. Yes, the devil lies in the details and we will witness great layout make-ups, beautiful fonts, icons and little details that finalize the icing on the cake. So we’re back to basics which is so nice! In the other hand, the contrasts in colour use will make a difference this year.

Last but not least, two issues which are common to web and mobile design even they are manifested differently. As we all know, movies and UI design have similarities and this is the year we will be witnessing some breakthroughs. The UI project leaders are facing same kind of challenges and they use similar methods (of course, on a different scale). We will see more and more 3D effects, camera runs, storytelling, scripting for overlapping layers, scenery artists and so many other things that much better known in Hollywood. And yes, the movement will land to the UI level. I’m not speaking about just some shiny eye candy stuff, where avatars are flying around the scene. Based on the knowledge of how users behave and what they need, people will design products that are easy and intuitive to use. If transitions are designed and used well, they can significantly help users achieve their goals while at the same time making the whole process more fun and engaging – creating a clear brand advantage and perception about easiness of use. Products combine high usability, desirability, and state of the art design. Such products connect with the user on emotional and behavioural levels and thus are not overlooked.

Trends in Mobile Design 2009

Thanks to Apple and Google, the world has changed. As mentioned above, 3D, motion graphics and transitions are coming big time. But this year we will witness some really sweet stuff. These will not be showstoppers like the iPhone, but as a volume based solutions they will affect the whole domain. This years’ next big thing will be a major Android phone launch. T-Mobile G1 was a good start, but there is a lot more to come. I am also waiting some sweet moves from LG and global operators. Another big hit for 2009 will be a next step in mobile browsing; the promise about fluid designs is realistic and finally here.

So would this year be like this? Remains to be seen. What ever happens, I hope that we are going to witness great designs which are targeted to their audiences and make people go : “Wow – is this for real?”

I’m counting on you guys!

Jesse
Design Director

People get interrupted ever more often, thanks to new communication modes and the usage patterns building on them. Person asking something via email or SMS can typically expect somewhat rapid response from the recipient.

In this blog entry, Santtu Toivonen discusses the fragmentation of present day life and whether it could be facilitated with computer applications.

Share your opinions and read the full blog entry in Tietoviikko (in Finnish).