Last week I attended the Mobile March conference in the Twin Cities with a crew of my fellow web developers and engineers. Each of us had the opportunity to pick and choose from a number of sessions throughout the day based on four tracks of mobile strategy, business, development and gaming. My interests and expertise primarily fall within the development and gaming (games for fun, not profit) tracks so I mostly stuck to them. Although one of my passions is to work with HTML5 games and gaming engines like ImpactJS or Unity, I found the What’s New in jQuery Mobile 1.3 session by Brad Broulik the highlight of the conference for me in terms of learning something new.
First off, I’m fairly new to jQuery Mobile, only briefly trying out some of it’s earlier versions. Brad’s engaging presentation of the new features/widgets in jQuery Mobile 1.3 coupled with the very polished jQuery Mobile Demo Center has sparked my interest to pick up all those pet projects I’ve been meaning to finish and try giving them a go with jQuery Mobile.
The following is a brief summary of a few things I found new and interesting about jQuery Mobile 1.3.
Being Responsive and Responsible
I was happy to learn that the jQuery Mobile framework can be used to create responsive websites for the desktop, which is demonstrated very well within the demo center website. Also, jQuery Mobile appears to take progressive enhancement and a “mobile first” direction to heart by some of their recommended best practices, here’s a short list of some of my favorites:
- Always consider performance on various devices, do not attempt to scale down a desktop site to “fit” within a mobile screen. Keep in mind bandwidth, size of downloaded assets, etc.
- When working with CSS start with a base set of rules defining fonts, color and work in layout with varying media queries. Breakpoints should be based on content, not device sizes.
- Limit number of HTTP requests, minify and compress.
Although these practices are not new to web development in general, I recommend revisiting them from time to time. In just a handful of paragraphs, the Going Responsive section of the jQuery Mobile demo center does one of the best jobs describing these best practices in a clear and concise manner.
Applying a responsive grid to your layout is as easy as adding a class .ui-responsive to your grid container. This will apply a preset breakpoint to stack grid elements within a smaller screen on a mobile device. jQuery Mobile will also allow you to create a custom responsive grid in which you can adjust grid ratios.
The table reflow widget is a new addition that arranges your table data in a stacked or column layout based on screen width. I’ve used this method before outside of the framework so it’s nice to see it is now part of jQuery Mobile.
Lastly, there is other interesting functionality in jQuery Mobile that I got a glimpse of during Brad’s presentation such as source order priority, Google Maps and Twitter integration so I hope to research that a bit further. Luckily there is very good documentation and inspiration out on the web pertaining to jQuery Mobile.