Basics of making an iPad HTML5 App

By  |  0 Comments

According to Business Insider, the task of developing a mobile app through HTML5 can be daunting, not to mention the technical knowledge and the amount of jargon associated with it. But, with the right motivation to learn this complicated task, you’ll be able to come up with a successful application. If you want to develop your own iPad tool, this guide comes in handy in dealing with HTML 5, CSS, and JavaScript.

Screen Navigation

Image Credit Link

Screen navigation includes the ability to touch, to scroll, and to swipe through the iPad. There is no point in utilizing the swipe and drag functions in the default web mode of the iPad, since the point and drag functions are used for scrolling and panning. You can add event listeners to sidestep default touch events and create your own. This is a technique mastered by the CaringHands app, one of the 10 winners of the Verizon Wireless Innovative App Challenge that we read from verizon wireless.

The first step is to remove the default functionality of the point and drag function. With the use of jQuery, you can easily bind the tapping, swiping, and custom scrolling. To make this easier, you can invoke the .click() on the links to bind swipes and jump to the next post. These links are often found on WordPress and HTML Newsletter templates.

Prepare your tools

Before the rigorous steps, it’s important to gather all the right devices and tools. In terms of device hardware, you need an Intel-based Mac laptop, preferably the ones that run on Mac OS X Lion or later versions. Along with your iPad, you need to have an excellent code editor for HTML 5. Here are two of our most recommended facilities:


The PhoneGap is a framework which was acquired by Adobe years ago. This facility serves as the secret ingredient that allows HTML developers to create iOS apps. Instead of using device-specific languages such as Objective-C, PhoneGap builds tools with the help of CSS3, JavaScript, and HTML 5. Using this tool will produce hybrid apps, as their layout renderings are done through web views, instead of the native user interface of iOS.


The Xcode is the solution for most integrated development environments (IDE) that runs on Apple devices. We recommend that you install the Command Line Tools.

Orientation Change for your iPad

Depending on the device orientation, there are two ways in which you can change the layout of your app: binding the orientation Change-event and checking the resolution in CSS. To simplify things, perhaps the easiest method of doing this is to check the viewport size using a media query in the CSS. Depending on the width of the browser window, this would likely work with the tablet to get a suitable layout for your tool. However, this method is only limited to your tablet’s current display technology. This won’t work with new technologies, as they will sport a higher pixel density which will confuse your app’s style sheets. To set the content width, the ideal cutoff resolution for the iPad would have to be 980 pixels.

Use Custom Icon on Homescreen

To open a website as an app on the home screen, you need to choose the icon from the Safari status bar in order for a specific link pointing out the icon to be located on the header. With specific sizes for multiple devices, iPad icons are usually at 72×72 PX. Take note that the HTML header starts to get inflated as they are only capable of 57×57 PX. If this happens, the iPad will automatically add rounded corners at the end of the file name to cater the entire name.

About the Author

Lily Sommers is a writer and regular contributor, an up-and-coming tech blog. When not engrossed in the latest tech news from industry leaders like Verizon Wireless and Samsung, Lily can be found writing about phones, games and designs.
Get in touch with her on Twitter (@LilySommers).


Leave a Reply

Your email address will not be published. Required fields are marked *