Over the past month or so, I’ve been working on developing a series of iPhone web-apps for work. When I was asked to write these web-apps, my first thought was to write in PHP for the template flexibility. However, since our campus uses all Microsoft products, our web servers are IIS and our SQL servers are Microsoft SQL 2005. This forces us developers to stick with Asp.NET, even if the situation doesn’t call for it.

Existing Frameworks

Now because Asp isn’t really designed for templating, I was looking into existing CSS/Javascript frameworks that allowed me to build the content of the page via basic data and have the design build itself in the browser. The first and only strong framework was the iUI class by John Hewitt.

Now even though it seemed pretty straight forward, I spent an entire week tweaking it so that one page I had displays correctly. The code was designed for tables of data, not pages of content. Even after this week, the only way I could see it work was on an iPhone. Even a webkit based browser (like Chrome or Safari) looked terrible because of the size. So it occurred to me that I had been taking it the wrong way.

MIT’s mobile department had a conference at NERCOMP where they mentioned that people preferred to use their mobile apps instead of the normal ones even on their desktops. So, taking this to heart, I decided to start from scratch and develop a site that will be usable in any modern browser and doesn’t require any trickery to get working for future sites (meaning writing my own).

Javascript

Now most iPhone apps these days have AJAX-like qualities. So the first thing on my list was to find a simple javascript Ajax library that worked in the iPhone browser and modern ones. I’ve used Sarissa in the past, but I was never too happy with it. After some searching, I came across the Prototype framework – it had the perfect function: Ajax replace HTML content.

With this procedure, I could asynchronously replace the contents of any HTML entity with the results of a GET or a POST. It can even handle redirecting errors. With this and some basic Javascript knowledge, I wrote a few functions that allowed me to safely navigate and dynamically load the content I desired. Now, by checking for GET variables, I was also able to return just the minimal HTML I needed to fill in the content. This works well, but reduces the usefulness of ASP.net – hopefully an alternative solution will present itself in the future.

Cascading Style Sheets

The second step of this redesign required a custom CSS build that was respectable on an iPhone, Firefox, Internet Explorer, Opera, Chrome and Safari – the major browsers. I tried to keep some of the basic elements of iUI in the new CSS – like min-height, webkit button borders, etc. But I also mixed a custom navigation bar, static width, and floating list groups.

Final Result

Main Page

Help Page

Conclusion

In the end, it took me only ~10 hours of work to build a custom template solution that can be easily adapted to any other web-app my company needs to make. So instead of getting frustrated with modifying existing frameworks, it can sometimes be easier and more rewarding to write your own.