javaranch forums go mobile

Want to know what went  on behind the scenes of JavaRanch’s mobile site creation?

Timeline

  • January 2009 – We started talking about how poorly the site renders on a BlackBerry
  • July 2009 – I got a BlackBerry for work.  And ugh.  The forums do look horrible.
  • August 2009 – Tried out BlackBerry emulator and explored the minimalistic approach possible to creating a mobile version (see next section.)  That didn’t work and I wasn’t prepared to spend a lot of time on it in the summer.
  • mid November 2009 – Start discussing design/UI.  Noted it took 4 minutes to edit a post via BlackBerry.  Very excessive.
  • late November 2009 – Restart development using approach #2.
  • December 2009 – Weekly deployments to production using “secret URL that only the moderators know” for beta testing.
  • January 3, 2010 – Mobile URL announced to public and added to e-mail notifications

Approach #1 – Mobile CSS

My original theory was that the easiest thing to do would be to just add a mobile stylesheet that would hide some columns.  It wouldn’t shrink the pages of course.  But as a first step: slow and readable beats slow and un-readable.  I quickly ran into some problems:

  1. The BlackBerry doesn’t like mobile stylesheets.  Bushido covers the options in a lot of detail.  Search for “Alright, alright. Gimme the code already!” for the ugly CSS imports.  The real problem is that you don’t have a mobile stylesheet with this technique.  You have a stylesheet that everyone uses called mobile and the main stylesheet which cancels out the main one.  Developing for this is crazy as you are compromising what stylesheets appear to do.  And it will break when RIM finally gets their act together.
  2. JForum uses a largely table based layout.  This doesn’t go well with CSS for hiding things.
  3. The table layout made changing anything incrementally very difficult.

Approach #2 – An actual mobile site

This approach is definitely more mobile friendly as the pages are designed to be mobile sized.  They are also written from scratch and get to use <div>s.  Basically what I did was take the real page, pick the most important parts and create div layouts for them.  Once I had one done, the rest followed easily.  There are a few limitations documented in the JavaRanch announcement site.  But overall, I’m happy with it.  It is certainly way better than what we had before.  And we will continue to tweak it.

Testing

I tested locally using the BlackBerry simulator and later with the Droid emulator. I also tested using my real BlackBerry after deploying to the test server.  The aggravation of using a real mobile device isn’t captured on the emulators!  It is possible to use testiphone.com as an emulator.  It is not completely accurate though.  In particular, it didn’t show the viewport problem.

<meta name=”viewport” content=”width = 320″ />

We also tested on a variety of real devices.  Many moderators tested on their personal handhelds and we got a good variety that way.

I’d like to thank a few people in particular.  Thank you to everyone who let me test on their device, especially

  1. Gregg Bolinger – for instant feedback in testing the viewport fix at 11pm on both the iPhone and the Droid.  (And more testing than anyone else.)
  2. A few coworkers (at my real job) – for the wide variety of devices I got to put my hands on.  The simulators really aren’t the same.  Five minutes on the real handheld at lunch really helped.
  3. Chuck from the NYC Spin for offering his tiny touch screen device (the smallest I’ve tested on) without my even asking!

Marketing

You know how sometimes marketing picks a ship date and it overrides “doneness” ?  Well, I really wanted to announce this on January 3rd – the one year anniversary of us being on Java based software.  There are some things that I wish were more resolved like why Google Mobilizer is injecting itself in links. Overall, I think it is in good shape and ready for people to try out though.

What do you think of the new site?  Share in the JavaRanch announcement thread or as a comment here!

how to test a local web application in droid simulator

In August, I blogged about how to use the blackberry simulator because information was so scarce.  I’m happy to say the Android emulator documentation is much better.

My goal

About a month ago, beta testers of  JavaRanch’s JForum implementation told me the iPhone and the Droid had a large blank column on the right side of the screen.  Hence needing an emulator to try to fix it.  (This all happened weeks ago – just didn’t get around to blogging about it.)

Note: I didn’t install the Android Eclipse plugin because I’m not doing BlackBerry development.  If you want the plugin, you can install the toolkit.

Steps to download the simulator

  1. Download the SDK for your platform from the Android download site.
  2. Run “SDK Setup” executable from the download
  3. Choose the required available packages for download.  (I wasn’t sure what I needed so I had downloaded all of them.  You definitely need Android 2.0.) .  This step took a long time to install since it downloaded at 55KB/sec – dialup speeds.  I let it run overnight to completion.  It probably took a few hours.

Steps to initially configure the simulator

  1. See what targets are available
    android-sdk-windows\tools>android list targets
    “Android 2.0” version 5 should be a choice. This is the Droid.  The target looks like:
  2. id: 1 or “android-5”
    Name: Android 2.0
    Type: Platform
    API level: 5
    Revision: 1
    Skins: HVGA (default), QVGA, WQVGA400, WQVGA432, WVGA800, WVGA854
    etc

  3. Create the AVD (Android Virtual Device)
    android-sdk-windows\tools>android create avd -n Droid -t 1

