by Max Katz on 10/18/11 at 8:14 am
Ask anyone involved in making applications as a developer or a customer: Would you like to see how the app looks and behaves before we actually build it? The answer is an overwhelming yes. We humans are very visual. For us, to understand something better, we would rather look at a prototype than just read a description. That’s exactly why prototyping is hugely important today.
What is Tiggr?
Even though prototyping is crucial to any project, a real prototype is rarely fully developed. Why? There are a number of reasons. First, lack of the right tools. Second, most of the tools that do exist today just enable you to create a static mockup. And third, some believe it’s a waste of time, as the real app usually looks very different from the prototype, so why even bother with it. These are all valid concerns, but a new prototyping tool solves these problems. This prototyping tool is Tiggr Mobile Apps Builder.
Tiggr is cloud-based service for building mobile apps. It enables you to quickly and easily build real mobile Web and native apps, entirely in the cloud. Mobile prototyping and prototype testing is a major part in this cloud-based service.
Build the UI with jQuery Mobile Components
Tiggr uses cross-platform jQuery mobile components. This is what makes Tiggr different from other tools. You are prototyping with real components, not just abstract images or drawings. As you can see from the screenshot, the mobile palette on the left holds all the components, and you simply drag and drop them into the phone. Every component comes with many properties, which you can set in the Properties window on the right. Your project may contain any number of mobile screens (pages). It’s easy and super fast to build a mobile UI like this.
But there is more. We understand that how the app looks is very important. So, for those of you who like to be in control and like more flexibility, Tiggr comes with a visual theme editor. You can quickly and easily create your own theme and use it on screens. As you edit the theme, it instantly shows you a preview of how the UI will look.
Test the Mobile Prototype in Desktop or Mobile Browser
But there is more. Testing in a desktop browser is definitely great, but that’s not where the app will be running, right? You want to test it on a mobile device, or in a mobile browser. We’ve made it super easy to get the app on the mobile device and make the app public. You can do this by sending the app URL to the mobile device, scan a QR code (with a QR scanner app) or typing the URL in a mobile browser.
Let’s try an actual mobile prototype. Open this URL: http://gotiggr.com/preview/19011/ or scan the QR code below to open a sample mobile prototype:
Make the Prototype Real with HTML Events and Actions
HTML events and actions enable you to make the apps behave like real apps. You already know that you can open the prototype in a browser. This is already a huge step over a standard static mockup. Now you can also make the prototype real. You can make the prototype behave exactly like the real app. You can add standard HTML events and then attach actions to the events. For example, let’s say you want to open a pop-up when a button is clicked. You would add a click event to the button and then associate the “Open as Pop-Up” action with the event.
Let’s say you want to navigate between pages. You would add a click event to any element on the page and then add a “Navigate to Page” or “Navigate to Link” action. Need to do something when the screen loads for the first time? Simply add the load event. When you test the prototype, you are then going to get the real behavior of the app.
Add Real Content to the Prototype with REST Services
We have been talking about mobile prototypes so far, but you can take it one step further and build mobile apps using real content. In Tiggr, you can connect to any available REST API, and easily display the desired content in your app to make it look even more real. This is another feature that makes Tiggr different and powerful. Not only that, but Tiggr also allows you to generate a native app with PhoneGap library. You can learn more about it here.
Sharing and Collaboration
Everything I just described can be done in collaboration mode. Not only can you share the test app link, but also you can invite other people to work and collaborate on the prototype with you. The group can work on the prototype at the same time or at different times. Basically, you get the Google Docs model for mobile prototyping.
Sign Up for a Free Trial
Mobile prototyping is a crucial step in building mobile applications. We would all love to see and experience how a mobile app will look before we start developing. Tiggr Mobile App Builder makes this possible. Sign up today at http://gotiggr.com for a free 30-day trial and start building mobile prototypes that look and behave like real mobile apps.
Max Katz is a Senior Systems Engineer and Lead RIA Strategist at Exadel. Max is the community manager for Tiggr. Max writes about RIA technologies on his blog, and can be found on Twitter as @maxkatz. Max holds a Bachelor of Science in computer science from the University of California, Davis and MBA from Golden Gate University.