Cloud-based jQuery Mobile, HTML5 Mobile Prototyping You Need To Try

This article was originally published on http://uxmovement.com/resources/innovative-features-in-tiggr-mobile-apps-builder/

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.

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.

Visual Theme Editor

Test the Mobile Prototype in Desktop or Mobile Browser

Testing your prototype is important. You can do this at any point during mobile prototyping. That’s really the magic in Tiggr. If we couldn’t test in a Web browser, we would end up with another static mockup. Clicking the Test button will launch the mobile prototype in the browser. What you see is exactly how the mobile app will look. Behind the scenes Tiggr generates all the HTML, JavaScript, and CSS. Open it in any browser and test it. This is a huge feature and what makes Tiggr different. This is how the Test window looks:

Test

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.

Add Events

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 Action

It’s important to point out that everything you create in the app is standard HTML, JavaScript, and CSS. You may be wondering: What if I need to do something custom? That’s not a problem. Tiggr comes with a “Run Custom JavaScript” action. In this action, you can write any custom JavaScript. These events and actions is a crucial feature. It allows you to develop realistic, interactive mobile screens on the fly.

Exporting the Prototype’s HTML/JavaScript/CSS

Not only can you easily build and test the prototype in a desktop or mobile browser, but Tiggr comes with a powerful export feature that allows you to export all the HTML/JavaScript/CSS of your prototype. When you export, you don’t just get a picture of what to build, forcing you to have to do everything from scratch when you have to develop the real app.

Export

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.

Summary

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.

Leave a Reply

Fill in your details below or click an icon to log in:

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