By jamesJonas on

The Android SDK was dropped on Monday, had this up by Tuesday. Drupal Rocks!

Background

FatAtlas.com, now in Beta, is designed to be a hyperlocal news atlas. It contains 2mm locations and serves as a multisite webfarm for a portfolio of city/country domain names (See http://fremont.us/ ).

FatAtlas.mobi

This is a very early stage proof on concept site, for a port into SmartPhones running on Webkit browsers. WebKit is the browser for Android, iPhone and Nokia phones (S60 has 36 devices/phones). This make this a potential platform for Drupal Mobile. What makes this possible is SmartPhones have increased in power, mobile browsers are incorporating many features we see in desktop browsers (css, javascript), emerging support for WebKit (think Safari) as a mobile browser platform. What this does not address is phone specific implementation, thus access to mapping and GPS functions was in questions. When Google via Android made a commitment to open these functions, it was time to test a Drupal implementation inside this platforms SDK mobile emulation (thus FatAtlas.mobi).

Concept

Port a high end Drupal site onto Android Mobile platform such that it renders inside the the Android Emulator located inside Google's Android SDK. Use a single code base to serve both a full website as well as the mobile site.

THE BIG NEWS: It worked

sort of

Lessons Learned

(1) The current mobile themes seem to assume a much more simplified WAP Mobile environment. Instead I took my existing theme (whitejazz) and created a new theme (mobilejazz). I then setup the modi_load.module and changed the name of the theme inside the module. An alternate approach would use settings.php to set the theme. Of course I had to change the theme to fit the screen.

(2) Under the new theme, mobilejazz, I then subtracted all my blocks, leaving only minimenus.

(3) Gmaps: I was able to get gmaps to render inside the emulator, but the loading time for the maps seem to result in a 50% probability of timing out the browser. Pulled it.

(4) JavaScript: I was able to load my tabs.js two teared, 20 spatial report block. This was later dropped to just thin out the load. I still need to thin out the JavaScript loads for unused code.

(5) CSS: I'm using the CSS aggregator, but the overall size still needs to be pruned.

(6) Content: The pages content is very long, especially when render on a 300px wide format. This means we may be looking at tools to split up this content dynamically.

Next Steps

(1) Add back a single spatial report block. For those of you interested there is some great work in this area under the geo.module.
(2) Include a search block (not simple as my searches are spatial)
(3) Thin out the Theme for mobile.
(4) AJAX remote calls. I need to break up the page into smaller chunks which are dynamically loaded, when for instance a tab is selected. Any help here would be great. Drop you ideas off in the Javascript Tools module area.
(5) Clean up the UI

TODOs for Module Creators

Get the SDK and test your pages on the emulator. I'm discovering many Drupal pages will need a bit of customization to fit onto smaller screen footprint. For some pages, there is nothing to be done (ex: admin), but most I found just need some adjustment (ex: login).

I look forward to seeing others showcase their Android sites. To see this sites inside the emulator go to the google site http://code.google.com/android and download the SDK. The emulator is hidden in the tools folder.

James
FatAtlas.com

⋅ Categories: Drupal 5.x

Comments

jamesJonas’s picture

jamesJonas commented

Now let's add the Apple iPhone into the mix.

Apple iPhone

iPhone, with its world wide hyper buzz introduction, that Steve and Apple seems so adept at creating, became my next virtual test platform. Would it not be great to test your Drupal mobile website on iPhone without having to buy a phone? Welcome to the world of Phone Emulators. I went hunting for some Apple iPhone emulators last night, actually expecting nothing, as Apple stated on Oct 17th that the SDK would be coming out in Feb 2008. I actually came across several alternatives (just Google). The one I used first was the simplest, as I did not have to download anything, unless you count the Safari Browser.

WebKit, Safari and the iPhone

The thread of commonality here is WebKit, an open source browser that is the basis for mobile browser in Android, iPhone, Nokia and a desktop browser by Apple called Safari. There may still be some issues as both Nokia and Apple tend to be closed systems, but thus far it seems as if WebKit may be a potential target platform for testing Drupal Mobile. This a website emulation, so additional software based emulators testing is needed and finally an Apple iPhone emulator running under their OS would be best. So to take a look at what your website might look like on the iPhone:

  1. Download, startup Safari (you will need Beta Version 3) here

  2. Go to iphonetester

  3. Insert your URLlike this 'http://yoursite.com'

Lessons Learned

To take a look at the standard nonmobile version of the page, just change the URL to http://FatAtlas.com + /node/...

  1. The iPhone emulator may introduce some instabilities into the Safari browser. I have had to restart Safari several times. Of course it may be just some memory conflicts in my aging windows testing machine. [AppName: safari.exe AppVer: 3.522.15.5 ModName: webkit.dll ModVer: 3.522.15.5 Offset: 00031133]

http://FatAtlas.mobi

  1. Adsense Mobile: I have just added Adsense mobile on this site. This is WAP 2.0 (XHTML). Good.

  2. TOC lays out correctly.

  3. Local Places: Use of collapsible blocks works out great. A good way to compress a lot of information in a little space. Still needs AJAX remote loading, which will speed up the site load on the phone.

http://FatAtlas.mobi/node/1000000271

  1. Image Test: This page has several images placed in-line. The widest image width forces a bottom scroll to appear on the phone emulation. This means we may wish to impose a image width constraint (simple) or impose a image remapping based on themes (hum, don't know how to do that yet).

http://fatatlas.mobi/node/1000000464

  1. Book Test: To help with the look and feel, we placed the Book TOC under a collapsible block (Javascript Tools). This looks great.

Overall

  1. The Apple interface seems a bit more polished, especially with the scrollbars accessible. For this version of Android, no scrollbars where available, so navigation was a major issue.

  2. Further testing using a local software base emulator will provide me with a more real world experience. Of course I could pop down to Palo Alto, on University, and plunk down my cash, but I like the idea of starting with the emulators.

Please feel free to post your experiences with these two emulators and others.

Next Steps

  1. I'm looking for a 60s Nokia Webkit emulator. I have used Nokia emulators before and they offer a great way of testing your site.

  2. I could use some help in changing the name of this Forum post. I'm now going beyond Android.

  3. I envision a small module, which provides a 'cellphone' icon in the upper left corner of your website. This icon would take you to the mobile version of the site. Use Case: User visits your standard site, with their cellphone, clicks on the phone icon and is switch to your mobile version. When in the Phone version, the icon is a 'small screen' which takes them back to the full version. Of course we could still scrap logs to figure this out. Google uses the word 'Android' in their log entry for the browser, so auto switching may be possible. Myself, I have to dance a careful caching stack, so it is not as simple.

  4. Still tons of UI work...
jamesJonas’s picture

jamesJonas commented

Nokia Emulator s60

Background

  • Monday: Android SDK - Google's gPhone without the phone
  • Tuesday: FatAtlas.mobi Launched - Alpha port of FatAtlas.com using Android emulator
  • Wednesday: iPhone emulator on the Web test
  • Thursday: Why not Nokia?

Nokia's s60 Symbian platform, using WebKit

Nokia Forum is here

Download is here

S60 Platform SDKs for Symbian OS, for Java

  • Attempted to Connect to the Web: Select connection error: Unrecognize 1 access point, another click gave me Winsock, one more click and I'm in.
  • Fastest loading of the three. Website came up, layout was good, although the font rendering is a bit off, javascript features tested out.
  • Screen platform is the smallest of the three.
  • Navigation not as smooth as the iPhone emulator.
  • Was not able to perform a log-in. Still need to investigate. (unable to perform operation -26000)
  • Tried to create content. (unable to perform operation -26000)
  • Adsense Mobile ads showed up correctly.

Overall

This SDK was most likely the most robust of the three, having gone through many years of development. That being said, I thought it still needed some finishing. The login errors may have to do with cookie control, but the fact is that it did not work out of the box. It does a decent job of rendering the site, but the footprint is smaller, so it may press for decreasing the screen width still further than what is necessary for iPhone and Android.

Emulators, Drupal and Next Steps

I think the strategy of focusing on WebKit platforms, with a short list of key smartphone emulators to test sites, may be a way forward for Drupal Mobile. Drupal, for the most part lives in the browser, so direct use of the API within the phone may be focused, at the first stage, on a set of 'should have' features, like: Geotagging content with GPX, capture of video/images, capturing of audio, iCal exchange, map integration. The 'must have' features are: (1) fit the screen, (2) incremental loading of long pages, (3) decreasing javascript/css/image footprints, (4) ajax remote call integration, (5) (smart)mobile theme (based on the smartphone rendering capabilities, not WAP 1.0).

 

James

FatAtlas.com