jQuery Mobile is a web application framework designed primarily for making sites interact well on smartphones and tablets. However, many of the features are useful for interaction across all devices. This series is focusing on the page transition effects included with jQuery Mobile.
In Part I of this series, I introduced a basic two page site and then integrated jQuery Mobile to create a sliding transition between the two pages. The first step was to include all page elements in the transition. The next step, which is covered in this post, is to perform the transition with some static content; some specific elements not included in the transition effect.
On a recent project I was working on, the client had a web-site structure in mind where the user would navigate using a page swipe (on touch-based devices) and the pages would transition using a slide transition effect. It was pretty clear that jQuery Mobile already offered a lot of the functionality that we were trying to accomplish…both swipe handling (which isn’t discussed here) and sliding page transitions.
As usually happens when finding a “perfect” technology to fit into a project, the implementation details didn’t quite fall into line “perfectly”. The primary issue was that, while the page transitions should slide from page to page, depending on the context, not everything on each page should transition. For example, transitioning between some pages might require the background to slide with the transition while others might require that the background stay static. The solutions for these different sliding approaches weren’t always completely intuitive.
I’m going to describe each the different combinations of transitions that we needed to accommodate and then provide details on how to achieve each one. Part I will cover the initial base source, how to massage the code to accommodate jQuery Mobile, and how to do a slide transition between pages.
In late September Matt D. Smith posted a shot on Dribbble of a mobile interaction pattern that he was working on with the goal of improving mobile form usability.
Float Label Form Interaction – Matt D. Smith
In the shot he’s subtly animating placeholder values so that they change color and “float” above the content as text is entered into the respective field. As the text field loses focus, the label changes back to the default gray color. In “How the Float Label Pattern Started” Matt goes into more detail about the thought process behind the shot and links to critiques of it as well.
These days in mobile any new interaction design patterns are interesting, but this one is even more so to me because of how the open source community took hold of the concept and within a few days put together implementations for iOS and the web. These are linked to from Matt’s blog post and you see examples of their use in real world apps by following @floatlabel. It’s awesome to see this kind of collaboration and iteration in the open source design and development communities.
Check out the shot, Matt’s post, and if there’s not an implementation of the pattern for the platform you’re working on contribute your own and experiment with it to see if it makes sense for your mobile app.
Shared cross platform development is a concept that resonates very positively with all of us as programmers. It’s a nice outworking of the DRY principle, and seems like it would free engineers up to accomplish more. So why is it so rare that we do it?
I recently asked myself that question while planning a personal mobile project, and here’s what I came up with: (more…)
Ollie of Twitterific fame
Back in 2009 John Gruber wrote on DaringFireball.net that Twitter Clients Are a UI Design Playground and in that time it was definitely the case — there were new Twitter clients being released seemingly on a weekly basis, each with their own unique take on composing and viewing tweets. Take the time to read the post, it’s spot on and includes this great quote from Loren Brichter,
“One of the fantastic things about Twitter clients is how easy it is for users to jump from one to another. Just type in a username and password and off you go.”
Since then Twitter has changed their stance on third-party clients, turning this design playground into more of a country club in the name of control and consistency of the Twitter experience. There’s still some great third-party clients out there, but innovation has slowed as the barriers to entry have been raised and the risk in developing and maintaining a third-party client has increased.