iOS Applications with HTML5 and CSS3{9}

iOS Applications with HTML5 and CSS3

Today, mobile application (app) development has become one of the most popular trends in software development as we emerge ourselves into an on the go, handheld device era. “A few short years ago, most mobile devices were, for want of a better word, ‘dumb’” (Charland & LeRoux, 2011). Now, mobile devices have advanced so much that it can take away much of a person’s daily usage of a desktop or laptop. “Mobile apps are currently evolving very rapidly but generally are targeted at a specific task, run on a mobile device, make heavy use of the data network, and have a simple delivery mechanism (i.e., Google Play Store or Apple Store)” (Tracy, 2012). Mobile applications can be used in a variety of operating systems such as the iOS, Android, Blackberry OS, Windows Phone, and much more. To develop a mobile application, a basic knowledge of one or more programming languages is needed. This blog will focus primarily on the development of iOS applications using HTML5 and CSS3. Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) are the core components in web development that have evolved tremendously over the past years. “Web design is becoming more sophisticated, with new browser techniques and design principles, including fluid grids, flexible images and media queries, making it possible to deliver a quality experience to users no matter how large (or small) their display” (Reyna 2012). The latest versions of the previously mention web development languages are HTML5 and CSS3. With the launch of HTML5 and CSS3, these two languages have opened a new form of computing: the ability to create iOS applications using HTML5 and CSS3 in native and web applications.

Native vs Web Applications

There were originally two mobile development approaches that can be made when creating iOS applications: native and web apps. Native applications are applications that are installed in the iPhone, has access to the hardware components (accelerometer, geolocation, camera, etc), and developed in Objective-C (a programming language). On the other hand, web applications are applications that have a user interface built under web-based technology, optimized for the iPhone, not installed on the phone, and not written in Objective-C. Below are advantages and disadvantages of using one approach over the other what has been defined by Jonathan Stark from his book called Building iPhone Apps with HTML, CSS, and JavaScript:



  • One click away access to millions of registered credit card owners.
  • Development environments such as Xcode, Interface Builder, and the Cocoa Touch framework.
  • Ability to access all the devices’ hardware features.


  • Must pay money to become an Apple developer.
  • Approval from Apple Inc. is required.
  • Application development only in Objective-C.
  • Can only develop on a Mac OS.
  • Bug fixes are not done in a timely manner.
  • Slow development cycles and testing cycle limitations from App Store.



  • Web developer’s own authoring tools can be used.
  • Use the current web design and development skills.
  • Not limited to using a Mac OS.
  • App can run on any device with a web browser.
  • Real-time bug fixes.
  • Fast development cycles.


  • Unable to access all the hardware features on the iPhone.
  • Have to make your own payment system.
  • Difficult to achieve sophisticated UI effects.

Web Apps with Native Device Features: The Hybrid

The advantages and disadvantages between the two choices are heavily weighted. Alternatively, there is a third option that developers can choose from. This option integrates the creation of a web application but uses a development tool that acts “as a bridge between web applications and mobile phones” (Stark, 2010). With this, the web application may use the iPhone’s hardware features through the development tools’ APIs. Some examples of these development tools are PhoneGap, RhoMobile, and Titanium Mobile. These development tools allow the developer to create applications using HTML, CSS, and JavaScript (JS), be able to install the applications to different phone operating systems, and use the tool’s JS APIs to access the devices’ hardware features. Below are the development tool advantages, disadvantages, and App Store considerations:


  • Development environments such as Xcode, Interface Builder, and the Cocoa Touch framework.
  • Web developer’s own authoring tools can be used.
  • Use the current web design and development skills.
  • Cross-platform support on apps as long as it is supported by the development tool.
  • Able to access most (if not all) hardware features on the iPhone.


  • Must pay money to become an Apple developer.
  • Can only develop on a Mac OS.
  • Approval from Apple Inc. is required if using App Store.

App Store Considerations:

  • Bug fix speeds will vary as it depends on the usage of the App Store.
  • Development cycles will vary as it depends on the usage of the App Store.
  • If using App Store, you will have access to their payment system.