Launching and running

  1. Launch your local Tomcat (or other app server)
  2. Launch the emulator
    android-sdk-windows\tools>emulator -avd Droid
  3. wait a while – it says “Android…” then “ANDROID” in shiny letters
  4. Ignore error message that says “sorry application messaging is not responding”
  5. Test away.  Note that you must use your computer name rather than localhost.  (On windows this is the %COMPUTERNAME% property.)  Thanks to ASP forum for this tip.

Actually using the simulator

Some impressions of using the simulator:

  • It’s great and intuitive.
  • That’s it!  If you read my BlackBerry post, there were a pile of things to get used to.  The Droid just worked.

The goal

The trick is that the Droid and iPhone need to be told the width of the page or they assume it is larger.  It’s an odd effect, but easy to solve by adding the following tag to the header.

<meta name="viewport" content="width = 320" />

Web 2.0 Expo – Day 3

My tweet on the keynote screnn at Web 2.0 Expo

My tweet on the keynote screen at Web 2.0 Expo

Today, I attended the final day of Web 2.0 Expo.See day 1 and 2 comments. Many of the presentation files are available.

General comments:

  • I grabbed a picture of one of my tweets on the live tweet stream ( third tweet down on the graphic)
  • Heather Gold referenced the live tweet stream a couple times and even mentioned one real time.
  • The conference had a community manager responding problems. I think this was nice at an event about communities

Day 3 Keynotes

As always, the keynotes were fantastic. They were:

  1. Heather Gold on conversational mechanics and the Yiddish word tummel – It means noisemaker or conversation starter. That’s the person who makes sure everyone is involved and has a good time at the party. As does Twitter, a tummeler helps you cross between worlds – who’s here; who’s not; how do I keep them energized?  You say what you think to start a conversation and get people to react to you.  For more see Heather’s site on “unpresenting.”
  2. O’Reilly style interview with Beth Noveck – Hosted today by Tim O’Reilly. Beth is the Deputy (second in command) CTO for the federal government. On the first day of Obama’s administration he signed an executive order for the nation’s first CTO and CIO. He also launched a program for open government. The vision is more transparency. In practice this is more difficult.  We are not just talking blogs and wikis; we are making a shift. Open government gathers public feedback as they go: not at the end when finished and done. The first government meeting was promoted by word of mouth and 30 agencies showed up. Some answers to questions submitted in advance via twitter:
    • lobbyists should not be writing policy or be on Federal Advisor Committee
    • Web 2.0 style feedback will supplement the 2-3 year research paper
    • in Boston someone created an app in one hour for when the next T (train) is scheduled. New York tried to shut down a similar iPhone app before relenting. This culture needs to change to have truely open government
    • each agency needs an open government plan prioritizing releasing data with citizen engagement
    • experimentation should come first then push towards a standard best way
    • the government can create a data platform “innovation gallery” and share apps across states
    • a little town is running feedback in Web 2.0 way. If suggestion gets accepted, get points. Can redeem points for things like “mayor for a day” or “ride with police chief”

    More URLs for open government:

  3. Dennis Crowley introduced foursquare.  This six person startup created a mobile application that is a mix of a friend finder, city guide and game. As you go places, you “check in”.   The game gives you points, badges and you unlock things to try new things, meet new people and explore your city. It’s only available in a few cities but it’s a cute idea.   People get competitive and try to be “mayor” of their local coffeeshop by frequenting the most often. They should do an amazing race style thing in your city through this
  4. Kevin Marks covered buzzwords to show how words crystallize an idea. Examples include:
    • flow – everything is connected to everything else
    • faces – powerful way to contextualize
    • phatic – grooming – may care what you had for breakfast if very close to you Really?  I’m not sure I need to know that.
    • following – both agree to be friends (facebook model) vs just following parasocially (twitter model)
    • small world networks – not random or grid; best when grid like with a few distant connections so info moves quickly
  5. IBM discussed what a friend is worth – The idea is to unlock your network to find the right person to answer a question.  IBM says the value of an e-mail contact is $948.  Beware of statistics.  This doesn’t scale.  It also represents the cost of not having that communication channel.  They were scientific with a cited standard deviation of $26.  You have the most success when friends of friends are not in your network.
  6. Microsoft marketed Azure – Azure is their cloud computing platform.  They do support a SDK for Java and Eclipse extensions recognizing the non-Microsoft world exists.
  7. Gentry Underwood spoke about “Designing Web 2.0 – Here come the Antropologists” – Facebook is almost up to 400 million users – half of all active internet users yet is the equivalent of Windows 3.1 in interation design.   He showed the hillarious FaceBook in Reality video. Design ranges from low level (buttons) to the higher level sociology and anthropology (how people and cultures interact on the internet.)  As social technology grows, interactions change.  For example, flashmobs on twitter.  Gentry ended with explaining more interaction design is needed for multi-touch displays; in particular large ones.

Web 2.0 Open
I went to more sessions of Web 2.0 Open since I enjoyed them so much yesterday.  Interesting points and URLs from Web 2.0 Open:

