jquerymobile and having design constraints

I’ve been working on this idea/project called Eyes for the past year on and off. Maybe for the past 4 to 6 months I’ve been stymied by what I want the visual representation to look like, struggling with the options of an open HTML design canvas. I’m afraid the sheer potential of anything there left me struggling – there were too many ideas of what I could do for a visual presentation and interaction, and I wasn’t able to really narrow it down all that well.

I’ve been following SproutCore for a while, sort of thinking about that as an interesting mechanism, and then more recently I saw the announcements about the jQueryMobile framework setup. Having done some iPhone and iPad development, the common metaphors of list views, tableviews, etc. felt very familiar. jQueryMobile isn’t all that to be perfectly honest, but the basic design feel is reasonably close.

I made a branch on Eyes and started laying it out – and I’ve been going gangbusters since. Laying in the constraints of the framework has really made the choices much easier to work out. Not that I haven’t run down some dead ends and had to back out, but I feel like I have better sense of how the pages flow and work together.

And best of all, I have something that I’m comfortable will work on mobile devices, while not looking like crap on a larger view.

I’m still learning the various tidbits of the framework CSS stylings, and I’m already seeing some elements where I’m going to want to dig deeper. The only real struggle I’ve had is working with Ajax based forms submissions and debugging them when I bork it up. Doing so much javascript work and debugging is still pretty unfamiliar to me. I’m ending up with a lot of print(“..”) debugging on the back end, and alert(…) debugging in the javascript itself.

All in all, I’m very pleased with the effects and results of using jQueryMobile. I do rather wish I hadn’t left my jQuery book at work for the holiday weekend though – I’m certainly not a jQuery expect, and it would have come in very handy more than once already. Thank god for excellent online documentation.

2 thoughts on “jquerymobile and having design constraints

  1. A tips, use either Firefox & Firebug, or Chrome, and use console.log(“debugmessage”, domelement, array, string, integer) to get a nicer ouput.
    With Firebug or Chrome you can also check what you send with ajax and what you get in return.
    To start the dev-tools in Chrome you just hit ctrl+shift+i.

    Cheers!
    Peppe

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s