General Chart Comparison

(Image taken from


In this blog, I will be focusing on PhoneGap as the development tool. “PhoneGap is an open source framework that provides developers with an environment where they can create apps in HTML, CSS, and JavaScript and still call native device features and sensors via a common JS API” (Charland & LeRoux, 2011). PhoneGap’s library to use native technology is called Apache Cordova. To get a more vivid idea of what PhoneGap is about, the core components within the PhoneGap are the same for an Android over an iPhone except there is a difference in the procedure to begin creating and building iOS apps. Instead, you would be using Mac OS, Xcode, and an iOS and be required to be registered as an Apple developer.

PhoneGap offers a variety of APIs:

  • Accelerometer
  • Camera
  • Capture
  • Compass
  • Connection
  • Contacts
  • Device
  • Events
  • File
  • Geolocation
  • Globalization
  • InAppBrowser
  • Media
  • Notification
  • Splashscreen
  • Storage

However, there are limitations to the devices’ features that are supported:

(Image taken from


An Example
As I do not have have the necessary development environment to create an application for iOS, I will be providing the expected outcome of running the test app.

(Image taken from

The above image is an image of the iPhone simulator using Xcode once you have created a new project.

When you open the files, the code for this is a mixture of HTML, CSS, and JS as shown below:

  • index.html
  • index.css
  • index.js
index.html code:

index.css code:

index.js code:

PhoneGap Build
PhoneGap now offers a new way to build applications using cloud computing through the Adobe Creative Cloud with a monthly membership fee on private apps. However, it is a free service for open source projects that are accessible in the GitHub repository. In addition, there is also “a monthly membership service that allows you to download and install Adobe’s Creative Suite 6 desktop apps, including Photoshop, Premiere, InDesign and Dreamweaver” (Finley, 2012). Developers can now use their cloud service to compile online with the latest SDK versions. Users are also able to access the links to the applications that are created without connecting to a computer as deploying to a device to test the application requires a USB connection. Additionally, using their service supports multiple platforms without the hassle of having different developers using different development environments as they all use one code base.

PhoneGap Applications
Below are examples of existing PhoneGap projects:

(Image taken from


Decision Making
With HTML and CSS continuing to evolve in the modern day world, what used to be a mere basic backbone of website creations can now be used to create mobile applications. We have three choices to build mobile apps: web, native, or both. Web apps are written using web-based technology and run through browsers while native apps are built using Objective-C and installed on the phone. Using a combination of creating a web app and integrating native features requires the usage of a development tool that acts as a bridge. PhoneGap is one of the most notable developer tools that can be used to create native-like applications. Whichever application option you choose will have its own advantages and disadvantages. The future of iOS apps being built using web technologies is shining brightly with the evolution of HTML5, CSS3, and cloud computing. There are expectations that “most of the interesting and dynamic content will continue to be housed on enterprise servers, with applications becoming more flexible” (Tracy, 2012).




Adobe PhoneGap Build. (n.d.). Retrieved from

Bowser, J. (2011, October 04). Interview by B Stewart. Phonegap basics: What it is and what it can do for mobile developers., Retrieved from

Charland, A., & LeRoux, B. (2011). Mobile application development: web vs. native. Communications of the ACM, 54(5), 49-53. doi: 10.1145/1941487.1941504

Finley, K. (2012, September 24). Adobe launches hosted phonegap build service for creating cross-platform mobile apps. TechCrunch. Retrieved from

HTML & CSS. (n.d.). Retrieved from

PhoneGap documentation. (n.d.). Retrieved from

Reyna, J. (2012). From flash to HTML5: The eLearning evolution. Training & Development, 39(5), 28-29. Retrieved from

Stark, J. (2010). Building iPhone apps with HTML, CSS, and JavaScript. (1st ed., p. 186). Sebastopol, CA: O’Reilly Media, Inc.

Tracy, K.W. (2012). Mobile application development experiences on Apple’s iOS and Android OS. Potentials, IEEE, 31(4), 30-34. doi: 10.1109/MPOT.2011.2182571