I recently was working on making a webpage compatible with the portable devices specifically iPhone & iPad. And when I say compatible, there are only 2 things to keep in mind:

  1. The graphical elements should maintain the layout or gracefully adjusted to remove the horizontal scroll.
  2. The functionalities are preserved – this would include all the dynamic aspects like server side calls, animations, etc.

For the first requirement, we have a really great solution – “Twitter Bootstrap”. Just add it to any page and making it responsive becomes super easy. Of course, it does require the programmer to still have a sense of a front-end designer i.e. just putting the framework in place is not going help, it requires some effort still. I am going to refrain from going into details about the styling aspect in this post and talk about the issues I dealt in terms of functionality.

The second requirement is tricky and get really annoying at times. Some components required replacing, tweaking while somethings were not supported at all. Below, I’m going to mention all the challenges I faced:

  • Custom scrolling solution like jquery.slimScroll had some rendering/processing issues, though iScroll is a good replacement.
  • If you are using text controls than the virtual keyboard can create mayhem for your user experience, the primary reason is when the keyboard opens, the page automatically scrolls up but the original position fails to restore when the keyboard is closed.
  • Sounds & Videos – while on the desktop you can play these as and when required i.e. on page load, based on an event, the iOS web engine only allows the playing of these files as consequence of a user action ONLY. This can totally ruin your UX if you have a auto-playing media files.
  • If the user puts the browser in the background or is working with multiple tabs, then in pre-iOS 7 devices, the pages state will be lost i.e. when the user goes back to the page it’ll open up like you hit refresh. While the query string params in the URL are retained, the post params are lost. In iOS7, I guess there’s a better handling of this particular case where the page is kept in memory but maybe its only for a limited time.

One good thing is jQuery works nicely and the socket.io also is not blocked although Apple only wants to use APNS for their push notifications but then again when the browser is in the background, the page is dead and no processing is done.

How do we handle these cases where we dont want to create a Native App due to lack of time, resources, experience, etc? Well one solution can be PhoneGap, it allows you convert your existing web app into a iOS installable application. Please see that it doesnt cover all the cases mentioned above directly, you would still have to write some native code as an hybrid solution but it reduces a lot of pain. Also, you’ll have to go thru Apple Developer Program and App publishing guidelines to ensure the app is available at the AppStore. It sounds like more of a mess but its a one time investment, for a solution that works!

 

Advertisements