Building your tribe

  • Revolutionary ideas come from trying risky new ideas.  As adults we are afraid to try things because we have gotten burned.  For example, we no longer put our hand on things that might hurt us.
  • Your twitter account is a channel of information.  We aren’t limited to the major TV channels anymore.
  • In person social networks tend to decrease over time as people move, etc.  Work to keep them active.
  • Facilitate the exchange of social capital – don’t be the guy who sits there without saying anything.
  • The ghosts in pac man each have a specific strategy.  There is a spot on the map where the ghosts can’t find you because it is outside their strategies. Not relevant, but interesting.

Increasing your web presence for free or cheap

  • Presence is interacting with people, reflects you as a company
  • In 1997, FastCompany wrote “A Brand Called You.”  Turns out they were right.
  • Have a permanent URL (best if not on wordpress/typepad domains so you control links forever)
  • Check search status on Google, Yahoo and Bing – come preloaded as default with different operating systems and software
  • Make it easy for people to verify who you are – cross link your twitter, blog, etc.
  • Use pictures – people trust pictures.
  • The sites to use are often country/region specific (Facebook in US, Orkut in Brazil, etc)
  • Nobody has a good cross-twitter/FaceBook/Linked In/etc dashboard.  The closest just covers FaceBook and Linked In.
  • Track your comments/mentions on blogs
  • Set up Google news alert on your company name
  • Set up RSS feed on twitter mentions of your company name
  • Set up cotweet for group tweeting
  • Look at gist for updates on specific business contents.
  • See speaker/moderator’s blog for more.
  • If you need to delete a site from Google’s index, see webmaster tools

The FTC’s new disclosure rules

  • Go into effect: December 1st, 2009
  • Summary as it affects me: Reveal if you got something or have a relationship with the review/endorsement.
  • Other implications: Testimonials and endorsements must be representative of the average rather than the long tail, two standard deviations away case.  This affects the “results not typical” ads.
  • No backward compliancy is needed because blog posts are dated.
  • The FTC usually gives warning via a “cease and desist” letter.  If you aren’t following the new law properly or interpret it wrong by accident, you’ll likely get a chance to fix it.
  • Thinks will see more characters/animals endorsing products so don’t have to give disclaimer that the actor hasn’t tried it.
  • A good example of a book review disclaimer.
  • disclosurepolicy.org – If you need a free generated disclosure policy for your blog
  • cmp.ly – If you need a short disclosure for twitter.
  • The speaker/moderator has an excellent blog post on the topic.  She also showed a nice graphic showing when the new rules apply to you.  If I can find it, I’ll add it as a comment.

And finally, Microsoft on HTML 5 support in IE 8 (and related comments)

  • Microsoft claims it was a “myth-busting” talk and started out explaining how they shouldn’t be held accountable for IE 6 anymore.  It was a cute analogy – browsers are like milk – they should expire and go well with cookies.  They also pointed out IE 6 came out in 2001 before Firefox was born.
  • IE 8 has both an IE 7 and IE 8 rendering engine.  They recommend testing with IE 6 through 8.
  • For legacy sites, they recommend putting IE 7 emulation in the source.  For new sites, they recommending putting IE 8 emulation.  That way when IE 9 comes out, you don’t have to worry about backward compatibility.
  • They didn’t say geolocation made it in.  Does that mean it isn’t there?
  • They said everything covered today is in Firefox and Safari too.  Didn’t verify, but I assume it is true.
  • They did say there are a lot of details to figure out on how it works.  aka future bugs
  • DOM store – Store data in local store (across browser restart) or session store.  Up to 10 MB per site and 100 MB total.  Like local caching without cookies.
  • Mutable DOM prototypes – See the link.  Microsoft explains it better than me.  They showed an example of adding a validInput property to all form fields.
  • getElementsByClassName was not implemented in IE 8, but is coming – it is in HTML 5.  It’s also in jQuery of course so I wasn’t holding my breath.
  • Data URL – Can inline images or binary data.  This looks useful as you can dynamically generate an image without having to store it in a file.
  • AJAX Navigation – What gmail has been doing for years – hitting the back button works, but now built into onHashChange().
  • XDM (Cross Domain Messaging) and XDR (Cross Domain Request) – Windows, frames and iframes can pass information even if from different sites.  Mentioned a security issue in Firefox and Safari – check before use. Seems useful for portlets so don’t have to go to server for every little thing.
  • IE 8 Developer Tools – IE now has developer tools similar to Firefox/Firebug.  Old news to Firefox users.
  • CSS 3 vertical text is implemented
  • Microsoft Expression compares two browsers side by side and can overlay pixels to see where differs.  It is not a browser; it is a web design tool.  Free for comparing two versions of IE.  Paid version to include Firefox.  Requires Silverlight
  • They didn’t mention ARIA support, but it’s my favorite feature in IE 8.

Note: I have not tried any of the URLs referenced in this post.  I am just blogging that I heard them mentioned at the conference and intend to try some.