jeremyarntz.comthe ramblings of a mad web developer

About a week ago my friend/coworker Daniel and I started discussing learning Java so that we could build Android apps. I threw the idea out on Twitter, figuring it’s tougher to quit when you’ve got a group of people to answer to the response was why not try Phone Gap. I had heard of Phone Gap, but I had never really checked it out. A few hours later I had the SDK installed and the “Hello World” script running in the Android Emulator.

Now what I needed is an easy project to cut my teeth on and figure out how to create/deploy Apps with Phone Gap. While driving to a meeting with the rest of the BlogathonATX crew it hit me that an app for BlogathonATX would be just the project I was looking for. I floated the idea and the team was psyched, but what next? I’ve never build or designed a mobile app before. Where do you start? Then I realized you start where every development project starts by figuring out what the thing is going to do ( Fancy term for this is “requirements gathering” ). Here is the list I came up with:

1. Show Tweets by @blogathonatx
2. Show Tweets using the Hashtag #blogathonatx
3. Show the latest posts from the “News” category on BlogathonATX.com
4. Show a schedule of upcoming BlogathonATX and Blounge events.
5. Show the schedule of a specific event. ( Suggested by our fearless leader Ilene. )
6. Show an ad from a sponsor ( Suggested by Blair and Haley our tireless PR and Sponsorship peeps. )

Now that I had a solid list of requirements I needed to figure out how I was going to arrange the content on the pages starting with the Home Screen. My goal was to create something clean, simple and easy to navigate. At the same time I was also messing around with jQuery Mobile which provides a pretty standard mobile app look and feel.

This is a screen shot of the original layout using jQuery Mobile:

While I thought it was cool that I was able to create something that looked very native I was also thinking “Why does it have to look so plain?”. After a bit of brain storming I came up with an idea that I sketched out ( horribly ) using my iPad:

With my sketch as a guide I started to create a mockup in HTML. I did some research on standard sizes for mobile app ads and picked the 320px x 50px banner as the ad size for the Home Screen.

The resulting HTML Mockup:

My next step is to finish the home page so all the links work. Then I’ll test it in the emulator and on Daniels Droid X.

Stay Tuned for Part 2!

– Jeremy

I provided some Word Press assistance to the ladies over at ThePRChannel.com as they were getting the site up and running. When they launched they asked me if I’d write a guest blog post and here is the result: “Simple Steps to Creating a Professional Blog“ It was a fun exercise since I don’t do much writing and would love to do more in the future. Hopefully they will have be back again soon.