In addition to using CSS3 Media Queries for mobile-optimized sites, I’ve recently begun a lot of experimentation with creating native mobile apps with HTML5/CSS3/JS. After looking at both Titanium and Phonegap, I chose to dive deeper into Phonegap. Both products are great, but their approaches (and capabilities) are very different. For me, the decision to use Phonegap was simply that I like the idea of actually “seeing” what I’m building, versus everything being generated by Javascript. For whatever reason, I just feel more comfortable like that. I will definitely experiment with Appcelerator at some point in the future, especially if I’m looking for deep reaching native access that Phonegap can’t currently achieve.

As for UI, I’m a big jQuery fan, so the choice of using jQuery Mobile is a natural — and it’s even more attractive because Adobe is one of the sponsors of the project.

I’ve got several ideas for additional blog posts surrounding my early learnings in this space (Android development, in particular) – especially due to the fact that the Phonegap and jQuery Mobile documentation is not very detailed, but I thought I’d start with one that had me completely perplexed — an application splash screen. The need for a splash screen started almost immediately. Even with the simplest of “Hello World” applications, once I got it onto my Android phone, I would notice a blank white screen for several seconds before the main “page” showed up. I tried modifying the HTML, CSS and JS of my pages – all to no avail.

It turns out, the white screen is the embedded browser starting up, and until it is loaded, nothing is going to be shown onscreen. Enter the need for a splash screen. After spending the better half of a day wandering the rabbit holes of the intertubes, it seemed that the solution was easy on iOS. Just add a Default.png file to the resource structure of your app and you are done. On Android… not so much. And yes, I did attempt that “simple solution” however, when attempting to compile the app, it would error out with “res/drawable-hdpi/Default.png:0: error: invalid symbol: ‘Default’“.

Back to Google, I finally discovered that splash screen support on Android was added in version 0.9.3. A single thread in a forum, seemed to solve the issue, but there was lots of confusion (as I would find) surrounding the implementation of the solution. The thread indicated that a line super.setIntegerProperty( “splashscreen”, R.drawable.splash ); needed to be added to DefaultActivity.java file in the onCreate method. A second argument to the loadURL method defines the length of time the splash screen should be displayed. The value is given in milliseconds: super.loadUrl(“file:///android/www/index.html”, 1000);

After upgrading to 0.9.3 the error changed to “res/drawable-hdpi/Default.png: Invalid file name: must contain only [a-z0-9_.]“, which really puzzled me until I realized that the file name started with a capital letter. Changing it to a lowercase “d”, brought the original error back. After some head scratching, I decided to change the file name to “splash” to match the line “R.drawable.splash” that I had added to the java file — and surprise, it worked!

The moral of the story?

• Make sure you’re testing using version 0.9.3 or later
• Add

  super.setIntegerProperty("splashscreen", R.drawable.splash);

  to DefaultActivity.java file in the onCreate method before the loadURL method

• Add a second argument to the loadURL method for the timing
• Be sure to use splash as your file name – which can be either a JPG or PNG file

If you are as big a geek as I am, then you probably find yourself consumed by gadget envy at least 2-3 times a year — usually around a certain “fruit” company’s announcements, or, as was the case last week, the annual Consumer Electronics Show (CES) in Las Vegas. This year’s CES could easily have been dubbed the “Android Electronics Show”, as Google’s operating system was literally everywhere. Almost every major, and minor, hardware manufacturer had some new piece of electronics sporting the Android OS. It’s no secret that I am very excited by the Android platform, and personally have 4 Android-powered phones, as well as 2 Samsung Galaxy Tabs and a Google TV around the house. So, all of the excitement of CES was even more exaggerated for me — to the point where Stephanie was quickly annoyed with my constant “ooooh, look at that!” proclamations at each live-streamed press conference.

I love my Galaxy Tab, but I am also eagerly awaiting some of the other new tablets. This is going to be a slugfest for sure. (more…)

I’ve read a number of articles about the best approach for delivering content to mobile devices using CSS3 Media Queries, including Ethan’s article at A List Apart. While the general consensus seems to be “be careful”, I decided to do some testing of my own. Of course this “be careful” attitude is because, done incorrectly, you can cause a mobile device to download much more than you think. Oh, and there’s also the problem of that pesky Internet Explorer thingy… The question that I wanted answered is simply “what does a mobile device download when encountering a page using media queries?”

First, I created a simple page that contains a few boxes (list elements styled with CSS). In addition to text, one of the boxes contains (more…)