I decided to make a quick comparison between the Vancouver 2010 olympic official app, and the mobile website of the olympics. The app makes better use of the user location, asking for access to location data, and updating the schedule to user’s timezone for instance. In theory user location sniffing could be done on the mobile web site too, but this would obviously be less accurate. But I think it would get the timezone right. The schedule is just a joy to use in the app, making it easy to star your favorite events and keep track of your olympics timetable. There’s also additional content describing the event details and venue information in the app. I wonder why this is missing from the mobile site, as it could easily be added there too.

The app relies for much of it’s content coming straight from the mobile website, like live results, and latest news headlines. Some of the integration from website to app is not done very smoothly: You could use a back button to go back from a news article to headlines list. This is a feature that comes by default in the browser, and is easy to miss when converting content from web to an app. Live results page layout also seem to be a bit too big for iPhone screen, making the text very small and difficult to read.

Basic iPhone features, like the map, are very well integrated into the app. The mobile site and the app however lack the more bandwidth intensive content, like photos and videos. It’s something I’m actually missing, because I have a good carrier and a data plan The inclusion of quicktime video clips would definitely tilt the experience to the app’s favor, because video playing integration is so well done on the iPhone. This is something that I truly value in other well done iPhone apps, offering a quick and easy access to multimedia content.

The app also offers more quick user experience via the iPhone cache mechanisms. This is something that could be done on the mobile site too, by utilizing HTML5 browser cache in Mobile Safari. In fact, I did not find any real advantage to the app versus creating the same user experience in Mobile Safari.

If you’re considering or actively building Ajax/RIA applications, you should consider the Uncanny Valley of user interface design. When you build a “desktop in the web browser”-style application, you’re violating users’ unwritten expectations of how a web application should look and behave. This choice may have significant negative impact on learnability, pleasantness of use, and adoption.

This makes sense to me, when you think about it. Web applications can and should look personal, in order to allow us to create positive images about it. Desktop applications look clinical, and more or less the same, because they’re just tools. Web sites can be a lot more.

Perhaps this phenomenon is also the reason people stand for utterly horrid UI designs in some of the most popular websites in the internet. UI design does not matter in some cases, because people are willing to cut it some slack.

1. Use frameworks

This is probably the most important tip. There are very good frameworks for Web Development for language of your choice. There’s no reason to re-invent the wheel, when you can have production quality code for your commercial projects freely. Using frameworks saves you lots of energy, and helps to focus on the stuff that matters.

2. Use an Integrated Development Environment

I’m currently using Eclipse for PHP, Javascript and XHTML development.

3. Modularize (appropriately)

Yes, keep doing quality modular, object oriented code, and you’ll thank yourself later. The bigger the project, the more essential this is.

4. Debug front-end issues more effectively with browser tools

Tools of my choice are currently Firefox and Firebug for Javascript debugging. Very, very useful.

5. Code for re-usability

Good classes help. I’ve been currently studying Design Patterns, in order to gain better understanding of the best practises for class design.

6. Collaborate and track project status online

Email is probably my most used collaboration technique. I’m planning to launch a tool in the near future which grew from my own needs for project management, but will be utilized in my future projects for project tracking with my clients.

7. Automate code formatting and standardization

Good IDE helps in code formatting too. Standardization is something, that I’ve learned to appreciate. It helps you to gain better understanding of other people’s and your own code, if the code is formatted according to standards.

8. Invest time in requirements-gathering and planning phases

Lack of proper planning and specifying is the no.1 reason for bad projects IMO. I’m trying to make clear to myself, that I as a developer understand what is needed, what techniques will be used and what the result will look like. More importantly I’m trying to make sure client knows this too.

9. Use code that’s already written

As I said, using frameworks is essential, but sometimes those cannot be utilized in the project. Then it’s time to look for existing stuff, and see if there’s code that could be used with as a base for your customization.

10. Have less features

Less features and more focus means better product in less time.

“We’ve found the same thing with Google Maps. If you make the process faster, you get more use right away.” Speed also affects the learning curve, she said.

Let’s say you have created a WP plugin, that extends WP functionality with some special page (which I won’t go into here now). You use WP hooks to integrate the pages into normal WP template construction routine, and monitor request URI for GET variables. Now, suppose you also want to have a nice clean search engine friendly URL for your special page.

So, you are monitoring for page requests like this coming in:

http://www.yourwpsite.com/?special=somevariable

And you would like your user to be able to access the same functionality like this:

http://www.yourwpsite.com/special/somevariable

Let’s set up a rewrite of our own. In your WP top level folder is a .htaccess file and there’s a rewrite rule created by WP:

RewriteRule . index.php [L]

Change that to this:

RewriteRule !^special /index.php [L]
RewriteRule ^special(\/?)([^/.]*)/?$ /?special=$2 [C]


Let’s go through what is going on here. The first rule is saying:

“If user is not (!) requesting our special page, rewrite the request to index.php as normal and don’t process any more rewriterules ([L]).”

Now, the request for the special page doesn’t pass the first test, and goes on to the second rule, which says:

“If the requested page starts (^) with “special”, is possibly followed by “/” ((\/?)) and some query string that doesn’t include “/” (([^/.]*)) and possibly ends with “/” (/?$), rewrite URL to “/?special=querystring” AND continue executing rewrite rules ([C]).”

Now, it loops back to beginning to search for more rewrites, and finds the first rule, which now matches, and the request URL is rewritten to /index.php with all the GET parameters still intact for your plugin hooks to process.

That’s all for now.

So, what do they have to offer to a web developer like myself? Silverlight seems really promosing, and if they get the development tools right (and I’m sure they will, they seem to be really good at that), it will offer Flash some serious challenge. I must confess, I’ve taken few attempts to get into Flash, but without much success. I guess there’s nothing wrong with Flash, the tools just make it seem really laborious and time consuming thing to do anything useful.

I’m Linux/PHP guy, but there seems to be a whole lot exciting stuff going on in the MS world too.

Rant of the day follows. I’ve learned that some mobile browsers have a nasty habit of ignoring the CSS media declaration for handhelds, and use media type for “screen” (basically desktop/laptop computers) instead. This is just stupid. If the developer has chosen that the site he is developing is not suited to be presented in handhelds (with often have small screens) in same way as in desktop browsers, and chooses to include a separate stylesheet for smaller screens, still some browsers think they know better. This is the case at least on my Series60 3rd Edition Web Browser. Btw, S60 folks have cool website.

I have also used Prototype Javascript framework for creating it. It’s a brilliant piece of code that makes handling various browser quirks a breeze.

• PHP/SWF Charts Looks good, works fine, very customizable.
  
• amCharts Looks even better, with a TON of features.

Ofcourse because they’re being commercial products, you would have to make sure the licencing options for your commercial products, but they’re offering free versions to use. I actually expected to find some Javascript based things that were as advanced, but Flash seems to be suited for this type of work really good.

The old and good way to present data is of course in a table. I have been developing a script to automatically beautify a given table with colors and fonts, in order to make it more easy to access.  It has some added functionality like highlighting. Test version can be seen at work here.